What’s new in Gutenberg 17.9 (13 March)

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

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

Gutenberg 17.9 has been released and is available for download!

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

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

Color and typography presets in Global Styles

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

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

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

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

Shuffle option when choosing patterns

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

Swap Template Parts in the Inspector

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

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

Other Notable Highlights

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

Changelog

Full changelog available

Enhancements

Data Views

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

Global Styles

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

Block Library

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

Site Editor

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

Font Library

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

Post Editor

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

Patterns

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

Components

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

Nested / Inner Blocks

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

Plugin

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

Bug Fixes

Block Library

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

Font Library

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

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

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

Components

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

Block Editor

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

Custom Fields

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

Data Views

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

Site Editor

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

Global Styles

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

Post Editor

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

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

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

Patterns

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

Block bindings

  • Fix Enter on disabled rich text. (59320)

Page Content Focus

  • Fix DisableNonPageContentBlocks behavior. (59297)

Design Tools

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

Layout

  • Fix MarginVisualizer and PaddingVisualizer. (59227)

Block Conversion

  • Preserve bindings metadata in block transforms. (59179)

Typography

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

Data Layer

  • Ignore HTML Elements in ReduxDevTools. (57497)

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

Data Views

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

Design Tools

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

Block Editor

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

Block Library

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

Custom Fields

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

Performance

Block Editor

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

Experiments

Layout

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

Components

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

Font Library

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

Documentation

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

Code Quality

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

Block Library

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

Font Library

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

Components

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

Global Styles

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

Post Editor

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

Block Editor

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

Typography

  • Remove Gutenberg font face tests. (59402)

Site Editor

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

Synced Patterns

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

Tools

Testing

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

Build Tooling

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

Security

Custom Fields

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

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

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

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

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

Performance Chat Summary: 12 March 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • Reminder on timezone difference for the next 3 weeks, this chat will remain at 16:00 UTC, then it will switch to 15:00 UTC from April 2

Priority Items

Structure:

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets discussion
  • Performance Lab 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 (and other performance plugins) discussion
  • Active priority projects
    • Plugin checker
    • Improve template loading
    • INP opportunities research

WordPress Performance Trac Tickets

  • For WordPress 6.5:
    • @joemcgill opened #60749
      • @flixos90 asked if this is mostly a memory win?
      • @joemcgill It does seem to be less of an impact on IWT than what I was measuring on Friday. Still not sure what the difference is there, or if there is some caching in play that I had disabled on Friday. Even so, it does make a positive impact and memory consumption can lead to slower IWT. The other place that could use more eyes is trying to identify opportunities to improve the performance of the Navigation 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., which went through a bigger refactor during this release, which is leading to longer rendering times. I don’t think we’ve identified any particular flaw thus far
    • @flixos90 working on the ongoing research on potential performance 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. that I think is still unresolved [link]
    • @joemcgill will plan on doing another set of benchmarks for RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 once it has been released, and can continue
  • For Future Releases:
    • We already have 16 items in the 6.6 milestone, but it’s a good time for folks to start thinking about what they are wanting to focus on for the next release.

Performance Lab Plugin (and other Performance Plugins)

Active Priority Projects

Plugin Checker

  • Mostly quiet since the 1.0 release. There is the start of a 1.1 milestone, but I think the folks involved in next steps here have been mostly busy with WC Asia and 6.5 release work.

Improve template loading

INP research opportunities

  • @joemcgill Last item in our active priority projects list: INP opportunities research. I believe @adamsilverstein recently did some research on this, but am unsure if there is anything ready to be shared yet. We can pick this up in a future meeting. That is a good reminder to everyone that INP became a CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Web Vital starting today: https://web.dev/blog/inp-cwv-march-12
    • One of our team goals for this year is to find ways to improve WP this metric, so it’s good to keep in mind.

Open Floor

  • @thelovekesh asked Currently when we do a plugin release it triggers two workflows:
    • PL plugin release
    • and Standalone plugin release.
    • Do we always need to trigger the workflow for standalone plugins?
  • @flixos90 By default, new versions of standalone plugins are triggered together with the PL plugin release. Other than that, it would need to be the manual workflow. That’s how it works now. There’s certainly things that can be improved. We need to rethink our release strategy, for instance also whether we want to have releases of the standalone plugins tagged on 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/ in addition, which right now is missing
  • @thelovekesh We might need to streamline release notes for PL and standalone plugins. Currently we are including them for PL plugin. With https://github.com/WordPress/performance/pull/1033, we are attaching all release assets on specific release.
  • @flixos90 Right, the changelog generator also only works for PL right now.
  • @pbearne is working down this list in age order to review/renew [link]
    • @flixos90 I gave your PR for limiting autoloaded options size another review last week, it looks really good, just a few minor things. Have you been able to take a look at that? I’d love to commit this early in the 6.6 cycle
    • @joemcgill Something else that would be helpful is that if you run across an issue that you think should be prioritized because it makes a big impact to improve overall performance for end users, please share it in the channel so we can get more eyes on it and get it into a milestone.
    • @pbearne will start with these tickets 18836 ORDER BY RAND() is slow
      If we can get some modified SQL that works
  • REMINDER: This meeting will continue at 16:00 UTC for the next 3 weeks, then it will switch to 15:00 UTC from April 2 onwards

Our next chat will be held on Tuesday, March 19, 2024 at 16:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

Performance Chat Agenda: 12 March 2024

Here is the agenda for this week’s performance team meeting scheduled for Mar 12, 2024 at 16:00 UTC.

  • Announcements
    • Welcome to our new members of #core-performance
    • WordPress 6.5 Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 is today
    • Reminder on timezone difference for the next 3 weeks, this chat will remain at 16:00 UTC
  • Priority items
    • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
    • Performance Lab 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 (and other performance plugins)
    • Active priority projects
      • Plugin checker
      • Improve template loading
      • INP opportunities research
  • Open floor

If you have any topics you’d like to add to this agenda, please add them in the comments below.


This meeting happens in the #core-performance channel. To join the meeting, you’ll need an account on the Make WordPress Slack.

#agenda, #meeting, #performance, #performance-chat

Miscellaneous Editor changes in WordPress 6.5

In this post, you will find dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. for smaller changes to the editor in WordPress 6.5.


