Editor Chat Agenda: 12 January 2021

Facilitator and notetaker: @jorgefilipecosta

This is the agenda for the weekly editor chat scheduled for Wednesday, January 12 2021, 03:00 PM GMT+1.

This meeting is held in the #core-editor channel in the Making 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/..

  • 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/ 12.4 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).
  • What’s new in Gutenberg 12.3 ( 5 January)
  • WordPress 5.9
  • Updates based on updated scope for site editing projects:
    • 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..
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
    • Components Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

State of the Customizer with block themes in WordPress 5.9

With WordPress 5.9 bringing support for block themes, this results in a few changes to how the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. works and how one can preview themes.

At a high level, this post covers how 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 cannot be previewed due to the introduction of the Site Editor and how the Customizer itself will only appear if a non-block theme is activated or a site has 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 that interacts with the Customizer.

Previewing block themes

If you activate a non-block theme like Twenty Twenty-One, open the Customizer, and click on the Change button in the Active theme section, you will see a warning message displayed for each block theme. Please see the example below:

A warning message is displayed for each block theme in the Customizer

It is displayed because the Customizer doesn’t support block themes. They can be customized in the Site Editor instead.

As a result, to customize a block-based theme, you need to activate it first. If you’re concerned about doing so, it’s recommended that you set up a test site first to explore the theme.

Also, it is not possible to preview inactive block themes because the Site Editor only works with the currently activated block theme. This means that the Live Preview button is not displayed for inactive block themes.

Once the ability to preview any block theme in the Site Editor is implemented, it will be possible to enable the Live Preview button for block themes as well.

Previewing non-block themes

Previewing non-block themes works the same way as in WordPress 5.8. Nothing has changed here.

Customizer and block themes

WordPress removes the Customizer from the Appearance menu if a block theme is enabled. Why? Block themes are customizable within the Site Editor rather than the Customizer.

However, if any callback function is registered for the customize_register action, the Customize menu item will be added. This is necessary to ensure compatibility with plugins that still require the Customizer to be present in the Appearance menu.

Because the Customizer shows up conditionally, various links have been adjusted depending on the type of active theme to ensure a smooth user experience.

For example, if a block theme is activated, the link in the Welcome banner leads to the Site editor. However, if a non-block theme is active, it leads to the Customizer.

Summary

If you need to preview or edit a block theme, activate it first. Previewing non-block themes will continue to work the same way.

WordPress will only add the Customize menu item if a non-block theme is activated or a plugin interacts with the Customizer (please see the customize_register action).

TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #54549 (warning messages for block themes in the Customizer), #54460 (change links depending on the type of active theme), #54337 (conditionally show the Customizer in the Appearance menu).


Props to @annezazu and @hellofromtonya for technical review and proofreading; props to @audrasjb for proofreading; props to @desrosj for providing general feedback on this post.

#5-9, #block-themes, #customize, #customizer, #full-site-editing

Using multiple stylesheets per block

Prior to WordPress 5.9, each blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. could (but not required to) have a stylesheet attached to it. The way blocks could register a stylesheet was by adding a style and/or editorStyle string in their block.json file.

In WordPress 5.9 we’re enhancing that behavior to allow using multiple stylesheets to be registered for each block. This change can benefit both block developers and theme developers, further reducing the total page-weight by only loading styles for blocks that exist on a page.

Blocks will now be able to register multiple stylesheets, and load styles from other blocks when needed. Themes will be able to add styles on a per-block basis instead of loading monolithic stylesheets that are force-loaded anywhere. This has a greater impact on block themes where stylesheets loading is optimised based on the page & layout contents, but can also be used by classic themes.

Usage for block developers

The style and editorStyle properties inside a block.json file can now be either a string, or an array of strings. Each string can be the handle of a previously registered stylesheet, or a path relative to the block.json file’s path, prefixed with file:./.

If you already have a block that uses a string, you needn’t worry. Everything will continue to work as expected. This is not a breaking change as the values can be either an array or a string, to maintain backward-compatibility.

This allows for complex blocks to reuse styles they need from other blocks without the need to duplicate those styles. For example, the comment-form block in WordPress 5.9 doesn’t need to duplicate the button block’s styles, and can instead reuse these styles by adding them to the block.json file:

