The click to tweet block provides an easy way to type-in a quote for readers and enables them to tweet it via Twitter.

What is a Tweet on Twitter?

Twitter is a microblogging and social networking service on which users post and interact with messages known as “Tweets”.

As Twitter only allows you to share messages of 280 characters or less, it’s likely called a tweet because it sort of resembles the same type of short and sweet chirp you might hear from a bird.

Adding block

To add a Tweetable content, click on the Block Inserter icon and select the “Tweet” block.

add-tweet-block
Inserting tweet block

Alternatively, you can start typing /tweet in a new paragraph block, then press enter.

Editing block

You can write your Tweetable content like a regular paragraph, and it will automatically be turned into a block behind the scenes.

edit-tweet-block
Writing a Tweetable content

Optionally, you may modify the content of the “Click to Tweet” link as well.

Block interface

To reveal the block toolbar, you can click on the block, and the toolbar will display. Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

The tweet block offers basic formatting options in its toolbar such as align text left, center, and right.

Optionally, you may enter your Twitter username which will be appended to your Tweetable content via @username.

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

tweet-block-sidebar-settings
The tweet block settings in the sidebar

Styles

The tweet block includes four predefined styles out of the box.

tweet-block-styles
The tweet block styles

Style 1:

edit-tweet-block
Tweet block style 1

Style 2:

tweet-block-style2
Tweet block style 1

Style 3:

tweet-block-style3
Tweet block style 3

Style 4:

tweet-block-style4
Tweet block style 4

Text settings

block-text-settings
Tweet block text settings

This control allows you to change the content’s font size, either with relative percentages or down to the pixel.

Color settings

You can choose the text and background colors for your Tweetable content.

block-color-settings
Tweet block color settings

Selecting proper colors will help you to call attention to important content with a nice contrast for readability purposes.

Accessibility parameters are implemented within this color picker panel to warn you when the text may become illegible for persons with reading impairments.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 2 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept