Layout · Gutenberg
Section block for WordPress
A container section for organizing content with rows and columns.
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
A container section for organizing content with rows and columns.
Inspector panels on this block: Section Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Section Width” (Controls the width of the section itself (background). Default uses the theme content area. Wide uses the theme\'s wide width (wideSize)); “Section Max Width” options: 1024px, 1200px, 1440px; “Custom Section Max Width” (Any CSS length, e.g. 1200px, 72rem, 90%, 80vw); “Content Width” (Controls the width of the content inside the section).
Section has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Layout → search “Section” (block name `blockenberg/section` in block.json). Style it in the sidebar after insert.
How to use Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Section”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Section Settings. Set “Section Width”, “Section Max Width”, “Custom Section Max Width”, “Content Width”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Section Width | Select control; the chosen value is saved on the block. Controls the width of the section itself (background). Default uses the theme content area. Wide uses the theme\'s wide width (wideSize). Options: Full Width; Wide; Boxed; Default. block.json default: full. Saved as `sectionWidth`. |
| Section Max Width | Select control; the chosen value is saved on the block. Options: 1024px; 1200px; 1440px. block.json default: 1200px. Saved as `sectionBoxedMaxWidth`. |
| Custom Section Max Width | Text field in the inspector. Any CSS length, e.g. 1200px, 72rem, 90%, 80vw. block.json default: 1200px. Saved as `sectionBoxedMaxWidth`. |
| Content Width | Select control; the chosen value is saved on the block. Controls the width of the content inside the section. Options: Boxed; Full Width. block.json default: boxed. Saved as `contentWidth`. |
| Content Max Width | Select control; the chosen value is saved on the block. Options: 1024px; 1200px; 1440px. block.json default: 1200px. Saved as `boxedMaxWidth`. |
| Custom Content Max Width | Text field in the inspector. Any CSS length, e.g. 1200px, 72rem, 90%, 80vw. block.json default: 1200px. Saved as `boxedMaxWidth`. |
When this is the right block
- A container section for organizing content with rows and columns — that is the job of Section, not a generic content block.
- Use it when you need the editor control labeled “Section Width”, which exists on this block’s inspector.
- It matches pages about section, container, layout.
- Inserter grouping: page structure, sections, and composition.
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 Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Section”. It sits under Layout. After insert, open Section Settings and set “Section Width”, “Section Max Width”, “Custom Section Max Width”, “Content Width”.
What makes Section different from other Blockenberg blocks?
A container section for organizing content with rows and columns. Inspector labels on this block include “Section Width”, “Section Max Width”, “Custom Section Max Width”, “Content Width”.
Is the Section Gutenberg block free?
Yes. Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style 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: Section Settings).
Related layout blocks
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Masonry Grid
Responsive masonry layout for images with hover effects.
Shape Divider
SVG shape dividers — wave, curve, triangle, tilt, zigzag — to create seamless section transitions.
Skewed Section
A content section with diagonal/angled top and/or bottom edges created via CSS clip-path. Place any blocks inside.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Section from the Gutenberg inserter.