{
 	"style": [
		"wp-block-post-comments-form",
		"wp-block-buttons",
		"wp-block-button"
	]
}

The same applies to the editorStyle value: Block developers can now define an array of styles, using the same format as the style value.

Usage for theme developers

Theme developers can also register stylesheets on a per-block basis. This way, no unnecessary styles will be rendered on a page unless the block is rendered (assuming the theme is a block-theme, or has opted-in to load separate stylesheets in the case of classic themes).

To do that, a new wp_enqueue_block_style() function was introduced.

The wp_enqueue_block_style function

The wp_enqueue_block_style function accepts 2 arguments, both of which are required:

$block_name

(string, required)

The name of the block – including its prefix/domain. For example the block_name of the paragraph block is core/paragraph.

$args

(array, required)

The arguments are the same used in the wp_enqueue_style function:

$args = array(
	'handle' => 'my-theme-p-styles',
	'src'    => get_theme_file_uri( 'styles/blocks/paragraph.css' ),
	...
);

In addition to the default wp_enqueue_style arguments, you can also add a path argument. This will allow WordPress to inline small assets when possible – if the theme opts-in to that behavior.

Example

Registering an extra stylesheet for the site-title block from a theme:

add_action( 'after_setup_theme', function() {
	// Same args used for wp_enqueue_style().
	$args = array(
		'handle' => 'my-theme-site-title',
		'src'    => get_theme_file_uri( 'assets/blocks/site-title.css' ),
	);

	// Add "path" to allow inlining asset if the theme opts-in.
	$args['path'] = get_theme_file_path( 'assets/blocks/site-title.css' );

	// Enqueue asset.
	wp_enqueue_block_style( 'core/site-title', $args );
} );

WordPress 5.9 enhances the way stylesheets for blocks get loaded. Though these changes have not been ported to block scripts yet, in future releases we plan to sync the two APIs, so block scripts can take advantage of them as well.

props @gziolo for reviewing this post.

#dev-notes, #developer-documentation

Block themes, a new way to build themes in WordPress 5.9

WordPress 5.9 makes the official introduction to 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 in WordPress, which previously required the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to work and prioritizes working with the latest Full Site Editing features. The new default theme, Twenty Twenty-Two, ships with WordPress 5.9 and is the very first default block theme, which makes it a beautiful reference theme to learn from.

If you aren’t ready for a block theme just yet, no worries – classic themes continue to exist and work as always. Keep in mind though that to use the latest and greatest with full site editing, you’ll need to use a block theme, which is tailored to the newest features coming to WordPress. If you’re a theme author, see if you can start to incorporate some of these latest features into your themes, like 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. or the template editor.

A collection of screenshots featuring the Twenty Twenty-Two theme

Overview

At a high level, block themes use blocks to define the templates that layout and structure your entire site. The new templates and template parts are defined in HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., and use the custom styling offered through theme.json.

After enabling a block theme, a new menu item under Appearance called “Editor (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.)” will show. This editor unlocks the ability to visually edit your homepage, templates, and template parts allowing you to create more of what you want in more places.

Thanks to the new features block themes offer and the ability to edit your content directly, the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. menu is hidden from the dashboard unless you’re using a plugin that requires it. Read this GitHub issue for additional context.

For any current block theme authors, please note that there are new, simplified directory names: The name for the directory containing template files will be templates, and the name for the directory containing template part files will be parts. The block- prefix was dropped from both.

Join the fun and submit your own block theme to the WordPress Theme directory using the full-site-editing 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.). Find the listing of available block themes here: https://wordpress.org/themes/tags/full-site-editing/

Building block themes

This 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 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. cannot cover completely how to build a block theme, but here are some pointers to the documentation and reference to get you started.

First off, WordPress 5.9 ships with a beautiful block theme, TwentyTwentyTwo. Look in your theme directory or browse the GitHub repo to review the source and see what a block theme looks like.

The theme-experiments repository has an Empty Theme that is a good boilerplate to start your first block theme from. There is also a command-line script to help generate a block theme to get you started:

git clone https://github.com/WordPress/theme-experiments
cd theme-experiments
php new-empty-theme.php

