Block Editor API Changes to Support Multiple Admin Screens in WP 5.8


WordPress 5.8 is the first coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. release where the post editor is no longer the only adminadmin (and super admin) screen that uses 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. The updated widgets editor screen will also support blocks.

During the development process, we found several WordPress 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. defined on the server depended on the $post object that is not present on the widgets screen. So, we decided to deprecate some of the existing filters and introduce context-aware replacements.

These updates enable us to iteratively bring the block-based paradigm to different screens. For example, the navigation editor screen can leverage the new WP_Block_Editor_Context class and will receive more capabilities over time. There are also new methods introduced that allow code reuse for the functionality that needs to be shared between the screen that uses the block editor.

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.#52920.

Class

WP_Block_Editor_Context

A class representing a current block editor context.

The expectation is that the block editor can have a different set of requirements on every screen where it is used. This class allows defining supporting settings that can be used with filters.

Example:

$post_editor_context = new WP_Block_Editor_Context( array( 'post' => get_post() ) );

Functions

get_default_block_categories

A new method that makes it possible to share default block categories.

Example:

print_r( get_default_block_categories() );

get_allowed_block_types

A new method to handle better the list of allowed block types depending on the editor context.

Example:

print_r( get_allowed_block_types( $post_editor_context ) );

get_default_block_editor_settings

Most of settings defined on the client in the @wordpress/block-editor package in store/defaults.js file are now available on the server with the new get_default_block_editor_settings method.

Example:

print_r( get_default_block_editor_settings() );

get_block_editor_settings

A new method ensures that the editor settings can differ depending on the editor’s context.

Example:

$post_editor_settings = array(
	'richEditingEnabled' => user_can_richedit(),
);

print_r( get_block_editor_settings( $post_editor_settings, $post_editor_context ) );

block_editor_rest_api_preload

The logic that preloads common data used with the block editor by processing an array of 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/. paths got abstracted in a new method.

Example:

$preload_paths = array(
	'/',
	'/wp/v2/types?context=edit',
);

block_editor_rest_api_preload( $preload_paths, $post_editor_context ) );

Filters

Several existing block editor filters that depend on the $post object get deprecated:

  • allowed_block_types
  • block_categories
  • block_editor_preload_paths
  • block_editor_settings

New filters are introduced as their replacements that are context-aware.

allowed_block_types_all

Filters the allowed block types for all editor types, defaulting to true (all registered block types supported).

Note: Replaces the deprecated allowed_block_types 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..

Example:

function filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		return array( 'core/paragraph', 'core/heading' );
	}
	return $allowed_block_types;
}

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

block_categories_all

Filters the default array of categories for block types.

Note: Replaces the deprecated block_categories filter.

Example:

function filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		array_push(
			$block_categories,
			array(
				'slug'  => 'custom-category',
				'title' => __( 'Custom Category', 'custom-plugin' ),
				'icon'  => null,
			)
		);
	}
	return $block_categories;
}

add_filter( 'block_categories_all', 'filter_block_categories_when_post_provided', 10, 2 );

block_editor_rest_api_preload_paths

Filters the array of REST API paths that will be used to preloaded common data to use with the block editor.

Note: Replaces the deprecated block_editor_preload_paths filter.

Example:

function filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
	}
	return $preload_paths;
}

add_filter( 'block_editor_rest_api_preload_paths', 'filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );

block_editor_settings_all

Filters the settings to pass to the block editor for all editor type.

Note: Replaces the deprecated block_editor_settings filter.

Example:

function filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
	if ( ! empty( $editor_context->post ) ) {
		$editor_settings['maxUploadFileSize'] = 12345;
	}
	return $editor_settings;
}

add_filter( 'block_editor_settings_all', 'filter_block_editor_settings_when_post_provided', 10, 2 );

#5-8, #dev-notes, #gutenberg

Introducing the template editor in WordPress 5.8

One of the first Full Site Editing tools introduced in WordPress 5.8 is the template editor. The template editor is a special mode available in the post editor that allows you to create, assign, and edit 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. templates to specific posts and pages.

Template Editor in action

Theme blocks

Block Templates take over the whole page allowing you to layout and design the entire page in the editor. Note, this does mean your theme’s provided PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher template won’t be used when rendering a post or page using a block template.

When creating a block template, you can use any of the blocks you’re already familiar with in the post editor.

Additionally a new set of theme blocks are introduced in WP 5.8 that can be useful when building templates. These theme blocks are:

  • Site Logo
  • Site Tagline
  • Site Title
  • 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.
  • Post Title
  • Post Content
  • Post Date
  • 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. 
  • Post 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.
  • Post Categories
  • Post Tags
  • Login/out
  • Page List

Architecture

The templates are saved as a 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. named wp_template. 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/. end point is also available to fetch these templates.

Theme Support

By default, the template editor is enabled for all themes, but themes can opt-out of this feature using

remove_theme_support( 'block-templates' );

#5-8, #dev-notes, #gutenberg

Editor chat summary: Thursday, 10 June 2021

Moved to Thursday 10th June because of WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. EU.

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, on Wednesday, June 10, 2021, 14:00 UTC.

Thank you to all of the contributors who tested the BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

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/ 10.7 final

Gutenberg 10.7  will be the final release to be included in WordPress 5.8

WordPress 5.8

Tracking Board for WordPress 5.8 Must-Haves

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor Call For Testing

Call for testing the 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.-based Widgets Editor. Please report your findings on GithubGitHub GitHub is a website that offers online implementation of git repositories that can 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 the Gutenberg repository

Monthly Plan

The monthly update containing the high-level items that Gutenberg contributors are focusing on for June are:

  • Global Styles.
  • Block-based Widget Editor.
  • Navigation block.
  • Full Site Editing.

For detailed plan check out monthly priorities post.

Updates on the key projects

@nosolosw

Global styles and settings

  • Ported to WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and will be part of the WordPress 5.8.
  • Focus now is on polishing and fixing bugs.
  • Following settings & styles are still experimental and only work with 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:
    • border
    • font-family
    • font-style
    • font-weight
    • text-decoration
    • text-transform

More details and update

@annezazu