Table of contents

  1. New Block Supports
  2. Footnotes support for Custom Post Types
  3. DependencyExtractionWebpackPlugin: Drop webpack4 and node<18
  4. Enable Block Renaming support for (almost) all blocks
  5. Stabilization of the block editor’s RecursionProvider API
  6. Support for new allowedBlocks field in block.json
  7. Add new selectors to fetch entity revisions
  8. New useSettings hook for reading block instance settings
  9. Introduction of the PluginPostExcerpt Slot Component
  10. Changes to the underlying Composite component implementation
  11. Deprecated components
  12. Setting to disable custom content size controls

New 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. Supports

Background image block support additional features for size, repeat, and position

In WordPress 6.5, the background image block support receives new controls related to the size of the background image: size, repeat, and position.

For blocks that use the background image block support (currently, the Group block is the only coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block to use this support), these optional controls can now be displayed. They are hidden by default behind the tools panel menu in the Background controls on the 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..

How to add backgroundSize support to a theme

There are two ways to add support for backgroundSize and the related size, as well as repeat and position control to a block theme. The simplest one is to opt into the appearanceTools setting, which automatically enables a number of design tools (read more in the developer handbook).

For themes that wish to have more granular control over which UIUI User interface tools are enabled, the backgroundSize support can be opted into by setting settings.background.backgroundSize to true in theme.json. For example:

