Apostrophe 4.11.0: Modern Tooling, Better Access - Vite Integration, A11y Improvements, and Pro Module Updates

[BoDonkey]

apos-4.11.0-github.mp4

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

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!

Don't forget: npm update is your ticket to unwrapping all these new features. Happy coding!

Apostrophe 4.11.0 (2024-12-18)

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.

Pro modules

@apostrophecms-pro/doc-template-library 2.2.3

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.

Fixes

• Fixes archive action not working for pages from within the template Editor modal.

@apostrophecms-pro/document-versions 2.4.0

This module automatically creates versions for your published documents (pages and pieces) and allows manual restore to any previously saved document version. 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

• Adds missing translations.

Fixes

• Adds focus indicator to "Versions" sidebar.
• Fixes focus behavior of "View Options" context menu.
• Fixes focus behavior of "Compare Versions" context menu.

Changes

• Automatically add the appropriate default values for new properties in the schema when comparing and restoring an older version of document.

@apostrophecms-pro/multisite 4.3.1

This module lets you have many ApostropheCMS websites running on a single codebase in a single Node.js process. Each has its own database, users, media uploads, etc. Sites can be created and managed via a dashboard site. Explore our documentation to discover how this extension can enhance your project. For further details or inquiries, feel free to contact us or visit our pricing page.

Adds

• Documented how to safely make breakpoint preview a per-site option.

@apostrophecms-pro/palette 4.4.0

An in-context interface for changing CSS. @apostrophecms-pro/palette is a module that provides an in-context interface for changing the values of developer-set CSS properties. The values are stored in an Apostrophe piece singleton (like @apostrophecms/global) and applied to the site whenever the stylesheet link is included in a template. Adjusting values via the palette interface renders changes to the site instantly. 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

• Adds support for CSS Variable-powered values
• Add AI-generated translations for new UI-related strings.

Changes

• Rework palette UI (phase 1): Removes connection with global apos context, palette modal can be dragged,
  position is stored, Can cancel changes or save them through controls.

Apostrophe modules

@apostrophecms/vite 1.0.0

This extension provides Vite integration for ApostropheCMS projects, enabling module bundling and hot module replacement (HMR) during development.

Fixes

• Uses postcss-viewport-to-container-toggle plugin only on public builds to avoid breaking apos UI out of apos-refreshable.

Utilities

sanitize-html 2.14.0

This module provides a simple HTML sanitizer with a clear API.

Fixes

• Fix adding text with transformTags in cases where it originally had no text child elements. Thanks to f0x.

@apostrophecms/sitemap 1.1.0

The Apostrophe Sitemap module generates XML sitemaps for websites powered by ApostropheCMS. The sitemap includes all of the pages on your site that are visible to the public, including "piece" content, such as events and blog posts.

Adds

• Adds support for multiple locales (localization).

@apostrophecms/stylelint-config-apostrophe 4.2.1

This module provides a stylelint configuration for the Apostrophe team and contributors.

Fixed

• Remove the following rule:

"scale-unlimited/declaration-strict-value": [
  ["/color/", "font", "font-family", "z-index"],
  {
    "ignoreKeywords": [
      "currentColor",
      "inherit",
      "initial",
      "transparent",
      "auto",
      "unset"
    ],
    "disableFix": true
  }
],

until this issue is resolved: AndyOGo/stylelint-declaration-strict-value#379