Blog · Gutenberg
Click to Tweet block for WordPress
Elegant pull-quote block with a one-click Twitter/X share button.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Elegant pull-quote block with a one-click Twitter/X share button.
Inspector panels on this block: Quote Settings, Share Button, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Card Style” options: Card (with background), Bordered, Minimal (left accent bar).
Where to find it
Gutenberg inserter → Blog → search “Click to Tweet” (block name `blockenberg/click-to-tweet` in block.json). Style it in the sidebar after insert.
How to use Click to Tweet block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Click to Tweet”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Quote Settings. Set “Attribution”, “Show Attribution”, “Show Quote Icon (")”, “Card Style”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Attribution | Text field in the inspector. Saved as `attribution`. |
| Show Attribution | On/off toggle in the inspector. Off by default. Saved as `showAttribution`. |
| Show Quote Icon (") | On/off toggle in the inspector. On by default. Saved as `showQuoteIcon`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (with background); Bordered; Minimal (left accent bar). block.json default: card. Saved as `cardStyle`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Button Label | Text field in the inspector. block.json default: Share on X. Saved as `buttonLabel`. |
| Include Page URL in tweet | On/off toggle in the inspector. On by default. Saved as `includeUrl`. |
| Quote Text | Color control in the inspector. block.json default: #111827. Saved as `quoteColor`. |
| Attribution | Color control in the inspector. block.json default: #6b7280. Saved as `attributionColor`. |
| Colors — Background | Color control in the inspector. block.json default: #f9fafb. Saved as `bgColor`. |
| Border / Accent | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Accent Color | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Button Background | Color control in the inspector. block.json default: #000000. Saved as `buttonBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `buttonColor`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1200. block.json default: 700. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Elegant pull-quote block with a one-click Twitter/X share button — that is the job of Click to Tweet, not a generic content block.
- Use it when you need the editor control labeled “Attribution”, which exists on this block’s inspector.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Click to Tweet block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Click to Tweet”. It sits under Blog. After insert, open Quote Settings and set “Attribution”, “Show Attribution”, “Show Quote Icon (")”, “Card Style”.
What makes Click to Tweet different from other Blockenberg blocks?
Elegant pull-quote block with a one-click Twitter/X share button. Inspector labels on this block include “Attribution”, “Show Attribution”, “Show Quote Icon (")”, “Card Style”.
Is the Click to Tweet Gutenberg block free?
Yes. Click to Tweet ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Click to Tweet to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Quote Settings, Share Button, Layout).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Click to Tweet from the Gutenberg inserter.