The Click to Share Block

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.