{
"settings": {
"background": {
"backgroundImage": true,
"backgroundSize": true

Note that as of WordPress 6.4 and WordPress 6.5, the backgroundImagebackgroundSize, and related supports are only available at the individual block level, not in global styles or at the site root. These features will be explored in subsequent releases, with progress tracked 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: #54336.

GitHub pull request: #57005

Props to @andrewserong for writing the dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..

Aspect ratio block support

A new aspect ratio block support has been added in WordPress 6.5, with the Cover block opted-in by default. For themes using the appearanceTools feature in theme.json, the control will be available in the inspector controls under Dimensions.

The feature allows users to set an aspect ratio for the Cover block, and is mutually exclusive with min-height rules. If an aspect ratio is set, then min-height is unset to ensure that height rules do not conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with the aspect ratio. The aspect ratio rules will be output at render-time for the block via an inline style applied to the block’s wrapper.

Note that themes or blocks that add width or height rules to a block will need to take care in testing compatibility with aspect-ratio if they are to opt-in to aspect ratio support. The aspect ratio tends to work most flexibly when width or height rules are not set.

How to add aspectRatio support to a theme

There are two ways to add support for aspectRatio to a block theme. The simplest is to opt into the appearanceTools setting, which automatically enables a number of design tools (read more in the developer handbook).

For themes that wish to have more granular control over which UI tools are enabled, the aspectRatio support can be opted into by setting settings.dimensions.aspectRatio to true in theme.json. For example:

{
"settings": {
"dimensions": {
"aspectRatio": true

GitHub pull request: #56897

Props to @andrewserong for writing the dev note.

Add block gap support to Quote block

The Quote block has blockGap support in WordPress 6.5. It also changes the default spacing between the quote and the citation in block themes that have blockGap enabled, to be consistent with all other blocks that use the layout support. The default spacing will now use the layout spacing rules defined by a theme’s styles.spacing.blockGap value in theme.json.

For themes that use blockGap but wish to use a different gap between the quote and the citation, they can set a spacing.blockGap value for the block directly.

GitHub pull request: #56054

Props to @andrewserong for writing the dev note.

Add padding and margin support to the Pullquote block

Pullquote block now supports padding and margin. At the same time, the browser default margin applied to the blockquote element inside the block has been reset to zero to ensure that padding values are applied accurately inside the block. Depending on themes, this effect may result in visual changes and the need to adjust padding or margin.

GitHub pull request: #45731

Props to @wildworks for writing the dev note.

Footnotes support for Custom Post Types

In WordPress version 6.5, footnotes are now supported on any 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. that fulfills certain requirements. To be eligible for footnotes, a custom post type must have capabilities like 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/., custom fields, 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., and editor support. If a post type meets these requirements, footnotes should be available by default without requiring any changes from the developer.

However, if a developer wants to remove footnotes support in a specific condition, for example, in a particular post type, they can use the block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. like any other block. The following code sample demonstrates how we can remove footnotes support from the “post” post type:


add_filter( 'allowed_block_types_all', 'footnotes_allowed_block_types', 10, 2 );

function footnotes_allowed_block_types( $allowed_blocks, $editor_context ) {
if( 'post' === $editor_context->post->post_type ) {
$allowed_blocks_array = array();
if ( is_array( $allowed_blocks )) {
$allowed_blocks_array = $allowed_blocks;
} else if( $allowed_blocks === false ) {
return false;
} else if ($allowed_blocks === true ) {
$block_types = WP_Block_Type_Registry::get_instance()->get_all_registered();
foreach( $block_types as $block_type) {
$allowed_blocks_array[] = $block_type->name;
}
}

$allowed_blocks = array_values( array_diff( $allowed_blocks_array, array(
'core/footnotes',
) ) );
}
return $allowed_blocks;
}

GitHub pull request: #57353

Props to @jorgefilipecosta for writing the dev note.

DependencyExtractionWebpackPlugin: Drop webpack4 and node<18

As webpack4 doesn’t support modules that blocks require to work, and that webpack5 was released more than three years ago, the support for webpack4 is dropped in WordPress 6.5.

In addition, the support for Node.js version 17 or older is dropped, as Node.js 18 is currently the oldest maintained version.

  • @wordpress/scripts version 17 has dropped official support for unmaintained Node.js versions. The oldest supported Node.js version is now Node.js 18.
  • @wordpress/dependency-extraction-webpack-plugin version 5 has dropped official support for unmaintained Node.js versions. The oldest supported Node.js version is now Node.js 18.
  • @wordpress/dependency-extraction-webpack-plugin version 5 has dropped support for webpack versions less than 5. Users should either upgrade to webpack v5 or continue to use v4 of the 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. Version 4 will not be maintained going forward.
    If you’re using @wordpress/dependency-extraction-webpack-plugin via @wordpress/scripts, the webpack change should not affect you.

GitHub pull request: #57303

Props to @jonsurrell for writing the dev note.

Enable Block Renaming support for (almost) all blocks

Building on the foundation introduced in WordPress 6.4all blocks (with some exceptions) can now be given custom names within the Editor.

The data for this continues to be stored under the name property of the block’s metadata attribute (e.g. attributes.metadata.name).

All blocks (including 3rd party blocks) will be “renameable” by default, with the only exceptions being the following blocks:

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

To disable the ability to rename a block, set the relevant support property to false in block.json:

// block.json
{
	"supports": {
		"renaming": false // disables ability to rename block via the Editor UI
	},
}

GitHub pull request: #54426

Props to @get_dave for writing the dev note.

Stabilization of the block editor’s RecursionProvider API

Context

Originally implemented as an experimental hook named __experimentalUseNoRecursiveRenders  in early 2021, then improved and repackaged in 2022 as the pair __experimentalRecursionProvider and __experimentalUseHasRecursion, the purpose of these APIs is to prevent certain advanced block types from accidentally triggering infinite rendering loops inside the block editor. For example, the Template block must guard against these loops:

  • If a user adds an instance of the Template block into the contents of that same template (linear recursion);
  • If Template A contains Template B, which then contains Template A (mutual recursion).

As of today, the following core block types use the RecursionProvider API: 

  • core/block
  • core/navigation
  • core/post-content
  • core/template-part.

Changes with WordPress 6.5

The API has been promoted to stable, thereby shedding the __experimental prefix. Consumers should now use the API by importing RecursionProvider and useHasRecursion from @wordpress/block-editor, or via the WP global as wp.blockEditor.RecursionProvider and wp.blockEditor.useHasRecursion.

For more details and a working example, see the component’s README.md document.

BeforeAfter
wp.blockEditor.__experimentalRecursionProviderwp.blockEditorRecursionProvider
wp.blockEditor.__experimentalUseHasRecursionwp.blockEditor.useHasRecursion

Backwards compatibility

The former identifiers — __experimentalRecursionProvider and __experimentalUseHasRecursion — are now deprecated. This means that they are still accessible, but their use will trigger a warning in the browser console.

GitHub pull request: #58120

Props to @mcsf for writing the dev note.

Support for new allowedBlocks field in block.json

WordPress 6.5 adds support for the new allowedBlocks field in the block.json file. It lets block developers specify which block types can be inserted as children of the given block. It’s a companion to the existing parent and ancestor fields that have a similar function, namely specifying allowed parent block types. Example of usage in a block.json file:

{
  "name": "core/list",
  "title": "List",
  "allowedBlocks": [ "core/list-item" ]
}

One of the main advantages of the block.json field is that it can be modified by plugins. For example, you can create a block that acts as a custom list item and extend the Core List block so that your custom block can be inserted as its child:

addFilter( 'blocks.registerBlockType', 'my-list-item', ( settings, name ) => {
  if ( name === 'core/list' ) {
    const { allowedBlocks = [] } = settings;
    return { ...settings, allowedBlocks: [ ...allowedBlocks, 'my/list-item' ] };
  }
  return settings;
} );

This new API replaces the allowedBlocks option that can be passed to the useInnerBlocksProps hook inside the block’s edit function. This option was previously used to implement the same check, but it wasn’t extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software.: the list of allowed blocks was hardcoded in the block’s edit function and couldn’t be modified.

The allowedBlocks option on the useInnerBlocksProps hook is still supported and is not deprecated, but you should use it only for specialized use cases. Like when the list of allowed blocks is dynamically calculated for each block: from its attributes, or from its surrounding environment (the parent block etc.).

GitHub pull request: #58262

Props to @jsnajdr for writing the dev note.

Introducing the block_core_navigation_listable_blocks 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.

WordPress 6.5 introduces a new filter, block_core_navigation_listable_blocks which is designed to provide control over the accessible rendering of child blocks used within the Navigation block.

Historically, the Navigation block has conditionally wrapped particular blocks in <li> tags to ensure accessible markup on the front of the site.

With the introduction of the new allowedBlocks API, which technically allows any block to be added as valid children of the Navigation block, developers require a means to indicate which blocks need to be wrapped.

The block_core_navigation_listable_blocks filter allows developers to determine whether a specific block should be wrapped in an <li> 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.), thereby aiding in adherence to 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) standards and the creation of valid markup.

The example below shows the mycustomblock/icon block opting into being wrapped in an <li> tag:

function add_icon_block_to_navigation_listable_blocks( $blocks ) {
$blocks[] = 'mycustomblock/icon';
return $blocks;
}
add_filter( 'block_core_navigation_listable_blocks', 'add_icon_block_to_navigation_listable_blocks' );

GitHub pull request: #55551

Props to @get_dave for writing the dev note.

Add new selectors to fetch entity revisions

Two new selectors have been introduced to Block Editor’s Core Data API to fetch revisions and single revisions for post types that support revisions, for example, posts and pages, templates, and global styles.

getRevisions( kind, name, recordKey, query ) – fetches a post’s revisions where recordKey is the id of the parent post.

getRevision(kind, name, recordKey, revisionKey, query) – fetches a single post revision, where revisionKey is the id of the individual revision.

The functions use similar arguments to existing core data entity functions, such as getEntityRecords with the addition of recordKey (post parent id) and revisionKey (single revision id).

Example usage:

// Returns a collection of revisions.
// `parentGlobalStylesId` is the id (int) of the parent post.
wp.data.select( 'core' ).getRevisions( 'root', 'globalStyles', parentGlobalStylesId, { per_page: -1 } );
 
// Paginated results.
// `parentId` is the id (int) of the parent post.
wp.data.select( 'core' ).getRevisions( 'postType', 'post', parentId, { per_page: 3, page: 2 } )
 
// Get a single revision object.
// `parentId` is the id (int) of the parent post.
// `revisionId` is the id (int) of the individual revision post.
wp.data.select( 'core' ).getRevision( 'postType', 'post', parentId, revisionId );
 
 
// Get a single revision with only the id, parent and date fields.
// `parentId` is the id (int) of the parent post.
// `revisionId` is the id (int) of the individual revision post.
wp.data.select( 'core' ).getRevision( 'postType', 'post', parentId, revisionId, { _fields: 'id,parent,date' } );

getRevisions and getRevision can also be used via useSelect in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. components:

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

function MyComponent() {
    const pageRevisions = useSelect(
        ( select ) =>
            select( coreStore ).getRevisions( 'postType', 'page', pageId ),
        [ pageId ]
    );
    // Do something with pageRevisions...
}

In the background, these selectors’ corresponding resolvers call revisions REST API endpoints.

GitHub pull request: #54046

Props to @ramonopoly for writing the dev note.

New useSettings hook for reading block instance settings

When trying to improve the block editor’s performance for WordPress 6.5, one of the identified issues was related to the useSetting hook that is used by block instances to read various settings provided by the environment they are in: parent blocks, the theme, the block editor itself. It turns out that it’s inefficient to read multiple settings with separate useSetting calls:

const allowFixed = useSetting( 'position.fixed' );
const allowSticky = useSetting( 'position.sticky' );

The editor performance is improved when all the settings are read at once using a new hook called useSettings:

const [ allowFixed, allowSticky ] = useSettings( 'position.fixed', 'position.sticky' );

That’s why WordPress 6.5 introduces this new hook. The useSetting (singular) hook is now deprecated (using it will trigger a console warning), because reading even a single setting is very easy with the useSettings (plural) hook:

const [ allowFixed ] = useSettings( 'position.fixed' );

The only change is that the useSettings hook always returns an array, and the array needs to be destructured to read the single value. Supporting two APIs for performing the same task is therefore not justified.

GitHub pull request: #55337

Props to @jsnajdr for writing the dev note.

Introduction of the PluginPostExcerpt Slot Component

This update introduces a new PluginPostExcerpt slot component within the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ editor. 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. allows for the extension of the Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. panel, allowing developers to customize this area for their needs.

What’s New?

The component enables the addition of custom content within the Post Excerpt panel. This is particularly useful for plugins looking to add extra functionality or information specific to their use case.

Usage

To utilize this new feature, developers can now insert their custom content into the Post Excerpt panel by creating a component that leverages the slot. This allows for a seamless integration of custom functionalities directly within the editor.

The following example shows adding custom content to the post excerpt panel.

import { PluginPostExcerpt } from '@wordpress/edit-post';
import { __ } from '@wordpress/i18n';

const MyPluginPostExcerpt = () => (
  <PluginPostExcerpt
    className="my-plugin-post-excerpt"
  >
    { __( 'Post excerpt custom content' ) }
  </PluginPostExcerpt>
);

GitHub pull request: #55200

Props to @retrofox for writing the dev note.

Changes to the underlying Composite component implementation

WordPress 6.5 no longer includes the Reakit package, as it does not support React beyond v16. The __unstable* Composite component was built on this library, so it has been internally refactored.

What does this mean for consumers?

The primary API has not changed, and can still be imported with no changes. For typical usage patterns, there should be no differences, and in most cases, no action is required from consumers of the package.

However, composite state props must now be generated by the useCompositeState hook; they can no longer be provided by independent state logic. Composite state arguments have not changed, though, and will continue to work as before.

import {
  __unstableComposite: Composite,
  __unstableCompositeGroup: CompositeGroup,
  __unstableCompositeItem: CompositeItem,
  __unstableUseCompositeState: useCompositeState
} from '@wordpress/components';

const state = useCompositeState({ ... });

// ✅ This will continue to work
...( <Composite { ...state } /> );

// ⛔️ This will no longer work
...( <Composite { ...state } currentId={ ... } /> );

Consumers can continue to either spread the state or pass as a single state prop.

// ✅ Used by spreading the state
...(
  <Composite { ...state }>
    <CompositeGroup { ...state }>
      <CompositeItem { ...state }>
        { ... }
      </CompositeItem>
    </CompositeGroup>
  </Composite>
);

// ✅ Or with a single `state` prop
...(
  <Composite state={ state }>
    <CompositeGroup state={ state }>
      <CompositeItem state={ state }>
        { ... }
      </CompositeItem>
    </CompositeGroup>
  </Composite>
);

Because the shape of the returned composite state has changed, consumers can also now no longer destructure specific state props from useCompositeState.

// ✅ This will continue to work
const state = useCompositeState({ ... });

// ⛔️ This will no longer work
const { groups, items } = useCompositeState({ ... });

What’s next?

We anticipate a new stable Composite component to be released in WordPress 6.6, along with the deprecation of this unstable version.

GitHub pull request: #58620

Props to @andrewhayward for writing the dev note.

Deprecated components

Deprecating isPressed in Button component

The isPressed prop on the Button component implicitly sets aria-pressed, with no way to override it. But sometimes Button is used for roles other than button, such as option and checkbox, where aria-pressed is not appropriate, and workarounds are required to add the correct semantics.

In an effort to move away from custom props that have native HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. equivalents, and to allow greater flexibility in component usage, aria-pressed is now supported as a first-class prop, taking precedence over isPressed.

GitHub pull request: #54740

Props to @andrewhayward for writing the dev note.

Outer Margins Deprecation

A number of UI components currently ship with styles that give them top and/or bottom margins. This can make it hard to reuse them in arbitrary layouts, where you want different amounts of gap or margin between components. To better suit modern layout needs, we are in the process of deprecating these outer margins

A few releases ago, we deprecated the outer margins on a number of components and introduced transitional props so consumers could opt into these new styles before they become the default:

  • AnglePickerControl__nextHasNoMarginBottom
  • CustomGradientPicker__nextHasNoMargin
  • FontSizePicker__nextHasNoMarginBottom
  • GradientPicker__nextHasNoMargin

In WordPress 6.5, these margin-free styles have become the default. Any use of these props can be safely removed.

GitHub pull request: #58699, #58700, #58701, #58702

Props to @mikachan for writing the dev note.

CustomSelectControl deprecation

CustomSelectControl used to have a hard-coded width, which was inconsistent with our other form components. In WordPress 6.1, we deprecated this unconstrained width, and introduced the transitional __nextUnconstrainedWidth prop so consumers could opt into these new styles before they become the default.

In WordPress 6.5, these unconstrained width styles have become the default. Any use of the __nextUnconstrainedWidth prop can be safely removed.

GitHub pull request: #58974

Props to @mikachan for writing the dev note.

Remove deprecation warnings for __next36pxDefaultSize

A few releases ago, we introduced a __next36pxDefaultSize prop on several components, meant to coordiate the transition to a new default sizing scheme (36px height). Due to some changes in our design direction, we eventually dropped this prop in favor of the __next40pxDefaultSize prop (40px height), making all existing opt-ins to the __next36pxDefaultSize prop act as an opt-in to the 40px one.

After receiving developer feedback about this ahead of WordPress 6.5, we will no longer throw a deprecation warning for usages of the __next36pxDefaultSize prop, informing consumers of this change. Do note, however, that it will trigger the new 40px size rather than the 36px size, despite the prop name.

GitHub pull request: #58703

Props to @mikachan for writing the dev note.

Remove unused buttonBehavior attribute from the Search block

The Search block had a buttonBehavior attribute, which was referenced internally to determine the display variations of the block. However, this attribute was removed because it could not be changed from the user interface, and the default value was always referenced.

With this change, this attribute will no longer be referenced even if it has been added manually.

GitHub pull request: #53467

Props to @wildworks for writing the dev note.

Setting to disable custom content size controls

Similar to the setting that allows disabling layout controls in WP 6.4, this allows only the content and wide size controls for a constrained layout to be disabled from 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. file, globally or at a per-block level.

To disable the control globally for all blocks, add the following in theme.json under settings.layout:

"allowCustomContentAndWideSize": false

To disable at the block level, add the following in theme.json under settings.blocks:

"core/group": {
"layout": {
"allowCustomContentAndWideSize": false
}
}

Props to @isabel_brison for writing the dev note.


Props to @fabiankaegy and @bph for reviewing the post

#6-5, #dev-notes, #dev-notes-6-5

Miscellaneous developer changes in WordPress 6.5


Table of contents


Administration

A new_admin_email_subject hook is introduced, which filters the subject line of the email sent when a change of site adminadmin (and super admin) email address is initiated. (59250)

The default cursor style has been adopted for labels when its associated form controls are disabled, which improves 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). (59733)

Bootstrap/Load

Two new functions have been introduced to check whether WordPress is serving a 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/. request: wp_is_serving_rest_request() and wp_is_rest_endpoint(). Both functions should only be used after the parse_request action. A new 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. wp_is_rest_endpoint has been added to alter the return value of the wp_is_rest_endpoint() function. (42061)

Canonical

A new wp_admin_canonical_url filter hook is introduced to modify the admin canonical url value. (59545)

Editor

A new metadata global attribute has been added, which is needed for scenarios such as allowing the user to assign custom names to blocks, or for making 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. work with user-modified templates/parts/patterns. (59797)

A new data field allowed_blocks that specifies block types has been added in block.json for block registration and REST API. (60403)

New video and audio pattern categories have been added for better organization of patterns. (60342)

A new setting allowCustomContentAndWideSize that disables layout content and wide size controls has been added to WP_Theme_JSON class. (60133)

Default duotone styles is allowed if not explicitly disabled in theme.json. (60136)

An aspect ratio dimensions.aspectRatio block support feature has been added, with support for both Group and Cover blocks. (60365)

Shadow block support via direct attribute has been replaced with support via style attribute instead. (60377)

The capability to parse CSSCSS Cascading Style Sheets. custom properties for fontSize and fontFamily has been added in WP_Style_Engine. (59982)

background-repeat has been added to the list of safe CSS properties for KSES. (60132)

viewStyle property has been added to block.json. This change brings block styles in parity with block scripts. (59673)

Pattern block’s overrides attribute data structure has been updated and renamed to content. (60456)

Asset registration file .asset.php has been made optional for blocks. (60460)

Support for deferred block variation initialization on the server has been added, which improves performance. The WP_Block_Type object has added a new property, variation_callback, which can be used to register a callback for building variation data only when the block variations data is needed. The WP_Block_Type::variations property has been made private. (59969)

Emoji

twitter/twemoji has been replaced with jdecked/twemoji v15.0.3, which adheres to the Unicode 15 spec and adds support for all Emoji introduced in Emoji 15.0. (57600)

General

$schema property has been added to block.json and theme.json files, which help ensure these files conform to expectations. (60255)

Media

Media icons are .svg by default: .png icon files in the media library have been replaced with .svg versions, which improves sharpness in different screen resolution devices. An argument for wp_mime_type_icon() to control the file type returned has been added. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. usage now always returns an .svg file while maintaining backwards compatibility for any extended usage that expects a .png file. (31352)

Rest API

Terms can be assigned when creating attachments. (57897)

Information that is captured by the fatal error handler within a REST API request will now be provided when WP_DEBUG_DISPLAY is set to true. This additional data, appended under the new key error_data, can facilitate more thorough debugging for REST API errors. (60014)

Error handling in REST 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. fields has been improved to collect all errors in a WP_Error object and continue execution after encountering the first error. 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. enables handling and displaying of multiple errors in a single response, which improves the debugging process. (48823)

original_source and author_text data fields have been added to the templates REST API. (60358)

Shortcodes

Shortcode_parse_atts() will now always return an array, which also improves developer experience as the return value does not have to be manually checked in the shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. itself. (59249)

Sitemaps

The “Last Modified” (lastmod) 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.) has been added for the individual posts and the homepage entries in the sitemap. (52099)

Themes

A new ‘theme_files‘ cache group, setup as a global cache group, has been added to block pattern caches. On a multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site networknetwork (versus site, blog), there will now be a single cache for block pattern data per theme, which allows block pattern caches to be shared between sites on a network and result in less repeated data in the object cache. (60120)

Users

Profile page color palettes:

On a user’s profile page, the color palette options are now displayed in <div> elements instead of tables.

Styles and scripts that target selectors such as table.color-palette or .color-palette td may need to be updated. To support WordPress versions both before and after this change, a 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 can use the new .color-palette-shade class:

.color-palette td,
.color-palette-shade {
border-color: #fff;
}

Props to @sabernhardt for the dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..
(53157)

Props to @davidbaumwald for technical review, to @get_dave and @youknowriad for technical review (Editor), to @jorbin for technical/copy review.

#6-5, #dev-notes, #dev-notes-6-5

Unblocking WP6.5 – Font Library and Synced Pattern Overrides

A number of contributors have flagged a stalemate on a couple of different topics for WP6.5 this week. I want to first thank everyone who joined in the discussions on 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/, 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/., and elsewhere. There were a lot of well-reasoned and important concerns raised and it was an excellent example of the way open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. works in the open. Over the last few days, I’ve discussed the suggested approaches with several coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and core-editor contributors, including pros, cons, and side effects. We’ve reached a consensus on a path forward on both the Font Library and the issue with Synced Pattern Overrides.

Font Library

The font library portion of this post has been superseded by the post WordPress 6.5 release delayed 1 week, in which it’s announced fonts will be uploaded to the fonts sub-directory of the uploads folder.

Let’s ship the Font Library in WordPress 6.5 contingent on the following, which meet all the criteria and offers a good compromise:

  • The Font Library will use wp-content/fonts as the default storage folder. While locating fonts at the same level as themes and plugins gives fonts a lot of prominence, it’s worth noting 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. themes are heading toward composability, allowing users to change collections of fonts, patterns, templates, and color schemes without switching the full theme. Storing fonts at the same level as themes is the first step to breaking down themes in these composable pieces and establishing new first-class concepts and objects within our software.
  • For installations that don’t support modification of the wp-content directory, the Font Library will use wp-content/uploads/fonts as a fallback location, ensuring we stay true to our project philosophy of designing for the majority while still making the feature available to anyone out of the box without extra steps from the user. 
  • The wp_get_font_dir() (source) is available to return the location of the site’s fonts folder. Extenders should use this function as it will allow them to seamlessly integrate with the Font Library regardless of their installed version of WordPress. This allows WordPress to manage the preferred directory location and any factors related to migrating folder locations (e.g., consolidating any remaining installations using wp-content/uploads/fonts to use wp-content/fonts) in future versions without extenders also needing to make changes.
  • For very edge cases, a font_dir 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. (source) still allows overriding the font storage folder.
  • Like wp-content/uploads itself, the fonts directory will not adhere to wp_is_file_mod_allowed / DISALLOW_FILE_MODS to prevent font uploads.
  • The dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. will reflect these changes upon publication.

The following is still to be explored after WP 6.5:

  • A means to move the canonical location of the fonts directory. Should the wp-content directory become writable for a site, a safe path forward should be offered for its owners.
  • Related checks will be added to Site Health.
  • A roadmap will be published outlining where the project components are headed in relation to establishing new first-class concepts outside of previously established paradigms within the software (like breaking down themes into fonts, patterns, templates, etc.). Why was this such an important and impactful decision? And how might it present itself again in the future?

Synced Pattern Overrides

During beta a change was merged that switches how blocks are named and marked as overridable patterns. This is proving to have unforeseen side effects that need further research and testing. Given that we need to focus on the solution outlined above for the Font Library, let’s revert this and try again in WP6.6.

Let’s do it!

While there may still be some disagreement about these decisions, I ask that we all support this fair and reasonable compromise to ensure the release is ready for all to enjoy the Font Library feature that many contributors have worked so hard on over the last few years. Sticking to our philosophies is important, but we must balance that with releasing early and often. We’re not perfect, and the only way to know how is to release features for all to use.

Props to @priethor, @desrosj, @swissspidy, @cbringmann, @dd32, @youknowriad

#6-5

Summary, Dev Chat, March 6, 2024

Start of the meeting in 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/., facilitated by @mikachan.

Announcements

WordPress 6.5 RC 1 was released on March 5, 2024. Thanks to everyone involved and those who helped test.

Forthcoming Releases

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.5

There are several important changes to our normal development process during the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). stage. For more, see this post: WordPress 6.5 Release Candidate Phase.

Please continue to test the 6.5 release. See this list of key features to test, which was published alongside WP 6.5 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. 3.

During the meeting, @marybaum confirmed the release team for RC2, scheduled for next Tuesday, March 12, 2024. @akshayar will host, @davidbaumwald will run Mission Control (MC), and @audrasjb will be the committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. (with @hellofromtonya as a backup).

Next 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/ release: 17.9

Gutenberg 17.9 is scheduled for release on March 13 and will include these issues.

Discussion

The discussion topic for today centered on: how can we make it easier to follow the decision process of major decisions across the project? This was originally raised by @marybaum and there is some background discussion here.

The discussion starts here in Slack. There were no clear next steps identified, but a summary of topics raised include:

  • We could consider having a way to share more regular status updates for primary features in a release in order to surface key decisions, request feedback, get more visibility of concerns raised, etc.
  • When key decisions need to be made, how can we ensure the context is easily accessible?
  • We should be careful about not adding more noise to the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Team blogblog (versus network, site) during an already busy release period.
  • When key decisions are made, they should be documented in an appropriate place that is easy to reference (e.g., 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/, TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress., Core Team blog, etc.)

Highlighted posts

The full list of posts from the last week in Core can be read on the agenda at this link.

Open floor

Due to time, we did not have time for open floor this week.

Props to @mikachan for reviewing.

#6-5, #dev-chat, #summary

A Week in Core – March 4, 2024

Welcome back to a new issue of Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Let’s take a look at what changed on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. between February 26 and March 4, 2024.

  • 49 commits
  • 70 contributors
  • 54 tickets created
  • 9 tickets reopened
  • 102 tickets closed

Ticketticket Created for both bug reports and feature development on the bug tracker. numbers are based on the Trac timeline for the period above. The following is a summary of commits, organized by component and/or focus.

Code changes

Build/Test Tools

  • Add initial tests for the WP_Filesystem_Directclass – #57774
  • Fix the precommit:emojiscript – #60520, #57600
  • Update 3rd-party 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/ Actions – #59805
  • Use a consistent parameter name between rand_str()and rand_long_str()#60401
  • Address capitalization and docblockdocblock (phpdoc, xref, inline docs) inconsistencies in some test class names – #59647
  • Correct capitalization and fix typos in some test class names – #59647
  • Expand wp_parse_id_list()unit tests – #60218, #60217, #59647
  • Use assertSame()in post 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 tests – #59655

Bundled Theme

  • Fix focus outline in Twenty Twenty-Four in the editor – #60535

Coding Standards

Customize

  • 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): Label menu subitems when updating menus – #32728

