# The Click to Share Block

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FU5kFHiHEnTVwqqbFiCwu%2Fdlx-has-click-to-share-blocks-and-variations.webp?alt=media&#x26;token=07bc223a-445d-43ba-9072-2c3ee4f98443" alt=""><figcaption><p>The Click to Share Block in the Block Editor</p></figcaption></figure>

{% hint style="info" %}
**Finding the Block**

Use a `/` Command and look for **Click to Share**.

Alternatively, use the "+" Block Inserter icon to search for "Click to Share".
{% endhint %}

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).

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Fp46wcwXVgHTzTmFkV60F%2Fdlx-has-block-slash-command.webp?alt=media&#x26;token=a6c0236d-9fa9-4055-a385-0a993861d504" alt=""><figcaption><p>Click to Share Blocks Using a Slash Command</p></figcaption></figure>

## 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.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FPI5T3oM5hEmLfCViOdgC%2Fdlx-has-click-to-share-block.webp?alt=media&#x26;token=2c27bd83-ddfd-44bb-9e44-337cc057efc0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FcDVr39hj52u7Kq1y4Czx%2Fdlx-has-cts-entering-text%202.gif?alt=media&#x26;token=509a2380-5030-4033-b8e1-deabf4acf3fe" alt=""><figcaption><p>Add In Your Click to Share Text and Go Back to Block Settings</p></figcaption></figure>

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.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FWffnx345nqpaZrDmF4gj%2Fdlx-has-quote-cts.webp?alt=media&#x26;token=5535b501-800a-4830-adad-270019801c50" alt=""><figcaption><p>Customize the Shareable Quote for Text Selection</p></figcaption></figure>

### Choosing a Theme

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FEgVp1epr2del0xKCBYkY%2Fdlx-theme-selection-block.gif?alt=media&#x26;token=b462bed6-e9fe-4d83-8949-43a9d2bcd7c1" alt=""><figcaption><p>Choose a Theme Via the Sidebar Options</p></figcaption></figure>

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

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F6gXIez9AJ7RlOLwOGU3T%2Fdlx-cts-sidebar-share-settings.webp?alt=media&#x26;token=cc468d18-96c5-407e-ae7d-42b40813a7f8" alt=""><figcaption><p>The Share Settings for the Click to Share Block</p></figcaption></figure>

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.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FXrtWDztWocpnpQQ2UwPk%2Fdlx-cts-options-demo.gif?alt=media&#x26;token=48193c6a-5fae-4521-8a2f-5b71529d6c95" alt=""><figcaption><p>Adjusting Click to Share Block Settings</p></figcaption></figure>

As shown in the GIF, several sharing icons are available for you to choose from.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FnQ0lPJ9rY39iZx1zbgBl%2Fdlx-cts-sharing-icon.webp?alt=media&#x26;token=539b8eef-5db7-4783-9734-d378510aca16" alt=""><figcaption><p>Available Sharing Icons</p></figcaption></figure>

### Color Overrides

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FMPToA4Ule7gS9d185Dir%2Fdlx-has-color-overrides.webp?alt=media&#x26;token=275ed477-3b8f-45b9-ba38-b834b2abfa5e" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F8wTZceKYj9n5LT9JEIzq%2Fdlx-cts-share-typography.webp?alt=media&#x26;token=9911957e-67b5-4c55-b310-a63e99e0e652" alt=""><figcaption><p>Typography Options for the Quote and Share Text Typography</p></figcaption></figure>

Clicking the popover reveals several typography options.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FTP5Xz6ojNisBX5xUXS2Y%2Fdlx-cts-typography-popover.webp?alt=media&#x26;token=5745e596-db44-4962-9faf-261e0f14f1d8" alt=""><figcaption><p>Typography Options for Sharing Text</p></figcaption></figure>

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.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FC0ciEWzdc4xVb9jNUUWn%2Fdlx-block-spacing-border.webp?alt=media&#x26;token=44fe464b-0781-465d-85ea-49ebfd89e2d1" alt=""><figcaption><p>Border, Padding, and Margin Options</p></figcaption></figure>

You can further configure the block via the admin settings.

### Clearing Theme Overrides

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FcwijVddc6qI0FtMVjrOR%2Fdlx-%20244.webp?alt=media&#x26;token=4b7465c7-e91d-4fd6-a109-371a987e1446" alt=""><figcaption><p>Theme Overrides Can Be Cleared Here</p></figcaption></figure>

If you wish to revert all override changes you've made, select "Clear Theme Overrides," and the block will revert to the defaults.
