Create a clickable quote for sharing to the social networks
The Click to Share Block in the Block Editor
Finding the Block
Use a / Command and look for Click to Share.
Alternatively, use the "+" Block Inserter icon to search for "Click to Share".
You'll see several variations of the block. Insert the main "Click to Share" block for a default palette. Three variations are available (Dark, Bold, and Royal).
Click to Share Blocks Using a Slash Command
Block Overview
Main Block Interface
In the main block interface, you will find an editable section for the Quote or text you would like to share. There is also a CTA that you can edit.
The block toolbar reveals (1) a popover modal, which allows you to trim down or customize any shareable text.
Next, you can update the Click to Share text (2), and customize the Click to Share CTA (3) and Icon (4).
The Click to Share Text
Add In Your Click to Share Text and Go Back to Block Settings
The Click to Share text works as an inner block and allows you to place as much paragraph text as you desire. There are quick shortcuts in the block and in the toolbar to go back to the block settings when you are done entering share text.
You can also customize what's shareable if your share text is too long or needs formatting. You can edit this by clicking on the "Quote" icon in the toolbar. This is often used when Twitter(X) is the primary network, and you need to trim down some text.
Customize the Shareable Quote for Text Selection
Choosing a Theme
Choose a Theme Via the Sidebar Options
There are several pre-built themes, as well as support for a Legacy theme intended for older users of the block. It is still maintained, but switching to the new theme system is much more future-proof and user-friendly.
Sidebar Options
There are numerous sidebar options to customize how the Click to Share block will show up on the frontend.
Share Settings
The Share Settings for the Click to Share Block
With the Share settings, you can:
Hide or show the Click to Share CTA
Adjust the Click to Share CTA
Show or hide the Share icon
Adjust the icon size
Change the Sharing Icon
Here's a quick GIF of those items in action.
Adjusting Click to Share Block Settings
As shown in the GIF, several sharing icons are available for you to choose from.
Available Sharing Icons
Color Overrides
If you have selected a theme, but want to override certain aspects of it, you can quickly adjust the colors to match your branding. These are considered opt-in overrides, so you don't have to adjust every color if you don't want to.
When you "Sync Color States", you change both the normal and hover colors at the same time.
Typography Overrides
You can override the typography for both the share text and the CTA.
Typography Options for the Quote and Share Text Typography
Clicking the popover reveals several typography options.
Typography Options for Sharing Text
As with colors, typography options are optional and are considered overrides.
Setting the Spacing and Border
You can also set overrides for spacing and borders. You can also adjust the block's maximum width.
Border, Padding, and Margin Options
You can further configure the block via the admin settings.
Clearing Theme Overrides
Theme Overrides Can Be Cleared Here
If you wish to revert all override changes you've made, select "Clear Theme Overrides," and the block will revert to the defaults.