Docs

  • Add missing @globalmention in wp_interactivity()#60677, #59651
  • Correct the placement of @globaltags in wp-includes/admin-bar.php#60021
  • Document some globals in wp-admin/setup-config.php#60021
  • Document some globals in wp-settings.php#60021
  • Document the $postglobal in comment feed templates – #60021
  • Document the $xmlrpc_loggingglobal in logIO()#60021
  • Document the usage of $_paused_pluginsand $_paused_themesglobals – #60021
  • Improve docblock for WP_Block_Patterns_Registry::register#59532
  • Update WP_Query::tax_querydocblock to reflect that the property can be null#60563

Editor

  • Prevent infinite loops when filtering the font library folder – #60652
  • Simplify sanitization code path in WP_Theme_JSONafter [57496]#60360
  • Update Packages with the latest 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 for 6.5 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 – #60315, #60665
  • do not expose protected post meta fields in 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. bindings – #60651
  • 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.: Rename data_wp_context()to wp_interactivity_data_wp_context()#60575
  • Interactivity API: Rename data_wp_context()to wp_interactivity_data_wp_context()#60575
  • Interactivity API: Revert [57742] pending a 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/ package update – #60575

General

  • Revert r57698 for WP_List_Util::pluck() – #59774
  • Use capital cased singular for Site Icon – #60686

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

  • Ensure that breadcrumbs are properly retained after seeking – #58517, #60687
  • HTML API: Remove superfluous type-coercing empty() check