Follow the prompts to create your theme and then copy the generated folder to your wp-content/themes directory.

Block theme documentation

Theme blocks

Explore building with Theme blocks a set of special blocks included for full site editing and block themes. Theme blocks are dynamic blocks that pull in content similar to the template tag functions from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, for example the Post Title block mirrors the the_title() function.

Here are two examples using theme blocks in a block templates. A singular post template (singular.html) is loaded with the post data, so using a theme blocks can be used stand-alone, for example:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:post-title /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

When using theme blocks on an index or archive page, the theme blocks are used inside a 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. and Post Template, for example:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
   <!-- wp:post-template -->
       <!-- wp:post-title {"isLink":true} /-->
       <!-- wp:post-excerpt /-->
   <!-- /wp:post-template -->
<!-- /wp:query -->

A pattern block can be used to insert translatable content inside a block template, since patterns are PHP-based, there is a mechanism to mark strings for translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. or supply dynamic URLs. See the internationalization documentation


Props to @annezazu for contributing and reviewing this post.

#5-9, #dev-notes

What’s new in Gutenberg 12.3? (5 January)

“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 published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.3 has just been released and is available to download, making it the first Gutenberg release of 2022!

This release contains fewer contributions than usual due to the holiday season that took place in some parts of the world in the last two weeks. However, it still has many important contributions, which is an excellent reminder of WordPress’ contributor diversity. Let’s dive into some of them.

Table of contents

New blocks to build with

We have three brand new blocks at our disposal.

Author Name 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.

As part of an effort to split the Post Author block into separate blocks to allow for even more layout options, the Author Name block has been released. This means you will have extra options to customize the author name to your liking.

Post Author Name

More atomic author-related blocks will follow in the future, like Author AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. or Author Bio.

Comments pagination: Next and Previous blocks

Continuing with the work that has been done on the Comments Query Loop blocks in previous Gutenberg releases, the Comments Next Page and Comments Previous Page blocks have been released.

They are the counterparts of the Next Page, and Previous Page blocks of the Query Loop, but built for the Comments 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.. They display links to navigate the comments forward and backward when not all of the comments are shown on the current page.

Comments Previous and Next Page

With the release of these two blocks, we conclude all the planned inner blocks for the Comments Query Loop. However, work on the Comments Query Loop blocks has not finished yet: more improvements are in the works.

More controls to customize

Blocks keep getting more powerful and this release is no exception.

Spacer block: custom units

Custom units can now be used to configure the Spacer block:

  • EM: Relative to parent font size
  • REM: Relative to root font size
  • VH: Viewport height
  • VW: Viewport width
Custom Units in the Spacer block

Group block: gap support & typography support

The Group block can now use the new Gap support, which adds the ability to choose the distance between the children items of the block.

This new gap setting is also available in the Row variation (added in Gutenberg 11.5), except that the gap is added horizontally instead of vertically. This allows you to have even more options to customize the layout to your liking.

Typography was added to the Group/Row blocks. This can come in handy when you need to define the typography settings for a whole section, like a 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., and you don’t want to duplicate the same typography settings over multiple blocks.

Set your site icon using the Site Logo block

There is now a new option in the Site Logo block settings to sync the site icon* to the Site Logo image. When the toggle is switched on, any updates made to the Site Logo block image are also applied to the site icon. This is an important flow that allows for parity between the Site Editor experience and the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..

* Site icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.

Set site icon with Site Logo settings

Restrict Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. creation for non-adminadmin (and super admin) users

From now on, only admins can create Navigation Menus. This matches the current menu system in WordPress.

When non-admin users add a Navigation block, they will now see a warning telling them they do not have permission to create Navigation Menus and instead will be presented with the option to select an existing one. This allows folks to still add navigation to their content in line with broader WordPress permissions.

Restrict Navigation Menu creation for non-admin users
Non-admin users can still add a Navigation block and select an existing menu.
If non-admin users create a menu, changes won't be saved
If a non-admin user tries to create a menu, changes won’t be saved.

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

There is a new Handbook page that lists all the core blocks included in 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. It contains the name, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., supports, and attributes of each block and it is generated automatically using their block.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. properties. This resource makes it easier for anyone who wants to extend or customize the core blocks.

