Hi everyone,
I’d like to introduce PageTree, a plugin for October CMS 4.2+ that lets content editors build and update pages from blocks. A live preview shows each page inside your own theme layout.
How it started
I’m a developer in a company that runs many websites, and I built PageTree to make my own daily work easier.
At first, in 2024, it was a small Linktree-style plugin, for quick link pages. It kept growing as my colleagues started using it every day, and it became a real page editor.
The idea that guided it is a simple editor with limits set by developers. Developers decide which blocks exist, which fields they have and how they render in the theme. Editors then build and update pages on their own, quickly, without being able to break the design or go outside what the site was built for. Feedback from my colleagues has been very good. They pick it up quickly, and I spend much less time on small content changes.
For editors
-
A visual editor inside the October Editor: a searchable block library, drag and drop, and blocks you can duplicate, hide, or copy and paste between pages (and even between sites
).
-
Live preview in the theme layout, at desktop, tablet and mobile widths. You can open it in a separate window, for example on a second screen.
-
Editing in the preview: click a text to edit it in place, select a block to move it or open its form.
-
Editing on the website: a backend user clicks Edit page on the live site. They can edit texts in place, move, hide, duplicate or delete blocks, open a block form in a side panel, and save everything at once. Draft and scheduled pages can be checked on the website before they go live, while visitors still get a 404.
-
History: every save is kept as a version, per language. You can preview any version and restore it, and name important versions.
-
Publishing: active flag, publication switch and scheduled publication.
-
Layouts: a Section block with 1 to 4 columns, and a Grid Container block that builds CSS Grid layouts visually.
For developers
- Blocks are plain PHP classes with a YAML form and a Twig template. Any plugin can register its own blocks with
registerBlocks(), and create:block scaffolds new ones.
- The
pagetreeEditable Twig filter makes any field of your own blocks editable in place.
-
Every frontend component registered by your plugins can be placed on a page as a block, with its properties editable in a form.
-
Custom blocks from the back-office (superusers): a form builder, data sources (Tailor entries or plugin models) and a Twig template.
- Blocks and version history can also be used in your own models.
- No CMS page files: pages are resolved from their URL.
SEO and languages
- Meta tags with a search result preview, Open Graph and Twitter cards, canonical, robots, hreflang, JSON-LD, and a sitemap exclusion flag.
- RainLab.Translate (translated titles, URLs, blocks and SEO) and October multisite.
Compatibility
- PageTree 2.x works with October CMS 4.2+ and PHP 8.2+. PageTree 1.x is still maintained (fixes only) for October 3.7 and 4.1. but we recommand to use the latest version.
- PageTree adds a page type and replaces nothing: your theme, CMS pages, Tailor, menus and media library keep working as usual.
Links
v2.4 - Frontend Editing
PageTree is my take on content editing in October CMS. I also have a lot of admiration for the work done by Renick and OFFLINE on their own content plugins, and it’s great to see the ecosystem growing in this direction.
Feedback, bug reports and ideas are very welcome. I’d especially like to hear which blocks or integrations you’d find useful next.
Thanks for reading!
4 Likes
Forum
PageTree 2.5.0: dynamic pages, theme-based blocks, SEO check and keyboard accessibility
PageTree 2.5.0 is available. It requires October CMS 4.2+ and has no database migration.
Before you start: after updating, reload the backend once without the browser cache (Ctrl+Shift+R). October CMS loads the Editor scripts without a version number, and an old script used with the new templates leaves the add block popup empty.
Dynamic pages
The URL of a page can now contain parameters, with the October CMS syntax: /blog/:slug, :page?, :id|^[0-9]+$, :path*. The URL is validated on save.
- Blocks read parameters with
this.param. The properties of CMS components placed as blocks accept {{ :slug }}.
- Data sources of custom blocks can be filtered by a URL parameter (a column or
relation.column) and return a single record. When no record matches, the theme 404 page is displayed.
-
Preview with… in the Editor preview toolbar lets you choose the values of the URL parameters among the records of the filtered data sources. They are saved with the page and used by Open page. A warning shows a parameter filtered on severalmodels, or a filter on a parameter missing from the URL.
SEO
-
{{ source.field }} and {{ :param }} tokens in the meta and Open Graph fields of dynamic pages, a Use for the page SEO
option on single data sources, and support for the title and meta changes made by CMS components placed as blocks.
-
SEO check in the SEO settings of a page: it scores the page displayed in the Editor preview, unsaved changes included, on meta title and description lengths, a single H1, heading levels, image alternative texts, link texts and word count.
- A Decorative image option on the Image, Cards, Gallery and Media and text blocks. The SEO check reports images that have no alternative text and are not marked as decorative.
Custom blocks and templates in your theme
-
Custom blocks in the theme: one file per block,
pagetree/blocks/<code>.htm, with a YAML section (name, icon, category,
fields, dataSources), a == line and the Twig template. They are versioned and deployed with the theme, edited in the Editor like
database blocks, and win over a database block with the same code. See docs/custom-blocks.md.
-
Block templates: a partial
partials/pagetree/blocks/<block type>.htm (dots replaced by dashes, e.g. pagetree-hero.htm) replaces the template of a built-in block or of a block registered by a plugin. The new Block templates section of the Editor lists the blocks by plugin, opens their template, saves it to the theme and resets it. It requires the pages permission and the permission to edit theme partials.
-
Customize the template on a CMS component block copies the component partials to
partials/<component code>/ in the active theme and opens them in the Editor.
-
Disable the PageTree default blocks in the settings, to offer only your custom blocks and those of other plugins. Blocks already used in pages are still rendered and editable.
Accessibility and editing
- Keyboard use of the Editor block list: arrow keys, Enter to open, Alt+Up / Alt+Down to move, Shift+F10 for the menu, Delete with confirmation. Actions are announced to screen readers. The add block popup, icon picker, block fields builder and nested blocks field are also usable from the keyboard.
- Video block: title, WebVTT captions file with its language, and a transcript under the video.
- Title level option (h2 to h4) on the Cards, Accordion, Files and Call to action blocks.
- Sections with a background color now pick a readable text color (dark or white) from the contrast.
- Gallery lightbox, links opening in a new window and decorative characters are better exposed to screen readers.
- A language selector in the Editor document header translates a block page as a whole, without changing the edit site. It replaces the per-field translation globes.
Other changes
- The PageTree settings are split into three tabs: General, Styles and scripts, SEO.
- The text block placeholder is shown in the Editor preview only.
- The Editor Back shortcut is now Ctrl+Q only (Cmd+Q quits the browser on macOS).
Deprecated
Custom blocks stored in the database keep working and can still be edited, but new custom blocks are created in the theme. Use Move to the theme (in the Editor, from the block menu or document) to migrate existing ones; the pages keep their content. The database storage will be removed in PageTree 3.0.
Fixes
- The page form no longer crashes when the page template has no
configuration, styles or scripts.
- Theme overrides of the partials of a CMS component block (
partials/<component code>/) are now used.
- Nested blocks field: editing a block after reordering the list changed another block.
- Edit Configuration popup of a blocks field: the preview mode list no longer overflows.
- The translate popup of a blocks field now fills the window instead of 750px.
