Gutenberg 23.1-23.3: Responsive Block Styles and Media Editor Enhancements

The Gutenberg Changelog episode 131 reveals significant developments for WordPress 7.1. Birgit Pauli-Haack and Isabel Brison discuss three major plugin releases that introduce responsive design capabilities and improved media editing tools.

These updates represent meaningful progress toward WordPress 7.1, scheduled for beta release on July 15. The discussion covers Gutenberg releases 23.1, 23.2, and 23.3, which collectively delivered over 686 closed pull requests from more than 150 contributors.

Responsive Block Styles Transform Design Workflow

Gutenberg 23.2 introduced responsive global block styles with viewport states. This feature allows users to customize block appearance for different screen sizes directly within the WordPress editor. Isabel Brison, a core JavaScript developer on the project, led development alongside Dan Richards.

The implementation leverages an existing states API originally built for pseudo elements like hover and focus states. Brison explains that years of discussion about responsive design finally moved forward when the team found this stepping stone.

Users can now access responsive controls through the site editor’s global styles section. A new states dropdown provides three options: default (desktop), tablet, and mobile. Each viewport state applies styles only within its specific breakpoint range.

The feature supports typography, colors, and spacing adjustments across breakpoints. However, some features like Duotone remain unavailable for responsive customization. The team prioritized commonly needed controls first.

Block-Level Responsive Controls

Gutenberg 23.3 expanded responsive capabilities to individual block instances. Content creators can now select any block and apply different styles for each viewport through the block inspector.

The layout panel moved from the Settings tab to the Styles tab as part of this update. This change consolidates related controls like block gap and layout settings in one location.

Brison notes that aspect ratio controls are currently being developed to work responsively. The team aims to enable as much functionality as possible before the WordPress 7.1 beta deadline.

Media Editor Modal Reaches Stability

The new media editor modal exited experimental status in Gutenberg 23.3. Ramon Dodd and Andrew led development of this replacement for the previous cropping tool, which many users found difficult to navigate.

The updated modal offers free cropping and rotation capabilities. Users can rotate images to any degree and crop to custom aspect ratios, expanding beyond the limited options of the previous tool.

Improved keyboard accessibility marks another significant enhancement. The modal now works with both the image block and site logo block, providing consistent editing experiences across the block editor.

Brison describes the new interface as more ergonomic and intuitive. The team researched design patterns from other graphic programs to inform the user experience.

Testing Calls for WordPress 7.1 Features

Two active testing calls seek community feedback ahead of WordPress 7.1. The collaborative editing feature, previously delayed from 7.0 due to stability concerns, now has a dedicated outreach program.

Anne McCarthy coordinates the collaborative editing testing alongside Amy Kamala and Justin Tadlock. The program follows the model of the full site editing outreach that ran for multiple years.

The media editor modal testing call invites users to evaluate cropping, rotation, and resizing capabilities. Feedback on both features will shape final implementations before the beta release.

Upload Performance Improvements

Gutenberg 23.1 enabled concurrent sideload uploads for media files. This enhancement reduces wait times when adding multiple images to posts or copying content from external sources.

Adam Silverstein’s work on client-side media processing contributed to these performance gains. The feature operates transparently, improving speed without requiring user intervention.

Design System and Component Updates

WordPress UI components received substantial updates across all three releases. The overlays preview styles enhancement improves how developers visualize components in Storybook.

These updates help plugin developers create consistent admin interfaces without building custom UI systems. The unified design system ensures users encounter familiar patterns across different plugins.

Motion design tokens for duration and easing joined the WordPress theme component package. These additions enable smoother animations and transitions in admin interfaces.

Tabs Block Accessibility Progress

The experimental tabs block now follows WCAG tabs patterns for accessibility. Block naming aligns with web accessibility standards, making the component more familiar to developers experienced with ARIA attributes.

The tabs block can now handle duplicate tab labels and includes improved keyboard navigation. These changes move the feature closer to stabilization for WordPress 7.1.

Content Management Experiments

Custom post types and taxonomy management experiments continued development in version 23.1. The interface provides REST API controllers and UI for creating custom content structures.

This experimental feature addresses a long-standing gap in WordPress core. While plugins like Advanced Custom Fields have provided this functionality for years, native support remains under development.

Dashboard widget experiments introduced new grid components and admin page routes. The grid package API enables plugin developers to create organized admin dashboards with consistent layouts.

Guidelines API Development

A new Guidelines API provides structured ways to communicate site policies to AI agents. Site owners can define editing guidelines, content standards, and behavioral expectations for automated tools.

The system helps prevent information bleeding between different sites when agencies manage multiple WordPress installations. Guidelines create context boundaries for AI-assisted editing and content management.

Notes and Collaboration Features

Multiple notes per block arrived in Gutenberg 23.3. This enhancement allows different comment threads on various parts of longer content blocks.

The feature moves WordPress closer to collaborative editing experiences found in Google Docs. Users can now highlight specific sections and attach relevant comments to those portions.

Adam Silverstein developed this capability to enable more granular feedback on content. The system supports both human collaboration and AI-generated review comments.

Documentation and Developer Resources

Juan Margarito created automated readme files for all core blocks. The system generates documentation from block JSON files and allows manual content additions through tokens.

This work addresses a significant documentation gap that affected both developers and AI tools. Each block now has comprehensive information about markup, supports, and relationships with other blocks.

The 80 new documentation pages will merge into the block editor handbook. Accessibility team members can contribute guidance specific to individual blocks.

React 19 Integration

Gutenberg 23.3 upgraded to React 19 as the default framework version. Plugin developers should test their extensions with this update to identify compatibility issues before WordPress 7.1.

The core team requests feedback on any problems encountered with the React upgrade. Early testing helps prevent surprises when the new version reaches WordPress core.

Timeline and Next Steps

WordPress 7.1 beta 1 arrives on July 15, giving contributors six weeks to refine features. The Gutenberg Changelog will resume coverage in early July after a brief summer break.

Brison emphasizes the importance of community testing during this period. User feedback on responsive styles, media editing, and other new capabilities will shape final implementations.

WordPress 7.0 released two weeks before this recording without major issues. The extended testing cycle and six-week delay helped catch most bugs before release.

Original Source: gutenbergtimes.com

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.