Core Blocks Reference section in the Handbook

Changelog

These are all the changes included in this release.

Features

Block Library

  • Group/row blocks:
    • Add Gap support. (37459)
    • Add Typography support. (37456)
  • New Author Name block. (36001)
  • Comments Pagination:
    • New Comments Pagination Next block. (36562)
    • New Comments Pagination Previous block. (36912)

Enhancements

Block Library

  • Navigation:
    • Enable an even more compact setup state. (37089)
    • Use rems for padding. (37478)
  • Site Logo: Add option to set site icon from Site Logo block. (35892)
  • Paragraph: Add font family support. (37586)
  • Comments Template: Add comments pagination. (37610)
  • Embeds: Simplify the embed loading state. (37548)
  • Spacer: Add custom units for height and width. (36186)

Global Styles

  • Make the global styles subtitles font smaller. (37600)
  • Add support for nameless font sizes. (37410)

Colors

  • Allow color gradient popover to be above the color toggle. (37430)
  • Make color style labels simpler. (37493)
  • Use subtitle styles for the palette names. (37460)

Design Tools

  • Border panel: Collapse color controls. (37425)

Document Settings

  • Add class name to post author on edit post sidebar. (36269)

Site Editor

  • Update save panel’s cancel button from icon to visible text. (37310)

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)

  • Latest Posts: Add aria-label to featured links. (36251)

Bug Fixes

Block Library

  • Navigation:
    • Restrict Navigation permissions and show UIUI User interface warning if cannot create. (37454)
    • Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. (37358)
    • Fix navigation appender. (37447)
    • Revert all margins on navigation-item in the editor. (37587)
    • Fix page list issues in the overlay. (37444)
    • Show a UI warning when the user does not have permission to update/edit an existing Navigation block. (37286)
    • Try cascading nav styles through class names. (37473)
  • Query Loop:
    • Fix editable post blocks in Query Loop with zero queryId. (37629)
    • Changed the letter case for Post Type to Post type. (37499)
    • Query Pagination Next: Hide block if the custom query has no results. (37553)
    • Revert Query Pagination Next/Previous placeholder(36681). (37520)
  • Site Logo: Fix block alignment issues. (36627)
  • Gallery: Fix block registration hook priority. (37409)
  • Post Content/Title: Reflect changes when previewing a post. (37622)
  • 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.: Specify paragraph as post excerpt tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) name. (37412)
  • Reusable Block: Fix embed handling. (37554)
  • Site icon: Fix site icon styling to display non-square site icons within a square button. (37570)
  • Template Part: Only display a missing notice in debug mode. (37404)
  • ServerSideRender: Fix loading state. (37623)
  • Comments Avatar Block: Show avatar drag handles only when selected. (37567)

Global Styles

  • Color editor discards colors with the default name. (37496)
  • Gradients are not being applied by class. (37597)
  • Impossible to edit the theme and default colors. (37497)
  • Blank site editor when theme name contains a period. (37167)
  • Lower the specificity of font-size CSSCSS Cascading Style Sheets. Custom Properties in the editor. (37526)
  • Use inset shadow on color indicators and adjust spacing. (37500)

Block Editor

  • Fix Enter handling for nested blocks. (37453)
  • Restrict delete multi-selected blocks shortcut. (37595)
  • Avoid using CSS variables for block gap styles. (37360)

Themes

  • Add comment-form and comment-list to default html5 theme support. (37536)
  • Avoid Duplicated “Theme File Editor” menu. (37592)
  • Fix conditional check “Theme File Editor” menu. (37616)
  • Fix duotone theme cache. (36236)

Template Editor

  • Avoid undoing issues when resetting parent blocks for controlled blocks. (37484)
  • Change the color of the welcome dialog close icon, so it is visible against a black background. (37435)
  • Template Editing Mode: Fix options dropdown. (37442)
  • Try to fix auto-resizing in template part focus mode. (37394)
  • Update the template list action labels. (37576)

Site Editor

  • Add customized indicators to plugin templates that have been customized. (37329)
  • Register block editor shortcuts. (37577)
  • Update regex to handle 404 template slug. (37579)
  • Parse 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. blocks outside the content. (37545)