Help/About

  • Add images to the About page – #60303

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.

  • Cast magic MO marker number to integer – #60678
  • Improve docs for pomo library classes – #44424

Media

  • Accessibility: Copy attachment properties on site icon crop – #60524
  • Use consistent spacing for the media toolbar in both grid and list view – #43904

Plugins

  • Fix an overlap issue with 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 cards dependencies notice – #60501
  • Improve plugin dependency adminadmin (and super admin) notices – #60465
  • Improve plugin dependency related error messages – #60465
  • Plugin Dependencies: Don’t assume API response has a slugproperty – #60540

Privacy

  • Update default privacy page content to use latest block markup – #60530

Query

  • Remove leading whitespace from certain database queries – #56841

Quick/Bulk Edit

  • Ensure the “All” checkbox is properly toggled in certain scenarios – #59121

Toolbar

  • Polish design and code combining duplicate profile links – #43633, #34668

Props

Thanks to the 70 people who contributed to WordPress Core on Trac: @swissspidy (18), @sabernhardt (10), @costdev (8), @shailu25 (4), @upadalavipul (4), @huzaifaalmesbah (4), @joedolson (4), @youknowriad (4), @audrasjb (3), @afragen (3), @peterwilsoncc (3), @gziolo (3), @viralsampat (3), @afercia (3), @mukesh27 (3), @euthelup (2), @desrosj (2), @wildworks (2), @subrataemfluence (2), @cbravobernal (2), @ankitmaru (2), @westonruter (2), @luisherranz (2), @darerodz (2), @rcreators (2), @mmaattiiaass (2), @spacedmonkey (2), @ironprogrammer (2), @oglekler (2), @knutsp (1), @jonsurrell (1), @benjamin_zekavica (1), @richtabor (1), @laurlittle (1), @johnbillion (1), @seusmaniqbal (1), @ianbelanger (1), @pooja1210 (1), @sumitbagthariya16 (1), @devmuhib (1), @tmatsuur (1), @manooweb (1), @get_dave (1), @talldanwp (1), @kraftbj (1), @jorbin (1), @santosguillamot (1), @xknown (1), @wpfed (1), @tadamarketing (1), @harsh175 (1), @designsimply (1), @celloexpressions (1), @kushang78 (1), @hiteshtalpada (1), @webcommsat (1), @ugyensupport (1), @chaion07 (1), @Toru (1), @254volkan (1), @poena (1), @pbearne (1), @SergeyBiryukov (1), @pbiron (1), @pento (1), @hrshahin (1), @dd32 (1), @jamescollins (1), @thekt12 (1), and @joemcgill (1).

