Apostrophe 4.11.0: Modern Tooling, Better Access

Release notes for Apostrophe 4.11.0 and extensions that were published in the cycle ending December 18, 2024.

Hello JavaScript Aficionados!
As the December solstice approaches, the sun seems to "stand still" in the sky—a celestial pause that gives us time to reflect on the year behind us. But while the solstice offers stillness, our engineers have been hard at work keeping things moving, ensuring this release brings a little extra brilliance to your development projects.

Modern Frontend Development with Vite Integration

We're excited to announce a major milestone in frontend development: our Vite integration has advanced from beta to a stable release. Vite is now the default in all of our starter kits and we recommend its use in new projects. With expanded documentation and a new demo showcasing React, Vue, and Svelte integration, we're making it easier than ever to use your preferred frontend framework within Apostrophe projects. Our library of starter kits has been switched over to using ESM and our stable Vite builder. This enhancement reflects our commitment to providing flexible, contemporary development options while maintaining the robust content management capabilities you expect from ApostropheCMS.

Enhanced Developer Experience and Accessibility

This release brings several quality-of-life improvements for developers and content editors alike. We've improved our widget validation system with better developer warnings and enhanced the flexibility of color fields with CSS variable support in our color picker field. Accessibility continues to be a priority, with significant improvements to context menus, focus management in widget editors, and new options for controlling focus behavior. The addition of dynamic focus trap support and toggleable `tabindex` features gives admin UI developers more control over navigation and interaction patterns, making Apostrophe-powered sites more accessible to all users.

Pro Module Enhancements

Palette UI improvements

Our professional extension suite continues to evolve with meaningful updates. The Document Versions extension now handles schema evolution more gracefully by automatically adding appropriate default values when comparing older versions. The Palette extension has undergone the first steps of a significant UI refresh, introducing draggable controls and enhanced CSS variable support. We've also separated Palette from the interface in a way that clarifies the experience of saving (or canceling) style changes while another document is open. These improvements, combined with new AI-generated translations across multiple modules, demonstrate our ongoing commitment to making our professional tools more powerful and user-friendly. The Template Library extension also received attention with fixes to archive functionality, ensuring a smoother experience when managing page templates.

As we bid farewell to 2024, we want to thank our global community for another extraordinary year of growth, collaboration, and innovation. Your feedback, contributions, and enthusiasm continue to drive Apostrophe forward. Whether you're celebrating the holidays in tropical warmth or winter wonderland, we hope these updates bring some extra cheer to your development projects. Here's to all the exciting possibilities that 2025 will bring!

Full Changelog

### Adds

* When validating an `area` field, warn the developer if `widgets` is not nested in `options`.
* Adds support for supplying CSS variable names to a color field's `presetColors` array as selectable values.
* Adds support for dynamic focus trap in Context menus (prop `dynamicFocus`). When set to `true`, the focusable elements are recalculated on each cycle step.
* Adds option to disable `tabindex` on `AposToggle` component. A new prop `disableFocus` can be set to `false` to disable the focus on the toggle button. It's enabled by default.
* Adds support for event on `addContextOperation`, an option `type` can now be passed and can be `modal` (default) or `event`, in this case it does not try to open a modal but emit a bus event using the action as name.

### Fixes

* Focus properly Widget Editor modals when opened. Keep the previous active focus on the modal when closing the widget editor.
* a11y improvements for context menus.
* Fixes broken widget preview URL when the image is overridden (module improve) and external build module is registered.
* Inject dynamic custom bundle CSS when using external build module with no CSS entry point.
* Range field now correctly takes 0 into account.
* Apos style does not go through `postcss-viewport-to-container-toggle` plugin anymore to avoid UI bugs.

Until next time

Check out the full release notes in the Apostrophe 4.11.0 GitHub Discussion  thread to see all the additional fixes and improvements and come say "Hi" in the Discord. Remember to npm update so you get the latest and greatest right in your project!