Hallway Hangout: Recap of working session on consolidating navigation modes

This is a summary of a Hallway Hangout that was wrangled in the #accessibility channel after a prior hallway hangout on improving 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) in the Site Editor and took the new form of a concrete working session to address a specific problem. It was first announced on October 1st and was open to all.

Attendees:

@alexstine @joedolson @richtabor @annezazu @jerryj @afercia @elblakeo31 @peteringersoll

Video Recording:

Notes/Links:

After some quick intros, we dove into talking about the problem before exploring possible next steps, approaches, and current issues. 

Related issues:

Difference between modes

To kick off, Joe asked Alex to talk through the current pain points and differences between modes. As Alex said, navigation mode is a hackedhacked together feature. The biggest problem we have, the navigation mode is a dynamically updating button. Everytime you press your arrow key or tab key when you’re in navigation mode, it dynamically re-renders. This is a challenging problem to handle with screen readers because it’ll ignore this. For Windows, there’s also a longstanding issue where the arrow keys don’t actually send the keyboard events through the browser so tab is the only viable key. Conversely, List View is much simpler in the way you can navigate with keys and it’s wrapped in a navigation role. You are able to expand rows, have control over what you’re looking at, etc. Another current problem with navigation mode, it’s not entirely clear when there are inner blocks. Alex started to work on this but stopped to focus on list view. 

What are the consequences if we stripped out navigation mode and used list view as the primary way of browsing through blocks?

To date, there has been no modal, tips, etc for keyboard users in the editor. People who are used to this would have no idea it has changed and we need a way to communicate that change, perhaps using a similar approach to the change in template parts to the patterns section. 

Andrea, who helped implement navigation mode, offered some historical context. He shared that if we are going to use navigation mode, we’re going to reintroduce a major issue that existed before introducing the two modes. Imagine that a post contains dozens of blocks. If you want to navigate these blocks in the post content area with the tab key, you are going to have to go through all of the dozens of blocks including the interface of each 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. (dozens of tab stops). Nav mode was originally meant to reduce the number of tab stops when navigating through the blocks in a way that each block was only one tab stop rather than multiple then pressing enter gives the ability to switch the block to edit mode where you can navigate inside the block. This was the original implementation and it made sense when there were no inner blocks. 

Joe noted that List View works the same way where you can go block to block. When you use the tab key you are going through all of these elements. However, there are still a lot fewer elements than going through the blocks themselves. We should be willing to compromise to some degree. Arrow key navigation in List View also does work. It’s 100% accessibility and there are a total of three tabbable elements in list view: tab panel, close button, and list view area itself. 

Alex would like to find a better way to manage focus between block editor and block 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. but that’s a broader discussion. Jerry and Alex have worked on this but it’s a long battle. 

Trying List View + Focus Mode for container blocks as an experiment

Anne pitched trying getting rid of navigation mode and use list view + focus mode as an experiment 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/. We could then do a call for testing and get a sense of what the experience might be like more practically. Folks were very much onboard with trying this out, especially since in the long run this would reduce the number of mechanisms to maintain. 

The question of how many people are used to using navigation mode came up though, especially since the feedback folks are worried about is more about non screen reader users. Anne is going to try to get some initial data from WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/.

Mobile concerns

Rich chimed in that the current primary use for that view is on mobile devices as this makes it easier to select child first nested blocks so it’s easy to tap onto. We never really got to the bottom of this on the call as we all pulled out our phones to investigate and couldn’t figure out how to even evoke the mode. 

Locked blocks and inert

We discussed how to explain disabled blocks in List View which relates to a broader discussion on alternatives to inert. There’s no good way to explain to a blind user what a template looks like when editing a smaller portion like a page. Anne showed an option to toggle on/off a template preview when editing a page in the Site Editor and we discussed a few ways we could enhance that feature to save it as a preference/have it be persistent in some way. 

Focus mode concerns

We discussed Focus Mode and adding it to Container Blocks. A big piece to figure out is how the back button works and ensuring it returns you to where you’d expect in the Site Editor experience.

Gutenberg as a framework concerns

Alex brought up an excellent point around Gutenberg being used as a framework, like with Blocks Everywhere, and how navigation mode is built into it as a package. We need to consider this in removing the navigation mode and it might be that it remains for third party usage. 

Next steps:

@annezazu will follow up on the following: 

  • Open issue around “show template” rather than “template preview”. 
  • Open issue around persistence of “template preview” option and make it a user setting. 
  • Try to get data around usage for navigation mode from WordPress.com 
  • Open issue around where back button goes after focus mode and returning you exactly to edit button ideally. 
  • Add recap of this discussion to the overall discussion issues, including noting how this might impact gutenberg as a framework. 

Known issues:

Finally, @annezazu will create an issue to pitch this as an experiment to try in the Gutenberg repo as a next step. 

#accessibility, #core-editor-3, #gutenberg, #hallwayhangout

What’s new in Gutenberg 17.0? (9 November)

“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.0 has been released and is available for download!

WordPress 6.4 “Shirley” became available earlier this week. Despite this significant milestone, 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 continues to iterate with a new version: Gutenberg 17.0. This release focuses on maintenance with improvements in performance and 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), along with a few new features.

  1. Command Palette: improved contextual suggestions when editing patterns
  2. DropdownMenu: a glimpse into the next-gen WordPress components
  3. LinkControl visual cues
  4. Iterating on Accessibility and Performance
  5. Changelog
  6. First-time contributors
  7. Full contributor list

Command Palette: improved contextual suggestions when editing patterns

The popular Command Palette keeps getting better! Since this release, editing patterns inside the site editor will suggest pattern-related commands that adjust better to the context, such as renaming and duplicating the pattern. Small quality-of-life changes like this are what make the Command Palette a joy to use, and future iterations will surely bring us many more improvements in this direction!

As part of the ongoing efforts to refine the components that power the 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, Gutenberg 17.0 brings a new, alternative implementation of the DropdownMenu component based on the Ariakit open-source library. This implementation, although still experimental, offers a good glimpse at what the future of WordPress components holds.

As a reminder, you can check and play with this and other components in the Components Storybook!

Additional visual cues for LinkControl

When searching through the LinkControl, new Block and Home icons are added next to results related to the home and front pages, respectively. These visual cues intend to make finding what you’re looking for easier.

Iterating on Accessibility and Performance

As usual, this Gutenberg release provides a few iterative performance and accessibility improvements.

On the accessibility side of things, it’s worth noting the Autocomplete Voiceover now announces suggestions, among other a11yAccessibility 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) enhancements to the Navigation block and 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. block. Regarding performance, some controls like duotone, layout, and alignment have been optimized.

Changelog

Full changelog available here

Enhancements

  • Add blogblog (versus network, site) icon to the blog home page in LinkControl search results. (55610)
  • Add home icon to the front page in LinkControl results. (55606)

Block Theme Preview

  • Block Theme Preview: Display loading state when activating. (55658)

Block Toolbar

  • Improve toolbar button focus visual. (55523)

Components

  • Add new ariakit-based DropdownMenu component. (54939)
  • Update InputControl and SelectControl default heights. (55490)
  • Update ariakit to version 0.3.5. (55365)

Block Editor

  • Adjust the padding of the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. item to make it visually balanced. (55598)

Patterns

  • Suggest commands when editing pattern in site editor. (55332)

Bug Fixes

  • Fix autocomplete trigger character detection. (55301)
  • Fix typo in FontCollection. (55439)

Block Editor

  • Block Editor: Avoid rendering empty Slot for block alignments. (55689)
  • Block Example: Avoid a crash when block is not registered. (55686)

Command Palette

  • Command Palette: Fix a crash when transform to a block without icon. (55676)
  • Fix: LinkControl on site editor does not show font page and post page indication. (55694)
  • Fix: LinkControl on widgets editor does not show font page and post page indication. (55732)

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: Update page title when using enhanced pagination in query loop. (55446)

Block Library

  • Fix: Post terms block: Missing options for prefix and suffix when the…. (55726)
  • Ensure Term Description block is registered in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (55669)
  • Fix #55679 missing space in the string. (55682)
  • Image block: Wrap images with hrefs in an A tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). (55470)
  • Image: Improve focus management in lightbox. (55428)
  • Image: Update default fullscreen icon for lightbox trigger. (55463)
  • Navigation block: Remove browser default padding from the two submenu buttons. (50943)
  • Query Loop: Disallow “enhanced pagination” with core blocks that may contain third-party blocks. (55539)
  • Query block enhanced pagination: Detect inner plugin blocks during render. (55714)
  • Query: Require queryId for enhanced pagination to prevent PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices. (55720)
  • Update label for lightbox editor UIUI User interface. (55724)
  • [Block] File: Fix embedded PDF files in Safari. (55667)

Patterns

  • Fix 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. with authors and contributors not seeing user pattern categories. (55553)
  • Fix pattern category renaming causing potential duplicate categories. (55607)