Congrats and welcome to our 5 new contributors of the week: @rcreators, @seusmaniqbal, @tadamarketing, @kushang78, @hiteshtalpada ♥️

Core committers: @swissspidy (12), @sergeybiryukov (11), @audrasjb (6), @desrosj (5), @joedolson (3), @youknowriad (3), @dmsnell (2), @davidbaumwald (1), @ryelle (1), @jorbin (1), @antpb (1), @costdev (1), @hellofromtonya (1), and @joemcgill (1).

#6-5, #core, #week-in-core

New Feature: The Block Bindings API

WordPress 6.5 is introducing a new way of extending blocks that substantially reduces the custom code needed to integrate different kinds of data in 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.

This can now be done through the new Block Bindings 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..

What is the Block Bindings API?

Given a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block, rather than displaying a user’s inline written content inside of it, imagine wanting to populate that block with data from a particular source instead. For example, the post metadata or custom PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher logic. What would be the process for doing that?

Screenshot showing a heading and paragraph in the Gutenberg editor, with a large red arrow pointing to the paragraph. The paragraph reads: "How would you replace this sentence with data from somewhere else?"

This is actually a trick question: In previous versions of WordPress, you were unable to do this with 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/’s core blocks — it would instead require creating a custom block with particular logic for reading from the source in question. But this is no longer the case.

