“Tweet this” blockquote in Gutenberg block editor

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 of is-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 );