Accessibility

  • Editor: Focus when navigation toggle receives state false. (37265)
  • Navigation: Only add dialog role when modal is open. (37434)

npm Packages

  • Fix missing peer dependencies where ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. is used indirectly. (37578)

Testing

  • Fix flaky Navigation block end-to-end test by mocking out URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org details endpoint to avoid 404. (37501)

Post Editor

  • Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. (37383)

Components

  • ToolsPanel: Allow items to register when panelId is null. (37273)

Design Tools

  • Make block support tools panels compatible with multi-selection. (37216)

Documentation

Packages

  • Add automated core blocks documentation. (36183)
  • Added README for GradientPicker. (37614)
  • Add a link to 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.-block example in gutenberg-examples repo. (37633)
  • Fix parameter type in the render function of file block. (36262)
  • Add changelog entry for __experimentalIsRenderedInSidebar gradient components flag. (37457)

Handbook

  • Switch code distinction to JSX & Plain. (37348)
  • Fix a grammatical error in the Create Block tutorial. (37636)
  • Fix plugin sidebar tutorial not publishing. (37505)
  • Update plugin sidebar to new how to guide template. (37490)
  • Update “Local by Flywheel” name and URL. (37512)
  • Update Meta Boxes to a single page how to guide. (37621)

Code Quality

Compatibility with Core

  • Adds missing block template class properties. (37556)

Formatting

  • Fix lint issues. (37618)
  • Move block patterns compatibility code to lib/compat folder. (37451)

Packages

  • Data:
    • Block top level useSetting paths. (37428)
    • Deprecate receiveUploadPermissions. (37508)

Site Editor

  • Remove dead code. (37581)

Components

  • Storybook: Tweak configuration for v6.4 update. (37544)

Security

Tools

Testing

  • End to end:
    • Switch to using a $eval to fill user creation fields. (37469)
    • Fix and enable remaining navigation block end-to-end tests. (37437)
    • Add block editor shortcuts end-to-end tests. (37624)

Build Tooling

  • Add npm-run-all package to simplify running scripts. (37558)
  • Update caniuse to latest. (37588)
  • Fix pre-commit hook to build block documentation. (37613)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s50 ms
Gutenberg 12.26.7 s49 ms
WordPress 5.86.9 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s41 ms
Gutenberg 12.26.7 s43 ms
WordPress 5.84.3 s12 ms

Time to first block: firstBlock
Keypress event: type


Thank you, @gziolo and @annezazu for helping me with the release process, proofreading this post, and helping to select the release highlights.

Thank you, @javiarce for creating the assets included in this post.

And finally, thanks to all those who contributed to this release!

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

Theme-focused changes and filters in WordPress 5.9

A few theme-related notes are already published in the Miscellaneous Core Changes developer note, including:

  1. The comment text field is now marked as required, and some themes that have special styling for the asterisk or that create a custom logged_in_as or comment_notes_before message may have a reason to update.
  2. The role="navigation" attribute is removed from <nav> elements.

The following changes are especially relevant to theme authors as well.

A CSSCSS Cascading Style Sheets. custom property to offset the adminadmin (and super admin) toolbar height

This new custom property, --wp-admin--admin-bar--height, reflects the admin bar’s height and adjusts responsively on smaller screens. Offsetting content can prevent the admin bar from overlapping it, without needing to copy the media query.

Adjusting for fixed 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. navigation

When clicking “Continue reading” or “Skip to content” links, a header fixed to the top of the page can cover where that content starts.

With the --wp-admin--admin-bar--height CSS variable and scroll padding, modern browsers can compensate for the admin toolbar (when it shows). The toolbar offset of 32 or 46 pixels—depending on screen width—is available on the front end without editing the theme:

html {
	scroll-padding-top: var(--wp-admin--admin-bar--height);
}

Themes that have a fixed header element can add to that. For example, Twenty Seventeen has a fixed header 72 pixels tall, so the scroll padding for the theme includes that measurement:

html {
	scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 72px );
}

Twenty Sixteen does not have a fixed header, but the border styling requires a little more scroll padding because it uses a pseudo-element on the body:

html {
	scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 21px );
}

For more information, see TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets #52623 (CSS variable) and #46371 (scroll padding for anchor links).