With the Block Bindings API, you can now bind core blocks to read from different sources without needing to write custom block boilerplate — this means it is possible to bind a Paragraph to read from a post’s metadata, or a Heading to read from a 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’s PHP logic, all without needing to deal with ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/., block registration, and other particulars of writing custom blocks from scratch for each new source you want to read from.

This initial release of the Block Bindings API in WordPress 6.5 is a big step towards simplifying the process of extending the editor and expanding the capabilities of blocks. Under the hood, the API already powers a showcase feature being shipped in WordPress 6.5 alongside it: Connecting core blocks to custom fields in the post metadata.

Using the same functionality, as an advanced use case, it is also possible to define and have blocks read from custom sources — more on that briefly below.

Note: For a more detailed walkthrough on creating and using Block Bindings than can be related in this brief dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase., see the Introducing Block Bindings tutorial from the WordPress Developer Blogblog (versus network, site).

How do block bindings work?

Overview

Before getting into the rich functionality Block Bindings can enable via custom sources, this section will first review how the API works in general, then detail how to bind core blocks to custom fields in the post metadata.

The following table shows the current compatible blocks and attributes that can be bound: 

Supported BlocksSupported Attributes
Imageurl, alt, title
Paragraphcontent
Headingcontent
Buttonurl, text, linkTarget, rel

While the list of compatibility is short for now, this already enables a wide range of use cases, and support for the rest of the core blocks, as well as custom blocks, is planned for the future.

To use Block Bindings, you would specify that these attributes should be read from particular registered sources using the block markup; the logic for those sources would then be executed when rendering on the frontend.

Upon being bound, editing of the attribute in question will be locked and indicators will appear in the editor to signal that the binding has been created.