Block-Based Widget Editor

  • For widgets, it’s still expected to be opt-out by default via three pathways listed at the end of this post.
  • The team is focused on resolving bugs and triaging reports.
  • In case of big incompatibility issues arise in beta, the plan is to change the screen to opt-in via the theme before 5.8 RC1.
  • It is still a huge help to test as much as you can as this is a big part of wp-adminadmin (and super admin) that’s changing.

Navigation Block

  • It is not likely to be included in 5.8 and efforts have decreased there as a result.
  • For now, folks are still working to resolve the major markup issue and finding a way forward there.

Full Site Editing

  • The focus is mainly on refining various blocks.
  • Currently, bugs are also being resolved around template editing mode. If you’re able to help out, highly recommend helping with the current FSE Outreach Program call for testing and reviewing the upcoming schedule so you can make time to help in the future.
  • If you’re a theme author, any help testing and exploring 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. would be hugely helpful too 
  • As it stands though, keep in mind that “Block-Based Themes do not work in 5.8 directly as-is read the full conversation.

@ntsekouras

Query Block

  • Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block renamed to Post Template and Query label changed to Query Loop.
  • Post blocks are now uneditable when inside the Query Loop block.

@mattchowning

Mobile

  • Audio block and floating toolbar fixes.
  • Integration tests for reusable blocks.
  • In Progress: Editor onboarding, Block picker search, Embeds block.
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native 0.64.x upgrade coming soon, including the upgrade to React v17.

Task Coordination

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

@mikeschroder

  • Updated tests in PR that add the ability to choose the number of tags in the Tag Cloud block.
  • Added PR for making CSSCSS Cascading Style Sheets. valid for inline images with empty width.

Looking for things to work on that would help with 5.8.

@mamduka

  • Fixed the issue when the user got locked in saving state if 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. box saving request failed with a 5xx error.
  • Trying to help with remaining Widget Editor issues in the Project board.

@paaljoachim

  • Want to hight light this issue:
    Reusable block: Add a lock to the parent toolbar to protect the inner content from accidental editing.
    It contains similar functionality as to how the edit button worked in Reusable blocks in WP 5.6. An important feature to get back into Reusable blocks. (Btw the fix will likely get backported to WP 5.7.x)

@annezazu

Open Floor

@janwoostendorp

Highlighted https://github.com/WordPress/gutenberg/pull/31806/ for code review and feedback.

@mkaz

  • In the Docs meeting today, we brought up the suggestion for all teams to create a new docs ticketticket Created for both bug reports and feature development on the bug tracker. for any user-facing features that need documentation. One of the hardest parts of creating the user docs is just knowing what is new and/or changing.
  • For examples of what we try to document for user-facing docs see the Block Editor and Blocks documentation.

@desaiuditd

@mamaduka

Read complete transcript

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

What’s new in Gutenberg 10.8? (9 June)

Two weeks have passed since the last 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, which means the time has come for a new version! Gutenberg 10.8 focuses on stability and performance, while also introducing enhancements to the Template Editor and enables more design tools for blocks, among many other things!

Performance Improvements

This release puts a focus on performance by providing iterative improvements. For instance, Gutenberg now allows passing of __experimentalLayout to a memo’d object so re-renders are not triggered when layout data doesn’t change. Thanks to this, blocks like BlockList don’t need to re-render so often, optimizing the editor performance.

More 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. Design Tools

To extend the design capabilities of blocks, more design tools have been enabled in this release, including support for font-weight for the heading block and support for custom fonts for the List block. As with other design tools, you can easily configure them in your theme.json file. 

Furthermore, it is now possible to add custom margin and padding to the Navigation link block.

Template Editor Enhancements

Gutenberg 10.8 also introduces a couple of enhancements for the Template Editor for a better user experience. Now, the title area in the Template Editor corresponds to the current post title. Also, the appearance of the template details popover has been enhanced with more detailed information and an improved layout. 

These improvements help users understand what post and template are being edited with a more clear and descriptive interface.

10.8

Enhancements

  • Block Editor:
    • Update Modal styling. (31639)
  • Block Library:
    • Archives Block: Show the label for archives block dropdown. (30527)
    • Audio Block: Add an example preview. (32333)
    • File Block: Add an example preview. (32350)
    • Heading Block: Add support for font-weight. (27639)
    • List Block: Add font family to the list block. (27510)
    • Page list block: Add active page classes. (32134)
    • Site Logo: Use option instead of theme-mod. (32229)
  • Components:
    • BoxControl: Add allowReset option. (32345)
      General Interface:
    • Remove opacity animation on canvas. (32266)
  • Design tools:
    • Add Letter-spacing and enable this for site title and site tagline. (31118)
    • Block Supports: Allow skipping spacing support serialization. (31973)
  • Reusable Block:
    • Add Convert to Regular Blocks button to ellipsis Dropdown. (32310)
  • 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/.:
    • Improve parsing and retrieve additional data in REST url-details endpoint. (31763)
  • Template Editing Mode:
    • Don’t display snackbar with the Welcome Guide. (32076)
    • Update the appearance of the template details popover. (32042)
    • Update the title area in the template editor. (32037)
  • Block-based Widgets:
    • 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.:
      • Add preferences menu group label to widgets and customize widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor. (32259)
      • Display wide widgets as popovers in Customizer. (31736)
    • Editor:
      • Link to widgets.php instead of themes.php?page=gutenberg-widgets. (32299)