Post Editor

  • Edit Post: Fix revision button misalignment. (55659)
  • Preferences modal: Fix the position of sticky heading when blocks are hidden. (55456)
  • Fix: Add __next40pxDefaultSize to author select in PostAuthor. (55597)

Site Editor

  • Fix the ‘Slug’ display for draft pages. (55774)

Data Views

  • List all users in author 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.. (55723)
  • Don’t register dataviews postype and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. if experiment is disabled. (55743)

Design Tools

  • Remove default dimensions controls from core/avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.. (55596)

Interactivity API

  • Fix server processing of an empty data-wp-context directive. (55482)
  • Make duotone support compatible with enhanced pagination. (55415)
  • Make layout support compatible with enhanced pagination. (55416)

Global Styles

  • Fix duotone not showing in site editor style block level styles. (55361)

Accessibility

Block Library

  • Navigation block: Change aria-haspopup to dialog. (55466)

Components

  • Autocomplete: Fix Voiceover not announcing suggestions. (54902)

Interactivity API

  • Query Loop: Update modal role and focus first element. (54507)

Performance

  • Add useSettings hook for reading multiple settings at once. (55337)
  • Block Editor: Optimize ‘Layout’ controls. (55754)
  • Block Editor: Optimize ‘anchor’ inspector controls. (55721)
  • Block Editor: Optimize ‘duotone’ controls. (55753)
  • Block Editor: Optimize alignment toolbar controls. (55692)
  • Start logging site editor metrics in codevitals. (55759)
  • useAvailableAlignments: Avoid useSelect subscription when alignments array is empty. (55449)

Experiments

Data Views

  • 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. Data View: Use trash icon. (55771)
  • Add quick actions. (55488)
  • Update icons and design tweaks. (55391)
  • Add ability to persist dataviews on the database. (55465)
  • Extract search from filters. (55722)
  • Limit users to those who have published pages. (55455)
  • List all pages, not only those with publish and draft statuses. (55476)
  • Add: Default readonly views to dataviews. (55740)
  • Add: Possibility to tree shake DataViewsProvider. (55641)

Form block

  • Blocks: Capitalize title and end the description with a period. (55728)
  • Update copy. (55468)
  • Allow using groups and columns inside the experimental form block. (55758)

Collaborative Editing

  • Remove dangling comma causing PHPUnit failures. (55494)
  • [Try] HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. based PHP signaling server for colaborative editing. (53922)

Documentation

  • Adds a few grammar fixes to block-registration documentation. (55663)
  • 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 heading/button key to color definition. (55675)
  • DataViews: Document data and filters. (55504)
  • Docs: Fix some typos. (55654)
  • Docs: 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. Block editor handbook – create-block before wp-scripts. (55534)
  • Fix: Typos inside /docs. (55472)
  • Scripts: Fix typo in readme. (55531)
  • Update links to point to getting started guides. (55479)
  • docs: Fix end-to-end test documentation formatting. (55631)

Code Quality

  • Use PostCSS + PostCSS plugins for style transformation. (49521)
  • CS: Remove redundant ignore annotations. (55615)
  • Chore: Fix: Potential access to properties of undefined object. (55697)
  • Fix: Add missing defaultStatuses on PagePages. (55761)
  • Resizeable box (for resizing cover block) should use after block popover slot. (55784)
  • Update: Code quality: Use for each instead of map. (55798)
  • Update: Remove path awareness from data-views specific code. (55695)
  • Update: Remove useless self assignment. (55696)
  • 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. updates from Core during the 6.4 release cycle. (55703)

Data Views

  • DataViews: Iterate on filter’s API. (55440)
  • DataViews: Pass search filter as global, unattached from fields. (55475)
  • DataViews: Remove string from pages sidebar. (55510)
  • Rename TextFilter to Search. (55731)
  • Remove unused file dataview context. (55775)

Block Library

  • Pattern: Unlock the private hook outside the component. (55792)

Patterns

  • Change pattern category taxonomy public param to false. (55748)

Tools

  • Replace ‘npx’ with ‘node’ on test-playwright.js file’. (55616)
  • wp-env: Fix errors which prevent it from working without internet. (53547)
  • [create-block] Add ABSPATH check. (55533)

Testing

  • E2E: Revert typing delay on the autocomplete mentions test. (55132)
  • Fix flaky ‘Switch to Draft’ action in Preview end-to-end tests. (55772)
  • Migrate ‘Site Title block’ end-to-end tests to Playwright. (55704)
  • Migrate ‘block context’ end-to-end tests to Playwright. (55793)
  • Performance tests: Fix canvas locator timeout. (55441)
  • Scripts: Fix default Playwright configuration. (55453)

First-time contributors

The following PRs were merged by first time contributors:

Full contributor list

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @alexstine @aristath @artemiomorales @arthur791004 @aurooba @c4rl0sbr4v0 @carolinan @ciampo @DAreRodz @dcalhoun @derekblank @dmsnell @fluiddot @garibiza @geriux @glendaviesnz @iamsadi22 @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @KevinBatdorf @luisherranz @MaggieCabrera @Mamaduka @noahtallen @ntsekouras @oandregal @parikshit-adhikari @peterwilsoncc @ramonjd @richtabor @SergeyBiryukov @SiobhyB @Soean @strarsis @swissspidy @t-hamano @talldan @WunderBart @youknowriad


Props to @saxonafletcher for designing assets for this post and @richtabor for proofreading.

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

What’s new in Gutenberg 16.9? (25 October)

“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 Site Editor project (formerly called Full Site Editing).

Decorative image that reads "What's new in Gutenberg 16.9?"

Gutenberg 16.9 has been released and is available for download!

The latest release includes several new enhancements, loads 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, and continued work on Phase 3 features.

Rename (almost) all blocks from the editor

After a successful implementation of renaming Group blocks in Gutenberg 16.7 and feedback that the feature should be opened up, version 16.9 lets you rename nearly every block. A bonus for this feature is that theme authors can use this to label blocks in their theme templates and patterns.

Two panels shown next to each other. The first is a "Rename" field for customizing a block's name. The second is the "List View" in the block editor with the block highlighted to be renamed.

There are a few blocks that cannot be renamed:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigation

Duplicate and rename patterns and more

Pattern management is getting a lot of nice feature additions. For individual patterns, you can now rename or duplicate them:

A block pattern showing a demo quotation. Above it is a dropdown menu with Rename, Duplicate, Export as JSON, and Delete options.

You can also rename or delete pattern categories directly from the user interface:

Patterns shown in the Site Editor in WordPress. At the top of the menu, a dropdown shows with Rename and Delete options for managing the current pattern category.

Gutenberg 16.9 also introduces two new media categories: Audio and Video. This should help better organize patterns by media type.

Other Notable Highlights

  • The Dimensions design tool control’s layout is much improved (55060).
  • The Template Part 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. now falls back to the current theme is there is no theme attribute provided (55217).
  • ​​A ton of CSSCSS Cascading Style Sheets. Level 4 viewport-relative units are now supported for more flexible control over various sizing options (54415).
  • getEntityRecords() calls now return pagination totals in the returned data (55164).

Changelog

Features

Create Block

  • Introduce the transformer property. (55423)

Data Views

  • Enable users to sort by date. (55388)

Block Library

  • Enable Block Renaming support for (almost) all blocks. (54426)

Enhancements

