WordPress 7.1 marks a significant milestone in the block editor’s evolution. This release rounds out styling controls and delivers substantial improvements to media handling workflows.

The update introduces long-requested features that enable responsive design and interactive states without custom CSS. Additionally, the admin experience becomes more personalized through consistent design patterns.

Responsive Styling Comes to WordPress

WordPress 7.1 introduces native responsive styling as a first-class feature. After years of prioritizing intrinsic design, viewport-specific controls are now built directly into the editing experience.

The responsive design system follows a desktop-first approach. Styles cascade to smaller screens until customized for specific devices. Therefore, editors gain precise control over how content appears across different viewport sizes.

Viewport-specific values currently apply to block sidebar settings including typography, spacing, and colors. The controls function in Global Styles and individual block instances across all editors: Posts, Pages, Templates, Patterns, and Navigation.

Additionally, themes can now define custom breakpoints in theme.json. This ensures responsive styling aligns with established design systems rather than WordPress defaults.

Interactive States for Modern Design

Users can now style interactive pseudo-states like hover, focus, and active for Button and Navigation Link blocks. This styling applies globally and per-instance without writing any CSS.

For example, changing a button’s color on hover happens directly in the editor. This eliminates the need for custom CSS snippets for common interactions.

Media Editor Gets Major Upgrade

The new media editor modal consolidates free-form cropping, rotation, and metadata editing into one unified workflow. This replaces the previous inline cropping tool.

Users can now perform basic image editing without external tools. The modal provides faster, more precise control over images through fine-tuning framing, fixing orientation, or mirroring images.

For the Cover Block, the media editor connects to the Crop background image button. The block automatically recalculates overlay color and contrast after edits, ensuring text remains readable.

Client-Side Media Processing

WordPress 7.1 introduces client-side media processing using WebAssembly. Your browser now handles the creation of all sub-sized images instead of your server.

This update delivers improved results with smaller file sizes generated directly on your device. Server-side image processing CPU usage could decline by more than 80% on capable devices.

The system supports broader modern image formats including HEIC, JPEGS with HDR gain maps, AVIF, and WebP. Additionally, GIF-to-video conversion creates lighter, more efficient files.

New Blocks Expand Creative Options

WordPress 7.1 adds two versatile new blocks to the core library. These additions provide content creators with improved ways to display interactive media and organize information.

Playlist Block for Audio Content

The Playlist block creates audio playlists with waveform visualization. Users can showcase multiple tracks or podcast episodes in a single interactive player.

Each track includes metadata: artwork, artist name, track number, and track length. The tracklist is configurable with adjustable play order and toggleable display options.

Tabs Block for Content Organization

The Tabs block organizes content into separate tabbed panels. Visitors click through to navigate, making it ideal for FAQs, product features, or side-by-side comparisons.

Each panel accepts any blocks. The tab buttons include independent color, typography, border, and spacing controls. The markup follows W3C ARIA best practices for accessibility.

Enhanced Icon System

WordPress 7.1 transforms the built-in SVG icons into a proper public API. Plugins and themes can register custom icons, group them into collections, and render them server-side.

The Icon block’s picker now groups icons by collection. Custom icons from plugins and themes appear alongside the core set.

Developers can register collections with wp_register_icon_collection() and add icons with wp_register_icon(). The wp_get_icon() function prints any registered icon with size, CSS class, and accessible label.

Admin Bar Everywhere

The WordPress admin bar now displays in the block editor by default. It remains hidden only when both Fullscreen mode and Distraction-free mode are enabled.

This change maintains familiar navigation across all screens. The update includes a design refresh with your site icon replacing the home icon and a circular profile avatar.

Gallery Block Improvements

Images uploaded while writing a post are now easily accessible through an “Uploaded to this post” filter in the Media Library Inserter modal.

The Gallery block features a “Use attached images” button that populates a dynamic gallery from all media attached to the current post. This makes assembling image galleries faster and more flexible.

A Detach button in the toolbar and sidebar allows conversion to a stand-alone Gallery. This provides full control over gallery editing and updates.

Navigation and Search Enhancements

The Navigation block received several improvements for site builders. The Login/Logout block can now nest inside submenus. New links can be created directly from the sidebar List View.

The Search block now properly applies color settings to the input field regardless of button display options. It can also render inside the native search landmark element for improved semantics.

Notes System Matures

Notes, the inline editorial comments system, continues evolving toward full collaborative editing. Users can now attach notes to specific text selections rather than whole blocks.

A single block can carry multiple inline notes sorted by appearance order. Conversations support rich text formatting including bold, italic, links, and code.

@mention autocomplete pulls colleagues into threads. Resolved discussions separate from open ones, making it easy to see what needs attention.

Developer Tools and APIs

WordPress 7.1 expands APIs and theme.json capabilities for developers. These tools offer greater control over site design, block behavior, and system integrations.

Post Editor Iframe Always On

Every post editor is now always iframed regardless of theme type or block API version. This eliminates switching behavior depending on which blocks are inserted.

Block developers should verify code doesn’t reach for global document or window objects. The usual fix involves getting the canvas document from an element inside it.

Abilities API Expansion

The Abilities API gains four new lifecycle filters. Plugins can short-circuit ability execution, transform input, add authorization rules, or reshape results.

Two filters add custom input and output validation on top of JSON Schema. A new wp_ability_invoked action fires on every invocation for logging and auditing.

Global Styles Updates

Theme authors can now define text shadows directly in theme.json via a new textShadow property. It works at the root level, per-block, via style variations, and on elements.

Nine more core blocks now use WordPress’s standardized text-align system. This ensures consistent alignment controls across the editor.

Workflow Improvements

The command palette now groups results into recent, suggested, and matching sections. It remembers recently-used commands across sessions.

The Edit Comment screen adds an “In reply to” control for changing comment threads. The Media Library defaults to infinite scrolling with a per-user opt-out option.

Posts without titles now show the first 15 words of the excerpt in the Posts list. This makes identification easier at a glance.

Accessibility Enhancements

WordPress 7.1 introduces accessible tooltips and toggle tips. Two new functions provide alternatives to the title attribute for keyboard and touch users.

The Image block gains a “Mark as decorative” checkbox. This tells assistive technologies to skip decorative images entirely.

Post list tables now identify rows by post name rather than checkbox for screen readers. This resolves an eleven-year-old accessibility issue.

Resources and Documentation

The WordPress 7.1 release includes features from Gutenberg plugin versions 22.7 through 23.6. Complete documentation is available in the WordPress 7.1 Field Guide.

Developers can review all dev notes on the Make Core blog. The release represents collaboration from the entire WordPress community and release squad.

Original Source: gutenbergtimes.com