The Click to Share Block

Create a clickable quote for sharing to the social networks

Finding the Block

Use a / command and look for Click to Share.

Alternatively, use the "+" Block Inserter icon and search for Click to Share.

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 which you can edit/modify.

You can modify the text directly on the block that you would like to share.

There are several formatting options including:

Bold
Italics
Highlight (change text color)
Strikethrough
Subscript
Superscript

You can further customize the share text in the sidebar options in the Block Editor.

Sidebar Options

There are numerous sidebar options to customize how the Click to Share block will show up on the frontend.

Responsive View

The block has three "preview" modes:

Desktop
Tablet
Mobile

Clicking on each icon will show what the block will look like with that particular screen size.

Within the Share Settings, you can disable the CTA, modify the text for the CTA, show/hide the sharing icon, and even adjust the sharing icon size.

Background Settings

You can adjust the background settings of the block.

You can choose between a solid background, a gradient, or a background image.

With the Solid background option, you can choose a background and hover background color.

The Gradient background type, you can sync the gradients (edit both gradients at once), and even have a random gradient generated for you.

The Image option for the background allows you to upload an image and it will be applied to the background of the block.

In addition, you can set a background color which will work with the opacity settings.

Finally, you can adjust the background settings such as setting positioning, changing the background size, etc.

Color Options

You can adjust the colors of just about every element in the Click to Share block.

Simply click on the color to change it.

Typography

The typography settings can be adjusted for each text section. You can also adjust the typography for each mobile responsive breakpoint (desktop, tablet, mobile).

Click on the Typography settings to adjust the various typography options.