Command 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.

  • Add block-specific commands as contextual suggestions [#53539]. (53974)

Components

  • Add Tabs (a composable TabPanel v2). (53960)
  • Add type="button" to vanilla <button> elements. (55125)
  • ConfirmDialog: Ts 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. storybook. (54954)
  • GradientPicker: Remove padding and disable overflow of color picker popovers. (55265)
  • Migrate Composite component from reakit to ariakit. (54225)
  • Remove margins from Notice component. (54800)

Patterns

  • Add duplicate pattern command. (55292)
  • Add rename command. (55188)
  • Add rename/delete options for pattern categories in site editor. (55035)
  • Register new media related categories. (55236)
  • Use modal for pattern duplication flow as workaround for changing sync status. (54764)

Block Editor

  • Migrating DownloadableBlocksList to use updated Composite implementation. (55272)

Block Library

  • Improve DimensionsTool control layout. (55060)
  • Template Part block: Fall back to current theme if no theme attribute is given. (55217)

Post Editor

  • Editor: Introduce PluginPostExcerpt slot. (55200)
  • 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 HoCs in PostExcerpt. (55189)

Design Tools

  • Allow using CSS level 4 viewport-relative units. (54415)
  • Add changelog entry for #54415. (55201)
  • Remove 16:10 from 10:16 options from AspectRatioDropdown. (55053)

Data Views

  • Add drop down with action in headers. (55293)

Icons

  • Update fullscreen icon. (55021)

Format Library

  • Link format: Auto link pasted urls. (55195)

Site Editor

  • Migrating AddCustomTemplateModalContent to use updated Composite implementation. (55256)

Private APIs

  • Update consent string for using private APIs. (55182)

New APIs

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Retrieve the pagination totals in the getEntityRecords calls. (55164)

Bug Fixes

Block Library

  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when an image with lightbox is deleted. (55370)
  • Cover Block: Check for previously uploaded media before setting the dimRatio. (55422)
  • Cover: Fix media type check in the onSelectMedia hook. (55168)
  • Fix Block Rename UIUI User interface perf 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.. (55250)
  • Fix PHP notice when an image with lightbox is deleted in the behaviors file. (55385)
  • Fix: Wrong condition on cover block dimRatioToClass. (55356)
  • Focus submenu button when clicked. (55198)
  • Hide footnotes block from the inserter. (55058)
  • Image: Fix Lightbox display bug in Classic Themes. (54837)
  • Latest Posts: Add screen reader title text to Read more links and use alternative to excerpt_more 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.. (55029)
  • Latest Posts: Sync updates from Core (6.4). (55181)
  • List View: Change the aria-description attribute to aria-describedby. (55264)
  • 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. block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region. (55309)

Site Editor

  • Alternative: Fix template part area listing when a template has no edits. (55115)
  • Do not display ‘trashed’ navigation menus in 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.. (55072)
  • Pages list: Set status as no sortable. (55210)
  • Remove duplicate template areas from the site view sidebar. (54942)
  • Site Editor Styles Screen: Fix dancing styles previews. (55183)
  • Use accessorFn instead of cell to render status. (55196)

Interactivity API

  • Add aria-label attribute to navigation block only when it is open. (54816)
  • Fix server processing of wp-context getting out of sync. (55436)
  • Image: Disable lightbox editor UI for linked images. (55141)
  • Image: Reimplement lightbox trigger as a minimal button in corner of image. (55212)
  • Image: Stop crashing with Lightbox on image blocks without an image. (55269)
  • Remove the lightbox filter and view file when the lightbox setting is disabled. (55120)
  • Reset “Expand on click” image styles when window is resized. (55077)

Components

  • Changing Button component toggled style selector. (55065)
  • ColorPicker: Improve UXUX User experience of dragging the handle when in popover on top of the editor. (55149)
  • Colors: Fix color button border radii. (55207)
  • 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. / block drag chip: Fix positioning when dragging over an iframe. (55150)
  • ProgressBar: Use text color to ensure enough contrast against background. (55285)
  • Toolbar: Add unstyled variant. (55139)
  • useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered. (55288)

Block Editor

  • LinkControl: Prevent horizontally long preview image from being stretched vertically. (55156)
  • List: Fix forward merging of nested list. (55121)
  • Paste: Fix MS Word list paste. (55127)
  • Writing flow: Fix selecting synced pattern. (55221)
  • Writing flow: Preserve block when merging into empty paragraph. (55134)
  • url: Update filterURLForDisplay to include all image, video, and audio file types. (54920)
  • Block Styles: Display default style label correctly in the block sidebar. (55008)
  • useBlockSettings: Add missing useMemo dependencies. (55204)

Data Views

  • Add linked title fallback. (55248)
  • PagePages: Fix unintended object mutation inside component. (55314)
  • Fix pagination. (55387)
  • Make date 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. translatable. (55445)

Patterns

  • Add categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector to pattern creation modal. (55024)
  • Fix scrollbars on pattern transforms. (55069)

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. API

  • Fix: Directive processor failing on updated HTML API. (55404)

Widgets Editor

  • Only suppress adminadmin (and super admin) notices when 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/. is enabled. (55403)

Data Layer

  • Fix combineReducers() types. (55321)
  • Get the page count as derived data. (55316)

Layout

  • Add selector as id to layout style overrides. (55291)

History

  • Try: Only render LastRevision component if 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 is active. (55253)

Block Directory

  • Fix filtering for downloadable blocks in inserter. (55243)

Global Styles

  • Use all the settings origins for a block that consumes paths with merge. (55219)

Post Editor

  • Fix wrong notification message shown when an entity is moved to 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.. (55155)

Typography

  • Font Library: Show error if fetching collection fails. (54919)

Colors

  • I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. Make No color selected translatable text. (54814)

Rich Text

  • Paste: Only link selection if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org protocol is http(s). (53000)

Patterns

  • Remove the version enforcement for npm in engines field. (55245)

Code Quality

  • Fix: Use y-webrtc room name terminology instead of docName. (55260)

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)

Global Styles

  • Fix flickering when focusing on global style variations. (55267)

Interactivity API

  • Fix Image block lightbox missing alt attribute and improve accessibility. (55010)

Components

  • Modal: Fix closing when contained iframe is focused. (51602)

Block Library

  • Cover: Add aria-label to fixed and repeated image backgrounds. (50990)

Performance

Block Editor

  • Rich Text: Cleanup excess focusin/focusout listeners. (55382)
  • Optimize customClassName controls. (55345)
  • useBlockControlsFill: Avoid unneeded store subscriptions. (55340)

Parsing

  • Remove empty attrs. (54496)

Data Layer

  • Fix resolver resolution status key types mismatch causing unwanted resolver calls for identical state data. (52120)

Experiments

Data Views

  • Add status entity and use it in “admin views” experiment. (55050)
  • Add Grid Layout. (55353)
  • Add 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. field to the page list. (55246)
  • Adds a control to the views actions to switch layouts. (55311)
  • Fix the actions menu in the list view. (55426)

Block Library

  • Introduce experimental form and input blocks to allow building basic forms. (44214)
  • Mark forms blocks as experimental in block.json files. (55187)
  • Update the apiVersion in experimental blocks block.json files. (55186)

Components

  • Expose Tabs as private API. (55327)

Site Editor

  • Add author and status filter to the page list. (55270)

Documentation

  • Add “Get started with create-block” doc to the Getting Started section. (55373)
  • Add a “Get started with wp-scripts” doc to the Getting Started section. (55372)
  • Add backgroundImage to the 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. documentation for appearanceTools. (55376)
  • Add initial documentation for the DataViews component. (55435)
  • Augment Block.Edit filter documentation with performance guidance. (55252)
  • Correct the documented type for the $w parameter of block_core_navigation_add_directives_to_submenu(). (53585)
  • Document kind, name, plural for entity configuration. (55158)
  • Document updating the consent string to unlock private APIs. (55235)
  • Explain how to translate Gutenberg in standalone apps using the editor packages. (55080)
  • Fix callouts in end-to-end test documentation. (55300)
  • Fix code formatting due to bug in the “Get started with wp-env” doc. (55458)
  • Fix the position of the callout in the “Get started with wp-scripts” doc. (55457)
  • Font Library: Change all references to 6.4.0 by 6.5.0 core version. (55320)
  • Initial documentation of entity configuration. (55103)
  • PHP lib docs: Update to include information about prefixes in block PHP code. (55402)
  • Platform docs: Add a page to explain how to render HTML from a list of blocks. (55140)
  • Remove @return void from PHP function docs. (55237)
  • Remove the wp-now getting started doc. (55136)
  • Update LinkControl documentation with advice to memoize value prop. (54659)
  • Update nested-blocks-inner-blocks.md for WP 6.4 release. (55375)
  • docs/get-started-with-wp-env: Diagram and links added. (55381)
  • Update broken anchor link. (55233)

Code Quality

Data Views

  • Allow actions to be provided declaratively as a prop. (55192)
  • In list view, automatically insert header menu separators. (55412)
  • Update the data views component to pass a view object. (55154)
  • Update the view actions menu to be independent from current view APIs. (55294)
  • Normalize render fields function. (55411)
  • Rename accessorFn to getValue. (55434)
  • Update the view configuration to include fields visibility. (55247)

Block Library

  • Query block: Remove unnecessary class. (55438)

Site Editor

  • Fix: Remove unrequired nullish coalescing operator on canEditCss con…. (55357)

Global Styles

  • Update: Unset variable set by reference after a foreach loop. (55261)

Design Tools

  • Elements: Add unit tests for class and style generation. (55113)

Block Editor

  • Remove value syncing in Link Control. (51387)
  • Chore: Fix: Remove third parameter passed to shouldDismissPastedFiles. (55262)
  • Chore: Simplify code by removing unnecessary and condition. (55268)
  • useBlockSync: Fix typo and simplify test. (55203)

Data Layer

  • Update status entity label to Status and plural to getStatuses. (55160)

Gutenberg Plugin

  • Text Component: Typescript’n. (54953)

Tools

Testing

  • Don’t change error handling in WP_Theme_JSON_Gutenberg::Set_spacing_sizes(). (55354)
  • E2E: Add missing comment. (55093)
  • E2E: Try to fix the flaky autocomplete spec. (55081)
  • Migrate ‘Post Title block’ end-to-end tests to Playwright. (55297)
  • Migrate ‘text color’ end-to-end test to Playwright. (55323)
  • Migrate demo page tests to Playwright. (55054)
  • Migrate remaining Link UI tests to Playwright. (52828)
  • Playwright Utils: Introduce the editor.saveDraft helper. (55308)
  • Try to fix flaky synced pattern test. (55406)
  • Try to fix multi-block-selection flakiness. (55075)
  • WP_Theme_JSON_Gutenberg Unit tests: Fix phpunit warnings about set_spacing_sizes. (55313)
  • end-to-end Utils: Use frameLocator for retrieving editor canvas. (54911)