Screenshot of the Gutenberg editor; a paragraph is selected and there are icons in the block toolbar, as well as a purple outline around the paragraph, declaring the block as bound.

Specifically, here is how to make use of this via the built-in custom fields support.

Custom fields

Importantly, in this first version of the Block Bindings API, there is no UIUI User interface for binding attributes to custom fields yet. Therefore, it is necessary to add the markup manually using the Code Editor in Gutenberg.

To bind a supported attribute to a custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. in the post metadata, you would use markup such as the following:

<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book-genre"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->

In order for this to work, you would need to make sure the field is registered to the post metadata by including code such as the following in the theme’s functions.php or a plugin.

register_meta(
'post',
'book-genre',
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'default' => 'Default text field',
)
);

*Note that the show_in_rest property must be set to true for the time being due to security considerations, though there are plans to explore how to remove this requirement in the future.

Future sources

Support for post metadata is just a start, and the plan is to add more built-in sources, such as site, user, 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. data, for WordPress 6.6.

That being said, the Block Bindings API already has the functionality to allow for registering of custom sources as well, which is the same functionality used internally to register the core/post-meta source above.

Registering a custom source

Overview

To register a Block Bindings source, one needs to use the register_block_bindings_source() function, which has the following signature:

register_block_bindings_source(
string $source_name,
array $source_properties
);

There are two available parameters:

  • $source_name: A unique name for the custom binding source in the form of namespace/slug. The namespace is required.
  • $source_properties: An array of properties to define the binding source:
    • label: An internationalized text string to represent the binding source. Note: this is not currently shown anywhere in the UI.
    • get_value_callback: A PHP callable (function, closure, etc.) that is called when a block’s bound attribute source matches the $source_name parameter.
    • uses_context: (Optional) Extends the block instance with an array of contexts if needed for the callback. For example, to use the current post ID, it should be set to [ 'postId' ].

When WordPress encounters the custom bindings source while parsing a block, it will run the get_value_callback function, whose signature should look like this:

projectslug_bindings_callback(
array $source_args,
WP_Block $block_instance,
string $attribute_name
);

It can accept up to three parameters, though you don’t need to include them unless your logic requires them:

  • $source_args: An array of arguments passed via the metadata.bindings.$attribute.args property from the block.
  • $block_instance: The current instance of the block the binding is connected to as a WP_Block object.
  • $attribute_name: The current attribute set via the metadata.bindings.$attribute property key on the block.

Using the Registration Mechanism

In practice, here is how you might use the above registration function to create a simple binding for copyright information:

add_action( 'init', 'projectslug_register_block_bindings' );

function projectslug_register_block_bindings() {
register_block_bindings_source( 'projectslug/copyright', array(
'label' => __( 'Copyright', 'projectslug' ),
'get_value_callback' => 'projectslug_copyright_binding'
) );
}

function projectslug_copyright_binding() {
return '&copy; ' . date( 'Y' );
}

And here is how you would bind a paragraph to the copyright source in the block markup, and how it would look on the frontend:

<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"projectslug/copyright"
}
}
}
} -->
<p>Copyright Block</p>
<!-- /wp:paragraph -->
A screenshot of a post titled "Block Bindings Copyright Example"; in the content is a copyright symbol and the year 2024.

Of course, this is a simple example, and you could make use of the other parameters in the callback signature to create more extensive logic.

Additional API functions

Additionally, there are a few other functions currently part of the public API:

  • unregister_block_bindings_source( $string source_name ): Unregisters a source
  • get_all_registered_block_bindings_sources(): Gets all registered sources
  • get_block_bindings_source( $string source_name ): Retrieves a registered source

Also, please note that while the core sources use shared APIs in the editor UI, be aware that these editor APIs will remain private for the time being while discussion continues on how to standardize extensions to the UI around this feature.

This means that if you would like to implement a UI to handle your custom fields easily, for now, you will need to create that functionality yourself.

Further learning and next steps

For more inspiration on how to use Block Bindings in your own projects, see the registration logic in block-bindings.php and the built-in core/post-meta source, and take a look at the Introducing Block Bindings tutorial series.

With that in mind, Block Bindings are just getting started, and future plans include:

  • Add the possibility of editing the value of the 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. fields directly from the UI.
  • Add UI to allow users to add bindings through the Editor.
  • Create new built-in sources: Site data, post data, and taxonomy data.
  • Add support for more core blocks.
  • Add the ability for developers to extend the Editor UI.

As always, feedback is more than welcome, and we invite you to share your ideas and use cases on Github, this post, or WordPress 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/. to help shape the development of the Block Bindings API.

A big thanks to @greenshady for providing code snippets and the initial ideas for this post, as well as @santosguillamot, and @czapla for offering their feedback.

#6-5, #dev-notes, #dev-notes-6-5

WordPress 6.5 Release Candidate Phase

Now that WordPress 6.5 has entered the Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). phase, the following policies are in place.

These policies mainly cover how and when CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. committers can commit. For non-committing contributors, this post may help explain why a Core committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. makes a certain decision.

String Freeze

To allow the Polyglots teamPolyglots Team Polyglots Team is a group of multilingual translators who work on translating plugins, themes, documentation, and front-facing marketing copy. https://make.wordpress.org/polyglots/teams/. time to get their local language’s translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. of WordPress ready, no new strings are permitted to be added to the release. Existing strings can be removed and/or duplicated if needed.

Seek guidance from the Polyglots team leadership for any strings reported as buggy. A buggy string is one that can not be translated to all languages in its current form. 

Tickets on the WordPress 6.5 milestone

For the remainder of the cycle, only two types of tickets may be placed on/remain on the 6.5 milestone:

  • Regressions: bugs that have been introduced during the WordPress 6.5 development cycle, either to existing or new features.
  • Test suite expansion: tests can be committed at any time without regard to code or string freezes. This can cover either new or existing features.

Trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. is now WordPress 6.6-alpha

WordPress 6.5 was recently forked to its own branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch"., trunk is now open for commits for the next version of the software.

Backporting to the 6.5 branch

Backporting commits of production code (that is, anything that ends up in the zip file) now requires double sign-off by two core committers. The dev-feedback keyword should be used to request a second committer’s review, dev-reviewed should be added to indicate a second committer has reviewed and approved the commit to the 6.5 branch.

Commits to the test suite do not require double sign-off.

@props to @swissspidy for peer review.