Custom header image attributes

Alternative text is customizable (and the alt attribute is empty by default)

Custom header image markup now applies the alternative text assigned to the image (in the Media Library). The alternative text was always the site title, which is not relevant in most use cases. The header image is often decorative only, so the attribute is empty when the text is not supplied.

This affects the following functions:

  • get_header_image_tag()
  • the_header_image_tag()
  • get_custom_header_markup()
  • the_custom_header_markup()

If a theme allows linking the header image (for example, with the get_header_image_tag 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.), restoring the site title as backup alt text could prevent “empty link” 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) errors.

function linked_header_image_markup( $html, $header, $attr ) {
    // This variable might be a theme option instead.
    $header_image_link_option = home_url( '/' );

    $output = '';
    if ( ! empty( $header_image_link_option ) ) {
        $output .= '<a href="' . esc_url( $header_image_link_option ) . '">';
        // Replace empty alt text with site title when image is linked.
        $output .= str_replace( 'alt=""', 'alt="' . esc_attr( get_bloginfo( 'name' ) ) . '"', $html );
        $output .= '</a>';
    } else {
        $output .= $html;
    }

    return $output;
}
add_filter( 'get_header_image_tag', 'linked_header_image_markup', 99, 3 );

New attributes filter

The get_header_image_tag_attributes hook allows developers to filter the attributes of the header image HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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.) before they are escaped, concatenated, and returned in the get_header_image_tag() function.

Filtering with this hook externally and preemptively intercepts the array of attributes, in a manner similar to the wp_get_attachment_image_attributes hook.

Adding classes is one possibility:

function header_image_add_class( $attr ) {
    if ( isset( $attr['class'] ) ) {
        $attr['class'] .= ' special classes';
    } else {
        $attr['class'] = 'special classes';
    }
    return $attr;
}
add_filter( 'get_header_image_tag_attributes', 'header_image_add_class', 10, 1 );

If an attribute should change due to part of the $header object, the filter has a second argument:

function header_add_data_thumbnail_url( $attr, $header ) {
    if ( ! empty( $header->thumbnail_url ) ) {
        $attr['data-thumbnail'] = $header->thumbnail_url;
    }
    return $attr;
}
add_filter( 'get_header_image_tag_attributes', 'header_add_data_thumbnail_url', 10, 2 );

For more information, see Trac tickets #46124 (alt attribute) and #38942 (filter).

Note that this pertains to the Classic RSS widget; 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.-based RSS widget does not include the icon.

With the new rss_widget_feed_link filter, some people may remove or replace the markup for the icon link instead of hiding it with CSS. This can prevent accessibility errors such as empty links, or it can simply remove undesired markup.

If the image is hidden but not the link, that can result in an empty link. A theme that hides .rss-widget-icon in the styles can update the stylesheet with an additional .rss-widget-feed selector.

.widget_rss a.rsswidget .rss-widget-feed,
.widget_rss a.rsswidget .rss-widget-icon {
    display: none;
}

If the theme uses :first-child or :first-of-type to target the feed link, including :not(.rss-widget-title) can support people using the filter as well as people still using older versions of WordPress.

For example, Twenty Seventeen floats the link to the side:

.widget_rss .widget-title .rsswidget:first-child:not(.rss-widget-title) {
    float: right;
}

Twenty Twenty hides the link, when it is in the markup:

.widget_rss .widget-title a.rsswidget:first-of-type:not(.rss-widget-title) {
    display: none;
}

Themes and plugins can remove the icon link with the rss_widget_feed_link hook:

add_filter( 'rss_widget_feed_link', '__return_false' );

For Twenty Twenty-One, the after_setup_theme action contains the filter.

For theme authors who want a custom image or some other change, the filter also allows new content.

function remove_link_from_rss_widget_image( $feed_link ) {
    $feed_icon = includes_url( 'images/rss.png' );
    $feed_link = sprintf(
        '<img class="rss-widget-icon" style="border:0" width="14" height="14" src="%1$s" alt="%2$s"%3$s /> ',
        esc_url( $feed_icon ),
        esc_attr__( 'RSS' ),
        ( wp_lazy_loading_enabled( 'img', 'rss_widget_feed_icon' ) ? ' loading="lazy"' : '' )
    );

    // Output is the image without the link, but this replaces both the link and the image.
    return $feed_link;
}
add_filter( 'rss_widget_feed_link', 'remove_link_from_rss_widget_image', 10, 1 );