Build Tooling

  • Packages: Ensure only changed packages get published for WP releases. (55334)
  • WP_Env: tests-cli phpunit executable file not found in $PATH: Unknown. (54508)

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 @anton-vlasenko @apeatling @aristath @artemiomorales @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ecgan @ellatrix @fluiddot @getdave @glendaviesnz @gziolo @jffng @jhnstn @johnbillion @jorgefilipecosta @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kishanjasani @luisherranz @MaggieCabrera @Mamaduka @margolisj @matiasbenedetto @mcsf @michalczaplinski @mikachan @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @retrofox @richtabor @ryanwelcher @SantosGuillamot @scruffian @sethrubenstein @shimotmk @SiobhyB @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @unscripted @WunderBart @youknowriad

Props to @jameskoster for designing assets for this post.

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

Editor chat summary: Wednesday, October 18, 2023

This post summarizes the weekly editor chat meeting on Wednesday, 18 October 2023, 14:00 UTC, held in Slack.

Agenda of the meeting at https://make.wordpress.org/core/2023/10/17/editor-chat-agenda-wednesday-18-october-2023/.

Announcements

Last week we had security and maintenance releases for both WordPress and 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/ 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: https://wordpress.org/news/2023/10/wordpress-6-3-2-maintenance-and-security-release/ and https://github.com/WordPress/gutenberg/releases/tag/v16.8.1. Please make sure they are both updated.
WordPress 6.4 RC1 was released on October 17 https://wordpress.org/news/2023/10/wordpress-6-4-release-candidate-1/.

Open floor

There were two questions raised by Andrei Glingeanu.

Question 1:

Is the possibility of adding custom tabs here prohibited intentionally?

Print screen of the 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. inspector 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. with a custom item added at the side of the page and block.

@jorgefilipecosta said:

 We never added extensibility api’s to create new tabs there. There was not an intentional decision to never do it, but there was also never a decision to do it. I guess the best bet for now is to create a custom sidebar.

Question 2:

Is there a standard way of outputting dynamic css for a custom block besides putting it inline in style="" attributes and without outputting <style> tags in the edit function of the block?

@jorgefilipecosta said:

In my personal opinion, it depends on the case:

  • If the dynamic CSSCSS Cascading Style Sheets. styles you want to add should affect just a single instance of the block I think using the style attribute may be the way to go.
  • If the dynamic CSS styles you want to add should affect all the instances of your custom block, I guess a good option is to use the global styles filters and 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. 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. to add the styles you want for the block dynamically.
  • If it is dynamic but there is a limited set of different possible styles e.g.: dynamic but there are like 5 different style configurations. Probably creating classes as part of the block styles CSS and then dynamically deciding which class to add to the block seems to be the way to go.

#core-editor, #core-editor-summary, #gutenberg, #meeting, #meeting-notes, #summary

WordPress core is now using Playwright for all browser-based tests

Early last year, a plan was outlined to phase out all Puppeteer usage across WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/ step by step. Since then, a lot of progress has been made:

  • The @wordpress/e2e-test-utils-playwright package has become more mature and already provides many useful utilities that cover the needs for core and Gutenberg.
  • The @wordpress/scripts package, which is widely used in the ecosystem, now not only supports Puppeteer but also Playwright, making it straightforward for projects to migrate their existing setups.
  • The majority of e2e tests in Gutenberg have already been migrated from Puppeteer to Playwright, as can be seen in this tracking issue. This includes all performance tests.

Now, another major milestone has been reached: all browser-based tests in WordPress core now use Playwright! This includes end-to-end (e2e) tests, performance tests, and visual 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. tests. See #59517 for full details.

How does this affect contributors?

As mentioned in the original proposal, Playwright makes it easier to write stable tests. Thanks to a built-in test runner with superior debugging tools, auto-waiting, and advanced selectors support, Playwright offers the tools necessary to write tests that are easy to understand and cause less headaches because of random timeouts or similar. It also supports many browsers out of the box, which will help strengthen the end-to-end test coverage in core.

Since Playwright is originally a forked version of Puppeteer, it offers a very similar 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., so contributors writing and debugging tests should be familiar with the way things work.

If you want to get familiar with Playwright, check out Gutenberg’s migration guide as well as the official Playwright documentation. The migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. guide can be used to migrate Puppeteer-based tests from unmerged patches/PRs to the new setup.

End-to-end tests are still run using npm run test:e2e, with npm run test:e2e -- --ui running them in an interactive mode for easier debugging.

Playwright support was just added recently, so you might need to run npm install first to ensure the latest dependencies are installed.

Note: If you previously ran visual regression tests using npm run test:visual, the storage location for visual snapshots was changed from tests/visual-regression/specs/image_snapshots to tests/visual-regression/specs/snapshots. You can safely remove the files from the old folder if they show up in version controlversion control A version control system keeps track of the source code and revisions to the source code. WordPress uses Subversion (SVN) for version control, with Git mirrors for most repositories..


Props to @mamaduka for reviewing this post.

#e2e-tests, #gutenberg, #playwright, #puppeteer

Editor chat summary: October 11th, 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held 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, on Wednesday, October 11, 2023, 14:00 UTC moderated by @andraganescu

Accouncements

Async key project updates

Read the latest updates directly from the following tracking issues:

Sync project updates

@annezazu shared that:

  • A new label (Feature: Data Views) helps track various work around improving views across the WordPress experience. An overview issue is here. This relates more broadly to wp adminadmin (and super admin) redesign efforts and a recent PR was merged as an experiment bringing this to the Site Editor > Manage all pages view.
  • There are two new 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/ > Experiments to explore: Live Collaboration and offline persistence (available in current version) & New admin views (coming in 16.8).

@glendaviesnz shared an update around:

  • getting the code mirror inline code editing added to the custom css input box in global styles via lazy loading. If anyone has any thoughts on lazy loading a large lib like this feel free to comment on the PR

Open Floor

@colorful-tones suggested the example used for the 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. 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. 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. to be changed from the current “Like button” to something static so that developers do not end up confused as to wether they need to use interactive blocks for block hooks.

@fabiankaegy raised awareness on a current 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. affecting WordPress 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. release where in a query block only the currently selected block renders styling and other updates. The issue already has a PR but we need to make sure there is enough focus on this to get it solved before the release is shipped.

@luminuu

  • raised awareness on the fact that the recently merged “Replace template” option not visible with Gutenberg 16.7.1
  • inquired about the current status of the lightbox feature in relation to WordPress 6.4 release.

