Layout · Gutenberg
Page List block for WordPress
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
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 styled list of pages or links with optional icons, hierarchy, and rich color controls.
Inspector panels on this block: Pages, Layout, Spacing & Shape. Those titles come from index.js, not from a shared template.
Behavior controls: “Description” (Short subtitle shown below the title); “Layout — Style” options: Plain, Bordered, Pills, Cards, Sidebar; “Sub-page depth” options: 1 level (no sub-pages), 2 levels (show sub-pages); “Link target” options: Same tab, New tab.
Page List 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 “Page List” (block name `blockenberg/page-list` in block.json). Style it in the sidebar after insert.
How to use Page List block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Page List”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Pages. Set “Sub-page title”, “URL”, “Page Title”, “Description”.
- 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 |
|---|---|
| Sub-page title | Text field in the inspector. |
| URL | Text field in the inspector. |
| Page Title | Text field in the inspector. |
| Description | Text field in the inspector. Short subtitle shown below the title. |
| Layout — Style | Select control; the chosen value is saved on the block. Options: Plain; Bordered; Pills; Cards; Sidebar. block.json default: plain. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 1–4. block.json default: 1. Saved as `columns`. |
| Sub-page depth | Select control; the chosen value is saved on the block. Options: 1 level (no sub-pages); 2 levels (show sub-pages). block.json default: 2. Saved as `depth`. |
| Show icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show description | On/off toggle in the inspector. Off by default. Saved as `showDescription`. |
| Show chevron | On/off toggle in the inspector. On by default. Saved as `showChevron`. |
| Link target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `linkTarget`. |
| Max Width | Text field in the inspector. block.json default: 100%. Saved as `maxWidth`. |
| Item gap (px) | Numeric range control in the inspector. Range 0–40. block.json default: 4. Saved as `gap`. |
| Padding vertical (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `itemPaddingV`. |
| Padding horizontal (px) | Numeric range control in the inspector. Range 0–60. block.json default: 16. Saved as `itemPaddingH`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `borderRadius`. |
| Icon size (px) | Numeric range control in the inspector. Range 12–48. block.json default: 20. Saved as `iconSize`. |
| Link color | Color control in the inspector. block.json default: #1e293b. Saved as `linkColor`. |
| Link hover color | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkColorHover`. |
| Colors — Background | Color control in the inspector. block.json default: transparent. Saved as `bgColor`. |
| Background hover | Color control in the inspector. block.json default: #f3f0ff. Saved as `bgColorHover`. |
| Border color | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Icon color | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Description color | Color control in the inspector. block.json default: #64748b. Saved as `descColor`. |
| Chevron color | Color control in the inspector. block.json default: #94a3b8. Saved as `chevronColor`. |
| Accent color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
When this is the right block
- A styled list of pages or links with optional icons, hierarchy, and rich color controls — that is the job of Page List, not a generic content block.
- Use it when you need the editor control labeled “Sub-page title”, which exists on this block’s inspector.
- It matches pages about pages, navigation, links.
- 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 Page List block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Page List”. It sits under Layout. After insert, open Pages and set “Sub-page title”, “URL”, “Page Title”, “Description”.
What makes Page List different from other Blockenberg blocks?
A styled list of pages or links with optional icons, hierarchy, and rich color controls. Inspector labels on this block include “Sub-page title”, “URL”, “Page Title”, “Description”.
Is the Page List Gutenberg block free?
Yes. Page List ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Page List 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: Pages, Layout, Spacing & Shape).
Related layout blocks
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Mega Footer
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Page List from the Gutenberg inserter.