Additional 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. to the default output

  1. Themes can style the feed link with the rss-widget-feed class and/or the title link with rss-widget-title, as long as they require at least 5.9.
  1. The image includes the lazy loading attribute when support is declared, either in all situations or specifically in the rss_widget_feed_icon context. 
function disable_rss_widget_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'rss_widget_feed_icon' === $context ) {
        return false;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'disable_rss_widget_image_lazy_loading', 10, 3 );

For more information, see Trac ticketticket Created for both bug reports and feature development on the bug tracker. #52224.


Thanks @ryelle for help with the toolbar section, and thanks to @joedolson and @ryokuhi for reviewing.

#5-9, #dev-notes, #themes

Locking Blocks in WordPress 5.9

To facilitate creating better patterns and templates, WordPress 5.9 comes with a 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. level locking mechanism that works alongside templateLock.

Instead of applying a lock to all inner blocks, you can apply it selectively to individual blocks via the lock attribute. The block level locking would supersede the inherited templateLock value. You can choose to lock moving or removing a 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. definition

You can lock a block by default by adding locking to its definition, for example:

"attributes": {
    "lock": {
        "type": "object",
        "default": {
            "move": true,
            "remove": true
        }
    }
}

You can also lock a specific block in a pattern. In this example, the heading block is now locked and can’t be removed:

<!-- wp:media-text {"align":"full","mediaType":"image","verticalAlignment":"center"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center">
    <figure class="wp-block-media-text__media"><img src="https://s.w.org/images/core/5.8/architecture-04.jpg" alt="Close-up, abstract view of architecture." /></figure>
    <div class="wp-block-media-text__content">
        <!-- wp:heading {"textAlign":"center","level":3,"style":{"color":{"text":"#000000"}},"lock":{"remove": true}} -->
        <h3 class="has-text-align-center has-text-color" id="open-spaces-1" style="color: #000000;"><strong>Open Spaces</strong></h3>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"align":"center","fontSize":"extra-small"} -->
        <p class="has-text-align-center has-extra-small-font-size"><a href="#">See case study ↗</a></p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:media-text -->

Working alongside templateLock

Block locking supersedes template locking, see block template documentation, this allows it to override or undo on the specified block:

For removing:

lock.remove\templateLock"all""insert"false
truecan’t Removecan’t Removecan’t Remove
falsecan Removecan Removecan Remove
undefinedcan’t Removecan’t Removecan Remove

For moving:

lock.move\templateLock"all""insert"false
truecan’t Movecan’t Movecan’t Move
falsecan Movecan Movecan Move
undefinedcan’t Movecan Movecan Move

Unlike templateLock, block locking is not inheritable. If a block is locked from being removed, its children can still be removed. If you want to apply locking on children as well, add templateLock to the inner block component, or templateLock attribute to supporting blocks.


Props to @nadir for writing this 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 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., and @get_dave for reviewing.

#5-9, #dev-notes

Proposal: Approving Block Pattern Directory Submissions

Happy new year, everyone!

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. Pattern Directory will soon be live and ready to accept custom Block Pattern submissions! In anticipation of this new directory, questions have been raised around best practices for submitted Block Patterns.

To help encourage contributors to submit Block Patterns, I propose that some basic automated checks, along with spam filters, are implemented. These automated checks could be modeled after what the Plugins team has in place to avoid naming confusion, trademarks, etc. As long as a submitted Block Pattern passes these checks, it will be published immediately. Of course, if a Block Pattern passes the automated check, but includes inadvisable content (for example, an inappropriate image), it can be flagged for manual review.

If you have any concerns, questions, or thoughts about this proposal, please leave your thoughts in the comments by next Friday, January 14, 2022.

Introducing new language switcher on the login screen in WP 5.9

Edited on December 21, 2021 after [52404].

Edited on January 3, 2022 after [52432]: two filters were renamed.

Edited on January 4, 2022 after [52435]: the dropdown 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. was renamed.