@artemiosans shared in response that there’s only a couple of bugs left (PR#55212 and PR#5461).

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

#core-editor, #core-editor-summary, #gutenberg, #meeting-notes, #summary

What’s new in Gutenberg 16.8 (11 October)

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/ 16.8? (11 October)

“What’s new in 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 Site Editor project (formerly called Full Site Editing).



Gutenberg 16.8 has been released and is available for download!

This latest release includes many enhancements, 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, some new experiments, and essential groundwork for the future Phase 3.

  1. Cover block: automatically set overlay color when applying the initial background image
  2. Show template toggle when editing pages
  3. Font Library: add an Uploads tab
  4. Other notable highlights
  5. Changelog
  6. Contributors

Cover 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.: automatically set overlay color when applying the initial background image


The Cover Block just got a bit smarter by setting an Overlay color based on the background image. The Overlay color is extracted from the image via magic (actually, code, which you can see coming into existence here (#54054).

Show template toggle when editing pages


This great new option allows you to see your Pages within the Template context where they’re meant to be displayed while you edit them. As @noisysocks puts it:

Allows users to focus on their content when desired. Moreover, it is small a step towards one day unifying the post editor and site editor.

– @noisysocks (#52674)

Font Library: add an Uploads tab


All about decluttering: font uploads have been moved to a separate tab within the Font Library interface. The team has also worked on improving error messages and their visibility.

Other notable highlights

  • Footnotes now make use of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. revisioning capabilities when available. Gutenberg PR (#52988) and Trac Ticket (#20564).
  • Experiment: the first version of the pages list in the site editor (#54966). This experiment is one of many pieces of the Data Views work (#55083), crucial for Phase 3.
  • Add template replace flow to template inspector (#54609).

Changelog

Features

Block Editor

  • Adds ‘nofollow’ setting to Button block. (54110)

Site Editor

  • Add ‘Show template’ toggle when editing pages. (52674)

Enhancements

  • Update pattern import menu item. (54782)

Components

  • Adding label/description to BlockEditor/DuotoneControl. (54473)
  • Deprecating isPressed in Button component. (54740)
  • Follow ariakit best practices. (54696)
  • InputControl-based components: Add opt-in prop for next 40px default size. (53819)
  • Modal: Add contentWidth prop to support a selection of preset modal sizes. (54471)
  • Remove unused components from ui/. (54573)
  • Update ariakit to 0.3.3. (54818)
  • Update compact search control metrics. (54663)
  • Wrapped TextareaControl in a forwardRef call. (54975)

Block Library

  • Add a brief description to the Footnotes block. (54613)
  • Footnotes: Use core’s meta revisioning if available. (52988)
  • Login/out: Add spacing support. (45147)
  • Query view.js: Code quality. (54982)
  • Set custom color when applying initial background image. (54054)
  • Use wp_get_inline_script_tag() in build_dropdown_script_block_core_categories(). (54637)

Block Editor

  • Default suggested links to pages. (54622)
  • Remove base URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org from link control search results. (54553)
  • Simplify BlockHTMLConvertButton. (54972)
  • Update strings in blocks ‘RenameModal’ component. (54887)

Post Editor

  • Edit Post: 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 HoCs in ‘PostStatus’ components. (54951)
  • Editor: Use hooks instead of HoCs in ‘PostSticky’ components. (54949)
  • Editor: Use hooks instead of HoCs in ‘PostSwitchToDraftButton’. (54695)
  • Show confirmation dialog when moving a post to the 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.. (50219)

Site Editor

  • Add template replace flow to template inspector. (54609)
  • [Site Editor]: Update copy of using the default template in a page. (54728)

Patterns

  • Remove categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. description in inserter panel. (54894)

Typography

  • Font Library: Refactor endpoint permissions. (54829)

Bug Fixes

  • Fix the ShortcutProvider usage. (54851)
  • Fix warning when a template calls a template area twice. (54861)
  • Revert “Fix warning when a template calls a template area twice”. (54926)

Block Library

  • All Nav block items to break long titles. (54866)
  • Fallback to Twitter provider when embedding X URLs. (54876)
  • Fix Deleted 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. warning string. (55033)
  • Fix Search Block not updating in Nav block. (54823)
  • Fix left and right aligmnent in children of Post Template. (54997)
  • Fix output of Navigation block classnames in the editor. (54992)
  • Fix overwriting of published post meta when previewing footnote changes. (54339)
  • Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists. (54878)
  • Image: Fix layout shift when lightbox is opened and closed. (53026)
  • Media & Text: 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. (55038)
  • Search block: Allow space for input field only when form expanded. (54846)
  • Search block: Update alignment and icon button width. (54773)

Site Editor

  • Avoid same key warnings in template parts area listings. (54863)
  • Avoid stale navigation block values when parsing entity record. (54996)
  • Don’t display the navigation section in template parts details when a menu is missing. (54993)
  • Fix ToolSelector popover variant. (54840)
  • Reset ‘Show template’ toggle when leaving edit mode. (54679)
  • remove overflow: Hidden from the entity title in the site editor 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.. (54769)

Components

  • FormTokenField: Add box-sizing reset style and reset default padding. (54734)
  • Popover: Fix the styles for components that use emotion within popovers. (54912)
  • Remove hover style for secondary Button when aria-disabled is set. (54978)
  • Reverting addition of aria-selected style hook in Button. (54931)
  • SlotFill: Pass Component instance to unregisterSlot. (54765)

Block Editor

  • Avoid double-wrapping selectors when transforming the styles. (54981)
  • [Inserter]: Fix reset of registered media categories. (55012)

Typography

  • Font Library: Changed the OTF mime type expected value to be what PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher returns. (54886)
  • Font Library: Move font uploads to a new tab. (54655)

Global Styles

  • Block custom CSSCSS Cascading Style Sheets.: Fix incorrect CSS when multiple root selectors. (53602)
  • Image: Ensure false values are preserved in memory when defined in 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.. (54639)

List View

  • Fix performance issue when selecting all blocks. (54900)

Colors

  • Format Library: Try to fix highlight popover jumping. (54736)

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.

  • Image: Fix duotone not being applied to lightbox image. (54670)

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)

Block Library

  • Footnotes: Add aria-label to return links. (54843)

Components

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Fix accessibility issues on back-end. (54408)
  • Modal: Accessibly hide/show outer modal when nested. (54743)

Patterns

  • Use list role instead of listbox in patterns list. (54884)

Post Editor

  • Editor: Always render the ‘Switch to Draft’ button to avoid focus loss. (54722)

Block Editor

  • Block Switcher: Use a different label for multi-selection. (54692)

Performance

  • Tests: Support the Site Editor’s legacy spinner. (54784)
  • Use instanceOf over property_exists. (54835)

Block Editor

  • Subscribe only to block editor store in useBlockSync. (55041)

Experiments

Site Editor

  • al]: First version of pages list in site editor. (54966)

Block Editor

  • Expose getDuotoneFilter() as private API. (54905)

Documentation

  • Add a documentation page about the block editor settings. (54870)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @alexstine @andrewhayward @andrewserong @annezazu @anton-vlasenko @artemiomorales @aurooba @bangank36 @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @jameskoster @jeryj @jsnajdr @juhi123 @kevin940726 @leemyongpakvn @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mirka @mtias @mujuonly @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @priethor @ramonjd @richtabor @scruffian @SiobhyB @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @tellyworth @them-es @torounit @tyxla @westonruter @WunderBart @youknowriad

Props to @joen for the visual assets and @annezazu for the help reviewing and collecting highlights!

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

Editor chat summary: October 04th, 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held 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, on Wednesday, October 04, 2023, 14:00 UTC moderated by @ajitbohra

Accouncements

  • WordPress 6.4 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. 2 is available for testing.
  • WordPress 6.4 Editor Tasks Project Board.
  • Gutenberg 16.8.0 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). 1 is available for testing.

Async key project updates

Read the latest updates directly from the following tracking issues:

@hellofromtonya

The Font Library’s 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/. has been significantly redesigned. It’ll need testing and release to gain wider in the wild testing.

Task Coordination

No updates.

Open Floor

@get_dave

I’m working on a PR which changes the Post Title in the Post Editor to render HTML in normal (“Visual”) mode and output raw HTML in “Code view” mode. It also strips all HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from anything pasted into the title field in Visual mode. As this is a change that may impact editorial workflows I wanted to flag it for more visibility.

@vcanales
I’m wondering if we are open to releasing 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/ 16.8.0 on Monday rather than Wednesday so that the new 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. makes it to a release before Beta 3.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

#core-editor, #core-editor-summary, #gutenberg, #meeting-notes, #summary

Editor chat summary: 27 September, 2023

This post summarizes the weekly editor chat meeting (agenda for 27th of September meeting) for Wednesday, September 27 2023, 03:00 PM GMT+1 in #core-editor. Moderated by @paaljoachim.

Accouncements

Gutenberg plugin 16.7 was released today. A big thank you to @mikachan for handling the release!
Beta 1 of WordPress 6.4 was released yesterday.
Only fixes can be added during a 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.
The current release target is 7th of November.
WordPress 6.4 Editor Tasks.

Key project updates:

Here is a new list of key updates. Thanks to @bph for gathering this list.

Task Coordination

No updates.

Open Floor

@NekoJonez

During translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. I noticed that some strings about the pattern directory were added… So, I wonder the new string “Directory” about what is it talking? Since in Dutch that can mean two things. I created this ticketticket Created for both bug reports and feature development on the bug tracker. for it: Translator confusion about “Directory”
Also, isn’t a verb missing here? See more details in this 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/ issue.
Missing verb in string?


Read complete transcript

#core-editor, #core-editor-summary, #gutenberg, #meeting-notes, #summary

What’s new in Gutenberg 16.7? (27 September)

“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 16.7?

Gutenberg 16.7 has been released and is available for download!

16.7 is the last Gutenberg release ahead of the upcoming WordPress 6.4 release, so it’s 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. Exciting new features include the new Font Library for font management within the editor, lots of enhancements to pattern management, simplified lightbox functionality, and many UXUX User experience enhancements.

This release consists of 331 pull requests authored by 88 contributors, including 7 new contributors! 🥳 🎉

Table of Contents

  1. Font Management with the Font Library
  2. Import/Export of Patterns
  3. Explore New Pattern Filtering
  4. Naming Group Blocks in the Editor
  5. “My Patterns” Category Reinstated in Post Editor Inserter
  6. Simplified Lightbox Functionality for Images
  7. Background Image Control Added to Group Block
  8. New Social Link Icon for X
  9. Changelog
  10. First time contributors
  11. Contributors

Font Management with the Font Library

Screenshot of the Styles panel in the editor with the Typography settings open

The new Font Library allows users to install, remove, and activate typographic fonts from various sources in WordPress via the editor. The installed fonts are enabled globally, independent of the active theme in the /wp-content/fonts directory, similar to the Media Library. As part of this new feature, users can add fonts manually by uploading them from their local machine or choosing from a list of Google Fonts. (#53884 & #53307)

Import/Export of Patterns

Screenshot of a pattern in the editor with the options panel open, showing the new "Export as JSON" option

It’s now possible to import and export patterns 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. files directly from the site editor’s patterns screen. This change mirrors the existing import/export functionality in the /wp-admin patterns screen, making it more straightforward for all users to migrate patterns between sites. (#54337)

Explore New Pattern Filtering

Screenshot of the pattern list panel, highlighting the new filters dropdown

Pattern filters have been restructured, with filters now being housed within a dropdown at the top of the pattern list panel. A sticky 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. has also been added to the top of the list panel for improved navigation. (#54681)

Naming Group Blocks in the Editor

Screenshot of the editor with the List View open, showing a custom named block with the name, "My custom name"

Group blocks can now be named using custom naming. Naming these blocks will update their name in the List View, making it easier to distinguish between blocks. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. marks another step forward as the Site Editor’s tools and features continue to expand. (#53735)

“My Patterns” CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Reinstated in Post Editor Inserter

Prompted by feedback, the “My patterns” category has been reintroduced to the post editor’s inserter, providing a central place for users to view their custom patterns. (#54767)

Simplified Lightbox Functionality for Images

The Behaviors UIUI User interface introduced as an experimental feature in Gutenberg 15.9 has been removed and replaced with an “Expand on click” toggle in the Image 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.’s Inspector Controls and in the Global Styles. (#54509) (#54509)

The support for Behaviors in the theme.json has also been deprecated and will be removed completely in Gutenberg 17.0:

  • Users who enabled the “lightbox” behavior in their theme.json file should migrate to a new syntax where the lightbox is simply a new block-level setting:
“settings”: {
	“blocks”: {
		“core/image”: {
			“lightbox”: {
				“enabled”: true | false
				“allowEditing”: true | false
			}
		}
	}
}
  • Note that the support for the “animation” value has been removed.

If you enabled the lightbox on any Image blocks using the previous Behaviors UI, please open and re-save posts that include those blocks to ensure they get migrated to the latest syntax.

With the removal of support for the “animation” value, all images will now only use the “expand” (zoom) animation, even if they had previously used the “fade” animation.

Background Image Control Added to Group Block

Background image support has been added to the Group block, in line with the color controls. (#53934 & #54439)

A new social link icon has been added for the X service. It can be found when searching for “X” or “Twitter”. (#54092)

Changelog

Features

Block Library

  • Social Links: Add X. (54092)

Typography

Font Library:

  • Add mime type validation for font uploads. (53986)
  • Font Collection backend. (54098)
  • Frontend [Stage 1]. (53884)
  • Font Collections frontend. (54566)

Patterns

  • Allow import/export patterns as JSON files. (54337)

Block Editor

  • Adds ‘nofollow’ setting to inline links (rich text only). (53945)
  • Rename Group blocks in the Editor via Modal. (53735)

Enhancements

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data

  • Add edits data to the useEntityRecord. (54167)

Components

  • Add non-listbox functionality back to CircularOptionPicker. (54290)
  • Added missing “middle” allowed tooltip position. (52147)
  • BlockSettingsMenu: Ensure only one block settings menu is open at a time. (54083)
  • Bundle the block copy handler within the BlockCanvas component. (54207)
  • Bundle the block selection clearer hook into the BlockCanvas component. (54209)
  • Ensure that ‘Duotone 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.’ color pickers have relevant labels. (54468)
  • Export ProgressBar to allow it to be used. (54404)
  • FormTokenField – add prop to allow saving of tokens onBlur. (53976)
  • Refactoring BorderControl‘s unit tests. (54155)
  • Remove unnecessary padding-right on the dismissible notice. (52240)
  • Support controlling open/closed state for Dropdown and DropdownMenu. (54257)
  • ToggleGroupControl: Rewrite backdrop animation with framer motion shared layout animations. (50278)
  • ToolTip: Refactor using ariakit. (48440)
  • Tooltip: Add placement prop to replace deprecated position. (54264)
  • Tooltip: Add new hideOnClick prop. (54406)
  • Tweak border control button to proper metrics and simpler action. (53998)
  • Update FormTokenField styling for consistency and visibility. (54402)
  • Update spacing sizes control metrics and icons. (54470)
  • Update/form token field onblur. (54445)
  • Popover: Update positionToPlacement types. (54101)
  • SearchControl: Allow for 32px compact size, introduce option to change default size to 40px. (54548)

Block Library

  • #39457: Image block keep image size on replacing image. (49982)
  • Add __next40pxDefaultSize to 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. opacity control. (54389)
  • Add aspect ratio to image placeholder. (54216)
  • Allow using a button element for button blocks. (54206)
  • Buttons Block: Show inserter if button have variations (#53498). (53783)
  • Change dialogdescription for renaming group block. (54358)
  • Footnotes: Add missing placeholder instructions text. (54056)
  • Heading block: Add support for writingMode. (54351)
  • Improved description for the post-terms core block. (47715)
  • Make matrix position behave like valign. (54050)
  • Navigation block: Add core/buttons to the allowed blocks. (53966)
  • Remove unused prop from GroupPlaceHolder component. (51493)
  • Template parts: Use the template actions component for template parts patterns. (54173)
  • Text orientation: Rotate vertical text when the text is aligned (Upside down text). (53175)
  • Update parent labels in page attributes panel and page list block. (54403)
  • Use __next40pxDefaultSize on more UI. (54400)

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.

  • Add timeout option to navigate(). (54474)
  • Add manual Server Side Rendering (SSR) to the Interactivity API blocks. (54343)
  • Ensure that the view scripts of core blocks have the wp-interactivity dependency. (54594)
  • Image block: Revise lightbox UI to remove ‘behaviors’. (53851)
  • Image block: UI updates for the image lightbox (redo). (54509)
  • Override unfinished navigate calls. (54201)
  • 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.: Add design enhancements for the “enhanced pagination” setting. (54455)
  • Query Loop: Allow “enhanced pagination” only with core blocks. (54347)
  • Query block: Start prefetching on first click to next/previous. (54781)

Patterns

  • Add categories to user patterns, and allow filtering by these in site and post editor. (53835)
  • Add editing of pattern categories to site editor. (54640)
  • Add user categories to site editor 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. navigation screen. (53837)
  • Add user pattern categories to post editor inserter patterns tab. (53933)
  • Apply white background to the preview as a fallback. (54534)
  • Merge unsynced into inserter patterns tab and add paging and filtering. (54007)
  • Update empty template part label. (53842)
  • Memoize useSelect for usePatterns. (54588)
  • Site Editor: Prevent unintended actions on the classic theme. (54422)

Design Tools

  • Add back tooltip to styles UI. (54574)
  • Add block gap to Post Content block. (54282)
  • Add block instance elements support for buttons and headings. (53667)
  • Background Image block support: Add reset menu item. (54341)
  • Block Supports: Add background image support to Group block. (53934)
  • Columns: Adopt button and heading element colors. (54104)
  • Update block styles UI. (54446)
  • Improve background image control. (54439)

Site Editor

  • Copy: End the Templates page description in the Site Editor with a period. (54221)
  • Edit Site: Update progress bar to determinate. (53399)
  • Follow up visual tweaks to block-specific commands. (54427)
  • Site editor sidebar: Abstracting footer so it can be used across details screens. (54082)
  • [Page Inspector]: Add ability to switch templates. (51477)

Global Styles

  • Rename settings & userSettings props to value & inheritedValue respectively in ImageSettingsPanel. (54593)
  • Update Block specific CSSCSS Cascading Style Sheets. label to include additional instructions. (49626)

Block Editor

  • Use gray color on link control advanced toggle. (54545)
  • Verse: Exit on triple Enter. (53332)
  • Block editor: 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.: Fix rules of hooks violations (2). (48943)
  • Always show the total number of patterns even with only one page. (54813)

Typography

  • Font Face: 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. from Core changeset 56500. (54218)
  • Font Library: Changing the upload directory to wp-content/fonts. (54122)
  • Font Library: Load collection JSON data from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the collection configuration. (54067)
  • Font Library: Use wporg cdn to host the google fonts json data. (54795)

Themes

  • Theme Previews: Make the back button customizable. (54242)

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

  • Remove ‘Footnotes’ and ‘Comments’ from the non-dynamic block registration list. (54154)

Media

  • Correct function name handleFileChange is replaced by wrong function name. (52250)

List View

  • Allow Escape key to deselect blocks if blocks are selected. (48708)
  • Try directing focus to the list view toggle button when closing the list view. (54175)

Block API

  • Deprecated get_file_path_from_theme method. (45831)

Keyboard Shortcuts

  • Make the shortcuts provider optional. (54080)

Blob

  • refactor(blob): Type URL parameter as optional. (49201)

Collaborative Editing

  • Try bundling sync package. (54738)

New APIs

Components

  • Revert “Export ProgressBar to allow it to be used”. (54428)

Block API

  • Stabilize Block Hooks feature. (54293)

Data Layer

  • Data: Introduce countSelectorsByStatus redux metadata selector. (53767)

Framework

  • Add useStateWithHistory hook and use to show a block editor with undo/redo. (54377)
  • BlockEditor: Add BlockCanvas component = 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. + BlockList + WritingFlow. (54149)
  • Extract undo/redo as a separate package. (54292)

Bug Fixes

Components

  • Add children back to toolbar item render for rendered components. (53314)
  • Add missing useState import in Border Control documentation. (49476)
  • Adjust input-style__focus mixin to proper focus size. (54398)
  • DropdownMenu v2: Fix submenu chevron direction in RTL languages. (54036)
  • Fix incorrect focus style size on InputControl. (54394)
  • Make CircularOptionPicker focus styles resilient to button size changes. (54196)
  • PaletteEdit: Fix padding in RTL mode. (54034)
  • Popover: Set is-positioned class only after animation has finished. (54178)
  • Storybook: Restore previous URL for the introduction documentation page. (54247)
  • Storybook: Update doc param values for ConfirmDialog. (54130)
  • Update borderFocus to ADMIN.theme. (54425)
  • Use standard focus style on BorderControl. (54429)
  • DateTimePicker: Fix onChange callback check so that it also works inside iframes. (54669)

Post Editor

  • Adds animation state for DFM off to post editor header. (54244)
  • Block Editor: Memoize the createPageEntity callback. (54580)
  • Edit Post: Avoid fetching the edited template for non-viewable posts. (54158)
  • Editor: Catch errors when creating terms. (53369)
  • Fix layout when post content is root block. (54485)
  • Make order of pinned items consistent. (53908)
  • Prevent the list view shortcut from typing unexpected characters. (54078)
  • Top Toolbar: Prevent the focus outline of the button from being cut off. (54172)
  • Try using fallback layout instead of default in post editor. (54371)
  • [Edit Post]: Toggle Distraction free mode mode based on compatibility. (54073)

Block Library

  • Block Moving Mode: Prevent the block from being moved into itself. (54137)
  • Fix navigation block submenu focus when closing menu with the ESC key. (54299)
  • List Block: Fix numbering style to be applied correctly. (53301)
  • Navigation Link: Restore tooltip. (54263)
  • Post navigation link: Fix the writing mode setting on the front. (54053)
  • PreviewOptions: Fix critical error when children not passed. (54284)
  • Remove role attribute when set to null in data-wp-bind. (54608)
  • [Commands]: Add group/ungroup commands only when eligible. (53988)
  • Replace the gutenberg_ prefix with wp_ in image block. (54678)
  • Navigation block: Fix padding on mobile overlay when global padding is 0. (53725)

Patterns

  • Command Palette: Fix duplicate Patterns command. (54133)
  • Don’t output root padding when editing patterns. (54373)
  • Fix user pattern categories in site editor inserter. (54641)
  • Remove pattern category as a variation for post terms block. (54532)
  • StartPageOptions: Improve conditions to show modal only on a brand new page. (54245)
  • Add My patterns back to post editor inserter categories. (54767)
  • De-emphasise pattern filters in inserter. (54681)
  • Fix All Patterns category default display. (54721)
  • Fix bug with new categories not showing. (54768)
  • Fix bug with pattern categories not saving sometimes. (54676)
  • Fix category type for back link. (54753)
  • Fix duplication of uncategorized patterns. (54755)
  • Inject the theme name into the block attributes. (54595)
  • Reinstate my patterns category in site editor. (54726)
  • Require a title in the creation modal. (54717)
  • Use slug as fallback for empty title. (54731)
  • Allow non-user patterns under Standard sync filter. (54756)
  • Check that pattern is synced before replacing blocks with synced pattern on creation. (54804)
  • Fix back navigation after pattern creation. (54852)
  • Fix category control width in site editor. (54853)
  • Improve sentence case consistency of labels and notices. (54807)

Block Editor

  • Add keyboardReturn submit button back to LinkControl. (52620)
  • Formats: Memoize link value passed to the LinkControl. (54603)
  • List: Merge consecutive lists. (52995)
  • Rich text: Fix useAnchor (remove nextElementSibling). (54013)
  • Iframe: Adjust keydown event bubbling. (54565)
  • Reset page after changing pattern filters or search value. (54774)
  • Block Editor: Fix ‘isBlockSubtreeDisabled’ private selector. (54618)

Site Editor

  • Bump the z-index of the rename modal. (54277)
  • Default template lookup should use slug, not the full permalink, in the site editor. (54599)
  • Fix “Blogblog (versus network, site) title” input border radius in Index / Home details panel. (54192)
  • Hide ghost top toolbar. (54555)
  • CreateTemplatePartModal: Disable the ‘Create’ button while saving. (54716)

Plugin

  • Ensure font-face styles are printed in iframe editors. (54313)
  • Font Face & Font Library: Load PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files only if the main class does not exist. (54103)
  • Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property. (54581)
  • Update readme.txt “tested up to 6.3”. (54072)
  • Update cherry-pick script to correctly verify 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/ CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. setup. (54720)
  • Conditionally remove deprecated ‘print_emoji_styles’. (54828)

Typography

  • Font Library: Ensure merged fontFace data is enconded as an array instead of an object. (54435)
  • Font Library: Fix duplicate variants with different file types. (54490)
  • Font Library: Setting wp_font_family custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. as _builtin and not plublic. (54559)
  • Font Face: Get name from “fontFamily” setting, not “name”. (54615)
  • Font Library: Fix modal width on mobile viewport. (54518)
  • Font Library: Fix space above theme fonts in font library modal. (54598)
  • Font Library: Fix error installing system fonts. (54713)
  • Font Library: Remove font files created by tests after tests run. (54771)
  • Font Library: Avoid rendering font library ui outisde gutenberg plugin. (54830)

Widgets Editor

  • Edit Widgets: Fix broken layout. (54372)
  • Edit Widgets: Fix invisible action area when the top toolbar is enabled. (54329)
  • Fix top toolbar for 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. widgets sidebar control. (54255)

Global Styles

  • Font Library: Fix notification error for actions related to custom fonts. (54535)
  • Prevent layout changes from saving the whole inherited settings object. (54500)

Block API

  • Blocks: Fix incorrect placement for hooked blocks in the parent container. (54349)
  • Pass correct content argument to enter transforms. (54108)
  • Block Hooks: Avoid processing empty content for loaded templates. (54719)

Rich Text

  • Revert: Rich text: Copy tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) name on internal paste. (54301)

Interactivity API

  • Image: Fix block serialization test case to cover deprecation of behaviors. (54570)
  • Query Loop: Select first anchor inside Post Template with “enhanced pagination” enabled. (54730)

Icons

  • 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/. forwardRef warnings for TooltipAnchors. (54492)

History

  • Fix extra undo/redo step when removing or replacing all blocks. (54457)

Synced Patterns

  • Patterns: Apply layout and alignment to synced patterns in the editor. (54416)

npm Packages

  • Workflow: Fix the issue with npm publishing for WP major version. (54088)

Media

  • useMediaQuery: Avoid crashing on Safari < 14. (54023)

Nested / Inner Blocks

  • Fix: InnerBlocks allowed blocks change with different sizes. (53943)

Layout

  • Post Content: Ensure layout classnames are applied in readonly preview. (53864)

Document Settings

  • Set the timezone correctly. (48083)

React i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.

  • 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. import in react-i18n documentation. (54308)

Design Tools

  • Background Image control: Use consistent button, ensure descriptive text accounts for no image selected. (54711)

Collaborative Editing

  • Make sure sync code only runs when experiment is enabled. (54710)

Core Data

  • core-data: Fix nested property access with undefined name. (54790)

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)

Block Library

  • Comments form: Accessibility fixes for back-end. (54393)
  • Navigation: Add ariaLabel block support. (54418)
  • Table block: Fix semantic structure for screen readers on back-end. (54324)

Components

  • Improve Notice component accessibility. (54498)
  • Making Circular Option Picker a listbox. (52255)
  • Allow Modal to place focus on first element within contents via new API. (54590)
  • Improve the placeholder instructions accessibility. (45801)

Site Editor

  • Clarify the “Entity” message of the snackbar. (54333)
  • Use solid accent color selection in command palette. (54318)

Block Editor

  • Update nofollow control label. (54184)

Performance

  • Use median instead of average to stabilize First Block metric. (54157)
  • improvement: Reduce the use of the _wp_array_get function. (51116)

Block Library

  • Footnotes: Add block-level caching when parsing content for footnotes. (52577)
  • Table of Contents: Use a custom store subscription for observing headings. (54094)
  • getClientIdsOfDescendants: Support single ‘clientId’ as a argument. (54421)

Site Editor

  • Edit site: Prevent enqueuing entire stylesheet in iframe. (54254)
  • Fix first block locator’s page reference. (54188)

Patterns

  • Move mapping of values from core-data selector into consumers. (54576)

Block API

  • Unnecessary JSON decoding in block parser. (54424)

Components

  • Tooltip: Render tooltip markup in the DOM only when open. (54312)

Post Editor

  • Editor: Memoize ‘getNestedEditedPostProperty’ selector helper. (54160)

Developer Experience

  • Tests: Improve the environment setup. (54309)

Experiments

Interactivity API

  • Remove wp_store from query block. (54359)

Documentation

  • Add a documentation page to explain how to implement undo/redo in a third-party editor. (54546)
  • Add the Commands Data page to Handbook. (53634)
  • Bootstrap a documentation website tailored towards the usage of Gutenberg outside WordPress. (54375)
  • Button: Undocument the focus prop. (54397)
  • Docs: Add missing callout class. (54558)
  • Docs: Add note about enqueueing assets in the iframe and trim whitespace. (54125)
  • Docs: Consolidated design Reference with the main Design Contributions doc. (51065)
  • Docs: Move Glossary page to Getting Started. (54120)
  • Docs: Move the FAQ page to Getting Started. (54117)
  • Docs: Overhaul the Development Environment section of the Block Editor Handbook. (54395)
  • Docs: Remove Outreach doc from Getting Started section. (54314)
  • Docs: Remove unneeded block theme docs. (51071)
  • Fix bullet hierarchy. (47178)
  • Fix createI18n package import location. (51328)
  • Fix incorrect image src in Design Contributions doc. (54302)
  • Fix: Broken links on ToolbarGroup documentation. (54229)
  • Fix: Remove unrequired code from BorderControl documentation. (54348)
  • Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • Incorrect file extension?. (54134)
  • Theme JSON schema: Fix “not allowed error” in settings property. (54521)
  • Try: Allow multiple attribute to be a string in upload components. (53350)
  • Update Commands documentation with examples and more context. (54441)
  • Update the components changelog to mark the popover slot removal as a breaking change. (54022)
  • Update versions in WP for 6.3.1. (54069)
  • Updated Related Components Links. (49176)
  • Updates Edit and Save code examples to have matching open/closing tags. (53915)
  • [Docs: Getting Started / Block Development Environment] Updates on the text to improve clarity and preciseness. (54563)
  • documentation – Contribution Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.: Formatted text and changed some titles and structure. (54258)
  • documentation [Block Editor Handbook / Getting Started / Block Development Environment]: Fix links. (54571)
  • Add missing global declaration in DocBlockdocblock (phpdoc, xref, inline docs) of interactivity files. (54683)

Code Quality

  • Adds removal notice to view.js.mustache. (54105)
  • Block editor: Remove __unstableElementContext and filter EditorStyles instead. (52888)
  • Improving error messages and codes in jest-console, matcher.js. (53743)
  • Indicate nested paths on __experimentalSaveSpecifiedEntityEdits. (54161)
  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests: Update popover matcher. (54168)
  • Style engine: Sync doc changes from core. (54650)

Components

  • Composite: Refactor to TypeScript. (54028)
  • FocusableIframe: Refactor to TypeScript. (53979)
  • IsolatedEventContainer to Typescript (just test file). (54316)
  • Popover: Remove custom frame scroll/resize listeners. (54286)
  • Revert FormTokenField – add prop to allow saving of tokens onBlur. (54444)
  • Toolbar/ToolbarDropdownMenu Typescript Conversion. (54321)
  • ToolbarGroup – Typescript. (54317)
  • with-focus-outside: Convert to TypeScript. (53980)

Patterns

  • Revert usePatternsState to return an array instead of object. (54582)
  • Add missing dependency of @wordpress/patterns on @babel/runtime. (54118)
  • Move category map creation out of useSelect. (54584)
  • Remove experimental prefixes from patterns package. (54338)
  • Site editor: Consolidate constants. (54484)
  • Fix sidebar nav screen fallback category. (54754)

Post Editor

  • Annotations: Run end-to-end tests with iframe. (54191)
  • EditPostPreferencesModal: Refactor to remove snapshots for index.js. (54141)
  • Extract WordPress specific styles from the BlockTools component. (54356)
  • PageAttributesParent: A minor fixes for useSelect and useMemo hook usages. (54433)
  • PostSyncStatus: Derive sync status inside the selector. (54159)

Block Library

  • Heading: Remove unused ‘aria-label’. (54223)
  • Image Editor: Fix ESLint warnings and remove unnecessary dependencies. (53506)
  • Pattern Category: Set ‘publicly_queryable’ to false. (54567)
  • Post Terms: Fix a ‘useSelect’ warning in the ‘usePostTerms’ hook. (54068)

Interactivity API

  • Prepare image lightbox for private version of the Interactivity API in 6 4. (54547)
  • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks. (54297)
  • Search block: Switch interactivity to the Interactivity API. (53343)

Site Editor

  • Remove Tooltip workarounds added in the site and block editor. (54450)
  • 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.: Remove ‘gutenberg’ query param from revisions.php. (54166)
  • Prune store constants. (54585)
  • Use constants rather than hard coded template strings. (54586)

Rich Text

  • RichText: Remove __unstableOnSplitMiddle. (54183)

Typography

  • Fluid typography: Backporting Core since annotations. (54204)
  • Font Face: Remove static instance in wp_print_font_faces(). (54228)
  • Font Library: Refactor logic to disable font library in the frontend. (54748)

Block Editor

  • Improve code commenting around focus mount behaviour of rich text Link UI. (54085)
  • List e2e: Run all tests with iframe. (54181)

Layout

  • Use override editor style API. (54466)

Plugin

  • Require minimum WordPress 6.2. (53451)
  • Ensure that Block Hooks work correctly after landing in WP core. (54651)
  • Update uuid package to 9.0.1. (54725)

Themes

  • Iframe: Skip scoping styles. (46752)

Tools

Testing

  • Button: Update test assertion to match test name. (54260)
  • E2E: Do not run page actions in beforeEach hook when using fixme. (54065)
  • Fix Font library unit tests. (54645)
  • Font Library: Remove upload_mimes filter after uploading fonts. (54647)
  • Migrate RichText end-to-end tests to Playwright. (53493)
  • Perf Tests: Update base point to compare. (54111)
  • Puppeteer tests: Try to fix failing tests related to notices in core. (54452)
  • Remove accidental addition of perf test results (2). (54363)
  • Remove accidental addition of perf test results. (54355)
  • Update WPCSWPCS The collection of PHP_CodeSniffer rules (sniffs) used to format and validate PHP code developed for WordPress according to the WordPress Coding Standards. May also be an acronym referring to the Accessibility, PHP, JavaScript, CSS, HTML, etc. coding standards as published in the WordPress Coding Standards Handbook. to v3.0, and fix all reported Coding Standards issues. (53866)
  • Modal: Add more unit tests. (54569)
  • end-to-end Test Utils: Add new fixtures for performance metrics. (52993)
  • end-to-end Tests: Fix ‘no-useless-not’ ESLint warnings. (54652)
  • package(e2e-test-utils): Update fixtures. (54128)
  • wp-scripts: Add support for Playwright. (53108)
  • Font Library: Use resolvable domain in test. (54763)
  • Global styles tests: Fire hooks when updating post. (54836)
  • Remove action to fix tests. (54806)
  • Font Library: Fix set upload dir test. (54762)

Build Tooling

  • Backport tools: Filter PRs to be cherry picked by merged date. (54171)
  • Changelog tool: Update Automated Testing label. (54070)
  • Running npm run format:Php may result in an error. (54162)
  • Scripts: Correctly resolve entry points when the directory is symlinked. (54212)
  • Upgrade wp-prettier to v3.0.3. (54539)
  • Update typescript-eslint to v6. (53975)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Making Circular Option Picker a listbox. (52255)
  • @jamiemchale: Fix createI18n package import location. (51328)
  • @johnhooks: refactor(blob): Type URL parameter as optional. (49201)
  • @MericKarabulut: Improving error messages and codes in jest-console, matcher.js. (53743)
  • @Piyush-Deshmukh: Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • @Rajinsharwar: Editor: Catch errors when creating terms. (53369)
  • @toolstack: Set the timezone correctly. (48083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewhayward @andrewserong @annezazu @anomiex @anton-vlasenko @aristath @artemiomorales @atachibana @bangank36 @bfintal @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @chintu51 @ciampo @DAreRodz @dcalhoun @derekblank @draganescu @ediamin @ellatrix @fluiddot @gaambo @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jamiemchale @jeherve @jffng @johnhooks @jordesign @jorgefilipecosta @joshuatf @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kkoppenhaver @kmanijak @leewillis77 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @margolisj @masteradhoc @matiasbenedetto @mburridge @mcsf @MericKarabulut @mhimon @michalczaplinski @mikachan @mikejolley @mokagio @ndiego @ntsekouras @Olein-jp @petitphp @Piyush-Deshmukh @Rajinsharwar @ramonjd @richtabor @SantosGuillamot @SaxonF @scruffian @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @thelovekesh @toolstack @torounit @tyxla @vcanales @walbo @WunderBart @youknowriad

Props to @siobhyb, @czapla, and @artemiosans for co-writing; @saxonafletcher for the visual assets; @annezazu, @priethor, @andraganescu, @cbringmann, and @ngreennc for peer review; @bernhard-reiter for helping publish the release to 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/.

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