Bug Fixes

  • Block Library:
    • Image Block: Fix image border radius. (32393)
    • List Block: Fix theme.json styles for the core/list block. (32343)
    • Latest Posts: Limit latest posts 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. width to 100%. (32245)
    • Legacy Widget Block:
      • Fix legacy widget block preview 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.. (32300)
      • Fix legacy widget previews. (32260)
    • Search block: Fix vertical alignment of the search button text. (32340)
  • Block Editor:
    • Block Variation Transforms: Make focus style valid CSSCSS Cascading Style Sheets.. (32305)
    • Fixed Random Collapse of Colors Setting Section. (32388)
    • Block Toolbar:
      • Always close the options menu after toggling the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (31921)
      • Fix toolbar alignment in widget block editor. (31991)
    • Iframe: Fix embed dimensions with missing wp-embed-responsive class. (32057)
    • Patterns: Fix allowed patterns check. (32376)
  • Block-Based Widgets:
    • Editor:
      • Fix error when saving empty Legacy Widget block. (32359)
      • Assume light theme when editor canvas background color isn’t set. (32477)
    • Customizer:
      • Center the welcome image in the narrow viewport of widgets customizer. (32264)
      • Fix aspect ratio of welcome image. (32302)
      • Fix deselecting block when inspector is opened. (32361)
      • Fix escape key events in customizer closing the editor. (32175)
      • Fix some smaller styling issues and bugs in Widgets Customizer. (32072)
      • Fix creating and replacing legacy widgets in customizer. (32005)
  • Components:
    • SuggestionsList: Try to use a unique “key”. (32344)
    • Update Dropdown’s close-on-blur logic to work inside dialogs. (32133)
  • Editor:
    • Allow non-latin characters in slugs. (32232)
    • Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. (32341)
  • General Interface: Fix overlap of Notices and block toolbar. (32238)
  • Template Editing Mode: Remove metaboxes from template mode. (32315)
  • Fix the layout definition in the template mode. (32425)

Performance

  • Buttons: Move options to constants to avoid unneeded renders. (32356)
  • Experimental Layout: Pass the same object when no data changes. (32380)
  • Navigation: Avoid rerendering when the placeholder does not change. (32357)
  • Update Welcome Guides to use external image URLs. (32026)

Experiments

  • Block Editor:
    • Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. (32063)
  • Component System:
    • Add missing Divider, Heading type reference in tsconfig. (32104)
    • Adds a new ZStack component. (31613)
    • Adds new ItemGroup and Item components. (30097)
    • Add new BaseField Component. (32250)
    • Fix Shortcut polymorphism. (31555)
    • Promotes the Elevation component to a full export. (31614)
  • Global Styles:
    • Bugfix: Generate classes from preset slugs in the same way (server & client). (32352)
    • Fix Logic to enable custom colors, gradients, and font sizes. (32200)
    • Fix incorrect useCustomUnits import. (32248)
    • Group typographic block supports under a typography key. (32252)
    • Letter spacing should also respect skip serialization flag. (32459)
    • Skip typography serialization. (32444)
  • Full Site Editing:
    • Align block hover and select styles across list view, site editor, select mode. (31277)
    • Alignment styles: Centre blocks using grid not margins. (32231)
    • Avoid duplicate skip-links in WP 5.8+. (32346)
    • Remove now-obsolete get_template_hierarchy(). (32116)
    • Templates: Remove now-obsolete gutenberg_get_template_paths(). (32066)
  • Navigation:
    • Block:
      • Fix css bleed from navigation. (32384)
      • Fix collapsing 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. of 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.. (32081)
      • Lock the document from scrolling when the modal is open. (32269)
      • Refactor Navigation block paddings/margins to inherit global styles. (31878)
    • Editor:
      • Allow block attributes passed to block renderer by way of wp_nav_menu. (31911)
      • Hide sidebar when a menu isn’t selected. (32090)
      • Fix the visible widget area toolbar. (32262)
      • Fix block toolbar position after scroll. (32212)
      • Move modal state to ManageLocations component. (32078)
  • Site Editor:
    • Fix broken template part converter modal styles. (32097)
    • Remove title attribute from NavigationItem inside the site-editor. (30744)

Documentation

  • Handbook:
    • Fix broken contributors readme files. (32272)
    • Fix misspelling in the Widgets Block Editor section. (32242)
    • Mark all experimental components in the handbook. (32147)
    • Update the create a block theme tutorial. (31269)
    • Update iOSiOS The operating system used on iPhones and iPads. Simulator device command 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/. Native documentation. (32383)
  • Packages:
    • Navigation Editor: Augment and improve Nav Editor (and block) documentation. (31891)
    • Components: Fixed documentation for units attribute in Unit Control. (31901)

Code Quality

  • Block Editor:
    • Rich text:
      • Contextual default shortcut removal. (32327)
      • Remove inline display warning. (32013)
    • Colors: Remove __experimentalUseColors hook. (31438)
    • Remove usages of withState from edit-post and editor. (32349)
  • Block Library:
    • List View: Simplify the BlockNavigation component. (31290)
    • Navigation: Simplify htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. selector in nav burger menu. (32303)
    • Remove “class=” wrapper to already wrapped attributes. (29214)
    • Query Block: Remove query context leftovers. (32093)
  • Blocks Package: Make getBlockSupport support any lodash path.. (32322)
  • Block Supports: Avoid a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice when render_block() is called without attributes. (32135)
  • Components:
    • Button: Deprecate isPrimaryisSecondaryisTertiary and isLink props in favour of variant prop. (31713)
    • Combobox: Remove duplicated ComboboxControl component. (32397)
    • Dashicons: Add types to Icon . (32219)
    • Disabled: Add types to Disabled components. (32105)
    • Remove all withNext wrappers. (32205)
    • Rename ViewOwnProps to PolymorphicComponentProps. (32053)
    • Require explicit children prop for all components. (31817)
    • UIUI User interface Context: Delete unused types from context. (32254)
    • UI Popover: Remove unused content property from types definitions. (32049)
  • Compose:
    • Add types to useRefEffect and clipboard 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.. (31603)
    • Add Types to withGlobalEvents as any. (32290)
    • Add types to useWarnOnChange. (32288)
    • Add types to useViewportMatch. (32287)
    • Add types to useDropZone. (32286)
    • Add types to useDragging. (32285)
    • Add types to useThrottle and typecheck useFocusOutside. (32170)
    • Add types to useKeyboardShortcut. (32168)
    • Add types to useResizeObserver and type checking to useIsomorphicLayoutEffect. (32111)
    • Add types to useFocusReturn. (31949)
    • Add types to usePrevious. (31944)
    • Add types to useReducedMotion and useMediaQuery. (31941)
    • Add types to useMergeRefs. (31939)
    • Add test to useMergeRefs for disabling refs + better documentation. (32044)
    • Add types to useDebounce. (32015)
    • Deprecate withState in favor of useState. (32368)
    • Simplify compose function documentation and point to lodash documentation for it. (32324)
  • Global Styles:
    • Avoid enqueuing global styles twice when running on WordPress 5.8. (32372)
  • Keyboard Shortcuts:
    • Multi select: select all: Restore ref callback. (32318)
  • Linting:
    • Fix eslint warnings in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data package. (32198)
    • Fix eslint warnings in the edit-navigation package. (32196)
    • Fix eslint warnings in the edit-post package. (32195)
    • Fix eslint warnings in the edit-site package. (32156)
    • Fix eslint warnings in the edit-widgets package. (32155)
    • Fix eslint warnings in the editor package. (32153)
    • Fix eslint warnings in the nux package. (32145)
    • Fix eslint warnings in the rich-text package. (32142)
    • Fix eslint warnings in the reusable-blocks package. (32141)
  • Navigation Editor:
    • Fix React warning. (32165)

