Hello Apostrophe Community!
Apostrophe 4.23.0 introduces a new user-friendly UI for layout (currently in beta) expands widget customization capabilities, and enhances support for Astro as an external frontend.
Layout Widget: Dynamic Grid Layouts (Beta)
We're excited to introduce the layout widget: a CSS grid-based system that gives editors direct control over responsive column layouts. This beta feature allows content teams to add, remove, resize, and reposition columns directly on the page without leaving their editing context. This is available as an optional core widget that can be added to your project after this update.
Key capabilities:
- Create multi-column layouts with a configurable grid
- Resize columns by in-context dragging
- Reposition columns with intelligent nudging and swapping behavior
- Control visibility at different breakpoints (desktop, tablet, mobile)
- Configure content alignment within each column
Now editors can build and manipulate layouts without relying on developers for small changes, which gives them more freedom to create and developers more time to focus on other business-critical work. Apostrophe Pro customers can go even further by combining this core feature with the Section Template Library, allowing your team to save complex multi-column layouts as reusable templates.
This is a beta release. We're actively gathering feedback to refine the API and configuration options before the stable release. The layout widget lays important groundwork for future capabilities, including AI-assisted layout generation.
For complete usage details, see the layout widget documentation. We encourage you to experiment with the layout widget and share your feedback on our roadmap or on Discord.
Enhanced Widget Operations
The widgetOperations configuration now supports placement: 'breadcrumb', allowing developers to add custom operations to a widget's breadcrumb menu. This expansion gives you greater flexibility to create specialized editing workflows tailored to your content team's needs.
Combined with features from previous releases, like addCreateWidgetOperation and a mechanism for the conditional display of context menu operations, this enhancement makes the platform increasingly extensible while maintaining a clean, intuitive editing experience.
Improved Astro Integration
We're committed to making Astro a first-class frontend option for ApostropheCMS. This release brings significant improvements to the Astro experience:
Section Template Library preview support: The REST API now supports the render-areas query parameter when using Astro as an external frontend, enabling section template library previews to work seamlessly in Astro projects.
Layout widget components: The @apostrophecms/apostrophe-astro package now includes dedicated LayoutWidget.astro and LayoutColumnWidget.astro components, along with the new AposRenderAreaForAstro component. These additions ensure that complex widgets like the layout widget render properly with full support for their specialized features.
These enhancements demonstrate our ongoing investment in the Astro integration, making it easier to use ApostropheCMS as a headless CMS with Astro on the frontend.
Section Template Library: Now Stable
The Section Template Library, announced in beta last month, is now stable and ready for production use. This Pro extension allows editors to save any widget as a reusable section template, solving the "blank page problem" by giving content teams a library of starting points.
With the new layout widget, this becomes especially powerful: editors can now create sophisticated multi-column layouts and save them as templates—no custom widget development required. Complex designs that previously needed developer intervention can now be built, saved, and reused by the content team.
Section Template Library is available to Pro and Assembly license holders. Learn more about the extension or our Pro license option today.
Additional Improvements
This release includes several refinements that enhance the overall experience:
- Locale picker in manager modals: Page and piece manager modals now include a locale picker, making it easier to navigate between locales when managing multilingual content from the manager view.
- Widget controls now have sticky behavior, ensuring they are always visible in the viewport no matter how tall the widget is.
- Case-insensitive login support: Responding to customer requests, administrators can now enable case-insensitive username and email matching by setting the caseInsensitive option, with a migration task to handle existing data.
- Color field presets now display directly in the field UI rather than only in the picker popup.
- Image widget minimum size calculations now correctly account for configured aspect ratios.
- Area templates support contextual styling through aposStyle, aposClassName, aposParentOptions, and aposAttrs variables, allowing parent widgets to pass styling and configuration to nested content areas
- Security updates across Pro modules, replacing unmaintained dependencies
These improvements are ready for you to explore! Update your projects with npm update and let us know what you think on our roadmap.
🚀 Happy coding!