What’s new in Gutenberg 18.1? (10 April)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor project (formerly called Full Site Editing).


What’s new in Gutenberg 18.1? (10 April)

Gutenberg 18.1 is ready and available for download!

With more than 150 pull requests (PRs), Gutenberg 18.1 is packed with features and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes to suit all tastes — new pattern and template part insertion functionality, site backgrounds in global styles, accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and performance improvements.

Lovers of documentation and code quality enhancements will be pleased to learn that their favorite PRs make up almost a third of the total number in this release!

As always, a big thank you goes out to all who contributed, with special gratitude to first-time contributors. Great work!

In this issue:

Set site background images in the Site Editor

Set site background images in the Site Editor

Version 18.1 extends background image support to top-level global styles in the Site Editor, which means you can add custom background images and photos to sites. Images can set to repeat, or be displayed as contain or cover backgrounds. (#59454)

And for those wondering — yes, as well as regular images, looping animated gifs will also work.

See more with data views

New data views in the block editor for pages and patterns

Whether it’s sorting or searching your patterns in grid and table layouts (#60337), or filtering and previewing all of your sites pages (#59950), version 18.1 brings further design consistency to configurable adminadmin (and super admin) views, not to mention quicker access and management of site assets. 

Alongside the continuous integration into BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor workflows, data views have undergone improvements to accessibility and keyboard navigation (#59637).

Pattern schema and insertion

Pattern insertion with zoomed out view

Pattern insertion gets an upgrade in the latest version of Gutenberg. The editor canvas will zoom out when browsing and inserting patterns using the block inserter, allowing a greater overview of how your patterns appear alongside the rest of your site’s content. (#59775

Patterns are a powerful way to define design assets with configurable content. You can now give your patterns a “schema” by naming blocks that are overridable in all instances of those patterns. Users of your patterns will be able to see exactly which blocks are editable via a handy list in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (#59977)

Swap and edit template parts

Swapping template parts design in the Site Editor

When editing your site’s templates, you can select template parts and immediately view alternative designs for that template part in the sidebar. Want to replace your footer design? Click on your template’s footer and select a new one from the available designs. Voilà! (#60203)

Gutenberg has long had an option to preview a page’s template when editing that page. 18.1 lets you select and edit a page’s important template parts, such as the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer. To do so, click on a template part, then hit “Edit” in the toolbar. (#60010)

Other notable highlights

The editor displays a confirmation modal before clearing template customizations. (#60119

You can collapse non-selected items in the list view using a handy new keyboard shortcut (Option-L on Mac, or Alt-L on Windows). (#59978).

Changelog

View the full changelog

Enhancements

Block Editor

  • Zoom out: Invoke zoom out mode when opening the patterns tab, and move the code to do so to a shared hook. (59775)
  • Block Previews: Update shadows in different contexts. (60161)
  • Update: Move post actions to the editor package. (60092)
  • Try: Show copy shortcut in block options. (60339)
  • Update image role description text to fix spacing. (60338)

Site Editor

  • Add rename page action. (60230)
  • Center the document title. (59134)
  • Consolidate when showing revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. link or action. (60194)
  • Editor: Update hover color of editor document title. (60113)
  • Improve the frame animation. (60363)
  • Try selecting closest editable block when clicking on a disabled block. (60016)
  • Update index view for pages. (59950)

Patterns

  • Add content schema to pattern editing view. (59977)
  • Close inspector on pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select. (60004)
  • Focus block selection button only in navigation mode. (60207)
  • Pattern Shuffling: Make the results deterministic. (60074)
  • Patterns page: Enable table layout. (60337)
  • Prevent reordering of header and footer template parts when zoomed out. (60054)
  • Remove manage all of my patterns link. (60345)

Block Library

  • Add __next40pxDefaultSize to Image block Title Attribute. (60117)
  • Add support “HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Element” to Site Tagline. (59654)
  • Image: Remove temporary image check for rendering controls. (60212)
  • Quote block: Button for cite add/remove. (59073)
  • Quote block: Remove appender. (60307)
  • Reduce specificity of block library styles conflicting with block supports. (59457)
  • Update navigation blocks to use consistent link UIUI User interface labels and field sizes. (60116)
  • Summary: Polish featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.. (60110)

Post Editor

  • Block Editor: Deprecate __experimentalGetReusableBlockTitle selector. (60278)
  • Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package. (60344)
  • Editor: Move publish panel handling to editor store. (60340)
  • Editor: Unify publish sidebar preference. (60334)

Global Styles

  • Add background to global styles changes output. (60229)
  • Background UI controls. (59454)
  • Follow up design tweaks for global styles presets. (60031)
  • Try reducing specificity of global styles selectors only. (60106)

Data Views

  • DataViews: Add a utility to share filtering, sorting and pagination logic. (59897)
  • Data views: Remove the enumeration type as redundant. (60084)
  • Data views: Update template actions. (60075)
  • Data views: Add confirmation modal for clearing customizations in templates. (60119)
  • Data views: Make trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. a quick action again. (60165)

List View

  • Add keyboard shortcut to collapse list view items other than the focused item. (59978)
  • Adjust the List View close icon to resemble the Inspector close icon. (59999)
  • Update “Actions” string to “Options” in List View. (60136)

Templates

  • Add filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to allow extending the list of post content blocks. (60068)
  • Render non-editable preview of template part when user does not have capability to edit template part. (60326)
  • Template Parts: Remove pattern title from sidebar. (60160)
  • Template Parts: Update replace flow to separate template parts from patterns. (60203)
  • Template Parts: Update the ‘Replace’ label to ‘Design’. (60156)

Zoom Out

  • Add a delete control to toolbar on zoomed out mode. (60214)
  • Media dialog push content in zoomed out mode. (60170)

Components

  • Popover / ToggleGroupControl: Use useReducedMotion() from @wordpress/compose. (60168)
  • date-fns: Bump to v3.6. (60163)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Allow view access of template rest endpoint to anyone with the edit_post capability. (60317)

Commands

  • Polish Command Palette. (60134)

Page Content Focus

  • Allow selecting template parts in page content focus mode. (60010)

Inspector Controls

  • Add: PostCardPanel component. (59870)

Package and utility updates

  • Router: Update history package to 5.3.0, fix query string generation. (60271)
  • Create block: Add new namespacePascalCase template variable. (60223)

New APIs

Extensibility

  • Extensibility: Support PluginBlockSettingsMenuItem in the site editor. (60033)

Bug Fixes

Block Library

  • Fix enqueuing block theme styles when separate asset loading is enabled. (60098)
  • Fix lightbox UI disallow editing. (59890)
  • Fix navigation link ui close focus management. (59925)
  • Removed pointer-events none inline style due it blocking crop action. (60305)
  • Search Block: Apply font-related style inheritance to input field. (60321)
  • Columns block: Fix arrow up into it. (55197)

Site Editor

  • Fix rendering PluginTemplateSettingPanel when we’re editing a template. (60215)
  • Fix: Use viewportWidth in pattern preview data view. (60315)
  • Templates: Fix deferred rendering. (60361)
  • Site Editor: Consolidate save button functionality. (60077)
  • Revert #60300: Make sure the CSSCSS Cascading Style Sheets. class id-dark-theme is added to the editor iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. body. (60616)

Block Editor

  • Make sure the CSS class is-dark-theme is added to the editor iframe body. (60300)
  • Raw handling: Preserve class. (60331)
  • Raw handling: Preserve empty paragraphs. (59476)
  • Wiriting flow: Backspace at beginning of first paragraph block prevents block from being deleted. (56329)
  • DOM: Fix return types of focus.tabbable methods. (60274)

Components

  • CustomSelectControlV2: Fix hint behavior in legacy. (60183)
  • InputControl: Ignore IME events when isPressEnterToChange. (60090)
  • TextControl: Apply zero margin to input element. (60282)

Global Styles

  • Fix missing class for Global Styles > Colors. (60094)
  • Reset specificity of body selector when processing with postcss. (60266)
  • Shadow: Revert shadow default presets opt-in to opt-out. (60204)
  • Global Styles: Make strings translatable. (60127)
  • Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist. (60489)

Zoom Out

  • Fix zoom out mode toggling between pattern category selection. (60225)

Data Views

  • Fix focus outline visibility and truncation in data view record titles. (60191)

Layout

  • Fix horizontal flex layout in classic themes. (60154)

Post Editor

  • Editor: Memoize ‘getInsertionPoint’ selector. (60015)
  • Fix block toolbar dropdown separator color. (60336)
  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. r57868 (Editor: Prevent font folder naive filtering causing infinite loops) from WordPress-Develop. (60141)

Block templates

  • Add null check to prevent errors in get_block_template filter. (60491)

Utilities

  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Return early in getFilename where URL argument is falsy. (60265)

Accessibility

Data Views

  • Add click-to-select behavior on table rows. (59803)
  • Data views list layout: Apply focus styles to items on focus-visible rather than focus. (60253)
  • Update field display in grid layout. (60083)
  • Data Views: Updating keyboard navigation in list layouts. (59637)

Site Editor

  • Restore Style book close button tooltip. (60177)

Block Library

  • Remove CSS order property from social icons placeholder UI. (60032)

Performance

Block Editor

  • Avoid fetching all reusable blocks (user patterns) on post/site editor load. (58239)
  • Block editor: Optimize hasSelectedInnerBlock selector. (60330)
  • Templates performance: Resolve patterns server side. (60349)

Block Library

  • Template part: Avoid pattern fetch on mount. (60297)

Block Editor

  • Inserter: Cache search normalization results. (60080)
  • Format library: Improve unknown format performance. (48761)

Experiments

Site Editor

  • Zoom-out view: Disable canvas resizing. (60104)

Documentation

  • Add auto generated APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. documentation for editor package. (60356)
  • Add component props documentation. (60350)
  • Add php @global documentation. (59931)
  • Change heading level on troubleshooting section. (60233)
  • CustomSelectControlV2: Match v1 stories to test legacy component. (60182)
  • Docs (general): Fix some typos. (60260)
  • Fix @todo tags to follow standards in WordPress comments. (60148)
  • Fix Font Collection JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. schema definition. (60285)
  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. documentation link to load JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. (60181)
  • Fix: Invalid links to the block supports api. (60199)
  • Fix: Non existent link to submitting to the block directory. (60389)
  • Interactivity API: Variable name correction in the documentation. (60056)
  • Create Block: Update external template documentation to include variants. (60095)

Code Quality

Block Editor

  • Add comment for unmemoized context. (60272)
  • Fix ESLint warning in BlockListBlock component. (60064)
  • RichText: Switch from disableEditing to standard html readonly attribute. (60327)
  • Site Editor: Reuse inserter search term normalization. (60218)
  • canInsertBlockType: Extract helper for selector dependants. (60235)
  • Fix editor canvas overflow on search results with position: Relative. (60287)
  • Editor: Move template areas to editor package. (60179)

Components

  • CustomSelectControlV2: Rename for consistency. (60178)
  • Navigator: Fix two nits. (60273)
  • NavigatorProvider: Move all state management to one reducer. (60190)
  • Components: Try obviating Popover pointer event trap. (59449)

Post Editor

  • Memoize the getTemplateInfo selector. (60200)
  • Update: Remove template summary component. (60351)
  • Update: Use getPostIcon selector on document bar. (60128)
  • Distraction free: Remove unwanted space from string. (60108)

Global Styles

  • Additional CSS: Add code comments contextualising tranformStyles for clarity. (60267)
  • Global styles: output :root selector for CSS custom properties. (42084)
  • Style Engine: Continue get_classnames loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. after adding the default classname. (60153)

Font Library

  • Add test for Font Library and Theme Style Variations. (60250)
  • Update google fonts font collection data URL to the latest version available. (60079)

Block Library

  • Image: Use the new ‘useUploadMediaFromBlobURL’ hook. (60208)
  • Navigation Block: Add test coverage to check that post content is not removed. (60189)

Site Editor

  • DataViews: Don’t memoize every callback ‘PagePages’ component. (60103)
  • History: Simplify the push and replace methods. (60112)

Rich Text

  • RichText: Separate fallback instance ID for selection retrieval. (60277)

Block Locking

  • E2E: Test BlockSwitcher availability in l-post-ul-group CPT. (60254)

Data Views

  • DataViews: Fix reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning error in list layout. (60101)

Tools

Testing

  • Automated Testing: Remove Puppeteer CI Job. (59311)
  • CustomSelectControlV2: Stabilize tests. (60133)
  • E2E: Fix flaky Site Editor pages end-to-end test. (60109)
  • Font Library: Add upload font test. (60221)

Build Tooling

  • Blocks: Fix double gutenberg_ prefix in built dynamic blocks PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60288)

First-time contributors

The following PRs were merged by first-time contributors 🎉 :

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @artemiomorales @bph @draganescu @ellatrix @fabiankaegy @geriux @getdave @glendaviesnz @interdevel @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @mikachan @mikeybinns @mirka @mujuonly @n2erjo00 @nirav7707 @noisysocks @ntsekouras @oandregal @ockham @okmttdhr @pedro-mendonca @peterwilsoncc @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @Soean @steveariss @stokesman @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad

Props to @andrewserong, @isabel_brison and @saxonf for assisting with the preparation of this post.

#gutenberg, #gutenberg-new

Hallway Hangout: Let’s chat about what’s next in Gutenberg

There are some big, exciting efforts underway within the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ project and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that will eventually make their way in some form to a future WordPress release. It’s all WordPress at the end of the day and, in an effort to bring people into the flow of what’s happening in the earlier stages, this hallway hangout seeks to be a snapshot of what’s being worked on to provide broader awareness to more WordPress contributors and get feedback. The hope is that in coming together early before the next betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. period to talk about different features, we can, as a community, flush out concerns sooner, help more folks get involved, and find ways to work better together. 

Important note: this hallway hangout will likely last for 90 minutes instead of the usual 60 minutes to allow for ample time to demo and discuss. 

How to join

If you’re interested in joining, the Hallway Hangout will happen on 2024-04-24 23:00 . A Zoom link will be shared in the #core SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel before starting and all are welcome to join, whether to listen or participate, for as long or as little as you’d like. This will be recorded and recapped. Note that the time for these hallway hangouts are intentionally rotated to allow for different folks to participate in different ones.

If you’re unable to make it but have something to comment on or share, I welcome you to leave feedback in the comments of this post or dive straight into the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues linked below. This isn’t meant to replace any particular way to get involved but is meant to streamline and offer a more high bandwidth way to connect. 

Agenda

At a high level, the following items are currently on the list to go through but more might be added depending on how the next few weeks take shape. We’ll get through as many of these as we can in the order as shown below, with either demos to go through from figma, from a PR, or via the Gutenberg plugin. @saxonfletcher & @richtabor will help lead these demos:

  • Data views efforts and its relationship to the Adminadmin (and super admin) Redesign.
  • Overrides in synced patterns, including the UXUX User experience and the broader reasoning around naming to unlock an override.
  • Zoomed out view and the experience coming together to focus on patterns rather than granular blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editing, including Advancing contentOnly editing.
  • Layout improvements, including Grid layout support.
  • Pattern styles, which would offer multiple ways of styling content based on a single palette, and Colors and typeset presets from theme style variations.
  • Style inheritance to help clarify where and why different items are styled as they are. 

There’s obviously more that could be on here but, in an effort to focus on some of the larger, more relevant work, let’s start here. We can always hold more of these in the future! Hope to see you there. 

#gutenberg, #hallway-hangout

Providing more clarity in the Gutenberg GitHub Repo

For a while now, the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo has had a few high level labels (Overview, Tracking, Iteration) that have gotten a bit convoluted over time. Sometimes the issue is no longer relevant, is incorrectly labeled, has been updated so many times that the comments don’t follow what’s there, or double labeled. This has led to reported concerns and confusion around what work is truly active, what areas are being explored, and more. To begin to clean this up, a few things were done over the last week or so to make these labels more reliable, more consistent, and easier to follow:

  • Updating the descriptions of these labels to be concise, more descriptive, and show how they are tied to each other.
  • Changing Epic to Iteration for clarity as Epic holds different connotations for folks and is harder to grasp.
  • Triaging older issues and closing out when necessary aka the work is no longer relevant or has been completed.
  • Ensuring the labels that remain are accurate, either by not labeling the work as one of the above labels or adding/removing labels.
  • Pinging the folks who opened different issue when needed to ask for updates to ensure what’s there aligns.
  • Opening any needed overview issues related to phase 3 (this is in progress by @priethor). 

How can I use or interact with these labels? 

For context, here’s a sense of how each label should work and how you might want to use them or follow them:

  • Overview issues contain more context/strategy and narrative, often including multiple tracking issues to accomplish an area of work and existing across numerous releases. Here’s an example from phase 2.
  • Tracking issues are more tactical, broken down into individual tasks and areas of work, and exist across a few releases. It should ideally be part of a breakdown from an Overview issue. Here’s an example for layout support.
  • Iteration issues are to define iterations of a project in smaller deliverable packages, including when possible the minimum requirements to ship the iteration as a whole in a WordPress release. Expect these issues to be regularly updated and curated. They reflect more active work and often is pulled out of a list of items in a tracking issue unless the scope is small and it can pull work directly from an Overview. Here’s an example with overrides in synced patterns for 6.6.

This means if you don’t have a ton of time to pay attention to the releases or overarching work, you can use these labels to narrow your focus and stay up to date at the level you’d like. 

Label description updates

This is just a quick rundown of what’s changed, description wise, to tighten up the approach. 

Before:

  • Epic: A large body of work shaping an iteration that can be broken down into a number of smaller issues.
  • Tracking: For issues used to track large changes across the codebase
  • Overview: Offers a comprehensive breakdown of a specific area of work to act as a guidepost

After:

  • Iteration: Scoped iteration of an effort from a tracking issue or overview issue ideally for a major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope..
  • Tracking: Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
  • Overview: Comprehensive, high level view of an area of focus often with multiple tracking issues.

Let’s keep iterating

This system isn’t perfect but, just like with WordPress itself, it’s an iteration and you can expect more to come. This will be focused on for the WordPress 6.6 cycle on the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor side and likely iterated upon once more after going through a full cycle with a more tightened workflow. If done well, very little extra work should be created for contributors and those who want to contribute or follow along the efforts can do so with greater ease. Ultimately, communication around what’s gone into a release happens already and this just seeks to formalize where it happens with clearly high level labels and norms within them. 

Thank you to @richtabor and @priethor for reviewing this post. 

#core-editor, #gutenberg

What’s new in Gutenberg 18.0? (27 March)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor project (formerly called Full Site Editing).


Graphic w/ text: What's new in Gutenberg 18.0

Gutenberg 18.0 has been released and is available for download!

The 180th Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party release comprises a total of 206 closed PRs by 59 contributors and with a record-setting 17 first-time contributors. You’ll find in the release the result of additional Data View work, improvements for featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. and and media+ text blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. . The changelog also lists a ton of bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes, performance improvements and about 35 PRs of Documentation updates. 

Table of Contents

Sitewide Color and Typography presets

In addition to Style Variations, the Site view screen is now populated with the controls to set side-wide color and typography choices. This will streamline designers’ workflows.  (59594)

Users can use the Media + Text block in their templates as it now supports the featured image. The design possibilities now opened up beyond a column-bases layout also for single post or page templates. Drop shadow controls expand the design tools for developers, designers and site owner alike. (51491) (59616)

Data Views with improved filters and updated Template index page

The data views screens, which are also prototypes for the future adminadmin (and super admin) list pages, received quite a few intriguing updates. The Templates index page is now very flexible. In addition to the table view, users can now also enable a grid layout with preview cards or a list view that allows for full preview in a three-page window. The list view is available for templates, pages, and template parts. Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to select multiple criteria for filters. (59610)  (59858) (59792)

Other Notable Highlights

The Grid layout experiments are the next step to consistent responsiveness of posts, pages, and templates.
They are evolving quite a bit. If you haven’t opened them up you might want to start doing so now. This release includes a couple of updates. Blocks can now be grouped as a grid via the transform feature. With Column Start and Row Start controls in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., the Drag and Drop of blocks around the grid is now possible. (59483) (59853)

Changelog

Full changelog available

Enhancements

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Update method generating plural names. (59881)
  • Expand main content area to viewport when zoomed out. (59512)
  • Update ‘sidebar card’ appearance. (59997)

Data Views

  • Add: Command click to select item on table view. (59563)
  • DataViews: Add AND logic operators to filters. (59953)
  • DataViews: Add default getValue for fields. (59810)
  • DataViews: Implement multiple selection for filters. (59610)
  • DataViews: Make list layout stable. (59858)
  • Pages data view: Update quick-actions. (59551)
  • Reduce visual prominence of primary actions in table data views, and consolidate primary + secondary actions in ellipsis menu. (59128)

Site Editor

  • Patterns: Add a title to the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. delete flow and increase line height. (59645)
  • Standardize block tools toggle button size to 32px. (59625)
  • Update index page for templates. (59792)
  • [Site Editor]: Move featured image at the top of the inspector controls. (59783)

Block Library

  • Add featured image to Media & Text block. (51491)
  • Social Icons: Update Medium icon. (57073)
  • Table Block: Fixed width table cells on by default. (49672)
  • Update Reddit social icon to latest brand guidelines. (59438)

Components

  • Add typing for date and time typing for TextControl. (59666)
  • Add: Support for menu group to the Dropdown. (59723)
  • Update the line height for components. (60028)

Design Tools

  • Add Box Shadow support for featured image. (59616)
  • Background block supports: Move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles. (59889)

Layout

  • Add Column Start and Row Start controls to Grid children. (59483)
  • Allow blocks to be grouped as a Grid. (59853)

Global Styles

  • Remove preset headers. (59504)
  • Try color and typography presets in Site View. (59594)

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

  • Display settings ‘label’ defined by the ‘register_setting’ method. (59243)

Rich Text

  • RichText: Add non-breaking space shortcut on Windows. (43150)

New APIs

  • Support the PluginDocumentSettingPanel slot in the site editor. (59985)
  • Add pre 6.5 compat for viewStyles. (59322)

Bug Fixes

Block Library

  • Add filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. for duotone to account for gutenberg_restore_image_outer_container in classic themes. (59764)
  • Add richText identifier to blocks. (59056)
  • Close navigation link ui on escape. (59838)
  • Code block: Preserve newlines. (59627)
  • Do not focus new navigation block menu until loading is finished. (59801)
  • File: Add center alignment editor class for classic themes. (59975)
  • Fix create menu after menu switch. (59630)
  • Fix image layout shift from placeholder to selected placeholder. (59857)
  • Fix overlay issue when empty featured image is used in Cover Block. (59855)
  • Media & Text: Remove the duplicate Media width control. (59776)
  • Prevent default on primary+k to prevent command center from opening on navigation link. (59845)
  • Quote: Show as active when deeply nested child block is selected. (59662)
  • RichText: Document the identifier prop. (60036)
  • Social icons: Only render label container when there’s a label. (60060)
  • Template Parts: Fix typo in translatable string. (59816)
  • Ensure consistent return type in WP_Navigation_Block_Renderer::Get_markup_for_inner_block(). (59820)
  • Return early from saving metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data for the navigation without a $post->ID. (59875)
  • Fix root ID calculation when check if block can be transformed. (60167)
  • Featured Image: Fix overlay rendering in the editor. (60187)
  • Fix self closing navigation overlay. (60130)
  • Navigation: Avoid content loss when only specific entity fields are edited. (60071)

Font Library

  • Avoid auto-removing font families without font faces. (59910)
  • Ensure that errors reported from uploading font files are not duplicated. (59564)
  • Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. errors when activating or deactivating system fonts. (59935)
  • Fix typo in upload text. (59655)
  • Polish Google Fonts consent box. (59631)
  • Refactors the upload handler in order to check if files being uploaded are valid font files. (59648)
  • Reset notices when navigating away from the collection. (59981)
  • Activate the fonts coming from the backend and not the data from the frontend. (60093)
  • Install fonts in sequence to work around race condition. (60180)

Interactivity API

  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. fixes from Core. (59903)
  • Fix interactivity api end-to-end tests. (59836)
  • Interactivity: Ensure stores are initialized on client. (59842)
  • Interactivity: Restore scope when yielded promise rejects. (59708)
  • Prevent non-object state from being added. (59886)
  • Re-introduce data_wp_context() with _deprecated_function() call. (59834)

Site Editor

  • Don’t display welcome guide in hybrid theme. (55865)
  • Editor: Fix loading templates using a top level pattern block that includes a template part. (59900)
  • Fix opening of save panel when using the save shortcut. (59647)
  • Fix selected featured image when opening media library. (59769)
  • Make the delete navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. confirm dialogs consistent. (59825)
  • Restore the back button when navigating to the template from the home page. (59639)

Block Editor

  • Fix allow mouse users to edit link text when Link UIUI User interface is active. (59635)
  • Fix crash when unmounting an editor iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. (59992)
  • Handle when attributes param passed into hasStickyOrFixedPositionValue is nullish. (59800)
  • List view: Fix stuck moving animation on Enter. (59644)
  • Shadow support enable skip serialization for dynamic blocks. (59887)
  • FlatTermSelector: Invalidate optimistic update if term creation fails. (59945)

Global Styles

  • Fix retrieval of referenced preset values in editor. (59811)
  • Global Syles: Apply fallback background color to typography elements. (59347)
  • Presets: Show the default empty variation as well as the other presets. (59717)
  • Remove filter for same number of settings. (59590)
  • Site editor: Find font families for typography presets crashes editor. (59806)
  • Force root min-height of 100% for backgrounds. (59809)
  • Featured Image: Fix block support selectors after shadow support addition. (60184)
  • Fix list of base theme fonts when a theme variation is applied.. (59959)

Patterns

  • Add pattern title in create modal in post editor. (59550)
  • Implement pattern overrides behind IS_GUTENBERG_PLUGIN flag. (59702)
  • Pattern Explorer: Pass ‘rootClientId’ to the pattern list. (60014)
  • Pattern Shuffling: Don’t assume that patterns have categories. (60070)

Data Views

  • Ensure the ‘select all’ checkbox appears on hover. (59799)
  • Fix: Regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.: Default templates and template parts views do not work. (59794)
  • Ignore cmd-click when row not selectable. (59697)
  • [DataViews]: Fix item actions. (59748)

Components

  • DateTimePicker: Change day button size back from 32px to 28px. (59990)
  • Fix unwanted ToggleGroupControl backdrop vertical animation. (59642)
  • PaletteEdit: Fix order numbers. (52212)

Layout

  • Experiments: Fix label typo: “Grid interactivity”. (59796)
  • Show inherit toggle in the absence of settings.layout object. (59580)
  • Use correct layout type to display controls. (59979)

List View

  • Block Bindings: Remove Block Bindings icon from List View, fixes and CSSCSS Cascading Style Sheets. updates. (59477)
  • Heading Block: Show default block name in list view when content is empty. (59827)
  • Blocks: getBlockLabel: Use RichTextData.toPlainText if available. (58524)

Data Layer

  • Fix getEntityRecordsTotalPages when per_page is not provided. (59983)

Icons

  • Fix return icon viewbox. (59669)

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

  • Add tooltip to several Back buttons. (59760)
  • Make save panel a dialog with proper labels, fix site editor focus loss after save. (59622)
  • Fix labeling of the navigation links in the list view. (59370)

Documentation

  • Block JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. schema: Add layout.allowCustomContentAndWideSize field. (59736)
  • Components: Fix headline hierarchy in README. (59726)
  • Components: Hide private READMEs from handbook. (60003)
  • Dataviews: Improve story. (59773)
  • Docs/fix typo in metadata reference guide. (59577)
  • Docs/fix typos and clarify wording in blocks supports guide. (59721)
  • Docs/fix typos in block context. (59575)
  • Docs/fix typos in block registration guide. (59720)
  • Docs/fix typos in block supports. (59919)
  • Docs/fix typos in edit and save reference guide. (59576)
  • Docs: Flex – Fix headline hierarchy. (59686)
  • Docs: List all minor versions on Versions in WordPress page. (58003)
  • Docs: Remove alert callout on block selectors page. (60020)
  • Docs: Update Interactivity API package readme. (59763)
  • Fix broken links in Interactivity API documentation. (59715)
  • Fix sample code on InputControl documentation. (59517)
  • Fix typo in platform-docs. (60042)
  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. links to getting started with JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. (59927)
  • Fixes pseudo code doc block to use real PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60012)
  • HeadingLevelDropdown: Fix JSDoc and documentation. (59727)
  • Improve Gutenberg platform documentation homepage. (59749)
  • InputControl: Make onChange observable in Storybook. (60055)
  • Interactivity API Docs: Clarify that getElement()’s ref can be null. (59868)
  • Platform Docs: Fix JSX error. (59967)
  • Plugin short description less than 150 characters. (59661)
  • RadioControl: Update deprecated suggestion in readme. (60002)
  • Replace screenshots of Radio Control. (60024)
  • Replace “sidebar” with “panel” in README.md. (59664)
  • Update GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ edit URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in docusaurus.config.js. (59969)
  • Update ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. documentation links for forms. (59657)
  • Update api-reference – data-bind–hidden is an incorrrect attribute – should be data-wp-bind–hidden. (59955)
  • Update block supports documentation for WordPress 6.5. (59862)
  • Update dependency-extraction-webpack-plugin documentation. (59973)
  • docs: Fix syntax in block filters example. (59636)
  • theme.json schema: Add settings.color.caption definition. (60017)

Code Quality

  • Add $schema to tsconfig files. (59861)
  • Added @global to PHP documentation Comments. (59725)
  • Consolidate template actions components. (59586)
  • Core Data: Clarify comments for entities’ plural methods. (59946)
  • Fix Code Standards for RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 release. (59774)
  • Fix typo in Dataviews and Font Collection packages. (59656)
  • Fix: Typo correction tff to ttf. (59665)
  • Global styles utils: Remove unused vars. (59805)
  • Refactor zoom-out iframe scale. (59618)
  • Refine include/exclude patterns in phpcs.xml.dist. (59712)
  • Typography Presets: Use && rather to avoid a messy nested conditional. (59920)
  • synchronizeBlocksWithTemplate: Extract common functions. (59682)

Block Editor

  • Block tree reducer: Avoid nested update for insertUsage. (59681)
  • Block tree reducer: Avoid repetitive Map.get. (59672)
  • BlockSettingsDropdown: No need to cast ‘clientIds’ to an array. (59940)
  • BlockSettingsMenuControls: Remove ‘__unstableDisplayLocation’ prop. (59942)
  • Don’t memoize callbacks in ‘BlockSettingsDropdown’. (59397)
  • Link dialog: Remove CSS hack. (59746)
  • Pattern Explorer: Remove leftover source filter state handlers. (60019)
  • Fix code formatting in Nav block view file. (60162)

Components

  • Button : Deprecate isSmall prop. (59734)
  • Button: Keep deprecated props in type definitions. (59913)
  • Replace isSmall prop with size in NavigationMenuSelector. (59667)
  • Replace isSmall prop #53560. (59302)
  • TextareaControl: Remove extra closing curly brace in inputStyleNeutral. (59744)
  • Update Snapshots for line height. (60041)

Block Library

  • Add explanatory comment to Nav Link block fix for Command Center. (59864)
  • Enforce @SInCE tags in block-library/src//.php files. (59700)
  • Refactor Enter keypress on Nav Link. (59848)
  • Update Nav block permissions variable naming accuracy. (59882)

Global Styles

  • Fetch the variations inside the component. (59588)
  • Theme JSON: Remove unused vars in layout class. (59938)
  • Use the preivew iframe to preview typography for consistency. (59587)
  • Background block supports: Move size defaults to hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. and block.json. (60008)

Plugin

  • Remove unnecessary ‘IS_GUTENBERG_PLUGIN’ check in ‘load.php’. (59873)
  • Update PHP Sync Issue generation script to ignore PRs with given labels. (59549)

Data Views

  • Update: Dataviews do not use strings on isCustom props passed down. (59609)
  • [Data Views]: Remove separator in item actions. (59822)

Data Layer

  • Data: Deprecate the getIsResolving selector. (59679)

Tools

Build Tooling

  • Add inline comment denoting version for Ruby setup. (59640)
  • Build: Dedupe packages. (57800)
  • GitHub Actions: Fix PHP file change detection logic. (59653)
  • Improve likelihood of Cherry Picking script including all PRs. (59871)
  • Interactive template: Use wp_interactivity_data_wp_context function. (59995)
  • Test: Dynamically detect and set max-workers. (59904)
  • Update docusaurus to the latest version. (59866)

Testing

  • Remove @kevin940726 and @Mamaduka from end-to-end test codeowners. (60067)
  • Upgrade Playwright to v1.42. (59339)
  • Use viewScriptModule block.json field for interactivity end-to-end tests. (59705)
  • end-to-end theme switch: Match incoming theme slug, then optional folder. (59851)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @afragen @ajlende @alexstine @andrewfleming @anton-vlasenko @artemiomorales @bacoords @c4rl0sbr4v0 @carolinan @chrisbellboy @colinduwe @creativecoder @DAreRodz @dcalhoun @draganescu @ellatrix @enejb @enodekciw @flexseth @fluiddot @gaambo @georgestephanis @geriux @getdave @huzaifaalmesbah @inc2734 @J0n-92 @jaclync @jameskoster @jasmussen @Jayanth-Parthsarathy @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krokodok @luislard @Mamaduka @matiasbenedetto @mattsherman @mcsf @megane9988 @michalczaplinski @mirka @mujuonly @mzahir @ndiego @noisysocks @ntsekouras @oandregal @pbking @ramonjd @rcoll @SahilThakur02 @Sam-Xronn @scruffian @shail-mehta @SiobhyB @sirreal @Soean @Strangehill @sunil25393 @swissspidy @t-hamano @talldan @tellthemachines @TeresaGobble @tjcafferkey @tomepajk @tyxla @vcanales @youknowriad

Props to @greenshady for review, @annezazu for highlights selection ,and @joen for the visuals in this post.

#gutenberg

What’s new in Gutenberg 17.9 (13 March)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg.

Text displaying: "What's new in Gutenberg 17.9?"

Gutenberg 17.9 has been released and is available for download!

As with Gutenberg 17.8, many contributors are still focused on polishing for the upcoming WordPress 6.5 release, so this Gutenberg release continues to prioritize stability and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. Enhancements and new features are highlighted below.

As a reminder, with WordPress 6.5 now in the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). phase, bug fixes from the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party are backported for inclusion in 6.5 as needed. However, new features in Gutenberg 17.9 will not be included in WordPress 6.5.

Color and typography presets in Global Styles

Screenshot of colors and typography panels in global styles, with preset buttons available.

Color and typography presets that are defined in theme variations are now exposed within the color and typography sections of Global Styles. This new feature allows users to mix and match color presets or typography from different variations, offering greater flexibility for designs from a given theme. (56622)

Indenting List blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. items via the tab key

The List block now supports indenting and outdenting when the selection is at the beginning of the List item. This improves the usability of the List block by allowing indenting via the keyboard, while still preserving existing tabbing behavior in the editor canvas when the selection is elsewhere within the block. (59199)

Shuffle option when choosing patterns

When a pattern is inserted and has categories defined, and where the pattern contains a single top-level block such as a Group block, a shuffle button is exposed in the block toolbar that allows a user to cycle through random patterns. This makes it easier to quickly browse through a variety of available patterns in specific scenarios. (59251)

Swap Template Parts in the Inspector

Screenshot of replace flow for template parts in the block inspector controls.

When selecting a Template Part in the site editor, the replace flow is now more discoverable with previews of alternate Template Parts available to select from the block inspector controls. This allows for a more at-a-glance approach to browsing different options for swapping out headers and footers. (55128)

Other Notable Highlights

  • Background images can now be set in the root of theme.json to provide site-wide background images (59354). There is currently no UIUI User interface for it in Global Styles, and this will be explored in future releases.
  • For container blocks that use allowedBlocks, insert before and after actions are now supported on child blocks (59162).
  • Use drag handles to set row and column span and see a dotted outline of block placement when the new “Grid interactivity” experiment is enabled (59052).

Changelog

Full changelog available

Enhancements

Data Views

  • Apply hover styles to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. chip while being configured. (59236)
  • Display all checkboxes when a single item is selected. (59233)
  • Pages data view: Make ‘View’ button open a new tab. (59554)
  • Reposition pattern detail icon. (59363)
  • Update ‘Add filter’ button in data views. (59433)
  • Update empty/loading states. (59437)
  • Update filter control position. (59231)
  • Update page selector appearance. (59284)
  • Update pages dataview icons, add ‘drafts’ icon. (59285)
  • Update sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. titles for Template and Page management data views. (59011)

Global Styles

  • Add background image to top-level theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. styles. (59354)
  • Add color and typography presets to Global Styles. (56622)
  • Create a shared component for typography previews. (59503)
  • Enqueue block custom CSSCSS Cascading Style Sheets. only when block renders on the page. (58991)
  • Style Book: Should persist when browsing global styles panels. (59261)

Block Library

  • Introduce the ‘useUploadMediaFromBlobURL’ utility hook. (59350)
  • Remove redundant copy from PanelBody titles. (59278)
  • Template Parts: Add a replace flow to the inspector controls. (55128)

Site Editor

  • Block Theme Previews: Remove “Looking for Template Parts?” hint. (59092)
  • Remove the site editor sidebar navigation edit button. (59335)
  • Scale the zoomed out mode to fit available space. (59342)
  • View full zoomed out mode canvas while inserting patterns. (59337)
  • Add: Shuffle button in zoom out mode. (59573)

Font Library

  • Add option to revoke access to Google Fonts. (59205)
  • Make font collection fields translatable. (59256)
  • Update the spacing in the font collection panel. (59357)

Post Editor

  • Editor: Standardize headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. button size to 32px. (58532)
  • Tweak: Sidebar categories panel. (59495)

Patterns

  • Add Shuffle option to sections via pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (59251)
  • Use block naming for marking blocks as overridable in patterns. (59268)

Components

  • Storybook: Add mechanism to redirect moved stories. (59181)

Nested / Inner Blocks

  • InnerBlocks: Support insert before/after block actions when using allowedBlocks. (59162)

Plugin

  • Update cherry pick script to add Backported to WP Core label for backports. (58970)

Bug Fixes

Block Library

  • Columns: Correctly recalculate column widths when the column count is increased by more than 2 at once. (59301)
  • Group: Fix alignment of Group block placeholder text. (59271)
  • Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: Don’t show publicly non-queryable taxonomies. (59458)
  • Image: Remove scrolling of empty image blocks. (59305)
  • Search: Use font size for search icon. (59159)
  • Site Logo: Update URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for site icon settings with fallback for WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. versions earlier than 6.5. (59485)
  • Site Logo: Update capitalization of Use as Site Icon toggle. (59383)
  • Title & Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Hide non content controls when block editing mode is ‘contentOnly’. (59295)

Font Library

  • Avoid creating font families without font faces. (59436)
  • Avoid loading theme fonts twice and assume they were already resolved by the font face resolver. (59421)
  • Changed installFont to installFonts so that multiple font families can be installed at once. (59451)
  • Fixed the font family modal to open in state when a font is already selected. (59379)
  • Font collection pagination: Add min height to avoid infinite number. (59241)
  • Hide UI elements when user lacks permissions. (59332)
  • Load/Unload the font face in browser when toggling the variants. (59066)
  • Use SearchControl component for search input. (59589)

Interactivity APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

  • Fix navigate() issues related to initial state merges. (57134)
  • Fix context object proxy references. (59553)
  • Improve context merges using proxies. (59187)
  • Navigation: Add missing empty space to print out valid HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (59255)
  • Prevent unwanted subscriptions to inherited context props. (59273)
  • Rename data_wp_context function. (59465)

Components

  • Button: Fix focus outline in disabled primary variant. (59391)
  • Button: Place children before the icon when iconPosition is “right”. (59489)
  • Fix tooltip font. (59307)
  • HStack, VStack: Stop passing invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. props. (59416)
  • URLPopover: Restore min-width style. (59274)

Block Editor

  • Fix Navigation link control overlapping issue. (59065)
  • Fix: Re-render toolbar when parent block changes. (59234)
  • List: Copy wrapper when multi selecting items. (59460)
  • Refactor: UseBlockTools hook. (58979)
  • Rich text: Fix typing into empty flex element. (59473)
  • URLPopover: Fix a problem with the layout of link settings. (58906)
  • Fix issue with appender jumping when creating a new pattern. (59582)
  • Allow event bubbling even if keydown is passed. (59474)

Custom Fields

  • Block Bindings: Fix console error when selecting a bound block. (59598)
  • Change default “Connected to a custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes.” message in bindings. (59434)
  • Fix inserting button block when pressing enter in a block with bound text attribute. (59361)
  • Fix query loop with block bindings not working in the editor as expected. (59283)

Data Views

  • DataViews: Don’t use combobox when there are few available options. (59341)
  • DataViews: Set color for primary field/a element when focused. (58814)
  • Dataviews: Fix sticky table headers. (59467)

Site Editor

  • Ensure ResizableFrame does not force Cover blocks within the editor to show drag handles. (59262)
  • Iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.: Scale html instead of iframe element for zoomed out mode. (59334)
  • Zoom out mode: Only apply grey background for mode. (59377)
  • Site Editor: Fix Global Styles outdated output. (59628)
  • Fix site editor crashing when not fully loaded. (59658)

Global Styles

  • Dynamically set border panel label based on the controls available. (59358)
  • Shadow: Fix layout collapse when indicator is selected. (59309)
  • Theme JSON: Check for null values to cater for blockGap. (59258)
  • Remove the extra unneeded color variations panel. (59718)

Post Editor

  • Command Palette: Prevent mode switching if only one editor mode is available. (59299)
  • Editor: Fix post type check in isEditingTemplate selector. (59105)
  • Top Toolbar: Fix ‘collapsed’ state synchronization. (59267)

Block hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.

  • Display toggle for hooked blocks added via filter. (59396)
  • Navigation Block: Fix erroneous escaping of ampersands. (59561)

Patterns

  • Disable image caption if part of synced pattern. (58916)
  • Disable selection checkbox if no bulk actions are eligible. (58950)

Block bindings

  • Fix Enter on disabled rich text. (59320)

Page Content Focus

  • Fix DisableNonPageContentBlocks behavior. (59297)

Design Tools

  • Cover block: Clear aspect ratio value when toggling full height. (59296)
  • Disable core shadow presets by default, let themes opt-in. (58766)

Layout

  • Fix MarginVisualizer and PaddingVisualizer. (59227)

Block Conversion

  • Preserve bindings metadata in block transforms. (59179)

Typography

  • Fluid typography: Pass theme.json settings to override merged theme data. (58362)

Data Layer

  • Ignore HTML Elements in ReduxDevTools. (57497)

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

Data Views

  • Conditionally display filter reset button. (59432)
  • Use aria-disabled on disabled checkboxes and add tooltips. (59364)

Design Tools

  • Shadows: Improve accessibility of shadows dropdown. (58828)

Block Editor

  • Fix canvas iframe button accessibility and silent tab stops. (59317)
  • Fix: Disable ‘Open save panel’ when there are no changes to save, while navigating with keyboard. (59543)

Block Library

  • List block: Allow tab to indent/outdent at selection start. (59199)

Custom Fields

  • Add visual indicator if a block is connected to block binding source. (59185)

Performance

Block Editor

  • Block Bindings: Do not use useSource hook conditionally. (59403)
  • Block Preview: Optimize default additional styles. (59556)

Experiments

Layout

  • Add Grid interactivity experiment to allow canvas interaction with grid layout. (59052)

Components

  • Tabs: Rename initialTabId prop to defaultTabId. (59035)

Font Library

  • Fix infinite loop when calling wp_get_upload_dir in a function that’s used to filter font_dir. (58839)

Documentation

  • Add hyperlink to media-upload documentation. (57170)
  • Add title and link for data-wp-each-child. (59505)
  • Adds import statement to code usage example. (59327)
  • Core Block Reference: Add allowedBlocks field. (59424)
  • Core Block Reference: Add ancestor status and refactor generation logic. (59390)
  • Create block interactivity: Fix minimum versions. (59375)
  • Docs: Fix typo in Tutorial. (59581)
  • Docs: Fix typo in blocks attributes guide. (59571)
  • Docs: Remove TOC, update formatting, and fix grammar in Interactivity API reference. (59406)
  • Fix @wordpress/interactivity module ID in documentation. (59419)
  • Fix: Multi line comment format on footnotes block. (59312)
  • Format PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher inline comments correctly. (59452)
  • Interactivity API Docs: Add async actions documentation. (59401)
  • Interactivity API Docs: Add initial version of getContext and getElement. (59293)
  • Interactivity API Docs: Add server functions documentation. (59373)
  • Interactivity API Docs: Add withScope description. (59542)
  • Interactivity API Docs: Fix code not closing. (59395)
  • Interactivity API Docs: Update image with WordPress Make Core source. (59281)
  • Interactivity API Docs: Merge Interactivity documentation to keep consistency with other packages. (59270)
  • Fix comma in block-registration.md. (57248)
  • Update Gutenberg versions in WP for 6.5. (59446)
  • theme.json schema: Fix styles.background definition. (59595)
  • theme.json schema: Update appearanceTools description. (59499)

Code Quality

  • Add @global to PHP doc comments. (59522 and 59287)
  • ESLint: Enable react/jsx-boolean-value for the Gutenberg codebase and fix. (59557)
  • Editor: Remove MoreDropdownMenuComponent. (59096)
  • Interface: Remove unused MoreMenuFeatureToggle component. (59095)
  • Remove old templates list code. (59558)
  • Replace Navigator isSmall prop. (59304)
  • Theme JSON Tests: Refactor base styles to a static variable. (58975)
  • Update: Simplify code and use capture events instead of pointer-events hack. (59565)
  • l10nL10n Localization, or the act of translating code into one's own language. Also see internationalization. Often written with an uppercase L so it is not confused with the capital letter i or the numeral 1. WordPress has a capable and dynamic group of polyglots who take WordPress to more than 70 different locales.: Unify terminology to screen size. (59456)

Block Library

  • BlockPopover: Remove __unstableCoverTarget and __unstableRefreshSize in favour of BlockPopoverCover. (59228)
  • Blocks: Refactor deletion warnings dialog. (58952)
  • Navigation Block: Remove unnecessary @param annotation. (59559)
  • Site Title Block: Rename and move edit file. (56357)

Font Library

  • Replace deprecated isSmall prop with size="small" prop. (59530)
  • Update font collection JSON schema to accommodate the changes made in wp_register_font_collection. (59314)
  • Use NavigatorProvider in Font Library Modal. (59036)

Components

  • CustomSelectControlV2: Remove legacy adapter layer. (59420)
  • Remove unused useLatestRef() hook. (59471)
  • SnackbarList, Snackbar: Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (59157)

Global Styles

  • Create a style preview component. (59498)
  • Global styles variations: Refactor directory structure. (59491)

Post Editor

  • Editor: Use hooks instead of HoCs in DocumentOutline. (59209)
  • EditorInitialization: Fix ESLint warnings for internal hooks. (59118)

Block Editor

  • getDirectInsertBlock: Remove ‘directInsert’ as a callback handler. (59172)
  • mergeBlocks: Remove unused MERGE_BLOCKS action. (59125)

Typography

  • Remove Gutenberg font face tests. (59402)

Site Editor

  • Global styles: Rename typography elements file. (59355)

Synced Patterns

  • Remove unneeded pattern overrides translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings. (59269)
  • Revert removal of Nav fallback auto embed. (59220)

Tools

Testing

  • Add a fixture for the wp/block pattern block current version with overrides. (59492)
  • E2E: Refactor setup method to support class inheritance in RequestUtils. (59362)
  • Migrate ‘autosave’ end-to-end tests to Playwright. (58171)
  • Playwright: Pass the payload to createPost in data instead of query params to avoid URI too long errors. (59463)
  • Restore patterns end-to-end tests. (59024)
  • Rich text: Run end-to-end tests in Firefox and Webkit. (56030)
  • Writing flow: Add multi select end-to-end test for firefox and webkit. (53513)

Build Tooling

  • Project: Update the ‘.git-blame-ignore-revs’ list. (59615)

Security

Custom Fields

  • Block Bindings: Don’t show protected fields that are bound to blocks. (59326)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@afercia @ajlende @alanjacobmathew @andrewserong @annezazu @arthur791004 @bacoords @c4rl0sbr4v0 @carolinan @chad1008 @creativecoder @DAreRodz @dcalhoun @desrosj @draganescu @ellatrix @fluiddot @getdave @glendaviesnz @huzaifaalmesbah @inc2734 @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @kevin940726 @madhusudhand @Mamaduka @matiasbenedetto @mattgrshaw @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @peterwilsoncc @pbking @ramonjd @retrofox @samueljseay @SantosGuillamot @scruffian @shail-mehta @SiobhyB @sirreal @sunil25393 @t-hamano @talldan @tellthemachines @TeresaGobble @torounit @tyxla @WunderBart @youknowriad

Props to @joen for visual assets and to @annezazu and @aaronrobertshaw for reviewing this post before publishing.

#block-editor, #core-editor, #gutenberg, #gutenberg-new

What’s new in Gutenberg 17.8? (28 February)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg.

What's new in Gutenberg 17.8

Gutenberg 17.8 has been released and is available for download!

With many contributors focused on the upcoming WordPress 6.5 release, this Gutenberg release prioritizes stability and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. Still, there are some new features worth noting below!

As a reminder, with WordPress 6.5 now in the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. phase, bug fixes from the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party are backported to be included in 6.5, as needed. But new features in Gutenberg 17.8 will not be included in WordPress 6.5.

Grid layout variation

Grid is a new layout variation for the Group blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that allows you to display the blocks within the group as a grid. There are two options for the grid layout. “Auto” generates the grid rows and columns automatically using a minimum width for each item. “Manual” allows specifying the exact number of columns.

Grid child sizing

A grid of 9 images in the post editor with the first image taking up 2 rows and 2 columns, while the other images all occupy 1 row and 1 column.
Using row and column span to resize a grid item

Grid children can be resized to a specific number of rows/columns by changing the “Column Span” and “Row Span” settings under Styles > Dimensions in the block inspector.

Bulk export your patterns

A grid of patterns with three that are selected. A menu is open under "Edit 3 Items" with the "Export as JSON" option highlighted.
Bulk export selected patterns

Multiple patterns can now be exported at the same time. After selecting the patterns you’d like to export in the Patterns section of the Site Editor, choose “Export as JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.” from the Bulk Edit menu to download a zip archive containing JSON export files for all of the selected patterns.

Browse and try alternative templates in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.

The Blog Home template is open in the editor, with the Template tab visible in the sidebar. A list of pattern previews shows under the heading "Transform Into:"
Browsing alternative templates in the sidebar

Templates and template parts now show similar, related templates in the sidebar. You can switch to an alternative template or template part in a single click!

Other Notable Highlights

  • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
    • Enter editing mode via Enter or Spacebar. (58795)
    • Font Library: display font collected with pagination instead of infinite scrolling. (58794)
  • Performance Improvements
    • Pattern Block: Batch replacing actions. (59075)
    • Block Editor: Move StopEditingAsBlocksOnOutsideSelect to Root. (58412)
  • The repository specific code of conduct has been removed in favor of using a shared code of conduct for all WordPress repositories. (59027)

Changelog

Full changelog available

Changelog

Features

  • Patterns: add bulk export patterns action. (58897)
  • Template editor/inspector: show and select related patterns. (55091)

Layout

  • Add toggle for grid types and stabilise Grid block variation. (59051 and 59116)
  • Add support for column and row span in grid children. (58539)

Enhancements

  • Patterns Page: Make categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. action button compact. (59203)
  • Block Editor: Use hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. instead of HoC in ‘SkipToSelectedBlock’. (59202)
  • Font Library: Adds the ability to use generic() in font family names. (59103 and 59037)
  • REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. Global Styles RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. Controller: Return single revision only when it matches the parent id. (59049)
  • CSSCSS Cascading Style Sheets. & Styling: Tweak link focus outline styles in HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. anchor and custom CSS. (59048)
  • Data Views: Make ‘All pages’ view label consistent with template and patterns. (59009)
  • Script Modules APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.: Script Modules add deregister option. (58830)
  • Block Hooks: Add help text to Plugins panel. (59371)

Custom Fields

  • Block Bindings: Lock editing of blocks by default. (58787)
  • Style engine: Rename at_rule to rules_groups and update test/docs. (58922)

Block Library

  • Gallery: Set the ‘defaultBlock’ setting for inner blocks. (59168)
  • Remove the navigation edit button because it leads to a useless screen. (59211)
  • Set the ‘defaultBlock’ setting for Columns & List blocks. (59196)
  • Update: Increase footnotes metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. priority and separate footnotes meta registration. (58882)

Site Editor

  • Editor: Hide template part and post content blocks in some site editor contexts. (58928)
  • Tweak save hub button. (58917 and 59200)

Components

  • CustomSelect: Adapt component for legacy props. (57902)
  • Use Element.scrollIntoView() instead of dom-scroll-into-view. (59085)

Global Styles

  • Global style changes: Refactor output for a more flexible UIUI User interface and grouping. (59055)
  • Style theme variations: Add property extraction and merge utils. (58803)

Bug Fixes

  • Distraction Free Mode: fix ui toggling bugs. (59061)
  • Layout: Refactor responsive logic for grid column spans. (59057)
  • Interactivity API: Only add proxies to plain objects inside the store. (59039)
  • Cover Block: Restore overflow: Clip rule to allow border radius again. (59388)

List View

  • Editor: Do not open list view by default on mobile. (59016)
  • Create Block: Add missing viewScriptModule field. (59140)
  • Ignore the ‘twentytwentyfour’ test theme dir created by wp-env. (59072)
  • useEntityBlockEditor: Update ‘content’ type check. (59058)

Block Library

  • Author, Author Bio, Author Name: Add a fallback for Author Archive Template. (55451)
  • Fix Spacer orientation when inside a block with default flex layout. (58921)
  • Fix WP 6.4/6.3 compat for navigation link variations. (59126)
  • Interactivity API: Fix server side rendering for Search block. (59029)
  • Navigation: Avoid using embedded record from fallback API. (59076)
  • Pagination Numbers: Add data-wp-key to pagination numbers if enhanced pagination is enabled. (58189)
  • Revert “Navigation: Refactor mobile overlay breakpoints to JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. (#57520)”. (59149)
  • Spacer block: Fix null label in tooltip when horizontal layout. (58909)

Data Views

  • DataViews: Add loading/no results message in grid view. (59002)
  • DataViews: Correctly display featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. that don’t have image sizes. (59111)
  • DataViews: Fix pages list back path. (59201)
  • DataViews: Fix patterns, templates and template parts pagination z-index. (58965)
  • DataViews: Fix storybook. (58842)
  • DataViews: Remove second reset filter button in filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. dialog. (58960)
  • Revert footer in pages list with DataViews. (59151)

Block Hooks

  • Fix in Navigation block. (59021)
  • Take controlled blocks into account for toggle state. (59367)

Block Editor

  • After Enter transform, skip other onEnter actions like splitting. (59064)
  • Close link preview if collapsed selection when creating link. (58896)
  • Editor: Limit spotlight mode to the editor. (58817)
  • Fix incorrect useAnchor positioning when switching from virtual to rich text elements. (58900)
  • Inserter: Don’t select the closest block with ‘disabled’ editing mode. (58971)
  • Inserter: Fix title condition for media tab previews. (58993)

Site Editor

  • Fix navigation on mobile web. (59014)
  • Fix: Don’t render the Transform Into panel if there are no patterns. (59217)
  • Fix: Logical error in filterPatterns on template-panel/hooks.js. (59218)
  • Make command palette string transatables. (59133)
  • Remove left margin on Status help text. (58775)

Patterns

  • Allow editing of image block alt and title attributes in content only mode. (58998)
  • Avoid showing block removal warning when deleting a pattern instance that has overrides. (59044)
  • Block editor: Pass patterns selector as setting. (58661)
  • Fix pattern categories on import. (58926)
  • Site editor: Fix start patterns store selector. (58813)

Global Styles

  • Fix console error in block preview. (59112)
  • Revert “Use all the settings origins for a block that consumes paths with merge #55219” (58951 and 59101)
  • Shadows: Don’t assume that coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. provides default shadows. (58973)

Font Library

  • Fixes installed font families not rendering in the editor or frontend. (59019)
  • Font Library: Add missing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. functions. (58104)
  • Show error message when no fonts found to install. (58914)
  • Font Library: Create post types on init hook. (59333)

Synced Patterns

  • Fix missing source for binding attributes. (59194)
  • Fix resetting individual blocks to empty optional values for Pattern Overrides. (59170)
  • Fix upload button on overridden empty image block in patterns. (59169)

Design Tools

  • Background image support: Fix issue with background position keyboard entry. (59050)
  • Cover block: Clear the min height field when aspect ratio is set. (59191)
  • Elements: Fix block instance element styles for links applying to buttons. (59114)

Components

  • Modal: Add box-sizing reset style. (58905)
  • ToolbarButton: Fix text centering for short labels. (59117)
  • Upgrade Floating UI packages, fix nested iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. positioning bug. (58932)

Post Editor

  • Editor: Fix ‘useHideBlocksFromInserter’ hook filename. (59150)
  • Fix layout for non viewable post types. (58962)

Rich Text

  • Fix link paste for internal paste. (59063)
  • Revert “Rich text: Pad multiple spaces through en/em replacement”. (58792)

Custom Fields

  • Block Bindings: Add block context needed for bindings in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (58554)
  • Block Bindings: Fix disable bindings editing when source is undefined. (58961)

Accessibility

  • Enter editing mode via Enter or Spacebar. (58795)
  • Block Bindings > Image Block:Mark connected controls as ‘readonly’. (59059)
  • Details Block: Try double enter to escape inner blocks. (58903)
  • Font Library: Replace infinite scroll by pagination. (58794)
  • Global Styles: Remove menubar role and improve complementary area headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. semantics. (58740)

Block Editor

  • Block Mover: Unify visual separator when show button label is on. (59158)
  • Make the custom CSS validation error message accessible. (56690)
  • Restore default border and focus style on image URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input field. (58505)

Performance

  • Pattern Block: Batch replacing actions. (59075)
  • Block Editor: Move StopEditingAsBlocksOnOutsideSelect to Root. (58412)

Documentation

  • Add contributing guidlines around Component versioning. (58789)
  • Clarify the performance reference commit and how to pick it. (58927)
  • DataViews: Update documentation. (58847)
  • Docs: Clarify the status of the wp-block-styles theme support, and its intent. (58915)
  • Fix move interactivity schema to supports property instead of selectors property. (59166)
  • Storybook: Show badges in sidebar. (58518)
  • Theme docs: Update appearance-tools documentation to reflect opt-in for backgroundSize and aspectRatio. (59165)
  • Update richtext.md. (59089)

Interactivity API

  • Interactivity API: Fix WP version, update new store documentation. (59107)
  • Interactivity API: Update documentation guide with new wp-interactivity directive implementation. (59018)
  • Add interactivity property to block supports reference documentation. (59152)

Schemas

  • Block JSON schema: Add viewScriptModule field. (59060)
  • Block JSON schema: Update shadow definition. (58910)
  • JSON schema: Update schema for background support. (59127)

Code Quality

  • Create Block: Remove deprecated viewModule field. (59198)
  • Editor: Remove the ‘all’ rendering mode. (58935)
  • Editor: Unify the editor commands between post and site editors. (59005)
  • Relocate ‘ErrorBoundary’ component unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. folders. (59031)
  • Remove obsolete wp-env configuration from package.json (#58877). (58899)
  • Design Tools > Elements: Make editor selector match theme.json and frontend. (59167)
  • Global Styles: Update sprintf calls using _n. (59160)
  • Block API: Revert “Block Hooks: Set ignoredHookedBlocks metada attr upon insertion”. (58969)
  • Editor > Rich Text: Remove inline toolbar preference. (58945)
  • Style Variations: Remove preferred style variations legacy support. (58930)
  • REST API > Template Revisions: Move from experimental to compat/6.4. (58920)

Block Editor

  • Block-editor: Auto-register block commands. (59079)
  • BlockSettingsMenu: Combine ‘block-editor’ store selectors. (59153)
  • Clean up link control CSS. (58934)
  • HeadingLevelDropdown: Remove unnecessary isPressed prop. (56636)
  • Move ‘ParentSelectorMenuItem’ into a separate file. (59146)
  • Remove ‘BlockSettingsMenu’ styles. (59147)

Components

  • Add Higher Order Function to ignore Input Method Editor (IME) keydowns. (59081)
  • Add lint rules for theme color CSS var usage. (59022)
  • ColorPicker: Style without accessing InputControl internals. (59069)
  • CustomSelectControl (v1 & v2): Fix errors in unit test setup. (59038)
  • CustomSelectControl: Hard deprecate constrained width. (58974)

Post Editor

  • DocumentBar: Fix browser warning error. (59193)
  • DocumentBar: Simplify component, use framer for animation. (58656)
  • Editor: Remove unused selector value from ‘PostTitle’. (59204)
  • Editor: Unify Mode Switcher component between post and site editor. (59100)

Interactivity API

  • Refactor to use string instead of an object on wp-data-interactive. (59034)
  • Remove data-wp-interactive object for core/router. (59030)
  • Use data_wp_context helper in core blocks and remove data-wp-interactive object. (58943)

Site Editor

  • Add stylelint rule to prevent theme CSS vars outside of wp-components. (59020)
  • Don’t memoize the canvas container title. (59000)
  • Remove old patterns list code and styles. (58966)

Tools

  • Remove reference to CODE_OF_CONDUCT.md in documentation. (59206)
  • Remove repository specific Code of Conduct. (59027)
  • env: Fix mariadb version to LTS. (59237)

Testing

  • Components: Add sleep() before all Tab() to fix flaky tests. (59012)
  • Components: Try fixing some flaky Composite and Tabs tests. (58968)
  • Migrate change-detection to Playwright. (58767)
  • Tabs: Fix flaky unit tests. (58629)
  • Update test environment default theme versions to latest. (58955)
  • Performance tests: Make site editor performance test backwards compatible. (59266)
  • Performance tests: Update selectors in site editor pattern loading tests. (59259)
  • Fix failing Dropdown Menu e2e tests. (59356)

Build Tooling

  • Add test:e2e:playwright:debug command to debug Playwright tests. (58808)
  • Updating Storybook to v7.6.15 (latest). (59074)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @alexstine @andrewhayward @andrewserong @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @creativecoder @DAreRodz @derekblank @desrosj @draganescu @ellatrix @fabiankaegy @gaambo @glendaviesnz @jameskoster @janboddez @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @kevin940726 @Mamaduka @MarieComet @matiasbenedetto @mirka @noisysocks @ntsekouras @oandregal @ockham @pbking @ramonjd @SantosGuillamot @scruffian @shreyash3087 @t-hamano @talldan @tellthemachines @tyxla @youknowriad

Props to @saxonafletcher for assisting with visual assets and to @mikachan and @jorbin for reviewing this post before publishing.

#block-editor, #core-editor, #gutenberg, #gutenberg-new

Summary of Hallway Hangout on overlapping problems in the Site Editor

This is a summary of a Hallway Hangout that was first announced on Make Core. The aim was to have a shared space where we could talk synchronously about overlapping problems facing the site editing experience.

Video Recording:

Notes:

Notes are somewhat provided by some AI tooling but, unfortunately, wasn’t quite on point enough for me to use entirely. If anything is off or missing, please let me know.

The hallway hangout focused on discussing issues and problems users experience with the Site Editor, including changing something across an entire site or just for one blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., pervasive inconsistencies in user interfaces, understanding inherited values and options, and determining what can and cannot be edited. This came out of a public blog post on the topic.

We discussed the need to improve documentation and educate users to help address these overlapping problems. We chatted about the what’s underneath the desire to not ship any new features and that some of these areas of problems require new features to be fixed. We discussed how some GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ features are released in stages across various releases ultimately paving the way for greater work to be done, like Block HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. released in 6.4 and expanded upon for 6.5. Another example that was mentioned was content-only locking, which was added into a release without a UIUI User interface as it was a foundational part of a larger roadmap (overriding content in patterns needed this work for example). Part of what needs to be done here to is to better communicating how new features connect to and build upon each other. In many cases, polishing these experiences and reducing confusion has been a major focus of many of the last releases.

We discussed how it feels like we’re caught in between right now and there are different UI experiences floating around between the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., site editor, and then page builders building on top. In a perfect world, the page builders use what’s being built in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and the experience of using blocks feels more natural, whether just in the block editor or in the site editor (instead of those feeling like different experiences). It’s also tricky to come up with solutions that don’t just surface the complexity without providing clarity too. It’s both the most rewarding and most difficult to cover the wide range of use cases WordPress seeks to cover.

We chatted about using the experimental flag in Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to allow incremental exploration before features are merged to core for some features. Tensions exist between accumulating features quickly in Gutenberg vs bottleneck of merging to core releases. Folks want to see more efforts made to document feature decisions and UI changes at the same level as core tickets, with complete descriptions. Getting feedback into UI decisions as much as possible will help with this too as we should make changes based on feedback and design direction combined. It would be great if more hosts ran the Gutenberg plugin directly and gave feedback to help with this. At this point, the #outreach channel was plugged as was the new outreach group in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ to pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” folks who have opted in to provide feedback.

We discussed differentiating user capabilities for blocks and experiences based on user roles and the context of what they are trying to do on a site. More work needs to be done to explore and improve user capabilities. It was suggested that having more Core team members build real sites could help surface important issues and help prioritize work. Right now, we do see this happening with the Create Block Theme allowing folks to build block themes directly with the Site Editor and surface gaps. The same is true of each time a default theme is made and the gaps that are surfaced and fixed as a result. As much as possible, building real sites or working with folks who do has always been and remains critical.

Feedback from folks in the agency space centered around how agencies can’t ensure brand standards due to inability to lock down with GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. when content can change in the editor. It’s important to find ways to reassure clients that brand standards can still be ensured with new workflows. The same problem exists on the broader WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ site so there are big opportunities for learnings and feedback. In some cases, folks tried the Site Editor last year and need to be invited back in with the latest & greatest to try once more with additional plugins to fill the gaps for now. In other cases, folks are successfully using it. Opened this developer blog idea after the fact to have agencies start sharing how they’ve successfully used the Site Editor process wise.

A new “overlapping problem” that @annezazu will add to the post is around the swirling experience of gradual adoption, extension, and curating of the editing experience. How do we make it as seamless as possible and have it make sense to folks? Expect the post to be updated with more thoughts there.

Towards the end, we also discussed issues everyday users face with site editing, the need for better onboarding, and a call to join more WordPress meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. events. The “usual suspects” came up particularly around editing the homepage, the pain of the template hierarchy being exposed, missing settings in the Site Editor, etc. We also discussed an unfortunate experience someone had in giving feedback but feeling very dismissed. This is not something any of us want anyone to feel and it’s important we engage constructively. We also discussed how the majority still use classic themes and the importance of respecting both in discussions.

To close, we talked about how these are the toughest problems to solve! They are not easy by design and there’s a lot of appreciation for everyone who is willing to engage in these topics. We’re very much listening and I wouldn’t have been able to write the post to begin with if we weren’t. The biggest next step is to hold an additional hallway hangout in the future around one of these areas with a large design presence to help present solutions, discuss potential drawbacks, and see how we can move forward.

#gutenberg, #hallway-hangout, #outreach, #site-editor

Hallway Hangout: Let’s chat about overlapping problems in the Site Editor

To bring a broader discussion into a higher bandwidth medium, in this session, we’ll talk through some overlapping problems in the Site Editor that are both known and complex to solve.

How to join

If you’re interested in joining, the Hallway Hangout will happen on  2024-02-27 17:00 . A Zoom link will be shared in the core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel before starting and all are welcome to join, whether to listen or participate, for as long or as little as you’d like. This will be recorded and recapped.

Agenda

At a high level, expect this to be an open forum to discuss in more depth some of the high level problems facing the current experience in the Site Editor, including discussions about current in-progress work and an examination of what makes these problems complex to solve. This includes the following aspects of the current experience:

  • Changing something across your entire site or just for one blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..
  • Seeing where items are used across the experience.
  • Understanding inherited values and options.
  • Understanding what you can and can’t edit.

As a reminder, hallway hangouts are meant to be casual and collaborative so come prepared with a kind, curious mind. Depending on how large the session is, we may not get to all questions live on the call but we can always include follow up in the recap.

#gutenberg, #hallway-hangout, #site-editor

What’s new in Gutenberg 17.7? (14th February)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg.

Gutenberg 17.7 has been released and is available for download!

This cycle is packed with enhancements and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes ahead of the next WordPress 6.5 release. Multiple performance improvements, refinement of the Link Control UIUI User interface, Shadow support for the columns, and image blocks are good examples of what this new Gutenberg release is bringing.

Table of contents

Shadow support for more blocks

The effects panel is now available for the Columns, Column, and Image blocks, allowing users to add shadow effects to them. 

Now, users can effortlessly apply shadow effects to these blocks, building upon the functionality previously exclusive to the Button blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. This opens up new creative possibilities, empowering designers to improve their layouts directly from the Editor. (57982)

Data views enhancements 

This release marks the continuation of the Dataviews project, which will become a part of WordPress 6.5 for managing patterns and templates. 

The release has introduced the ability to select multiple items on the grid view and execute bulk actions such as reverting user templates or deleting user-created patterns and templates. Together with filters, it makes it possible to quickly revert all user template changes or delete all user-created patterns. 

Additionally, a new primary filter API has been included, allowing main filters to be visible at all times in the UI. This makes it easy to switch between viewing and managing sync or unsync patterns.

This release includes a few enhancements to the Link Control UI. A notable addition to the interface allows the user to insert a new block instead of a link from the context of the Navigation block. Combined with the fixes from #55551, the Navigation block now will work to allow the insertion of third-party blocks, opening a new range of possibilities (57756, 57986, 58744)

Making Font Library ready for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

The Font Library had some important changes under the hood to prepare for its journey into WordPress Core, including security improvements and standardizing some of the code structure. Some important (and ongoing) accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements came to the Font Library Management UI in the Site Editor.

Other Notable Highlights

  • A proposal has been put forward to include Core blocks in the directory developed within the Gutenberg repository for convenience. Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patc