Tools

  • Babel presets: Prefix build with node command for Windows environments. (#32258). (32329)
  • Workflow:
    • Limit when workflows run on forks. (32114)
    • Only calculate the compressed size on pull requests when necessary. (32161)
    • Performance Tests Workflow:
      • Polish Bash script. (32284)
      • Run suite atop latest stable major WordPress version. (32244)
      • Use latest WP 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". for release tests. (32277)
  • End to End Tests:
    • Fix inserting cover block intermittent failure. (32014)
    • Navigation Editor:
      • Fix failing end-to-end tests. (32043)
      • Skip “Change detection” tests. (32151)
    • Move the Query and PostTitle end-to-end tests out of the experimental directory. (31691)
    • Multi select: Add end-to-end test for gruadual select all. (32304)
    • Remove redundant widget 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. endpoint tests. (32298)
    • Skip tests that are failing with the latest WordPress core. (32228)
  • Eslint: Ignore some eslint rules in react-native folders. (32143)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.85.78s42.03ms
Gutenberg 10.76.75s41.96ms
WordPress 5.76.95s42.81ms

Kudos to all the contributors that helped with the release! 👏

Thanks, @ntsekouras for managing the release and @priethor for helping and guiding me with the release post.

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

Core Editor Improvement: Improve your workflow with List View

As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the latest and greatest to add to your toolbox when it comes to jumping between layers of content and nested blocks. It’s currently visible in the Top Toolbar and will remain open as you navigate through your content. This makes it easy to bounce between the exact pieces of content you want to alter, whether that’s an individual Paragraph 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. at the very end of a post or a Columns block that contains a beautiful selection of products to choose from. Think of it as the ultimate tool to navigate block complexity, select exactly what you need, and easily view all of the blocks that make up your content at once. Better yet, you can toggle it on/off as you need. Check out how it works in action in the video below: 

Video showing someone selecting various blocks with the List View and making changes.

Going a step further, if a block has an ID/anchor set, it’s displayed in List View so it’s easier to distinguish between other blocks and reference as you want. Here’s an example with a portfolio anchor:

While it was originally imagined for the Site Editor where you’re dealing with even more layers of content, it quickly became apparent that the Post Editor would benefit from this tool too and it was incorporated into 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/ 10.7. Keep in mind that more improvements are planned and you’ll have access to this feature in WordPress 5.8, so stay tuned and get excited!

Thank you to @shaunandrews and @cbringmann for helping with this post!

#core-editor-improvement, #gutenberg

What’s next in Gutenberg? (June 2021)

This monthly status update contains the high-level items that 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/ contributors are focusing on for June. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so.

How to follow along with Gutenberg:

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development-related posts and a Site Editing Milestone overview issue that breaks down the upcoming work into more concrete next steps.

WordPress 5.8 focuses

With WordPress 5.8 Beta 1 planned for June 8, the priorities for the month heavily focus on stabilizing, testing, 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. fixing, and documenting the features recently merged in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., which can be followed in the WordPress 5.8 project board. However, design and development in other Gutenberg areas continue as well, and contributions are welcome!

The remaining tasks for 5.8 include:

Widgets Editor

Work on the block-based Widgets Editor is a continued focus. The main efforts target stabilizing and documenting the editor 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. block editor, as well as deciding whether the Widgets Editor should be enabled by default.

If you want to help us test the block-based Widgets Editor, drop by the Widgets Editor Call for Testing and report on your experience!

Follow along:

You can find more information about the current work in progress in this tracking issue, as well as on this project board. Moreover, you can join #feature-widgets-block-editor in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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/. for future WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor-focused meetings.

Navigation Editor

Like the Widgets Editor, the Navigation Editor aims to help expand what’s possible with menus while bringing block functionality to yet another part of WordPress and offer a more modern experience. Current efforts include:

Follow along:

You can follow the progress of this project on this project board or review the new Navigation Editor tracking issue and join #feature-navigation-block-editor in WordPress.org Slack.

Full Site Editing

Work on this major focus for phase 2 is ongoing and is expected to continue as a big-picture goal for 2021. Apart from all the features making it into 5.8, this is the status of the different FSE areas and their upcoming work:

Milestone 1 – Site Editing Infrastructure and UI

  • As the Template Editing Mode is landing in 5.8, efforts focus on testing and stabilizing this feature. If you would like to help, check the current FSE Outreach Program round focused on Template Editing Mode!

Milestone 3 – Global Styles

  • The first version of Global Styles has been merged in core, and focuses need to be revisited. Any relevant update will be posted in this GitHub issue on demand.

Milestone 4 – Theme Blocks

Milestone 5 – Query Block

  • With great power comes great responsibility; because the Query Block is so powerful, contributors are making sure it lands in the best status possible in 5.8 as mentioned in the “WordPress 5.8 focuses” section above.

Further work on the Query block not limited to 5.8 includes:

Milestone 6 – Navigation Block

Follow along:

You can follow the progress of this project with this overview issue showing key milestones for site editing. For each major milestone, there are related issues you can follow if you want a more granular look at each next step.

If you’re interested in testing Full Site Editing, check out the FSE Outreach Program to learn more. If you have questions about Full Site Editing, check out this recent effort to offer answers.

Areas to be aware of

WCEU 2021

WordCamp Europe 2021 is scheduled for 7 to 9 June 2021 as an online event and will include several sessions related to Gutenberg, such as:

  • Full Site Editing (Discussion Panel)
  • A walkthrough of Full Site Editing (Workshop)
  • The Future of Themes in WordPress (Discussion Panel)
  • Blazing fast block development (Talk)

Make sure to register if you haven’t already!

Theme Developers

Calls for testing

Block Patterns

Ways to Get Involved

While the above items are our focuses, don’t forget that you can always help with triage, testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a course on Learn WordPress for how to do triage in GitHub! Check it out and join us.

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate:

  • Core Editor weekly Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg.
  • Block Themes meeting twice monthly on Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing.

Thanks @andreamiddleton and @cbringmann for reviewing this post.

#core-editor #gutenberg-next #gutenberg

What’s new in Gutenberg 10.7? (26 May)

We are already at the end of May and, after making it through the WordPress 5.8 feature freeze, a new GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ version is among us! Version 10.7 represents the last Gutenberg release that will be included in the upcoming WordPress 5.8, so efforts have been focused on bringing forward many of the features that will be included in it. Gutenberg 10.7 introduces new features like the persistent List View in the Post Editor, responsive navigation menus, many design tools for blocks, and enhancements to the top toolbar, as well as iterative performance improvements and a lot of bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Persistent List View in the Post Editor

Before Gutenberg 10.7, the List View available in the Post Editor was displayed in a popover and would close after focusing somewhere else on the page. Starting with Gutenberg 10.7, the persistent List View previously available in the Site Editor is enabled in the Post Editor as well, providing 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. that displays a full post 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. tree. This List View also provides some visual cues as it highlights the currently selected block(s), as well as accents in the canvas the corresponding block when hovering over the list entries. Moreover, anchors added to blocks are displayed in the list, providing a comprehensive view of the post hierarchy and structure. All these improvements combined will make navigating complex content much easier!

Responsive Navigation block

This release introduces the first iteration of responsive menus in the Navigation block. By introducing the new “Enable responsive menu” block option, the Navigation block will collapse into a so-called “Hamburger menu” when displayed on smaller screens. This implementation also prioritizes 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) by providing a fully keyboard-navigable menu.