Since WordPress 4.9, it’s possible to control the language of the login screen using the wp_lang query variable (example: wp-login.php?wp_lang=fr_FR). This is a hidden feature that was only used by the interim login modal.

WordPress 5.9 introduces a new language switcher available on the login screen. This dropdown allows users to use the login screen, the password reset screen, and the registration screen in their own language.

Please note that the language list in the dropdown is based on the currently installed languages of the WordPress installation. To install a new language, websites administrators can use the language selector available on Settings > General. Go to site languages drop down, select a language to install and save changes. This installs and switches the site language, you can switch back if you do not want that as the default language.

Filters default arguments for the Languages dropdown

The hook login_language_dropdown_args can be used to filter the default arguments passed to the languages dropdown displayed on the login screen, using an array of arguments for the Languages select input. Here are the default parameters of the $args parameter:

$args = array(
	'id'                          => 'language-switcher-locales',
	'name'                        => 'wp_lang',
	'selected'                    => determine_locale(), // Use the current locale by default.
	'show_available_translations' => false, // Do not show languages that are not installed.
	'explicit_option_en_us'       => true, // Use an explicit value of the 'en_US' option instead of an empty value.
	'languages'                   => $languages, // Contains the list of installed languages.
);

For example, on a website with several languages installed, only show fr_FR and de_DE in the dropdown:

function wporg_filter_login_language_dropdown_args( $args ) {
	$args['languages'] = array( 'fr_FR', 'de_DE' );
	return $args;
}
add_filter( 'login_language_dropdown_args', 'wporg_filter_login_language_dropdown_args', 10, 1 );

Remove the Language dropdown entirely

If you want to remove the Language dropdown entirely, you can use the login_display_language_dropdown filter.

Usage example:

add_filter( 'login_display_language_dropdown', '__return_false' );

Related tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #43700. See also [52404], [52432]

Props @hellofromtonya and @mkaz for proofreading.

#5-9, #dev-notes

New Capability Queries in WordPress 5.9

WordPress 5.9 adds support for capability queries in WP_User_Query. Similar to the existing role/role__in/role__not_in query arguments, this adds support for three new query arguments in WP_User_Query:

  • capability
  • capability__in
  • capability__not_in

These can be used to fetch users with (or without) a specific set of capabilities, for example to get all users with the capability to edit a certain post type.

A new capabilities parameter (mapping to capability__in in WP_User_Query) was added to the 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/. users controller so you can also perform these queries via the REST API.

Under the hood, this will check all existing roles on the site and perform a LIKE query against the capabilities user 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. field to find:

  • all users with a role that has this capability
  • all users with the capability being assigned directly

Important note: In WordPress, not all capabilities are stored in the database. Capabilities can also be modified using filters like map_meta_cap. These new query arguments do not work for such capabilities.

The prime use case for capability queries is to get all “authors”, i.e. users with the capability to edit a certain post type. This is needed for the post author dropdown in the post editor, for instance.

Until now, 'who' => 'authors' was used for this, which relies on user levels. However, user levels were deprecated a long time ago and thus never added to custom roles. This led to constant frustration due to users with custom roles missing from author dropdowns.

Thanks to this new feature, any usage of 'who' => 'authors' in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. was updated to use capability queries instead.

Subsequently, 'who' => 'authors' queries were deprecated in favor of these new query arguments. The same goes for ?who=authors queries for thewp/v2/users REST API endpoint.

In the same run, the twentyfourteen_list_authors() function in the Twenty Fourteen theme was updated to make use of this new functionality, adding a new twentyfourteen_list_authors_query_args filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to make it easier to override this behavior.

Making use of capability queries while retaining compatibility for older WordPress versions, one could use code as follows to support both:

$args = array(
	'orderby'    => 'post_count',
	'order'      => 'DESC',
	'capability' => array( 'edit_posts' ),
);

// Capability queries were only introduced in WP 5.9.
if ( version_compare( $GLOBALS['wp_version'], '5.9-alpha', '<' ) ) {
	$args['who'] = 'authors';
	unset( $args['capability'] );
}

$authors = get_users( $args );

To learn more about this change and the 11-year-old 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. it fixed, check out #16841, [51943], and [52290]

#5-9, #dev-notes