Blog · Gutenberg
Quote Collection block for WordPress
Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings.
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
Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings.
Inspector panels on this block: Layout, Section Header. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Grid, List (single column), Masonry (CSS columns); “Card Style” options: Classic (large quote mark), Minimal (no border), Highlight (accent left border), Card (shadow + border).
Where to find it
Gutenberg inserter → Blog → search “Quote Collection” (block name `blockenberg/quote-collection` in block.json). Style it in the sidebar after insert.
How to use Quote Collection block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Quote Collection”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Layout. Set “Columns”, “Layout — Gap”, “Card Style”, “Card Radius”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Grid; List (single column); Masonry (CSS columns). block.json default: grid. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `columns`. |
| Layout — Gap | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `gap`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Classic (large quote mark); Minimal (no border); Highlight (accent left border); Card (shadow + border). block.json default: classic. Saved as `quoteStyle`. |
| Card Radius | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `cardRadius`. |
| Show Decorative Quote Mark | On/off toggle in the inspector. On by default. Saved as `showQuoteMark`. |
| Quote Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `quoteTypo`. |
| Author | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `authorTypo`. |
| Show Section Header | On/off toggle in the inspector. Off by default. Saved as `showHeader`. |
| Section Header — Title | Text field in the inspector. Saved as `sectionTitle`. |
| Subtitle | Text field in the inspector. Saved as `sectionSubtitle`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. block.json default: #f8f9fa. Saved as `bgColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e9ecef. Saved as `cardBorder`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Quote Mark Decoration | Color control in the inspector. block.json default: #e0e7ff. Saved as `quoteMarkColor`. |
| Quote Text | Color control in the inspector. block.json default: #111827. Saved as `quoteColor`. |
| Author Name | Color control in the inspector. block.json default: #374151. Saved as `authorColor`. |
| Author Role | Color control in the inspector. block.json default: #9ca3af. Saved as `roleColor`. |
| Section Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Section Subtitle | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings — that is the job of Quote Collection, not a generic content block.
- Use it when you need the editor control labeled “Columns”, which exists on this block’s inspector.
- It matches pages about quotes, collection, grid.
- 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 Quote Collection block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Quote Collection”. It sits under Blog. After insert, open Layout and set “Columns”, “Layout — Gap”, “Card Style”, “Card Radius”.
What makes Quote Collection different from other Blockenberg blocks?
Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings. Inspector labels on this block include “Columns”, “Layout — Gap”, “Card Style”, “Card Radius”.
Is the Quote Collection Gutenberg block free?
Yes. Quote Collection ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Quote Collection 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: Layout, Section Header).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Fact Check
Editorial fact-check verdict box with claim, verdict rating, explanation, and sources.
Listicle
Rich numbered list article format for Top 10, Best of, and ranked editorial content. Each item has number badge, title, image, description, verdict and tags.
Opinion Box
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Post Grid
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Quote Collection from the Gutenberg inserter.