More block design tools

Gutenberg 10.7 continues to bring us new design tools and to support existing ones in blocks.  This includes custom margin block support with configurable sides, supported by blocks like Site Title and Site Tagline.  The Query block had a special focus in this release with new design options in the form of supporting layout and color options along with the Column block, which now supports color and padding for individual columns.

Top toolbar enhancements

The “Top toolbar” mode’s behavior and placement have been refined in this release so that wider screens won’t display the editor bar and the block toolbar together anymore, improving the user experience. Now when enabled, the top toolbar has a fixed position stacked on top of the canvas, below the editor top bar, independent of the browser width. Furthermore, implementers will also benefit from this iteration unifying toolbar APIs under one simple <BlockTools /> component.

Loading patterns from the Pattern Directory

Working towards providing rich collections of block patterns from the inserter, patterns can now be inserted directly from the WordPress.org Pattern Directory, in a similar way blocks can. This integration opens the door to an exciting future full of beautiful patterns as the number of patterns available in the directory grows. If you want to know more, you can stay tuned for Block Pattern Directory updates and check the most recent design iterations for the Pattern Directory.

10.7

Enhancements

  • Block Editor:
    • Standardize block styles cursor on hover. (31188)
    • Support scripts in iframed editors. (31873)
  • Block Library:
    • Normalize theme block toolbars. (31952)
    • Buttons: Use column-gap for styling. (31386)
    • Column: Add color and padding support to individual column block. (31778)
    • Cover: Allow transforming from group block. (30890)
    • Media & Text: Add media width control. (31002)
    • Post Comments: Add basic CSSCSS Cascading Style Sheets. to the block. (30382)
    • 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.: Update read more placeholder text. (30959)
    • Post 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.: Change wrapper element to figure. (31595)
    • Query:
      • Add layout and color support. (31833)
      • Update bundled patterns to have inherit:False. (31856)
      • Allow term addition from user case-insensitive input. (31301)
    • Site Logo: Add link toggle option. (31162)
    • Site Tagline:
      • Add margin block support. (31809)
      • Expand the site tagline block description. (31426)
    • Site Title:
      • Add additional text formatting options. (31734)
      • Add margin block support. (31728)
    • Social Links: Add some padding to the “click plus to add”. (31927)
  • Components
    • Add Spacer. (31509)
    • Improve display for multiple action buttons in notices. (31799)
    • Polish the switcher for horizontal blocks. (31645)
    • Promote Divider and use readable prop names. (31556)
    • Promote Grid. (31559)
    • Promote View. (31542)
    • Promote VStack and HStack. (31300)
    • UnitControl: Add support for unit step per unit type. (30376)
  • Design tools:
    • Add margin block support with configurable sides. (30608)
    • Add option to disable duotone. (32002)
    • Add reset button to Layout controls. (30828)
    • Add server-side support for margins. (31808)
  • Icons: Update icons. (31533)
  • List View:
    • Display block anchor in List View when set. (31992)
    • Enable persistent List View in the post editor. (31047)
  • Patterns: Load patterns from wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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.. (28800)
  • Template Editing Mode:
    • Add a welcome guide to the template editor. (31330) (32055)
    • Add a Delete template action. (31678)
  • Word count: Adjust to count numbers as words. (27288)

New APIs

  • Babel Preset Default: Configure @babel/preset-env preset to respect a local Browserslist configuration. (31898)
  • Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType. (32030)
  • Global Styles: Rename and stabilize useEditorFeature as useSetting. (31587)
  • Stacked/unified block toolbar. (31134)
  • Babel Preset Default: Add polyfill for WordPress built from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-js. (31279)

