Title: 2021 – Page 29 – Make WordPress Core --- # Yearly Archives: 2021 [ ](https://profiles.wordpress.org/daisyo/) [Daisy Olsen](https://profiles.wordpress.org/daisyo/) 6:04 pm _on_ June 25, 2021 Tags: [5.8 ( 99 )](https://make.wordpress.org/core/tag/5-8/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/), [gutenberg ( 546 )](https://make.wordpress.org/core/tag/gutenberg/) # 󠀁[Block supports API updates for WordPress 5.8](https://make.wordpress.org/core/2021/06/25/block-supports-api-updates-for-wordpress-5-8/)󠁿 Expanding on previously implemented 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 in WordPress [5.6](https://make.wordpress.org/core/2020/11/18/block-supports-in-wordpress-5-6/) and [5.7](https://make.wordpress.org/core/2021/02/24/changes-to-block-editor-components-and-blocks/), WordPress 5.8 introduces several new block `supports` flags and new options to customize your registered blocks. ### **New Supports** **`color._experimentalDuotone`** – Adding duotone support to your block is a new experimental feature. To test, set this property to a string that specifies the CSSCSS Cascading Style Sheets. selector where you want to apply duotone. For example, in your block metadata: ```notranslate supports: { color: { _experimentalDuotone: '> .duotone-img' } } ``` **`color.link`** – Support for link color was added, this mirrors the usage and support for `color.text` that was added in WP 5.6. To use in your block, add the supports flag in the block metadata: ```notranslate supports: { color: { link: true; } } ``` You can define a default value, using attributes and it will also use the values set in `theme.json` if present. For example: ```notranslate attributes: { style: { type: 'object', default: { color: { link: '#FF0000', } } ``` Related ticketticket Created for both bug reports and feature development on the bug tracker.:[ #31524](https://github.com/WordPress/gutenberg/pull/31524) ### **Stabilized Supports 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.** Two features that were experimental in WordPress 5.7 have been stabilized in WordPress 5.8 * `fontSize` previously `__experimentalFontSize` * `lineHeight` previously `__experimentalLineHeight` See[ Block Supports API documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) for usage details. The spacing support was updated and expanded to work for server-side blocks, as well as adding granular support to configure spacing for sides (`top`, `right`, ` bottom`, `left`) individually. For example: ```notranslate supports: { spacing: { margin: true, // Enable margin UI control. padding: true, // Enable padding UI control. } } ``` The following example configures side support for just `top` and `bottom`: ```notranslate supports: { spacing: { margin: [ 'top', 'bottom' ], // Enable margin for arbitrary sides. padding: true, // Enable padding for all sides. } } ``` The spacing `supports` can target specific blocks using `theme.json`, or it’s own attributes. For example, customizing the `top` and `bottom` margins for the `core/ separator` block: ```notranslate "styles": { "blocks": { "core/separator": { "spacing": { "margin": { "top": "100px", "bottom": "100px" } } } } } ``` _Props to _[@mkaz](https://profiles.wordpress.org/mkaz/)_ and _[@nosolosw](https://profiles.wordpress.org/nosolosw/)_ for help with compiling this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.._ Related PRs: [#31808](https://github.com/WordPress/gutenberg/pull/31808), [#31332](https://github.com/WordPress/gutenberg/pull/30332) Tags: #5.8 [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/) [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/) [#5-8](https://make.wordpress.org/core/tag/5-8/) [ ](https://profiles.wordpress.org/oandregal/) [André Maneiro](https://profiles.wordpress.org/oandregal/) 3:56 pm _on_ June 25, 2021 Tags: [5.8 ( 99 )](https://make.wordpress.org/core/tag/5-8/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/), [gutenberg ( 546 )](https://make.wordpress.org/core/tag/gutenberg/) # 󠀁[Introducing theme.json in WordPress 5.8](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/)󠁿 WordPress 5.8 comes with a new mechanism to configure the editor that enables a finer-grained control and introduces the first step in managing styles for future WordPress releases. ## Controlling settings globally and per blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. The introduction of blocks has increased the [number of settings agencies and developers may need control over](https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/). Having a central point of configuration aims to provide a more consistent and complete experience. By creating a `theme.json` file in the theme’s top-level directory, themes can configure the existing editor settings (the font sizes preset, whether custom colors are enabled, etc.) as well as the new ones as they are introduced (the duotone preset, whether margin and padding controls are enabled, etc.). This new mechanism aims to take over and consolidate all the various `add_theme_support` calls that were previously required for controlling the editor. The example below shows how to disable custom colors for all blocks: ```wp-block-code { "version": 1, "settings": { "color": { "custom": false     } } } ``` The addition of the `theme.json` file also provides a way for theme authors to control these settings on a per-block basis ― something that wasn’t possible before. The example below shows how to disable custom colors for all blocks but enable them for the paragraph block: ```wp-block-code { "version": 1, "settings": {         "color": {             "custom": false         },         "blocks": {             "core/paragraph": {                 "color": {                     "custom": true                 }             }         }     } } ``` **Top-level settings will apply to all blocks that support the relevant setting. However, block-level settings can also override the top-level settings for a specific block.** Blocks are addressed by their block name and settings can be added for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as well as third-party blocks. Note: to retain backward compatibility, the existing `add_theme_support` declarations from the theme are retrofitted in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, the result will be the same as setting `settings.color.custom` to `false`. If a setting is declared in `theme.json` that setting will take precedence over the values declared via `add_theme_support`. See the [specification document](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings) for a complete list of features and backcompatibility with `add_theme_support`. ## Blocks can access theme settings with `useSetting` Core blocks have been updated to respect the new settings coming from a theme via` theme.json`. For example, if a block supports a UIUI User interface margin control but the theme has disabled margin across the board, the UI control will not be displayed in the editor. Third-party blocks can also tap into this mechanism by using the `useSetting` ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) hook in its edit function: ```wp-block-code import { useSetting } from '@wordpress/block-editor'; // Somewhere in the block's edit function. const isEnabled = useSetting( 'spacing.margin' ); if ( ! isEnabled ) {     return null; } else {     return } ``` See the [API docs](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useSetting) for `useSetting`. ## CSSCSS Cascading Style Sheets. classes for presets are automatically created and enqueued Previously, themes had to declare presets for the editor and also enqueue the corresponding classes separately. In the `functions.php` file, they’d do: ```wp-block-code add_theme_support( 'editor-color-palette', array(  /* define color presets, including translations */ ) ); ``` And then, in the `style.css`: ```wp-block-code .has--color { /* ... */ } .has--background-color { /* ... */ } /* etc */ ``` By using a `theme.json`, the theme only has to declare their presets. The engine will set up the translations and will take care of creating and enqueuing the corresponding styles to both the editor and the front-end: ```wp-block-code { "version": 1,     "settings": {         "color": {             "palette": [                 {                     "name": "Color name",                     "slug": "color-slug",                     "color": ""                 },                 {                     "name": "...",                     "slug": "...",                     "color": "..."                 }             ]         }     } } ``` See the [specification document](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#presets) for a list of classes generated by preset. ## CSS Custom Properties By [phasing out IE11 support](https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan), many CSS features become available. One of these now available features is CSS Custom Properties. When a theme adds presets via `theme.json`, the engine will enqueue both classes and CSS Custom Properties for them. The example below: ```wp-block-code { "version": 1,     "settings": {         "color": {             "palette": [                 {                     "name": "Black",                     "slug": "black",                     "color": "#000000"                 },                 {                     "name": "White",                     "slug": "white",                     "color": "#ffffff"                 }             ]         }     } } ``` will create this output in CSS: ```wp-block-code /* One CSS Custom Property per preset value. */ body {   --wp--preset--color--black: #000000;   --wp--preset--color--white: #ffffff; } /* The corresponding classes for each preset value. */ .has-black-color { color: var(--wp--preset--color--black) !important; } .has-black-background-color { background-color: var(--wp--preset--color--black) !important;  } .has-white-color { color: var(--wp--preset--color--white) !important; } .has-white-background-color { background-color: var(--wp--preset--color--white) !important;  } ``` See the [specification document](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom) for more examples, how to add and use custom properties unrelated to presets, etc. ## Managed styles for improved coordination One of the struggles theme authors face is the conflicts that appear in an environment with core, theme, and user styles as well as the wide design area that comes with multiple blocks that can be combined indefinitely. The `theme.json` file absorbs most of the common use cases for styling blocks with the goal of reducing the amount of CSS shipped to the browser, mitigating specificity wars, and providing current style info in the UI controls for users. This is the first step in having a mechanism that consolidates all the three origins of styles( core, theme, user) and that will become more important once users can provide global styles in later phases of the project. In the example below, a theme provides styles for the top-level and a couple of blocks: ```wp-block-code { "version": 1, "styles": { "color": { "text": "var(--wp--preset--color--primary)" }, "blocks": { "core/paragraph": { "color": { "text": "var(--wp--preset--color--secondary)" } }, "core/group": { "color": { "text": "var(--wp--preset--color--tertiary)" } } } } } ``` It results in the following CSS output: ```wp-block-code /* Top-level styles resolve to the body selector. */ body { color: var(--wp--preset--color--primary); } /* Block styles resolve to the block selector. */ p { color: var(--wp--preset--color--secondary); } .wp-block-group { color: var(--wp--preset--color-tertiary); } ``` Any block, both core and third-party, can be targeted by its name. See the [specification document](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#styles) for a complete list of supported styles. ## Access to other features There are some features that are enabled or disabled when a theme has support for a `theme.json` file: * The [template editor](https://make.wordpress.org/core/2021/06/16/introducing-the-template-editor-in-wordpress-5-8/) is enabled. * The default layout and margin styles for themes are not enqueued and the new layout options are enabled instead (see [related dev note for layout](https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/)). * The inner div for the group block (`wp-block-group__inner-container`) is removed. * The default `font-family` styles for the editor are not enqueued. [#5-8](https://make.wordpress.org/core/tag/5-8/) [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/) [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/) [ ](https://profiles.wordpress.org/mamaduka/) [George Mamadashvili](https://profiles.wordpress.org/mamaduka/) 4:01 pm _on_ June 24, 2021 Tags: [block-editor ( 139 )](https://make.wordpress.org/core/tag/block-editor/), [core-editor ( 756 )](https://make.wordpress.org/core/tag/core-editor/), [gutenberg ( 546 )](https://make.wordpress.org/core/tag/gutenberg/), [gutenberg-new ( 216 )](https://make.wordpress.org/core/tag/gutenberg-new/)    # 󠀁[What’s new in Gutenberg 10.9? (23 June)](https://make.wordpress.org/core/2021/06/24/whats-new-in-gutenberg-10-9-23-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/](https://wordpress.org/gutenberg/) release, which means the time has come for a new version. Gutenberg 10.9 introduces rich URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org previews for Link Control, the ability to expand/ collapse nested blocks in List View, and a new name for the 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](https://codex.wordpress.org/The_Loop) 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. — Post Template. The release also includes enhancements and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes for Widgets Editor. ## Rich URL Previews When clicking on links in the editor, it’s now possible to [see a rich preview of a URL including site title, meta description, icon and image](https://github.com/WordPress/gutenberg/pull/31464). This is the first feature to take advantage of [the new `url-details` endpoint](https://github.com/WordPress/gutenberg/pull/31763), the enhanced form of which was shipped in 10.8. Currently, rich previews are only enabled for links which point to _external_ URLs and then only for rich text blocks that utilize the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. link format library. In the near future however, we expect to extend this to provide previews of _internal_ URLs and to roll out support to more areas of the software. ## List View Enhancements This release brings a new feature to the List View. It’s now possible to expand and collapse nested blocks, which helps users navigate complex block structures. For example, users can collapse the content in sibling columns to concentrate on that hierarchy level and expand a single column to focus on it. ## A new home for the Block Manager The Block Manager has been moved from the Tools menu, and is now integrated with the new Preferences modal under the Blocks section, consolidating all editor-related preferences in the same modal. [⌊Block Manager preferences⌉⌊Block Manager preferences⌉[ ## Updated template creation modal This modal has been polished, including an improved welcome guide, to make creating new templates a breeze. ## Renamed Query and Query Loop blocks With the Query and Query Loop blocks becoming stable and coming to WordPress 5.8, they have been renamed to increase clarity about their functionality. The Query Loop block [has been renamed to Post Template](https://github.com/WordPress/gutenberg/pull/32514) to better represent its purpose within Query, whereas the Query block label now refers to it as Query Loop. ## 10.9 ### Enhancements * Components: - UnitControl: Reduce code duplication for defined units. ([32731](https://github.com/WordPress/gutenberg/pull/32731)) - BoxControl: Add support for grouped directions (vertical and horizontal controls).( [32610](https://github.com/WordPress/gutenberg/pull/32610)) - Notice: Added onDismiss option in createInfoNotice. ([32338](https://github.com/WordPress/gutenberg/pull/32338)) * Block Library: - Latest Posts: Limit latest-post authors dropdown to users with published posts.( [32662](https://github.com/WordPress/gutenberg/pull/32662)) - Calendar: Add loading and empty state. ([31504](https://github.com/WordPress/gutenberg/pull/31504)) - Query Loop: Add helpful text to the block. ([32694](https://github.com/WordPress/gutenberg/pull/32694)) - Query Loop: Rename QueryLoop to PostTemplate and change Query label. ([32514](https://github.com/WordPress/gutenberg/pull/32514)) - Spacer: Try an alternate min-height fix. ([32543](https://github.com/WordPress/gutenberg/pull/32543)) - Heading: Show all heading levels in toolbar group. ([32483](https://github.com/WordPress/gutenberg/pull/32483)) - Post Terms: Add a CSSCSS Cascading Style Sheets. class to identify the 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](https://codex.wordpress.org/Taxonomies#Default_Taxonomies)..( [31832](https://github.com/WordPress/gutenberg/pull/31832)) - Legacy 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.: Move block to `@wordpress/widgets`. ([32501](https://github.com/WordPress/gutenberg/pull/32501)) * Block Editor: - Enhance link control UIUI User interface with rich URL previews. ([31464](https://github.com/WordPress/gutenberg/pull/31464)) - List View: Allow expanding and collapsing of nested blocks. ([32117](https://github.com/WordPress/gutenberg/pull/32117)) - Editor Breadcrumb: Add a `rootLabelText` prop. ([32528](https://github.com/WordPress/gutenberg/pull/32528)) - Don’t hardcode CSS units. ([32482](https://github.com/WordPress/gutenberg/pull/32482)) - Refactor LinkControl component to support ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) 17. ([32552](https://github.com/WordPress/gutenberg/pull/32552)) - Remove snapshots from tests for LinkControl. ([32592](https://github.com/WordPress/gutenberg/pull/32592)) * Block Support: - Update border support to allow non-pixel units. ([31483](https://github.com/WordPress/gutenberg/pull/31483)) * Icons: - Add new icons. ([32371](https://github.com/WordPress/gutenberg/pull/32371)) - Tweak people icon. ([32354](https://github.com/WordPress/gutenberg/pull/32354)) - Expose `trendingDown` and `trendindUp` icons. ([32124](https://github.com/WordPress/gutenberg/pull/32124)) * Template Editing Mode: - Update welcome guide language for the template editor. ([32639](https://github.com/WordPress/gutenberg/pull/32639)) - Translate delete template confirmation message. ([32647](https://github.com/WordPress/gutenberg/pull/32647)) - Disable renaming templates named by core; Display descriptions. ([32636](https://github.com/WordPress/gutenberg/pull/32636)) - Update the template creation modal. ([32427](https://github.com/WordPress/gutenberg/pull/32427)) * Post Editor: - Use the post type singular_name as the root Block Breadcrumb label. ([32609](https://github.com/WordPress/gutenberg/pull/32609)) - Absorb block manager within blocks preferences. ([32166](https://github.com/WordPress/gutenberg/pull/32166)) * Widget Editor: - Hide some settings from the “Options” menu on small screens. ([32690](https://github.com/WordPress/gutenberg/pull/32690)) - Add Breadcrumbs Block. ([32498](https://github.com/WordPress/gutenberg/pull/32498)) - Use button block appender in widget areas. ([32580](https://github.com/WordPress/gutenberg/pull/32580)) - Add show block bread crumbs feature toggle to more menu. ([32569](https://github.com/WordPress/gutenberg/pull/32569)) - Unhide the classic menu widget. ([32431](https://github.com/WordPress/gutenberg/pull/32431)) ### Bug Fixes * Block Library: - Image Block: Fix cover block exists check. ([32666](https://github.com/WordPress/gutenberg/pull/32666)) - Embed: Fix embed to paragraph transform when caption has rich text formats.( [32355](https://github.com/WordPress/gutenberg/pull/32355)) - Columns: Fix deprecation caused when adding a column. ([32378](https://github.com/WordPress/gutenberg/pull/32378)) - Site Logo: Fix site-logo not getting removed on `remove_theme_mod`. ([32370](https://github.com/WordPress/gutenberg/pull/32370)) - Social: Try to fix color inheritance for social links. ([32625](https://github.com/WordPress/gutenberg/pull/32625)) - Social: Correctly position the link popover when List View is open. ([32525](https://github.com/WordPress/gutenberg/pull/32525)) - Code: Try an experimentalSelector. ([31742](https://github.com/WordPress/gutenberg/pull/31742)) * Block Editor: - RichText: Fix loss of list content when switching list types. ([32432](https://github.com/WordPress/gutenberg/pull/32432)) - `useBlockDropZone`: Fix horizontal indicator. ([32589](https://github.com/WordPress/gutenberg/pull/32589)) - Inserter: Fix insertion point displaying when there are no inserter items.( [32576](https://github.com/WordPress/gutenberg/pull/32576)) - Drop indicator: Show around dragged block and show above selected block for file drop. ([31896](https://github.com/WordPress/gutenberg/pull/31896)) - Fix vertical scroll in horizontal toolbar. ([32655](https://github.com/WordPress/gutenberg/pull/32655)) - Fix block multi selection in nested blocks. ([32536](https://github.com/WordPress/gutenberg/pull/32536)) - Fix block toolbar overlap with 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.. ([32424](https://github.com/WordPress/gutenberg/pull/32424)) * Blocks: - Avoid keeping the same client ID when transforming blocks. ([32453](https://github.com/WordPress/gutenberg/pull/32453)) - Allow themes to add inline styles for all blocks when using lazy styles loading.( [32275](https://github.com/WordPress/gutenberg/pull/32275)) * Components: - RadioControl: Add `hideLabelFromVision` prop. ([32414](https://github.com/WordPress/gutenberg/pull/32414)) - DatePicker: Fix crash when navigating between months. ([31751](https://github.com/WordPress/gutenberg/pull/31751)) - Autocomplete: Prevent setting state for unmounted component. ([32654](https://github.com/WordPress/gutenberg/pull/32654)) * Editor: - Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. ([32658](https://github.com/WordPress/gutenberg/pull/32658)) * Widget Editor: - Don’t delete a widget if it is moved to a different area. ([32608](https://github.com/WordPress/gutenberg/pull/32608)) - Fix button spacing in header. ([32585](https://github.com/WordPress/gutenberg/pull/32585)) - Decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities for name and description props. ([32503](https://github.com/WordPress/gutenberg/pull/32503)) - Fix dirty state after adding new block. ([32573](https://github.com/WordPress/gutenberg/pull/32573)) - Don’t add undo levels when editing records on save. ([32572](https://github.com/WordPress/gutenberg/pull/32572)) - Save deleted and restored widgets. ([32534](https://github.com/WordPress/gutenberg/pull/32534)) - Don’t show widgets in menu without theme support. ([32420](https://github.com/WordPress/gutenberg/pull/32420)) - Fix inspector opening on click outside widget area. ([32450](https://github.com/WordPress/gutenberg/pull/32450)) - Legacy Widget: Don’t display “No preview” when widget has image tags. ([32605](https://github.com/WordPress/gutenberg/pull/32605)) * Post Editor: - Prevent locking users in saving state when saving metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes fails. ([32485](https://github.com/WordPress/gutenberg/pull/32485)) - Edit Post: Add metaBoxUpdatesFailure action. ([32623](https://github.com/WordPress/gutenberg/pull/32623)) * Full Site Editing - Only add skip-link for block themes & templates on the frontend. ([32451](https://github.com/WordPress/gutenberg/pull/32451)) * Storybook: - Fix misc warnings. ([32401](https://github.com/WordPress/gutenberg/pull/32401)) * Data: - useSelect: Silently error (for block zombie children). ([32088](https://github.com/WordPress/gutenberg/pull/32088)) ### Performance * Block Editor: Remove `is-typing` root class. ([32567](https://github.com/WordPress/gutenberg/pull/32567)) * Header Toolbar: UseCallback to avoid unnecessary rerenders. ([32406](https://github.com/WordPress/gutenberg/pull/32406)) ### Experiments * Component System: - Promote `Scrollable` component to a full export. ([32446](https://github.com/WordPress/gutenberg/pull/32446)) - Promote `Surface` component to a full export. ([32439](https://github.com/WordPress/gutenberg/pull/32439)) * Global Styles: - Allow presets to provide an empty set of values. ([32679](https://github.com/WordPress/gutenberg/pull/32679)) - Allow theme authors hook into the preset classes generated by global styles.( [32627](https://github.com/WordPress/gutenberg/pull/32627)) - Update `WP_Theme_JSON` APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. so presets are always keyed by origin. ([32622](https://github.com/WordPress/gutenberg/pull/32622)) - Make syntax errors in `theme.json` visible to users. ([32404](https://github.com/WordPress/gutenberg/pull/32404)) - Enqueue global styles in editor only once. ([32377](https://github.com/WordPress/gutenberg/pull/32377)) - Enqueue core and theme colors by using separate structures per origin. ([32358](https://github.com/WordPress/gutenberg/pull/32358)) - Do not migrate the old typography support if core already did it. ([32487](https://github.com/WordPress/gutenberg/pull/32487)) - Generate classes and custom properties for global styles in the same way the post editor does. ([32766](https://github.com/WordPress/gutenberg/pull/32766)) * Full Site Editing: - Template resolution for new posts and pages. ([32442](https://github.com/WordPress/gutenberg/pull/32442)) - Monopolize navigation in Site Editor. ([31810](https://github.com/WordPress/gutenberg/pull/31810)) - Prevent duplicate queries. ([32700](https://github.com/WordPress/gutenberg/pull/32700)) - Split `theme.css` styles loading. ([31239](https://github.com/WordPress/gutenberg/pull/31239)) * Navigation Editor: - Alternative fix: Set persisted menu id when no menus or missing menu. ([32313](https://github.com/WordPress/gutenberg/pull/32313)) ### Documentation * Handbook: - Update references to `register_block_type_from_metadata`. ([32582](https://github.com/WordPress/gutenberg/pull/32582)) - Fix duotone support documentation. ([32440](https://github.com/WordPress/gutenberg/pull/32440)) - Detail the Gutenberg release post process. ([32429](https://github.com/WordPress/gutenberg/pull/32429)) - Update Legacy Widget documentation with new info on `show_instance_in_rest` feature. ([32726](https://github.com/WordPress/gutenberg/pull/32726)) ### Code Quality * Components: - Remove duplicated compose dependencies. ([32709](https://github.com/WordPress/gutenberg/pull/32709)) - Sort entries in `packages/components/tsconfig.json`. ([32675](https://github.com/WordPress/gutenberg/pull/32675)) - Update the popover component to rely on `useDialog`. ([27675](https://github.com/WordPress/gutenberg/pull/27675)) - Card: Add types. ([32561](https://github.com/WordPress/gutenberg/pull/32561)) - Card: Refactor subcomponents folder structure. ([32557](https://github.com/WordPress/gutenberg/pull/32557)) * Compose: - Add types to `useDialog` and `useFocusOnMount`. ([32676](https://github.com/WordPress/gutenberg/pull/32676)) - Add types to `withSafeTimeout`. ([32674](https://github.com/WordPress/gutenberg/pull/32674)) - Type `withState` as any. ([32326](https://github.com/WordPress/gutenberg/pull/32326)) * Block Library: - Page List: Avoid generic function names for page list block internal functions.( [32736](https://github.com/WordPress/gutenberg/pull/32736)) - Latest Comments: Correct the format used for duplicate hook documentation.( [32563](https://github.com/WordPress/gutenberg/pull/32563)) - Login/out: Update documentation for render_block_core_loginout function. ( [32158](https://github.com/WordPress/gutenberg/pull/32158)) * Block Editor: Remove unused select block function. ([32532](https://github.com/WordPress/gutenberg/pull/32532)) * Core Data: Fix typos. ([32480](https://github.com/WordPress/gutenberg/pull/32480)) * Editor: Fix different typos in inline comments, deprecation warnings and variable names. ([32474](https://github.com/WordPress/gutenberg/pull/32474)) * Linting: - Edit Post: Fix no-string-literals warning. ([32518](https://github.com/WordPress/gutenberg/pull/32518)) - Add ESLint import resolver. ([31792](https://github.com/WordPress/gutenberg/pull/31792)) * 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/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party.: - Copy `wp_should_load_separate_core_block_assets` function from core. ([32611](https://github.com/WordPress/gutenberg/pull/32611)) - Fix PHPCSPHP Code Sniffer [PHP Code Sniffer,](https://github.com/squizlabs/PHP_CodeSniffer) a popular tool for analyzing code quality. The [WordPress Coding Standards](https://github.com/WordPress/WordPress-Coding-Standards/) rely on PHPCS. Warnings. ([32513](https://github.com/WordPress/gutenberg/pull/32513)) ### Tools * Workflow: - Fix the add milestone githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/) action. ([32691](https://github.com/WordPress/gutenberg/pull/32691)) - Use a different cache key for the PR automation workflow. ([32588](https://github.com/WordPress/gutenberg/pull/32588)) - Improvements to NPM package caching across workflows. ([32458](https://github.com/WordPress/gutenberg/pull/32458)) - Limit when release artifacts are built on forks: Pt. 2. ([32494](https://github.com/WordPress/gutenberg/pull/32494)) * Build: - Load .min.js files even in dev mode, output unminified assets only in prod.( [32621](https://github.com/WordPress/gutenberg/pull/32621)) - Upgrade husky package to the latest version. ([32077](https://github.com/WordPress/gutenberg/pull/32077)) - Generate minified .min.js and unminified .js files for GB js entry points when building. ([31732](https://github.com/WordPress/gutenberg/pull/31732)) - Include Legacy Widget block files in the plugin build. ([32803](https://github.com/WordPress/gutenberg/pull/32803)) * End to End Tests: - Update mentions tests to use `toMatchInlineSnapshot`. ([32727](https://github.com/WordPress/gutenberg/pull/32727)) - Add more user auto-completer (mentions) coverage. ([32697](https://github.com/WordPress/gutenberg/pull/32697)) - Ignore JQMIGRATE (jQuery migrate) deprecation warnings. ([32656](https://github.com/WordPress/gutenberg/pull/32656)) * Linting: - Update linting and formatting for test plugin files. ([28033](https://github.com/WordPress/gutenberg/pull/28033)) - Update Eslint JSDoc package, introducing JSDoc line alignment check. ([25300](https://github.com/WordPress/gutenberg/pull/25300)) * wp-env: Bump TT1 Blocks to v0.4.7. ([32661](https://github.com/WordPress/gutenberg/pull/32661)) ## 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. | Version | Loading Time | KeyPress Event (typing) | | Gutenberg 10.9 | 4.50s | 28.93ms | | Gutenberg 10.8 | 4.91s | 30.30ms | | WordPress 5.7 | 5.71s | 32.09ms | Kudos to all the contributors that helped with the release! 👏 _Thanks, [@priethor](https://profiles.wordpress.org/priethor/), [@get\_dave](https://profiles.wordpress.org/get_dave/), and [@mikeschroder](https://profiles.wordpress.org/mikeschroder/) for helping with the release post.  Thanks to [@youknowriad](https://profiles.wordpress.org/youknowriad/) and [@bernhard-reiter](https://profiles.wordpress.org/bernhard-reiter/) for coordinating the release._ [#block-editor](https://make.wordpress.org/core/tag/block-editor/), [#core-editor](https://make.wordpress.org/core/tag/core-editor/), [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#gutenberg-new](https://make.wordpress.org/core/tag/gutenberg-new/) [ ](https://profiles.wordpress.org/danfarrow/) [Dan Farrow](https://profiles.wordpress.org/danfarrow/) 1:30 pm _on_ June 24, 2021 Tags: [agenda ( 1,142 )](https://make.wordpress.org/core/tag/agenda/), [core-css ( 191 )](https://make.wordpress.org/core/tag/core-css/)    # 󠀁[CSS Chat Agenda: June 24, 2021](https://make.wordpress.org/core/2021/06/24/css-chat-agenda-june-24-2021/)󠁿 This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for [Thursday June 24 at 21:00 PM UTC](https://www.timeanddate.com/worldclock/fixedtime.html?msg=WordPress+Core+CSS+Chat&iso=20210624T21&p1=1440&ah=1). The meeting will be held in the [#core-css](https://make.wordpress.org/core/tag/core-css/) channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/). * **Housekeeping** * **Discussion: Custom Properties** ([#49930](https://core.trac.wordpress.org/ticket/49930)) Discuss the workflow for adding Custom Properties to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Cross-reference with [related Gutenberg discussion](https://github.com/WordPress/gutenberg/issues/29568)( thanks [@colorful-tones](https://profiles.wordpress.org/colorful-tones/)!) * **Open Floor + CSS Link Share** If there’s any topic you’d like to discuss, please leave a comment below! [#agenda](https://make.wordpress.org/core/tag/agenda/) [ ](https://profiles.wordpress.org/get_dave/) [David Smith](https://profiles.wordpress.org/get_dave/) 10:48 am _on_ June 24, 2021 Tags: [core-editor ( 756 )](https://make.wordpress.org/core/tag/core-editor/), [core-editor-summary ( 185 )](https://make.wordpress.org/core/tag/core-editor-summary/), [meeting notes ( 227 )](https://make.wordpress.org/core/tag/meeting-notes/), [summary ( 975 )](https://make.wordpress.org/core/tag/summary/) # 󠀁[Editor chat summary: 23rd June 2021](https://make.wordpress.org/core/2021/06/24/editor-chat-summary-23rd-june-2021/)󠁿 This post summarises the weekly editor chat meeting ([agenda here](https://make.wordpress.org/core/2021/06/21/editor-chat-agenda-23rd-june-2021/)) held on [2021-06-23 14:00 UTC](https://www.timeanddate.com/worldclock/fixedtime.html?iso=20210623T1400) in [Slack](https://wordpress.slack.com/archives/C02QB2JS7/p1624456801410400). Moderated by [@get_dave](https://profiles.wordpress.org/get_dave/profile/). ## 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/](https://wordpress.org/gutenberg/)󠁿 10.9 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/](https://wordpress.org/plugins/)󠁿 or can be cost-based plugin from a third-party. release * At the time of the meeting the latest release was [10.9 RC 1.](https://github.com/WordPress/gutenberg/releases/tag/v10.9.0-rc.1) * Following the meeting [@mamaduka](https://profiles.wordpress.org/mamaduka/) pushed [the _stable_ release of 10.9](https://github.com/WordPress/gutenberg/releases/tag/v10.9.0). * The release notes will be published shortly. ## WordPress 5.8 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 3 * 22nd June 2021 saw the release of [WordPress 5.8 Beta 3](https://wordpress.org/news/2021/06/wordpress-5-8-beta-3/). * It was noted that there is still time for bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions( adverse changes from the previous version) being the highest priority. fixes and documentation to be written. * [@desrosj](https://profiles.wordpress.org/desrosj/) explained that there is a** 4th (unscheduled) Beta** planned for later this week (likely Thursday or Friday)– if there are additional things you’d like to see get tested during the beta cycle( and not after RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see [alpha (beta)](https://make.wordpress.org/core/2021/page/29/?output_format=md#alpha-beta).), there’s still time to get those in. * The [project board for Gutenberg and WordPress 5.8](https://github.com/WordPress/gutenberg/projects/55) still has outstanding items needing contributors. * [Due dates for dev notes](https://wordpress.slack.com/archives/C02QB2JS7/p1624458704463000)– the field guideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the [WordPress release cycle](https://make.wordpress.org/core/handbook/about/release-cycle/). The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page. is published on the same day as RC 1, which is this upcoming Tuesday. Ideally, all dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. should be in by then. If there are any notes that will _not_ be ready, they can be added to the guide after publish, but having them for that date is preferred. ## Key Project updates Updates were requested for the key projects: ### Native Mobile Team [@mattchowning](https://profiles.wordpress.org/mattchowning/) provided the update: _Shipped_ * ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) Native 0.64.x upgrade, including upgrade to React v17! _Coming Soon:_ * Gallery 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. refactor * Tooltips to help with Editor Onboarding _In Progress_: * Further Editor Onboarding improvements: a help section and a “new” badge for new blocks * Starting work on improving the integration tests for mobile so mobile breakages are caught earlier * Block inserter search * Embed block * Global Style Support for colors ### Global Styles [@nosolosw](https://profiles.wordpress.org/nosolosw/) provided the update async: Current focus is polishing the `theme.json` experience by finding and fixing bugs that are backported to the Betas weekly.The two major things left are: * Show preset strings provided via `theme.json` in [translate.wordpress.org](https://translate.wordpress.org/) so they can be translated. This depends on a new wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is [http://wp-cli.org/](http://wp-cli.org/) [https://make.wordpress.org/cli/](https://make.wordpress.org/cli/) release ([see](https://wordpress.slack.com/archives/C02QB2JS7/p1624277282320700)) and then updating 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. infrastructure. [Trac ticket](https://meta.trac.wordpress.org/ticket/5779). * Publish dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. for `theme.json`( I’m working on this). ### 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 and 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.. [@andraganescu](https://profiles.wordpress.org/andraganescu/) provided the update. * The widgets editor [looks unblocked ](https://github.com/WordPress/gutenberg/issues/24687) on its path to 5.8. * Thanks to everyone for the continuous testing and fixing.  * [Everyone in the #feature-widgets-block-editor channel ](https://wordpress.slack.com/archives/C01KDAZJMQ9) is keeping an eye out for flagged issues or tickets.  * [@noisysocks](https://profiles.wordpress.org/noisysocks/) is doing a great job maintaining [the project](https://github.com/WordPress/gutenberg/projects/27#card-47571288) triaged and prioritized. * Don’t hesitate to bring up new things, test, test, test! ### Navigation Block [@mkaz](https://profiles.wordpress.org/mkaz/) provided an update: * Color overlay issues being worked and continued improvements. * It looks like the markup has been confirmed so will need [review on the open PR](https://github.com/WordPress/gutenberg/pull/30551) to move it forward ### Navigation Editor screen [@get_dave](https://profiles.wordpress.org/get_dave/) provided an update: * We’re contributing towards a discussion about [the scope of Block Supports and how that interacts with Theme JSON](https://github.com/WordPress/gutenberg/issues/30007). * It has a lot of relevance for the Navigation Editor and Block. * This is the main focus at the moment and we hope to make progress off the back of that soon. ### Full Site Editing * [@aristath](https://profiles.wordpress.org/aristath/) [suggested that we stop using `FSE` as a term](https://wordpress.slack.com/archives/C02QB2JS7/p1624458882469800), and eliminate it from code whenever possible. We should use “block based” or similar instead. * [@annezazu](https://profiles.wordpress.org/annezazu/) mentioned that template editing mode is officially **opt in for classic themes** and **opt out for block themes** for 5.8. You can see [the dialogue here](https://wordpress.slack.com/archives/C01VACX5E2W/p1624272783468800) and you can see the [PR for this here](https://github.com/WordPress/gutenberg/pull/32858). * [@annezazu](https://profiles.wordpress.org/annezazu/) flagged the FSE Outreach program is going to launch a call for testing/exploration around 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. _tomorrow_ rather than today. You can see the [full schedule here](https://make.wordpress.org/test/2021/06/09/upcoming-fse-outreach-program-schedule-june-july/) for June/July. ## Task Coordination **[@ntsekouras](https://profiles.wordpress.org/ntsekouras/):** * Site blocks (Site Title, Site Tagline, Site Logo) [handling for users without edit permissions](https://github.com/WordPress/gutenberg/pull/32919,%20https://github.com/WordPress/gutenberg/pull/32817). **[@annezazu](https://profiles.wordpress.org/annezazu/):** * I was out last week – still playing catch up. * Hyper focused on the FSE Outreach program. * Working on the theme.json call for testing with a few folks * Nearly done with the seventh call for testing summary post. * [Shared a reflection previously on future programs](https://nomad.blog/2021/06/11/on-future-outreach-program-models-in-the-wordpress-community/)( thoughts welcome). * Starting July 1, I’ll be focusing in as much time as I can on user docs for 5.8. **[@mkaz](https://profiles.wordpress.org/mkaz/):** * Looking at Dev Notes for WP 5.8, the [tracking issue is here](https://github.com/WordPress/gutenberg/issues/32365). * The three major dev notes that I see left are: - Widgets Editor - Global Styles - 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. & registration * [@gziolo](https://profiles.wordpress.org/gziolo/) already has a draft of the Block API note that I hope to review and publish this week.  * @andragan and [@nosolosw](https://profiles.wordpress.org/nosolosw/) are working on the other two: Widgets & Global Styles. **[@get_dave](https://profiles.wordpress.org/get_dave/):** * Currently focused on [the scope of the Block Supports API and Theme JSON](https://github.com/WordPress/gutenberg/issues/30007) and how we can utilise these to improve the resilience and features of the Nav Block and Editor. * Also been tinkering with the rich previews in the Link UIUI User interface and [trying to find a decent way to get previews for internal URLs](https://github.com/WordPress/gutenberg/issues/32689#issuecomment-865746960) to work. Should have something incoming soon. * Finally, I’ve been helping out with the Widgets Editor fixing bugs and updating documentation. **[@aristath](https://profiles.wordpress.org/aristath/):** * WP 5.8 – working on improving styles & scripts loading and there are no blockers * We should stop using `FSE` as a term, and eliminate it from code whenever possible( see note above). **[@zieladam](https://profiles.wordpress.org/zieladam/):** * I am getting back into the rhythm of contributing after my 6 months break (during which I explored data science in Tumblr). * Mostly going through [the Widgets editor board](https://github.com/WordPress/gutenberg/projects/27) and reviewing/submitting new PRs and refreshing my memory of how everything works. ## Open Floor ### Saving Flow Consistency (agenda comment) * [@paaljoachim](https://profiles.wordpress.org/paaljoachim/) asking about [saving flow consistency across various screens](https://github.com/WordPress/gutenberg/issues/32833). * He’s made a detailed overview Issue and he feels “…it would be helpful to get this fixed for WP 5.8, so users who want to discard a save does not meet these errors.“ * Is anyone able to take a look into this? Please let us know in the comments. ### “Final call” for input on the transform vs convert debate for Block Transform API * [@get_dave](https://profiles.wordpress.org/get_dave/) flags [a “final call” for input on the `transform` vs `convert` debate](https://github.com/WordPress/gutenberg/pull/19401) in regarding to the block transform API. * Please do check this out as it may result in **a deprecation notice** for lots of blocks across the ecosystem. ### Feedback about Block based Widgets screen **Note**: this has subsequently been converted into an Issue and added to the Widgets project board. * [@annezazu](https://profiles.wordpress.org/annezazu/) wanted to quickly flag [this feedback about the block based widget screen from earlier in the core editor chat](https://wordpress.slack.com/archives/C02QB2JS7/p1624390971386600). * It would be great to have someone follow up there to give context on approach and address any necessary problems. ### Request for pull request approval: filters to get block templates functions * [@janwoostendorp](https://profiles.wordpress.org/janwoostendorp/) asks if we can get a yes/no on [the PR to provide filters to get block templates functions](https://github.com/WordPress/gutenberg/pull/31806/). * Perhaps [@mcsf](https://profiles.wordpress.org/mcsf/) or [@youknowriad](https://profiles.wordpress.org/youknowriad/) can take a look into this? ### Problems testing Theme JSON for Classic Themes * [@colorful-tones](https://profiles.wordpress.org/colorful-tones/) is eager to test leveraging _just_ the `theme.json` for classic theme (or more like hybrid) approach. * Saw PR [#32858](https://github.com/WordPress/gutenberg/pull/32858), but not entirely certain how to test and verify. Should I be running latest Gutenberg plugin _and_ latest WP Beta 3, or just latest Gutenberg?  * [@annezazu](https://profiles.wordpress.org/annezazu/) provided advice: > [@colorful-tones](https://wordpress.slack.com/team/U030RHV73) I might recommend > asking directly on the PR to be extra safe. From what I can see to test this, > you need to use WordPress 5.7 _and_ the specific 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". that this PR > is on. > Anne McCarthy * There is also document on [Testing a Gutenberg Pull Request (PR)](https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/) which [@paaljoachim](https://profiles.wordpress.org/paaljoachim/) put together which should be helpful. ### 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](https://central.wordcamp.org/about/)󠁿. Japan Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of 󠀁[https://make.wordpress.org/](https://make.wordpress.org/)󠁿 There are many teams that people can participate in, each with a different focus. 󠀁[https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/](https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/)󠁿 successes * @torounit let us know that today (23rd June 2021) we had **WordCamp Japan Contributor Day**. * 3 PRs were created: - [https://github.com/WordPress/gutenberg/pull/32910](https://github.com/WordPress/gutenberg/pull/32910) - [https://github.com/WordPress/gutenberg/pull/32925](https://github.com/WordPress/gutenberg/pull/32925) - [https://github.com/WordPress/gutenberg/pull/32913](https://github.com/WordPress/gutenberg/pull/32913) * We have two first-time contributors! * I will review and do other things soon. ### No blocks in inserter on Widget screen with empty Widget area * [@desrosj](https://profiles.wordpress.org/desrosj/) advised on [a Trac ticket on the 5.8 milestone which had skipped attention](https://core.trac.wordpress.org/ticket/53460). * When a widget area is empty, the block inserter is empty. * [@get_dave](https://profiles.wordpress.org/get_dave/) flagged this for [@noisysocks](https://profiles.wordpress.org/noisysocks/) and also reminded everyone about the [#`feature-widgets-block-editor`](https://wordpress.slack.com/archives/C01D71823PB) channel is SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) which is the best place to flag these items. * This issue is now in hand and on the Widgets project board. ## Wrap up It was great to hear/see so many voices in the Open Floor section. Thanks to everyone who attended. [#core-editor](https://make.wordpress.org/core/tag/core-editor/), [#core-editor-summary](https://make.wordpress.org/core/tag/core-editor-summary/), [#meeting-notes](https://make.wordpress.org/core/tag/meeting-notes/), [#summary](https://make.wordpress.org/core/tag/summary/) [ ](https://profiles.wordpress.org/gziolo/) [Greg Ziółkowski](https://profiles.wordpress.org/gziolo/) 5:31 pm _on_ June 23, 2021 Tags: [5.8 ( 99 )](https://make.wordpress.org/core/tag/5-8/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/), [gutenberg ( 546 )](https://make.wordpress.org/core/tag/gutenberg/) # 󠀁[Block API Enhancements in WordPress 5.8](https://make.wordpress.org/core/2021/06/23/block-api-enhancements-in-wordpress-5-8/)󠁿 Starting in WordPress 5.8 release, we encourage using the `block.json` metadata file as the canonical way to register 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. types. The [Block Metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) specification has been implemented and iterated over the last few major WordPress releases, and we have reached the point where all planned features are in place. ## **Example File** Here is an example `block.json` file that would define the metadata for a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. create a notice block. `notice/block.json` ```wp-block-preformatted { "apiVersion": 2, "name": "my-plugin/notice", "title": "Notice", "category": "text", "parent": [ "core/group" ], "icon": "star", "description": "Shows warning, error or success notices…", "keywords": [ "alert", "message" ], "textdomain": "my-plugin", "attributes": { "message": { "type": "string", "source": "html", "selector": ".message" } }, "providesContext": { "my-plugin/message": "message" }, "usesContext": [ "groupId" ], "supports": { "align": true }, "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "other", "label": "Other" } ], "example": { "attributes": { "message": "This is a notice!" } }, "editorScript": "file:./build/index.js", "script": "file:./build/script.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style.css" } ``` ## Benefits using the metadata file The block definition allows code sharing between JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/), PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher, and other languages when processing block types stored as JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., and registering blocks with the `block.json` metadata file provides multiple benefits on top of it. From a performance perspective, when themes support lazy loading assets, blocks registered with `block.json` will have their asset enqueuing optimized out of the box. The frontend CSSCSS Cascading Style Sheets. and JavaScript assets listed in the `style` or `script` properties will only be enqueued when the block is present on the page, resulting in reduced page sizes. Furthermore, because the [Block Type REST API Endpoint](https://developer.wordpress.org/rest-api/reference/block-types/) can only list blocks registered on the server, registering blocks server-side is recommended; using the `block.json` file simplifies this registration. Last, but not least, the [WordPress Plugins Directory](https://wordpress.org/plugins/) can detect `block.json` files, highlight blocks included in plugins, and extract their metadata. If you wish to [submit your block(s) to the Block Directory](https://developer.wordpress.org/block-editor/getting-started/tutorials/create-block/submitting-to-block-directory/), all blocks contained in your plugin must have a `block.json `file for the Block Directory to recognize them. ## 󠀁[󠀁[Block registration ### 󠀁[󠀁[PHP The [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) function that aims to simplify the block type registration on the server, can read now metadata stored in the `block.json` file. The function takes two params relevant in this context (`$block_type` accepts more types and variants): * `$block_type` (`string`) – path to the folder where the `block.json` file is located or full path to the metadata file if named differently. * `$args` (`array`) – an optional array of block type arguments. Default value:`[]`. Any arguments may be defined. It returns the registered block type (`WP_Block_Type`) on success or `false` on failure. **Example:** `notice/notice.php` ```wp-block-preformatted 'render_block_core_notice', ) ); ``` _Note: We decided to consolidate the pre-existing functionality available with [`register\_block\_type\_from\_metadata`](https://developer.wordpress.org/reference/functions/register_block_type_from_metadata/) method into `register\_block\_type` to avoid some confusion that it created. It’s still possible to use both functions, but we plan to use only the shorter version in the official documents and tools from now on._ _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.: [#53233](https://core.trac.wordpress.org/ticket/53233)._ ### 󠀁[󠀁[JavaScript When the block is registered on the server, you only need to register the client- side settings on the client using the same block’s name. **Example:** `notice/index.js` ```wp-block-preformatted registerBlockType( 'my-plugin/notice', { edit: Edit, // ...other client-side settings } ); ``` Although registering the block also on the server with PHP is still recommended for the reasons above, if you want to register it only client-side you can now use` [registerBlockType](https://github.com/WordPress/gutenberg/blob/trunk/packages/blocks/src/api/registration.js#L251)` method from `@wordpress/blocks` package to register a block type using the metadata loaded from `block.json` file. The function takes two params: * `$blockNameOrMetadata` (`string|Object`) – block type name (supported previously) or the metadata object loaded from the `block.json` file with a bundler (e.g., webpack) or a custom Babel plugin. * `$settings` (`Object`) – client-side block settings. It returns the registered block type (`WPBlock`) on success or `undefined` on failure. **Example:** `notice/index.js` ```wp-block-preformatted import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; import metadata from './block.json'; registerBlockType( metadata, { edit: Edit, // ...other client-side settings } ); ``` _Related PR: [WordPress/gutenberg#32030](https://github.com/WordPress/gutenberg/pull/32030)._ ## 󠀁[󠀁[Internationalization support in `block.json` WordPress string discovery system can now automatically translate fields marked as translatable in [Block Metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) document. First, in the `block.json` file that provides block metadata, you need to set the `textdomain` property and fields that should be translated. **Example:** `fantastic-block/block.json` ```wp-block-preformatted { "name": "my-plugin/fantastic-block", "title": "My block", "description": "My block is fantastic", "keywords": [ "fantastic" ], "textdomain": "fantastic-block" } ``` ### 󠀁[󠀁[PHP In PHP, localized properties will be automatically wrapped in `_x` function calls on the backend of WordPress when executing `register_block_type` function. These translations get added as an inline script to the plugin’s script handle or to the` wp-block-library` script handle in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. The way `register_block_type` processes translatable values is roughly equivalent to the following code snippet: ```wp-block-preformatted _x( 'My block', 'block title', 'fantastic-block' ), 'description' => _x( 'My block is fantastic!', 'block description', 'fantastic-block' ), 'keywords' => array( _x( 'fantastic', 'block keyword', 'fantastic-block' ) ), ); ``` Implementation follows the existing [get_plugin_data](https://codex.wordpress.org/Function_Reference/get_plugin_data) function which parses the plugin contents to retrieve the plugin’s metadata, and it applies translations dynamically. _Related Trac ticket: [#52301](https://core.trac.wordpress.org/ticket/52301)._ ### 󠀁[󠀁[JavaScript You can also now use `registerBlockType` method from `@wordpress/blocks` package to register a block type that uses translatable metadata stored in `block.json`  file. All localized properties get automatically wrapped in `_x` function calls ( from `@wordpress/i18n` package) similar to how it works in PHP with `register_block_type`. The only requirement is to set the `textdomain` property in the `block.json` file. **Example:** `fantastic-block/index.js` ```wp-block-preformatted import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; import metadata from './block.json'; registerBlockType( metadata, { edit: Edit, // ...other client-side settings } ); ``` _Related PR: [WordPress/gutenberg#30293](https://github.com/WordPress/gutenberg/pull/30293)._ ### 󠀁[󠀁[Extracting translations The ongoing effort to improve the internationalization of client-side JavaScript code made necessary by moving to the block-based editor has led to several improvements to the `i18n make-pot` command from [WP-CLI](https://make.wordpress.org/cli/) as of [`v2.5.0`](https://make.wordpress.org/cli/2021/05/19/wp-cli-v2-5-0-release-notes/) release. It now also parses the `block.json` file as it is defined in the [Block Metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) document. _Related PR: [wp-cli/i18n-command#210](https://github.com/wp-cli/i18n-command/pull/210)._ ## 󠀁[󠀁[New filters There are two new 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. that can be used when block types get registered with `register_block_type` function using the metadata loaded from the `block.json` file. ### 󠀁[󠀁[󠀁[`block_type_metadata`](https://developer.wordpress.org/reference/hooks/block_type_metadata/)󠁿 Filters the raw metadata loaded from the `block.json` file when registering a block type. It allows applying modifications before the metadata gets processed. The filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/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. takes one param: * `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type. **Example:** ```wp-block-preformatted I’ve followed up on the [`transform` vs `convert` API discussion](https://github.com/WordPress/gutenberg/pull/19401#issuecomment-860671562) > with x2 options/suggestions for how we could come to a decision. > It’s not a huge problem, but it would be nice to see us unify around a single  > API for this action. Indeed `convert` has been “experimental” for over 2 years. > I believe this needs guidance from the Core team. Adding that there are two options: 1. Deprecate `transform` in favour of `convert` 2. Augment the argument signature of `transform` and ditch `convert`. On the [issue](https://github.com/WordPress/gutenberg/pull/19401#issuecomment-861285517) [@talldanwp](https://profiles.wordpress.org/talldanwp/) referred that he is in favor of deprecating transform in favor of convert. During the chat and then in a comment in the issue [@youknowriad](https://profiles.wordpress.org/youknowriad/) said [@talldanwp](https://profiles.wordpress.org/talldanwp/) thoughts sound reasonable. ### Dot in the Publish/Update button [@bobbingwide](https://profiles.wordpress.org/bobbingwide/) asked: > What happened to the dot in the Publish/Update button? > It’s still there when I > edit a reusable block. [https://sneak-peek.me/2021/06/16/what-does-the-dot-next-to-update-mean/](https://sneak-peek.me/2021/06/16/what-does-the-dot-next-to-update-mean/) [@jorgefilipecosta](https://profiles.wordpress.org/jorgefilipecosta/) said the best path forward would be to have an issue where this issue could be discussed. [@paaljoachim](https://profiles.wordpress.org/paaljoachim/) created the [issue](https://github.com/WordPress/gutenberg/issues/32833). ## Click through vs lock for some blocks [@paaljoachim](https://profiles.wordpress.org/paaljoachim/) said: > I think we need a way to figure out if a block should have a click through or/ > and also a lock. Reusable block could really use a lock similar to the edit button > in WP 5.6. [@joen](https://profiles.wordpress.org/joen/) said: > I worry that a lock icon and toolbar action will not be an obvious affordance > for editing the contents, or help indicate why this block is any different from > the surrounding blocks which you can click and edit. I think some of Jays designs > from the previous ticketticket Created for both bug reports and feature development > on the bug tracker. have potential. This is a UXUX User experience decision and the discussion will continue on the issues and related PR’s. [#block-editor](https://make.wordpress.org/core/tag/block-editor/), [#chats](https://make.wordpress.org/core/tag/chats/), [#core-editor](https://make.wordpress.org/core/tag/core-editor/), [#core-editor-summary](https://make.wordpress.org/core/tag/core-editor-summary/), [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/), [#meeting-notes-2](https://make.wordpress.org/core/tag/meeting-notes-2/) # Post navigation [← Older posts](https://make.wordpress.org/core/2021/page/30/?output_format=md) [Newer posts →](https://make.wordpress.org/core/2021/page/28/?output_format=md)