# Apostrophe 4.23.0: Layout Widget (Beta), Enhanced Widget Operations, and Improved Astro Integration

[BoDonkey]

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.

Apostrophe.4.23.0_.Layout.Widget.Beta.Enhanced.Widget.Operations.and.Improved.Astro.Integration.mp4

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 template support for 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!

Apostrophe 4.23.0

Adds

• Add locale picker in the page and piece manager modals.
• Support for the render-areas query parameter in the REST API when using Astro as an external frontend, provided the Astro project has the corresponding route. This allows section template library previews to work in Astro projects. For ease of migration, if Astro cannot satisfy the request, ApostropheCMS will also attempt to render the widget natively.
• Made self.apos.externalFrontKey available, simplifying API calls back to Astro.
• Layout widget for dynamic grid layouts.
• widgetOperations support for placement: 'breadcrumb' to add operations to the breadcrumb menu of widgets. Extend the widget operations configuration to support various features when in the breadcrumb menu.
• Area template (Nunjucks) support for aposStyle, aposClassName, aposParentOptions and aposAttrs contextual named variables (with {} syntax).
• New login option caseInsensitive to force login usernames and emails to be case insensitive. New task login-case-insensitive updating all login names / email to lowercase, used by a new migration when switching to caseInsensitive.
• Adds disableIfProps and disableTooltip to widget operations and breadcrumb operations.

Changes

• Enable /api/v1/@apostrophecms/login/logout and /api/v1/@apostrophecms/login/whoami routes when localLogin is false.
• Refactored complex logic regarding data updates in AposSchema.
• Cleaned up annotateAreaForExternalFront logic and added context so developers understand the reason if it fails due to a widget type with no matching module in the project.
• Color fields now display their preset color swatches in the field UI rather than just the color picker popup
• Moves widget operations to backend with new action and nativeAction properties.
• Moves mode from breakpoint preview to it's own store (to be used by layout).

Fixes

• The render-areas query parameter now works correctly with areas nested in array items.
• Fix min size calculation for image widgets configured with an aspect ratio.
• Added missing await in helper library function for the asset module, ensuring JS assets build reliably.
• Autodetection of bundles, and automatic activation of "improvements" shipped in those bundles, now works correctly when the bundle is delivered in ES module format rather than commonjs format.

Pro Modules

@apostrophecms-pro/data-set 2.0.5

This module provides an easy avenue for low-code data presentation. It creates a data-set piece for the import of comma-separated values (CSV) files. A separate widget allows for the dynamic selection of columns, and display of the data as an HTML table, or in other templates provided by the developer. Explore our documentation to learn how this extension can enhance your project. Once you're ready, obtain a license and install it through Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Security

• Clear an npm audit warning by replacing connect-multiparty with multer.
• To be clear, this was never an actual security vulnerability. The CVE in question is disputed, and for good reasons. However, since connect-multiparty is no longer maintained, it makes sense to move to multer.

Fixes

• Fixes blank preview of data-set table cell inputs when zooming in / out.

@apostrophecms-pro/doc-template-library 2.2.7

This module solves the "blank page problem" for developers and product managers, and makes it faster for editors to create content. doc-template-library allows for the configuration of default widgets and pre-populated content on piece or page templates, and to re-use existing layouts. Explore our documentation to discover how this extension can enhance your project. Then, effortlessly integrate it through our new Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Changes

• Updates README

@apostrophecms-pro/import-export-translation 1.0.5

The purpose of this module is to create a specialized JSON file containing the text of the site, which can be downloaded and manually edited into a different language before being imported into a new locale. Upon import, pages from the default locale will be localized into the new locale substituting the translated text. Explore our documentation to learn how this extension can enhance your project. Once you're ready, obtain a license and install it through Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Security

• Clear an npm audit warning by replacing connect-multiparty with multer.
• To be clear, this was never an actual security vulnerability. The CVE in question is disputed, and for good reasons. However, since connect-multiparty is no longer maintained, it makes sense to move to multer.

@apostrophecms-pro/palette 4.10.1

