Adding a “click to tweet” feature to your articles is a great way to encourage readers to share your content.

I use custom block styles make it as easy as possible. You simply type your quote, click style options, then select “Tweet”.
The “Tweet this” button is added server-side when the block is rendered rather than client-side with JavaScript, so it is AMP compatible and better for performance.
You can use the is-style-tweet
class on the blockquote to style it differently than your standard blockquotes, like adding the twitter icon to the top.
Register block style
First, we need to register a tweet
block style for the core/quote
block type. See my article on Block Styles in Gutenberg for more information.
wp.blocks.registerBlockStyle( 'core/quote', {
name: 'tweet',
label: 'Tweet',
});
Now when you insert a blockquote, you can select the “Tweet” style in the top left corner:
Add “Tweet This” button
Next, we’ll use the render_block
hook to modify the blockquote output to include our Tweet This button. This only runs on the frontend so the Tweet This button won’t appear in the Gutenberg block editor.
This hook includes two parameters:
- $block_content (string) The block content to display on the page
- $block (array) The full block, including name and attributes
Add the following code to your theme’s functions.php file or a Core Functionality plugin. It does the following:
- Only applies to blockquotes with the
tweet
style (class ofis-style-tweet
). - Grabs all the text before the citation (if there is one) and strips all HTML. This will be used as the text of the tweet.
- Appends the current post’s permalink to the tweet.
- If you’re using Yoast SEO and have a Twitter handle specified, it appends
@via
with your twitter handle. - Appends a “Tweet This” button to the blockquote.
/**
* Tweet Quote
*
*/
function ea_tweet_quote( $block_content, $block ) {
if( 'core/quote' === $block['blockName'] && !empty( $block['attrs']['className'] ) && 'is-style-tweet' === $block['attrs']['className'] ) {
$content = explode( '<cite>', $block_content );
$text = rawurlencode( wp_strip_all_tags( $content[0]) ) . ' ' . get_permalink();
$url = 'https://twitter.com/intent/tweet?&text=' . $text;
$seo_data = get_option( 'wpseo_social' );
if( !empty( $seo_data['twitter_site'] ) )
$url .= '&via=' . esc_attr( $seo_data['twitter_site'] );
$original = '</blockquote>';
$new = '<a class="wp-block-button__link small" href="' . esc_url_raw( $url ) . '" target="_blank" rel="noopener noreferer">Tweet This</a>' . $original;
$block_content = str_replace( $original, $new, $block_content );
}
return $block_content;
}
add_filter( 'render_block', 'ea_tweet_quote', 10, 2 );