Blog · Gutenberg
Read More block for WordPress
Collapses long content behind a gradient fade with an animated 'Read more / Show less' toggle 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
Collapses long content behind a gradient fade with an animated 'Read more / Show less' toggle button.
Inspector panels on this block: Content, Button, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Button style” options: Solid, Outlined, Link; “Button alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Blog → search “Read More” (block name `blockenberg/read-more` in block.json). Style it in the sidebar after insert.
How to use Read More block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Read More”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Content. Set “Collapsed height (px)”, “Fade gradient height (px)”, “Read more label”, “Show less label”.
- Check the published page. The view script reads HTML data attributes: data-attributes, data-read-more, data-show-less. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Collapsed height (px) | Numeric range control in the inspector. Range 60–600. block.json default: 180. Saved as `collapsedHeight`. |
| Fade gradient height (px) | Numeric range control in the inspector. Range 20–200. block.json default: 80. Saved as `fadeHeight`. |
| Read more label | Text field in the inspector. block.json default: Read more. Saved as `readMoreLabel`. |
| Show less label | Text field in the inspector. block.json default: Show less. Saved as `showLessLabel`. |
| Button style | Select control; the chosen value is saved on the block. Options: Solid; Outlined; Link. block.json default: solid. Saved as `buttonStyle`. |
| Button alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `buttonAlign`. |
| Show chevron icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `borderRadius`. |
| Animate duration (ms) | Numeric range control in the inspector. Range 100–1200. block.json default: 400. Saved as `animateDuration`. |
| Typography — Content | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `contentTypo`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
| Text Color | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Fade / Background | Color control in the inspector. block.json default: #ffffff. Saved as `fadeColor`. |
| Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Button Border | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBorderColor`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-attributes, data-read-more, data-show-less.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
When this is the right block
- Collapses long content behind a gradient fade with an animated 'Read more / Show less' toggle button — that is the job of Read More, not a generic content block.
- Use it when you need the editor control labeled “Collapsed height (px)”, which exists on this block’s inspector.
- It matches pages about read more, expand, collapse.
- 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 Read More block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Read More”. It sits under Blog. After insert, open Content and set “Collapsed height (px)”, “Fade gradient height (px)”, “Read more label”, “Show less label”.
What makes Read More different from other Blockenberg blocks?
Collapses long content behind a gradient fade with an animated 'Read more / Show less' toggle button. Inspector labels on this block include “Collapsed height (px)”, “Fade gradient height (px)”, “Read more label”, “Show less label”.
Is the Read More Gutenberg block free?
Yes. Read More ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Read More 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: Content, 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 Read More from the Gutenberg inserter.