Business · Gutenberg

Story Section block for WordPress

Full-width founder or brand story section with photo, pull quote, and milestones.

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.

Get Blockenberg

What it actually does

Full-width founder or brand story section with photo, pull quote, and milestones.

Inspector panels on this block: Layout, Founder Info, Founder Photo, CTA Button, Milestones, Shape. Those titles come from index.js, not from a shared template.

Behavior controls: “Layout” options: Photo Left, Photo Right, Centered.

Where to find it

Gutenberg inserter → Business → search “Story Section” (block name `blockenberg/story-section` in block.json). Style it in the sidebar after insert.

How to use Story Section block for WordPress

Install Blockenberg. Install from WordPress.org and activate the plugin.
Insert the block. Edit a page, click +, search for “Story Section”, insert it. Category: Business.
Configure inspector controls that exist on this block. Open Layout. Set “Year”, “Title”, “Description”, “Show founder photo”.
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
Year	Text field in the inspector. Saved as `milestones`.
Title	Text field in the inspector. Saved as `milestones`.
Description	Multiline text field in the inspector. Saved as `milestones`.
Layout	Select control; the chosen value is saved on the block. Options: Photo Left; Photo Right; Centered. block.json default: photo-left. Saved as `layout`.
Show founder photo	On/off toggle in the inspector. On by default. Saved as `showPhoto`.
Show name & title caption	On/off toggle in the inspector. On by default. Saved as `photoCaption`.
Show pull quote	On/off toggle in the inspector. On by default. Saved as `showPullQuote`.
Show milestones	On/off toggle in the inspector. On by default. Saved as `showMilestones`.
Show CTA button	On/off toggle in the inspector. On by default. Saved as `showCta`.
Founder / Author Name	Text field in the inspector. block.json default: Alex Johnson. Saved as `founderName`.
Title / Role	Text field in the inspector. block.json default: Founder & CEO. Saved as `founderTitle`.
Button Label	Text field in the inspector. block.json default: Join Our Journey. Saved as `ctaLabel`.
Button URL	Text field in the inspector. block.json default: #. Saved as `ctaUrl`.
Open in new tab	On/off toggle in the inspector. Off by default. Saved as `ctaNewTab`.
Button border radius (px)	Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`.
Photo border radius (px)	Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `photoBorderRadius`.
Colors — Background	Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`.
Accent	Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`.
Headline	Color control in the inspector. block.json default: #0f172a. Saved as `headlineColor`.
Subheadline	Color control in the inspector. block.json default: #475569. Saved as `subColor`.
Body text	Color control in the inspector. block.json default: #334155. Saved as `bodyColor`.
Pull quote	Color control in the inspector. block.json default: #1e293b. Saved as `quoteColor`.
Milestone year	Color control in the inspector. block.json default: #6366f1. Saved as `yearColor`.
Milestone title	Color control in the inspector. block.json default: #0f172a. Saved as `milestoneTitleColor`.
Milestone text	Color control in the inspector. block.json default: #475569. Saved as `milestoneTextColor`.
CTA button bg	Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`.
CTA button text	Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`.

What the front-end script actually does

The view script reads HTML data attributes: data-opts, data-rendered.

When this is the right block

Full-width founder or brand story section with photo, pull quote, and milestones — that is the job of Story Section, not a generic content block.
Use it when you need the editor control labeled “Year”, which exists on this block’s inspector.
It matches pages about story, founder, about.
Inserter grouping: company, service, and operations 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 Story Section block in WordPress?

Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Story Section”. It sits under Business. After insert, open Layout and set “Year”, “Title”, “Description”, “Show founder photo”.

What makes Story Section different from other Blockenberg blocks?

Full-width founder or brand story section with photo, pull quote, and milestones. Inspector labels on this block include “Year”, “Title”, “Description”, “Show founder photo”.

Is the Story Section Gutenberg block free?

Yes. Story Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.

Can I style Story Section 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, Founder Info, Founder Photo, CTA Button).

Related business blocks

About Section

Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.

Business

Bio Section

Personal biography section for coaches, authors, consultants, and founders. Features large photo, name, title, rich bio text, credential badges, a pull quote, and social links. Multiple layout options.

Business