A beautiful visual interface for styling your website without writing any code. @apostrophecms-pro/palette allows content creators and designers to adjust colors, fonts, spacing, and other design elements directly from the frontend, with changes appearing instantly. Developers configure which CSS properties can be modified, and the module automatically injects the updated styles into every page. Explore our documentation to learn how this extension can enhance your project. Once you're ready, obtain a license and install it through Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Changes

• Increases the spacing between palette fields in the UI.

@apostrophecms-pro/section-template-library 1.0.0

Accelerate content creation and maintain design consistency by turning your best widgets into reusable section templates. Content teams can instantly insert components without recreating layouts from scratch. Explore our documentation to discover how this extension can enhance your project. Then, effortlessly integrate it through our new Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Fixes

• Updates README

@apostrophecms-pro/section-template-library 1.0.0

Accelerate content creation and maintain design consistency by turning your best widgets into reusable section templates. Content teams can instantly insert components without recreating layouts from scratch. This module is now stable and ready for production use. Explore our documentation to discover how this extension can enhance your project. Then, effortlessly integrate it through our new Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Changes

• Graduated from beta to stable release
• Updates README

@apostrophecms-pro/signup 2.1.0

A seamless solution that empowers users to easily create accounts on your website. Users can sign up in a few simple steps, complete with email verification and pre-determined user role and access level. Explore our documentation to discover how this extension can enhance your project. Then, effortlessly integrate it through our new Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Adds

• Uses core login normalizeLoginName method to lowercase username and email in case project login option caseInsensitive is set to true.

Free modules

@apostrophecms/form 1.5.2

Allow ApostropheCMS editors to build their own forms. They can then place any form in one or more content areas across the website.

Changes

• Updates README

Security

• Clear an npm audit warning by replacing connect-multiparty with multer.
• To be clear, this was never an actual security vulnerability. The CVE in question is disputed, and for good reasons. However, since connect-multiparty is no longer maintained, it makes sense to move to multer.

@apostrophecms/import-export 3.3.1

This module enables import and export of pages and pieces, with or without related documents such as files, images and other related types.

Changes

• Save import files in uploadfs. Import-export now works on projects using multiple node servers.

@apostrophecms/passport-bridge 1.6.0

apostrophe-passport works together with passport-google-oauth20, passport-gitlab2 and similar passport strategy modules to let users log in to Apostrophe CMS sites via Google, Gitlab and other identity providers. This feature is often called federation or single sign-on.

Adds

• Uses core login normalizeLoginName method to lowercase username and email in case project login option caseInsensitive is set to true.

Utilities

@apostrophecms/apostrophe-astro 1.7.0

This module integrates ApostropheCMS into your Astro application.

Adds

• Refactor AposArea to accept custom style, class, and attributes, but also a widgetComponent prop. The latter allows for custom widget rendering components to be used. This is particularly useful for complex widgets like the Layout widget that need to render the output in particular order/way.
• Introduce LayoutWidget.astro and LayoutColumnWidget.astro components to be used in the project level widget mapping.
• Adds new AposRenderAreaForAstro component, specifically designed to be used to implement the new /api/apos-external-frontend/render-area route. This allows section template library previews to work in Astro projects and also enables calling the ApostropheCMS REST APIs with ?render-area when using Astro on the front end. See the documentation for more information on adding this route to existing projects.

@apostrophecms-pro/cypress-tools 1.0.0-beta.24

Automated functional browser tests are an important part of quality assurance for enterprise websites and web applications. Cypress is an industry-standard, open-source library for carrying out automated functional browser tests. This module provides a collection of conveniences for testing the ApostropheCMS admin UI within Cypress. Explore our documentation to learn how this extension can enhance your project. Once you're ready, obtain a license and install it through Apostrophe Workspaces. For further details or inquiries, feel free to contact us or visit our pricing page.

Adds

• Layout widget commands

uploadfs 1.26.0

uploadfs copies files to a web-accessible location and provides a consistent way to get the URLs that correspond to those files. uploadfs can also resize, crop and autorotate uploaded images. uploadfs includes S3-based, Azure-based, GCS-based and local filesystem-based backends and you may supply others.

Changes

• Replace aws-sdk with @aws-sdk/client-s3.