Bug Fixes

  • Block Library:
    • Cover:
      • Remove fixed background when previewed in patterns list. (31640)
      • Show placeholder only if it has no inner blocks. (31402)
    • Gallery:
      • Fix focus caption prop for native. (32029)
      • Fix identical images getting duplicated when moving. (30555)
    • Image:
      • Remove figure margins consistently in image blocks. (31650)
      • Fix cover transform and excessive re-rendering. (32102)
    • Post Content: Apply the_content 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. even if content is empty. (31997)
    • Post Comments Count: Fix attributes declaration. (31976)
    • Post Comment Form:
      • Fix stylesheet dependency. (31528)
      • Fix to allow post comment button to inherit button & global styles automatically. (31338)
    • Post Featured Image:
      • Fix non-interactive placeholder when outside of a post context. (31663)
      • Fix placeholder 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.. (31709)
      • Fix selection scroll into view. (31835)
      • Fix image width for wide aligned Post featured image. (32070)
    • Site Logo:
      • Fix duplicate supports declaration. (31544)
      • Return nothing if logo is not set. (31513)
      • Only request media entity when a site logo has been chosen. (31673)
    • Template Part:
      • Don’t show the currently used template part as an option in the ‘replace’ flow. (31720)
      • Fix template part selection searches to use title/area instead of slug/theme. (31520)
      • Use label and icon per variation when displaying placeholders. (31721)
  • Block Editor:
    • Clear selection on 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element click, fix bottom click redirect. (31385)
    • Fix block ref when multiple useBlockProps 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. are called. (31906)
    • Fix moving animation for nested blocks. (31945)
    • Fix selecting aligned blocks. (31904)
    • Fix scrolling to the inserted block issue in the iFramed block editor. (31448)
    • Prevent rendering self also when the wrapper block matches the inserted block. (31592)
    • Toolbar:
      • Fix showing toolbar when caret enters formatting (and extract as implementation detail for the block editor). (31664)
      • Fix toolbar in device preview. (31600)
  • Design tools:
    • BoxControl:
      • Filter out unit only values when checking values defined. (31779)
      • Fix tooltip display for unlinked box control inputs. (31741)
    • Color picker:
      • Fixes color picker segmented control rendering and scrolling issues. (30994)
      • Fix text. (30039)
    • Duotone:
      • Fix duotone transform not transferring settings between blocks. (31801)
      • Fix duotone padding crash. (31780)
    • Font-family: Fix typo in font-family supports for dynamic blocks. (31974)
    • Spacing Support:
      • Properly hide UIUI User interface for disabled properties. (31726)
      • Fix custom units for margin. (31776)
  • Inserter: Hide patterns tab if no patterns are available. (31687)
  • Patterns:
    • Check for allowed blocks recursively in patterns. (30366)
    • Fix unregister_block_pattern notices. (32025)
  • Post Editor: Fix template name displaying incorrectly. (32035)
  • Server Side Rendering: Re-enable passing post_id query arg (#31786). (31787)
  • Template Editing Mode: Fix wrapper block name for template mode. (31985)
  • Writing flow, multi-selection:
    • Fix caret placing when the target is out of view. (31506)
    • Gradually ‘select all’ layers of nested blocks. (31859)
  • Fix errors caused by commits to WordPress core. (32176) (32183) (32059)
  • Components: Fix the list of package dependencies. (32167)
  • Fix issue with 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. title overlapping block toolbar. (32140)
  • Correctly read rawRequest for frontend ESM. (31917)
  • Fix generation of presets classes per block. (32190)
  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Screen:
    • Fix unsaved changes notification. (31757)
    • Fix call to undefined __experimentalRegisterExperimentalCoreBlocks. (32138)

Performance

  • Block editor styles: Memoize transform. (31553)
  • Block editor async mode: Enable only for blocks out of view. (30995)
  • Improve performance of term search. (31703)
  • Blocks package: Memoize getBlockVariations selector. (32120)

Experiments

  • Block Library: Hide the PostAuthor block behind the Gutenberg experimental flag. (31983)
  • Block-based Widgets:
    • API:
      • Improve get_merged_data API so it requires less knowledge from the consumer. (31552)
    • Customizer:
      • Add ‘more’ menu. (31970)
      • Add undo redo to Widgets Customizer. (31653)
      • Add Welcome messaging. (31968)
      • Clear selected block when focusing on element outside the editor. (31530)
      • Fix removing legacy widget not working in customizer. (31535)
      • Implement mobile responsive block toolbar. (31589)
      • Remove Widgets Customizer experimental flag. (31876)
    • Widgets Editor:
      • Add default notices support. (31578)
      • Add more menu. (31926)
      • Add Welcome Guide. (31925)
      • Remove widget screen empty link in adminadmin (and super admin). (31408)
      • Update toolbar and notice positioning. (31582)
  • Navigation Editor and Block:
    • Add home link block. (30926)
    • API:
      • Add locations to the menu response. (31656)
      • Change default to 100 menu items returned. (21243)
    • Allow space between on page list. (29771)
    • Bring implementations of convert nav menu items to blocks back into sync. (31602)
    • Editor:
      • “Add new pages” use menu entity. (31643)
      • Add padding for navigation screen. (31583)
      • Clear ‘stub’ navigation post edits on save. (31735)
      • Fix menu location assignment. (31594)
      • Fix editor margin. (31493)
      • On mobile viewports, reveal the block inspector when clicking the menu name button. (31220)
      • Update sidebar. (31821)
      • Warn the user about unsaved changes. (31197)
    • Enable justification for burger menu. (31877)
    • Extract Navigation Block data fetching and management to hook(s). (31825)
    • Fix nav block hover z index. (31929)
    • Fix nav placeholder colors and height. (31875)
    • Improve the navigation block setup state / placeholder. (31371)
    • Introduce useMenuEntityProp hook. (31132)
    • Normalize converting nav menu items to blocks between Editor and Block. (31606)
    • Responsive Navigation. (30047)
    • Submenus shouldn’t take space unless they’re actually open. (31881)
  • Global Styles
    • Block Supports: Allow skipping serialization of typography attributes. (30880)
    • Fix condition for global styles on mobile. (31844)
    • Fix global styles settings retrieval for REST. (31534)
    • Make core color classes and custom properties always available. (31669)
    • Remove color.link from valid styles and alphabetize the rest. (31516)
    • Return consolidated global styles in REST Request. (31762)
    • Use elements mechanism for link color instead of a CSS variable. (31524)
    • Use mobile context in settings request & global styles. (31819)
    • Use wp_theme 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. for wp_global_styles cpt. (31436)
    • 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.: Replace hardcoded CSS_UNITS and inherit units from theme.json. (31822)
  • Full Site Editing:
    • Template Loader: Make templates arg required. (31671)
    • Simplify template loader logic. (31604)

Documentation

  • Handbook:
    • Add dedicated Block Styles page under Block API directory. (31055)
    • Add info on how to connect to the WP ENV MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. database. (31975)
    • Capitalize GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ properly in contributors README. (31549)
    • Clarify ‘Applying styles from a stylesheet’ how-to guide. (31824)
    • First pass at the documentation for the Widgets Block Editor. (31577)
    • Fix link to ESNext in callout. (31512)
    • Make the theme.json examples copy-pasteable. (32040)
    • Update Glossary with more FSE terminology. (31525)
  • Packages:
    • Add required “directory” prop to package.json template in packages documentation. (31570)
    • Fix typo: “packages” -> “package”. (32036)
    • Improve packages documentation – document root package json and public API knowledge. (31598)
    • Remove duplicate 1.52.0 changelog entry. (31659)
    • Scripts: Fix the CHANGELOG for @wordpress/scripts package. (31532)
    • Typo in edit-navigation layout translators note. (31541)

Code Quality

  • Block editor:
    • Block popover: Move scroll handling to block tools. (31611)
    • Log an error if styles are loaded through the compatibility layer. (31870)
  • Block Library:
    • Post Comments: Make CSS less specific. (31711)
    • Image/Gallery: Remove use of unstableOnFocus. (31796)
  • Linting:
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher lint issues. (32039)
    • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warning for alignment. (31931)
    • Fix lint issues. (31790)
    • Ignore data-no-store-string-literals rule for native files. (31936)
  • Components:
    • Add ToolbarDropdownMenu to render dropdown menus properly inside toolbars. (31460)
    • Don’t pass down index through context. (31852)
    • Remove color() utility function, use values directly. (31661)
    • Remove config() utility function, use values directly. (31646)
  • Compose:
    • Add types to withInstanceId and corresponding hook. (31341)
    • Add types useConstrainedTabbing. (31548)
    • Add types useAsyncList. (31523)
  • Docgen:
    • Replace assertions for getIntermediateRepresentation unit tests with snapshots. (31547)
    • Split getIntermediateRepresentation unit tests in smaller tests. (31468)
  • Inserter: Mark the inserter slot as unstable. (31417)
  • Multi-select:
    • Use ref callback for focus out, merge native selection hooks. (31618)
    • Use writing flow container for focus. (31572)
  • Rich text:
    • Build in isSelected check for children. (31802)
    • Consolidate applying from props. (31635)
    • Each hook should create its own ref. (31477)
    • Extract implementation-specific undo handling of automatic changes. (31676)
    • Extract internal delete handling. (31637)
    • Extract persistent change marking. (31760)
    • Extract splitValue to separate file. (31803)
    • Extract input and selection. (31631)
    • Extract indent list item on space. (31628)
    • Extract select object. (31627)
    • Extract paste handler. (31619)
    • Fix props on DOM element warnings. (31883)
    • Move autocomplete key handler to ref callback. (31770)
    • Move implementation specific attributes. (31674)
    • Move implementation specific delete and enter handling. (31644)
    • Remove avoiding setting selection on mount. (31788)
    • Remove dependency on block client ID. (31752)
    • Remove duplicate active formats state. (31771)
    • Remove old broken format prop. (31767)
    • Remove 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 dependency. (31679)
    • Simplify with hooks. (31718)
  • Rename construct_wp_query_args to build_query_vars_from_query_block. (32041)
  • Theme.json:
    • Remove unused code. (31666)
    • Remove declarations so API has coherence. (31596)
    • Remove: Declarations parameter from compute_style_properties. (31573)
  • Writing flow:
    • Extract and simplify “select all”. (31855)
    • Extract arrow nav. (31851)
    • Extract tab behavior to hook. (31834)
  • 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/.: Use batch endpoint included in Core. (32174)
  • Prepare for adding the Widgets block editor to Core. (32136)
  • Remove gutenberg domain from core blocks. (32152)
  • Remove filter_var from blocks. (32046)
  • 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: Update block editor settings to work with context. (32159)

Tools

  • End-to-end tests:
    • Add template loader unit tests. (31498)
    • Fix end-to-end test inserting the cover block. (31866)
    • Fix flaky change detection tests causing intermittent failures. (31861)
    • Fix intermittent embeds failure. (31860)
    • Fix intermittent failure of rich text end-to-end test. (31864)
    • Increase test coverage for pattern transforms. (31689)
    • Navigation: Add unit tests for onChange handler and fix cases around custom links tags and post-format. (31259)
    • Remove 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. filters performance test. (32028)
    • Skip unstable end-to-end tests. (32031)
    • Try stabilizing customize widgets end-to-end tests. (32023)
    • Update skip failing template mode end to end test. (32017)
    • Update tests for changes in core logic. (31982)
  • Gutenberg plugin: Update compatibility layer for loading separate core block assets. (31894)
  • Workflow:
    • Replace the Cancel workflow with native GitHub Action functionality. (32016)
    • Remove Custom Properties PostCSS plugin. (31715)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.75.28s28.4ms
Gutenberg 10.65.51s26.18ms
WordPress 5.75.35s29.19ms

Kudos to all the contributors that helped with this huge release! 👏

Thanks @youknowriad for managing the release.

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

Editor chat summary: 19 May, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, May 19, 2021, 04:00 PM GMT+1 in Slack. Moderated by @paaljoachim.

WordPress 5.8

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/ 10.7 is the last 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 to be included into WordPress 5.8.
Project board.

@youknowriad who is the technical lead for 5.8 gave this reminder on Tuesday on 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/..
“Reminder: It’s feature freeze day (19 May) in Gutenberg, in general that means one of the most stressful days in our release lifecycles. I’ll be milestoning the PRs that I ideally should make it in the RC with “Gutenberg 10.7″ to ensure we all help review and move these forward. All of these might not make it but that will allow us to know where to prioritize our time for today.”

Gutenberg 10.7 RC

The release candidate of Gutenberg 10.7.0 can be downloaded here.

Gutenberg 10.6

@vdwijngaert  took charge of releasing Gutenberg plugin 10.6! His very first release of the Gutenberg plugin. Koen also wrote the “What’s new in Gutenberg 10.6?” Make coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post.

Widgets editor in WordPress 5.8.

A call for testing of the new widgets editor.

Monthly Priorities

May monthly priorities. Along with Key Project updates.

Global Style

Update from @nosolosw

  • The focus getting tasks ready for Gutenberg 10.7. Most have been landed.
    Will start the merge process in core (got an initial PR for this).
  • Shipped this week. 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: margin, duotone, font-family, layout, typography and link color.
    Settings: REST Request for mobile.
  • Ongoing. Block supports: typography, border, add letter-spacing and migrate more blocks to the 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. system.
    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.. Show both core & theme colors. Link color not to use CSSCSS Cascading Style Sheets. Custom Property. Core merge. Add settings for all editors.
  • Priorities. Merge process for theme.json APIS in core.

Check out the Github comment for additional details.

Block based WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

Update from @andraganescu

  • The widgets block editor has had a good number of fixes and missing features merged for the Gutenberg 10.7 release. Soon a core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. for the Widget Editor feature will be worked on.

Navigation Block

Update from @joen and @andraganescu.

Full Site Editing

Mobile

Update from @mattchowning

  • Block picker search almost done, progress on embeds block, ready to ship first iteration of reusable blocks, working hard to finish up ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native upgrade.

Refactored gallery block

Update from @glendaviesnz
Regarding incorporating the new Gallery block into Gutenberg plugin 10.7 and WordPress 5.8.
We are waiting on two things in order to be able to make a decision on this:

  • The mobile/native code needs to be brought into line, and there have been some issues to resolve with this in terms of backwards compatibility with old versions of the app. Hopefully by next week we will have a better understanding of the timelines around getting this work finished.
  • We are exploring options for providing backwards compatibility in terms of plugin /theme support with the move from an unordered list format. Hopefully we can get some decisions on this by next week as well.

Task Coordination

@annezazu

@copons

Open Floor

Feedback needed

A comment from @zebulan
Improving the Table of Contents block so it can be re-enabled (it was disabled shortly after merge due to implementation concerns). Following PR needs feedback: ToC block: use static markup and only support core Heading and Page Break blocks.

Adding action hooks into FSE

Question from @bobbingwide
How easy will it be to get some do_action() hooks into FSE template and template part logic, to aid problem determination?
@bernhard-reiter
I have started work on backporting the template resolution logic to Core (currently collecting notes at https://core.trac.wordpress.org/ticket/53176). Did you have any specific hooks you wanted added?
@bobbingwide
Yes. Two new ones which I have currently called rendering_template and ‘rendering_template_part.
Add debug divs to templates with appropriate CSS

Regarding Theme.json

Comment from @bobbingwide
Documentation shows JSON with // comments. People are copy and pasting verbatim and it’s not working. But there’s nothing visual to say theme.json is broken. Just an entry in debug.log
1- Can the documentation be changed?
@nosolosw Added this PR: Make the theme.json examples copy-pasteable. (PR has been merged.)
2- Can the parsing failure be surfaced?
@mcsf
Removing comments from the docs is something we should fix asap. In the future, I expect us to have a semi-official tool for building and validating theme.json files, which would answer the question of parsing failures.

Documentation for block themes

Comment from @daisyo
I have started an issue here to discuss documentation for block themes.
Needs feedback. Discussion: Block Theme Developer Documentation.

Expanding the link control with hooks

Comment from @bula
It would be very beneficial to give developers a hook to extend it.
Is it possible that the link popover could be extended with a block hook?
Link Control: Add more controls.

Regarding failing e2e tests.

Comment from @jffng
Is the recommended process to rebase until the checks pass? Or when is it “safe to merge”?
@aristath
All tests are halted on new PRs, so rebasing etc won’t make a difference… We’ll need to wait for GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ to resolve its issues.

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

Core Editor Improvement: Contextual patterns for easier creation

We’ve all been there. Staring at a blank page sometimes with an idea of what you want to create and sometimes with a mind as blank as the page. To make the creation process easier and to leap into the pattern filled future, work is underway to suggest 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. patterns based on the block one is working with. Tied to this, when using the block inserter, block patterns will be suggested where possible. In the long run as this work continues and spreads to more blocks, it will be easier to create content and get inspired without leaving the editor. 

Exploring integrated patterns

For now 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/ 10.6.2, you can see how this flow works with a few blocks including the Heading Block, Query Block, Social Icon Block, Buttons Block, and Paragraph Block. In particular, lots of work has been done around the Query Block to make it easier to create beautiful layouts in a few clicks with this powerful block. Here’s a quick visual showing this experience with the Quote Block: 

Video showing how the block patterns can be found in the transforms options

You can begin to explore these patterns in three ways:

  • Browse through them in the Patterns tab of the Block Inserter.
  • Select directly from the Quick Inserter. 
  • Navigate to them in the transform menu of individual blocks. 

Integrate your custom block patterns

On the flip side, if you’re creating your own custom block patterns, there’s a new experimental blockTypes property being worked on that will allow your patterns to show up in the transform menu. Here’s an example of how this works currently. This is still in the early stages though as it’s utilizing experimental components and might need changes down the road so stay tuned! If you do try this out and run into any bugs/feature requests, feel free to share them in the Gutenberg repo

Help with these efforts

Expect this work to continue expanding both in terms of integrating patterns in intuitive places and in terms of the number of unique patterns. To get a sense of where this work is headed in the future, check out this early PR. If you’re interested in helping in this area, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting Wednesday @ 14:00 UTC. Finally, if you’re wanting to dive into custom block patterns, check out the Learn WordPress course along with the documentation to get started. 

#core-editor, #core-editor-improvement, #gutenberg

What’s new in Gutenberg 10.6? (12 May)

Two weeks have passed since the last 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, which means the time has come for a new version! Gutenberg 10.6 introduces Duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. supports, 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 suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilities of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe

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.: Loading the template editor inside of an 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. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/.. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • Fix bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. with color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • 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:
    • Call deprecated 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. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • 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.:
      • Add white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of 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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen collapsing 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice 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 attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponentifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken in 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.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

Kudos to all the contributors that helped with the release! 👏

Special thanks to @priethor and @youknowriad for guiding me through this release!

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