What’s new in Gutenberg 14.1? (15 September)

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


Gutenberg 14.1 has been released and is available for download!

Table of Contents

Consolidating design tools in blocks.

Typography and Spacing support was added for blocks like AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name., Buttons, Categories List, Comments Links, Latest Posts, Navigation, Query Pagination Links, Social Icons, etc.

This improvement allows users to customize their site more without dealing with CSSCSS Cascading Style Sheets.

A screenshot of all blocks that includes new options.

Better content locking experience.

Duotone filters, 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. alignment and resizing are now disabled on content-locked blocks.

A small video showing how locked patterns work.

The menu selector moved from the Navigation block toolbar to the new “Menu” section in the inspector sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. In this new section, you can now quickly access all the menus you have created through the “Manage menus” button.

A gif showing the moved Menu section.

Before this release, when importing a classic menu, Gutenberg automatically transformed it into a block menu and then updated the user site 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.. From now on, you will have to first save your changes in order to show the imported menu. If you don’t, the site will keep displaying the menu that you had used before importing the classic menu! This provides a better user experience as the menu is only changed when the user explicitly saves the template.

The navigation block keeps iterating on its user experience. All feedback is welcome!

Zoomed-out view in the site editor (experimental).

This feature provides a zoomed-out view in the site editor, allowing you to focus on site building rather than the details of each granular block. 

When in this mode, the users will have a quick overview of their site without having to scroll or using the native browser zoom-out function. Also, navigation between areas becomes easier with this new enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature..

This feature is still experimental so users have to enable it in “Experiments” under the “Gutenberg” menu item. If you want to explore using it, join this call for testing for the FSE Outreach program and start providing feedback!

Improving the theme developer experience.

Box-shadow support included in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

From now on, it won’t be necessary to use CSS to add box-shadow properties to the blocks, you can use theme.json to achieve this. Here’s an example of how to do this:

In color section, add a new property shadow to any block.

{
  ...
  "styles": {
    "elements": {
      "button": {
         "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

 

Block-based template parts for classic themes.

Classic themes can now add support for block-based template parts, allowing users to build more parts of their site with blocks without fully switching to a block theme. The theme author can enable it by using the add_theme_support( ‘block-template-parts’) function.

Once enabled, a new “Template Parts” menu is visible under “Appearance” which displays the list of the template parts available for that theme.

A screenshot of the Template Parts menu item.

Let’s use an example:
If theme authors want the site footer to be editable using blocks, they have to create a file called footer.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and save it inside their name_of_the_theme/parts/ directory. To use it on the front end, they need to call the block_template_part PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher function wherever they want to use a template part in their theme. In this case, it could be a footer.php file:

<?php block_template_part( 'footer' ); ?>

And that’s it! They can now update their footer in the Site Editor as if it were a block theme.

There will be a call for testing for this feature, feel free to join!

Global styles data are now filterable

Gutenberg 14.1 includes four filters to edit the global styles data in PHP.

  • global_styles_default => to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. data provided by CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • global_styles_blocks => to filter data provided by the blocks (only styles so far).
  • global_styles_theme => to filter data provided by the theme.
  • global_styles_user => to filter data provided by the user.

Some use cases will now become much easier:

  • Providing settings dynamically. For example, color presets depending on some contextual information.
  • Allowing plugins to modify the existing data.
  • Editing or removing core data by code (color presets, etc).

You can read more about it in the documentation.

Improving the writing experience

Better multi-selection

Multi-selection feature now has a smoother experience by preventing some flashes of the block outline when you select between blocks or placeholders. 

Better block transforms organization

Paragraph, heading, list and quote are now shown in a separate menu subgroup. This way, they are easier to find as those are the most used transformations.

Screenshot 2022-09-12 at 12 19 57 PM
An example of the new block transforms subgroup

Changelog

Features

Block Library

  • Add select icon for Navigation Block’s menu button. (43674)

Full Site Editing

  • Add a zoomed out view to the site editor. (41156)

Enhancements

Design Tools support in Blocks

  • Archives: Add typography support. (43935)
  • Avatar: Add padding support. (43519)
  • Buttons: Add typography supports to button/s blocks. (43934)
  • Calendar: Add typography supports (except text-decoration). (43969)
  • Categories List: Add spacing support. (43647)
  • Comment Date: Add spacing support. (43656)
  • Comment Edit Link: Add spacing support. (43657)
  • Comment Reply Link: Add spacing support. (43658)
  • Gallery: Add padding and margin support. (43965)
  • Heading: Add missing typography support. (44003)
  • Home Link: Add typography support. (43307)
  • Latest Posts: Add typography supports. (43540)
  • List: Add missing typography block supports. (43311)
  • Navigation Link: Add typography support. (44005)
  • Post Content: Add typography supports. (43339)
  • 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.: Add missing typography supports. (43341)
  • Query No Results: Add typography supports. (43551)
  • Query Pagination Next: Add missing typography supports. (43555)
  • Query Pagination Numbers: Add missing typography supports. (43559)
  • Query Pagination Previous: Add missing typography supports. (43556)
  • Query Pagination: Add typography support. (43552)
  • Query Title: Add missing typography supports. (43565)
  • Quote: Add missing typography supports. (43567)
  • Search block: Add typography supports. (43499)
  • Site Logo: Add padding and margin support. (43520)
  • Site Title and Tagline: Add text decoration support. (43972)
  • Social Icons: Add missing padding support, update margin support. (43885)
  • Table: Add missing typography supports. (43974)
  • Term Description: Add missing typography supports. (43568)
  • Verse: Add missing typography supports. (43569)

Block Library

  • Add: Content role to relevant audio block attributes. (44037)
  • Audio: Display upload error notices using snackbars. (43891)
  • Code: Add transformation to Paragraph. (43938)
  • Columns: Add axial block spacing to Columns block (alternate attempt). (44101)
  • Comments block (legacy mode): Update warning message wording. (43527)
  • Cover Block: Keep the inner contents in a physical direction even in RTL languages. (43663)
  • Create classic navigation menus as draft and dirty the site editor. (43580)
  • File: Display upload error notices using snackbars. (43893)
  • Gallery: Display upload error notices using snackbars. (43946)
  • Image: Display transformation error notice using snackbars. (44031)
  • Improves the UXUX User experience of menu management in the navigation block. (42987)
  • Mark which attributes of the video should be considered content. (44038)
  • Media & Text: Display upload error notices using snackbars. (43890)
  • Navigation: Add overlay close button to icon toggle control. (43067)
  • Navigation: Set the icon control to full width. (43844)
  • Navigation: Try adding minimal animation to overlay. (43851)
  • Navigation: Try making it possible for themes to have the X overlay the = icon. (43576)
  • Navigation: Update to use translate instead of top. (44082)
  • Prevent single Columns blocks transforming into Columns. (43641)
  • Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: Add allowedControls in block variations for better extensibility. (43632)
  • Query Loop: Pass extra query args in 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/. call for accurate preview for extenders. (44093)
  • Quote: Restrict single block transforms to specific blocks. (44106)
  • Update: Add __experimentalRole attributes to media text block. (43957)
  • Video: Display upload error notices using snackbars. (43892)

Components

  • Add contextConnectWithoutRef() to bypass ref forwarding. (43611)
  • AlignmentMatrixControl: Keep the physical direction in RTL languages. (43126)
  • ColorPalette: Make popover style consistent. (43570)
  • DropdownMenu: Use KeyboardEvent.code, refactor tests to model RTL and user-event. (43439)
  • GradientPicker: Show custom picker before swatches. (43577)
  • Guide: Use code instead of keyCode for keyboard events. (43604)
  • NavigableContainer: Use code instead of keyCode for keyboard events. (43606)
  • Popover: Refactor to TypeScript. (43823)
  • Storybook: Support dashicons for testing. (43721)
  • Style engine: Pass CSS formatting options from global functions. (43886)
  • TextControl, TextareaControl: Add flag to remove bottom margin. (43782)
  • ToggleGroupControl: Decouple borderless style with icon use. (43771)
  • Upsize typography tools. (43331)

Block Editor

  • Add icons for different types of suggestions in LinkControl. (43970)
  • Add justification controls to constrained layout. (44065)
  • Adds block supports for metadata. (43986)
  • Better block transforms organization. (44072)
  • Block Setttings Menu Controls: Add unstableDisplayLocation prop. (43987)
  • Content width toggle: Polish wording and appearance. (43702)
  • CustomGradientPicker: Remove and deprecate outer margins. (43436)
  • Improve content locking experience. (43956)
  • Multi-select: Add transition to reduce chance of flash. (43510)
  • Partial multi selection: Limit if selection contains unmergeable block. (42934)
  • Rich text: Log deprecation message for multiline prop. (43613)
  • Show parent block as selected when there is content locking. (43918)
  • Simplify the inserter styles and scrollable. (44088)
  • TextTransformControl/TextDecorationControl: Migrate to ToggleGroupControl. (43328)

Post Editor

  • Add ‘isDeletingPost’ selector. (44012)

CSS & Styling

  • Categories List Block: Match the markup on the block editor to the front end. (43666)
  • Placeholders: Make dashed style a mixin, and apply across. (43512)
  • Separator: Remove appearance of “inset” style. (43948)

Patterns

  • Allow remote pattern registration in theme.json when core patterns are disabled. (43634)
  • Content lock ability. (43037)
  • Post type restriction 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. for patterns. (41842)

Global Styles

  • Added outline support for blocks via theme.json. (43526)
  • Block Spacing: Using spacing controls for block gap values to support presets in the UIUI User interface. (43466)
  • Add box-shadow support for blocks via theme.json. (41972)
  • Make global styles data filterable. (44015)

Testing

  • Draggable block tests: Click block inserter instead of pressing Enter key. (43734)

Document Settings

  • Display pretty permalink for draft posts. (43600)

Themes

  • Add cite to theme.json elements. (43543)
  • Block-based template parts for Classic themes. (42729)
  • 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. block: Enable gradient overlay. (43838)

Site Editor

  • Archive-PostType template UI. (42746)
  • New archive-$postType templates get proper fallback content. (43603)
  • Template for specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.: Only load posts from that category in post template block. (43699)

New APIs

Block Library

  • Add filter for inner blocks in the Navigation block. (37998)
  • Make it possible to import individual blocks. (42258)

Extensibility

  • Add a filter to build_query_vars_from_query_block. (43590)

Block API

  • Blocks: Add new render field to block.json. (42430)

Bug Fixes

Block Library

  • Code Block: Fix duplicate background color. (43599)
  • File Block: 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. from save function. (43050)
  • Fix block switcher preview scrollbar. (44079)
  • Fix block transform preview height. (44076)
  • Fix duplicate navigation block props. (43596)
  • Fix error in useClientWidth. (43585)
  • Fix site editor toolbar when block is bigger than viewport. (43548)
  • Fix the default icon for the navigation block. (44104)
  • Fix: Site logo rounded on mobile. (43903)
  • Fix: Site logo rounded. (43762)
  • Group: Fix click-first state. (43513)
  • Image: Display upload error notices using snackbars. (43767)
  • List: Add cut clipboard handler. (43609)
  • Navigation: Add current-menu-item also for archive links. (43800)
  • Navigation: Hide overlay preview settings when the overlay is off. (44032)
  • Navigation: Remove unneeded gap:Inherit rule on wrapper element of navigation block. (43669)
  • Post Terms: Use unbound query in the usePostTerms hook. (43501)
  • Site Logo: Fix border radius 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.. (43701)
  • Fix cover flex issue in the editor. (43413)
  • Fix embed 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. sizing issue. (40213)
  • Update: Make it possible to change list items even if parent is template locked. (43959)
  • Latest Posts categories settings. (43685)
  • navigation block: Fix empty site-log li element in the dom. (44049)

Global Styles

  • Block editor: Move margins to theme.scss and common.scss. (43813)
  • Don’t apply root padding to nested layout blocks. (43842)
  • Duotone palette doesn’t reflect settings in theme.json. (43671)
  • Fixing broken layout styles for themes using theme.json settings on blocks that require layout styles. (43925)
  • Layout: Fix issue with fallback gap styles where gap was being output for constrained layout type. (44001)
  • Remove main content layout padding in preview. (43601)
  • Split root layout rules into a different function. (43792)

Components

  • Button, Icon: Fix iconSize prop doesn’t work with some icons. (43821)
  • Flex: Remove flex gap polyfill. (43995)
  • Popover: Enable auto-updating every animation frame. (43617)
  • Popover: Make more reactive to prop changes, avoid unnecessary updates. (43335)
  • Site editor: Fix padding and margin visualizer positioning. (43971)
  • Disabled: Preserve input values when toggling the isDisabled prop. (43508)

Block Editor

  • BlockInspector, ComplementaryArea: Fix overscoped p style. (43866)
  • Column Block: Enable global template_lock inheritance. (42677)
  • Fix blank screen on templates page. (43602)
  • Fix the horizontal block list drop indicator when dragging to the start. (43944)
  • Fix: Block styles preview is not displayed. (43837)
  • Fix: Non boolean usage on reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. output. (43919)
  • hasContentRoleAttribute: Check that block type exists. (43864)
  • Improve Safari text-selection style. (43313)
  • Prevent the default browser behaviour for dropped files from running. (43493)
  • RTL fix for inlined block-styles. (41762)
  • Spacing presets: 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 unlinked not applying if non int slugs used. (44136)

Design Tools

  • Fix display of width controls for legacy layouts. (43688)
  • FontFamily: Fix server-side attribute registration via typography support. (43937)
  • Layout: Fix blockGap output when using a falsy 0 value. (43757)
  • Layout: Fix toggling off inner blocks content width setting for legacy markup. (43888)

Testing

  • Fix asserting Post Format without opening the document settings sidebar. (43710)
  • Fix clicking on top of the publish panel in 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 end-to-end test. (43708)
  • Fix playwright’s openDocumentSettingsSidebar util not opening the sidebar. (43506)

Style Variations

  • Styles API: Fixed selectors for nested elements. (43988)

Typography

  • Font size picker: Add a fallback for the name property. (43794)

Post Editor

  • Editor: Simplify ‘findOrCreateTerm’ method logic. (43766)
  • Fix the style settings from core/post-content block in theme.json that are not applied in the editor. (42270)

Site Editor

  • Site Editor: Fix focus outline cut off in code editor. (42980)

Templates API

  • Block Templates: Add the custom templates info for the template posts. (43597)

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)

  • Better handling of loading states for navigation selector. (43904)
  • Limit contrast checker to only blocks that have at least one color defined. (43592)

Performance

Block Library

  • Comments Pagination: Avoid creating a new allowedBlocks array on every render. (44021)
  • Lodash: Refactor away from _.first() and _.last(). (43894)
  • Lodash: Remove _.omit() from block library. (43707)
  • Query Pagination: Avoid creating a new allowedBlocks array on every render. (44020)
  • Query by name. (43850)

Components

  • Lodash: Refactor away from _.cloneDeep(). (43631)
  • Lodash: Refactor away from _.partial(). (43895)
  • Lodash: Remove from FormTokenField component. (43744)

Data Layer

  • Lodash: Refactor away from _.forEach(). (43807)
  • Lodash: Refactor away from _.has(). (43626)
  • Lodash: Remove _.omit() from wordpress/data. (43712)

Post Editor

  • Lodash: Refactor away from _.unionBy(). (43735)
  • Lodash: Remove _.omit() from a few other packages. (43714)

Testing

  • Updates the content we use for performance testing. (43770)

Widgets Editor

  • Lodash: Remove completely from wordpress/edit-widgets package. (43682)

Block Editor

  • Lodash: Remove from blocks API raw handling. (43575)
  • Lodash: Refactor away from BlockActionsMenu (RN). (43849)
  • Lodash: Refactor away from BlockActions. (43846)
  • Lodash: Refactor away from BlockMover. (43853)
  • Lodash: Refactor away from useFocusFirstElement. (43847)
  • Lodash: Remove _.first() and _.last() from block editor store. (43854)
  • Lodash: Remove _.first() and _.last() from block tools and useSelectAll hook. (43855)
  • Lodash: Remove _.omit() from block editor. (43704)

REST API

  • Core Data: Stop sending duplicate requests in canUser resolver. (43480)

Documentation

  • Add documentation for the block template parts theme support. (44009)
  • Adding instructions for adding sub-pages to packages documentation. (43750)
  • Create a new handbook page for propagating updates. (43538)
  • Create Block: Split documentation into two sections. (43718)
  • Docgen: Add basic handling for the since tag. (43550)
  • Docs: Add example of BlockControls to Format API how to guide. (43581)
  • Docs: Fix required status of onSelectUrl prop of MediaReplaceFlow component. (44025)
  • Document new global styles filters. (44111)
  • Document template_lock=noContent for Custom Post Types. (43977)
  • InnerBlocks: document that templateLock:NoContent cannot be overriden by children. (43825)
  • Theme.json: Add default values for settings.spacing.spacingScale. (43860)
  • Theme.json: Fix schema for useRootPaddingAwareAlignments. (43628)
  • Typography block supports: Call tear_down in tests and format PHP doc blocks. (43968)
  • Update a broken link to the format-api example. (44058)
  • Update playwright end-to-end utils readme. (44016)
  • Updated the “Create your First App with Gutenberg Data” how-to guide. (43633)
  • Add select icon for Navigation Block’s menu button. (43674)
  • Style engine: pre-core migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. documentation and house keeping. (43840)
  • Fix JSON syntax issues in theme.json examples. (43828)

Code Quality

Components

  • AnglePickerControl: Deprecate margin bottom. (43867)
  • CheckboxControl: Add flag to remove bottom margin. (43720)
  • ComboboxControl: Add unit tests. (42403)
  • DateTimePicker: Address feedback after recent refactor to date-fns and use-lilius. (43495)
  • DropZone: Convert to TypeScript. (43962)
  • Fix TS types for isValueDefined()/isValueEmpty(). (43983)
  • FocalPointControl: Add flag to remove bottom margin. (43996)
  • FocalPointPicker: Convert to TypeScript. (43872)
  • FontSizePicker: Deprecate bottom margin. (43870)
  • FormFileUpload: Convert to TypeScript. (43960)
  • Invert tsconfig to be exclude-based. (43534)
  • Lodash: Refactor away from _.escapeRegExp(). (43629)
  • Lodash: Remove from block factory API. (43560)
  • Lodash: Remove from block registration API. (43558)
  • Lodash: Remove from block serializer API. (43561)
  • Lodash: Remove from block templates API. (43563)
  • Make more components pass type checks. (43579)
  • RadioControl: Clean up CSS. (43868)
  • Remove unused normalizeArrowKey utility function. (43640)
  • Remove unused Storybook utils. (43578)
  • Retire DARK_GRAY colors. (43773)
  • Retire LIGHT_GRAY[ 200 ] and DARK_GRAY[ 150 ]. (43719)
  • Retire LIGHT_GRAY color object. (43994)
  • SearchControl: Convert to TypeScript and add flag to remove bottom margin. (43871)
  • Style engine: Refer to ‘context’ rather than ‘store’ in global function. (43841)
  • TabPanel: Convert to TypeScript. (43536)
  • ToggleControl: Convert to TypeScript. (43717)
  • WordPressComponentProps: Only add refs when they are actually added. (43610)
  • Refactor Icon tests to @testing-library/react. (44051)
  • Refactor IsolatedEventContainer tests to @testing-library/react. (44073)
  • Refactor KeyboardShortcuts tests to @testing-library/react. (44075)
  • NUX: Refactor DotTip tests to @testing-library/react. (43768)

Compose

  • Refactor pure HoC tests to @testing-library/react. (43913)
  • Refactor withInstanceId HoC tests to @testing-library/react. (43915)

Post Editor

  • Edit Post: Refactor BrowserURL tests to @testing-library/react. (43978)
  • Edit Post: Refactor PageAttributesOrder tests to @testing-library/react. (43980)
  • Refactor PostPublishButton tests to @testing-library/react. (43909)
  • Refactor PostPublishPanel tests to @testing-library/react. (43908)
  • Refactor PostSavedState tests to @testing-library/react. (43769)
  • Refactor PostSlug tests to @testing-library/react. (43973)
  • Update changelog to include a new ‘isDeletingPost’ selector. (44120)
  • Refactor MetaBoxesSection tests to @testing-library/react. (43774)
  • Refactor PostPublishButtonOrToggle tests to @testing-library/react. (43776)
  • Refactor PreferencesModal tests to @testing-library/react. (43775)
  • NumberControl: Add TypeScript prop types. (43791)
  • Popover: Stabilize __unstableShift prop to shift. (43845)

Block Library

  • Button: Remove hardcoded white. (43553)
  • Categories List Block: Escape home_url(). (43824)
  • Gallery Block: Use wp_enqueue_block_support_styles(). (43859)
  • Post Terms: Refactor the usePostTerms hook. (43503)
  • Navigation: Use code instead of keyCode for keyboard events. (43644)
  • Create an alias get_element_class_name to use it in blocks. (44099)

Block Editor

  • Refactor AlignmentControl tests to @testing-library/react. (44022)
  • Refactor BlockAlignmentUI tests to @testing-library/react. (44023)
  • Refactor BlockEdit tests to @testing-library/react. (44027)
  • Refactor BlockIcon tests to @testing-library/react. (44089)
  • Refactor BlockTitle tests to @testing-library/react. (43811)
  • Refactor BlockVerticalAlignmentUI tests to @testing-library/react. (44029)
  • Refactor BlockView tests to @testing-library/react. (43818)
  • Refactor ComboboxControl to pass exhaustive-deps. (41417)
  • Refactor ContrastChecker tests to @testing-library/react. (43975)
  • Refactor DefaultBlockAppender tests to @testing-library/react. (43990)
  • Refactor DimensionControl tests to @testing-library/react. (43916)
  • Refactor DocumentOutline tests to @testing-library/react. (43772)
  • Refactor FocalPointPicker to function component. (39168)
  • Refactor MediaPlaceholder tests to @testing-library/react. (43991)
  • Refactor MenuItem tests to @testing-library/react. (43778)
  • Refactor NavigatorButton to pass exhaustive-deps. (42051)
  • Refactor NavigatorScreen to pass exhaustive-deps. (43876)
  • Refactor Panel tests to @testing-library/react. (43896)
  • Refactor PostTaxonomies tests to @testing-library/react. (44068))
  • Refactor Slot/Fill tests to @testing-library/react. (44084)
  • Refactor URLInputButton tests to @testing-library/react. (43899)
  • Refactor UrlPopover tests to @testing-library/react. (43898)
  • Refactor Warning tests to @testing-library/react. (43817)
  • Refactor withColors tests to @testing-library/react. (43976)
  • Refactor withFilters tests to @testing-library/react. (44017)
  • Refactor popover to use separate flip and resize props instead of forcePosition. (43546
  • Fix: Inexistent parameter passed to parseUnitFunction. (43920)
  • Minor code tweaks/optimizations (PHP). (43375)

Rich Text

  • Remove deprecated wrapperClassName prop. (44033)

Inspector Controls

  • Remove leftovers from previous iterations in block inspector. (43806)

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party

  • Remove ‘gutenberg_rest_nonce’ method. (43805)

List View

  • ListViewBlock: Refactor to have locking data in a single place. (43803)

npm Packages

  • Block Serialization Default Parser: Include TypeScript type declarations. (43722)
  • Lodash: Remove _.omit() from wordpress/blocks. (43711)
  • Lodash: Remove completely from wordpress/format-library package. (43738)
  • Lodash: Remove completely from wordpress/i18n package. (43677)
  • Lodash: Remove completely from wordpress/redux-routine package. (43741)
  • wordpress/date: Rename __experimentalGetSettings() to getSettings(). (43884)

Global Styles

  • Elements: Check value and whitelist before building style nodes. (43622)
  • Prepare WP_Theme_JSON_Data class for backporting. (44109)
  • Safeguard for backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. of get_template_hierarchy function. (44085)
  • Format Library: Remove redundant inline link test. (43912)
  • Layout: Unit tests for gutenberg_get_layout_style. (44006)

Block Editor

  • Rich text: Remove unused unstable list functions. (43614)

Data Layer

  • Add tsconfig.json to core-data package. (43638)
  • Add type signature for useDispatch. (43528)
  • Bundle TypeScript types with the data package. (43643)
  • Simplify TypeScript types in wordpress/core-data. (43515)

Navigation

  • Unskip navigation menu selector focus test. (43507)

Tools

Build Tooling

  • Update unstaged documentation error message. (43953)
  • Scripts: Change webpack configuration to include render files in the build folder. (43917)
  • Scripts: Update webpack configuration to allow modern image format. (43880)
  • Update scaffold.js. (43740)
  • Makepot: Fix translations object handling. (43797)

Testing

  • Add comments for the repeated move commands in draggable end-to-end tests. (43933)
  • Add stale issue workflow for flaky test reports. (43547)
  • Avatar: Add test to ensure that user image updates when user switched. (42657)
  • Fix PHP Tests: Try removing registry from WP_Block constructor calls. (43927)
  • Iframed editor: Fixed skipped tests. (43697)
  • Migrate draggable block tests to Playwright. (43798)
  • Migrate duplicating block test to playwright. (43171)
  • Migrate register block test case to playwright. (43170)
  • Migrate writing flow tests to Playwright. (43637)
  • Preview tests: Wait for the post-status change. (43874)
  • Skip draggable block end-to-end tests. (43736)
  • Skip navigation block end-to-end tests. (43571)
  • Update Playwright. (43887)

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.

Post Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 14.06.9s33.5ms
Gutenberg 14.17.6s28.39ms
WordPress 6.01.5s41.03ms

Site Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 14.08.4s25.1ms
Gutenberg 14.19,9s29.03ms
WordPress 6.03.26s13.11ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afragen @amustaque97 @andrewserong @annezazu @aristath @BE-Webdesign @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @colorful-tones @dcalhoun @dgwyer @draganescu @ellatrix @fabiankaegy @flootr @geriux @getdave @glendaviesnz @gziolo @jasmussen @jonathanbossenger @jorgefilipecosta @kevin940726 @kkoppenhaver @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mikachan @mirka @mrobit @ndiego @niklasp @noisysocks @ntsekouras @oandregal @ockham @pavanpatil1 @petitphp @pooja-muchandikar @RahiDroid @ramonjd @ryanwelcher @SantosGuillamot @scruffian @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad

The following PRs were merged by first time contributors:

Kudos to all the contributors that helped with the release! 

Props to @priethor @critterverse @bernhard-reiter @czapla @bph, @cbringmann @matveb, and @annezazu for their assistance with the release.

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

What’s new in Gutenberg 14.0? (31 August)

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


Gutenberg 14.0 is now available to download in the WordPress 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 repository. It’s full of enhancements, including extra blocks supports in the UIUI User interface that were only available via 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. before, a revamped List blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., and much more.

Over 50 people contributed to this packed release (over 260 PRs!), 5 of them as first-time contributors.

Table of contents

Enhanced List block using inner blocks

After the Gallery block and the Quote block, it is the List block’s turn to get a new makeover and leverage inner blocks. Now your list items can be easily sorted and indented with a much-improved user experience.

Add axial gap control to Styles

Now users have the ability to adjust axial (vertical and horizontal) block spacing using the Styles UI for those blocks that support it.

Pseudo-elements supports on button elements

After first introducing the ability to control hover/active/focus states for links using theme.json, this option has been extended to button elements (this includes blocks that include such elements, like button, file, and search). Now you can style those states easily, including something like this in your theme.json file:

"styles": {
    "elements": {
        "button": {
            ":hover": {
                "color": {
                    "background": "blue",
                    "text": "hotpink"
                }
            },
            ":active": {
                "color": {
                    "background": "red",
                    "text": "yellow"
                }
            }
        }
    }
}    

Appearance tools available for opt-in via theme supports

Until now, only themes leveraging theme.json could opt-in to use Appearance tools. Now any theme can simply include in their functions.php file:

add_theme_support( 'appearance-tools' );

and it will support border styles, link color, spacing (blockGap, margin, padding), and line height.

14.0

Enhancements

  • Add optional capture group to URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org regex in wp-env. (43200)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Add canRead to useResourcePermissions. (43484)
  • Element: Remove enzyme from platform test. (43531)
  • [Create-block] Add --variant flag to allow creation of different block type variants. (41289)
  • Use str_starts_with. (43371)
  • [Create Block] Adding a --no-plugin flag to scaffold only block files. (41642)
  • Customize widgets: Fix top contents cutoff in keyboard shortcuts. (43391)

Design Tools

As part of the effort to improve design tool consistency for typography and spacing on blocks (43242), there’s been a lot of work done to blocks during this release to add missing supports to them.

Added typography support:

Added spacing supports:

  • Paragraph: Add spacing block supports. (43455)
  • Heading: Add padding support. (43454)
  • List: Add spacing block supports. (43402)
  • Media & Text: Add spacing block supports. (43456)
  • Post Date: Add spacing support. (43406)
  • Post Title: Add padding support. (43457)
  • Query Title: Add padding support. (43458)
  • Spacer: Add spacing block supports. (43366)
  • Table of contents: Add spacing supports. (43368)
  • Table: Add spacing block supports. (43370)
  • Tag cloud: Add spacing block supports. (43367)
  • Term description: Add spacing block supports. (43372)
  • Verse: Add margin support. (43461)
  • Video: Add spacing block supports. (43365)

Added other supports:

  • Gallery: Add background color block supports. (43294)
  • 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.: Add border support applied to inner img. (42847)
  • Social Links: Enable alpha on color pickers. (43453)
  • Social links: Add background color block supports. (43293)
  • Table of contents block: Add color block supports. (43363)

Components

  • (Custom)SelectControl: Refresh and refactor chevron. (42962)
  • Always use screen for testing-library queries. (43152)
  • Autocomplete: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. (43432)
  • Card: Migrate to TypeScript. (42941)
  • ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. (42942)
  • CustomGradientPicker: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. (43437)
  • DateTimePicker: Replace reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates and moment with useLilius and date-fns. (43005)
  • FocalPointPicker: Use KeyboardEvent.code, partially refactor tests to modern RTL and user-event. (43441)
  • FontSizePicker: Add a flag to remove bottom margin. (43062)
  • FormTokenField: Add the ability to auto-select first matching suggestion for incomplete token. (42527)
  • FormTokenField: Use KeyboardEvent.code, refactor tests to model RTL and user-event. (43442)
  • Modal: Use code instead of keyCode for keyboard events. (43429)
  • Popover: Move eslint-disable comment to the correct deps array. (43320)
  • ToggleGroupControl: Improve styling for icon options. (43060)

Block Library

  • Add a setting to hide the prefix in the archive title. (42594)
  • Embed: Update Reddit icon. (43326)
  • Post date: Add option to display as the last modified date. (42312)
  • Reset focalPoint after replacing the cover image. (42859)
  • Social Link: Update Reddit icon and color to match brand guidelines. (43325)
  • Try “constrained” content width as new layout type. (42763)
  • Try: Add a clickable Group setup state. (40664)
  • Use page list instead of placeholder as fallback. (42735)
  • [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.]: Honour intended post type when previewing patterns and when replacing them with patterns. (43285)
  • List: Use nested blocks. (42711)

Global Styles

  • BlockGap: Add axial gap option to global styles where available. (42490)
  • BlockGap: Add support for spacing presets. (43296)
  • Spacing presets: Add check for 0 spacing steps. (43105)
  • Spacing presets: Add support for margins. (43246)
  • Spacing presets: Implement disabling of custom space sizes. (43216)
  • Pseudo-elements supports on button elements. (43088)

CSSCSS Cascading Style Sheets. & Styling

  • Placeholder: Add blurred background to work in nested cases. (43379)
  • Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo. (43228)

Data Layer

  • [data] Export the type for the combineReducers export. (43516)

Site Editor

  • Template Part: Allow changing properties in focus mode. (43151)

Block Editor

  • Refactor LinkControl tests to @testing-library. (43147)

Bug Fixes

  • Create Block: Refactor handling for template variants. (43481)
  • Fix no-results grammar. (43168)
  • Fix spinner causing a flash when loading site editor. (43226)
  • Image: Fix unclickable buttons. (43361)
  • Keycodes: Fix display of symbols in keyboard shortcut modal. (43137)
  • MediaReplaceFlow: Reset default LinkControl margins. (43156)
  • Post title: Fix pasting into existing content. (43123)
  • [Block Editor]: Fix block switcher label to take into account block variations. (43309)
  • [useEntityRecord] Pass the correct kind, name, and recordId to getEditedEntityRecord. (43517)
  • wp-env: Set core source to latest when null. (43133)

Block Library

  • Ensure the block toolbar doesn’t overlap block by modifying forcePosition and shift popover props. (42887)
  • Ensure pagination numbers have an href in block edit function. (43354)
  • Fix Post Featured Image border attributes. (43426)
  • Fix classic block converted to regular blocks when clicking new ‘Edit visually’ button. (43219)
  • Fix featured image being unselectable using arrow keys. (43323)
  • Fix navigation block undefined index error on frontend. (43302)
  • Gallery block: Ensure image attributes copy correctly between transforms. (42796)
  • Home Link: Fix undo trap. (43112)
  • List v2: Copy list wrapper when copying list items. (42860)
  • Navigation: Page List fix missing padding. (43358)
  • Prevent query block from looping in classic themes. (43221)
  • Pullquote block: Avoid text-align settings affecting block width and font size. (43188)
  • Pullquote block: Remove font definition from the default block styles. (43195)
  • 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.-controls.js: Change REST context to “view” when fetching taxonomy terms. (43274)
  • Home Link: Properly close tags. (43706)
  • Social Link: Fix background color on WhatsApp icon. (43683)

Components

  • (Custom)SelectControl: Truncate long options. (43301)
  • AlignmentMatrixControl: Fix width 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.. (43482)
  • ColorPalette, GradientPicker: Fix color picker popover positioning. (42989)
  • ColorPalette: Make sure “key” is unique when iterating over color entries with the same value. (43096)
  • Dropdown: Anchor popover to the dropdown wrapper (instead of the toggle). (43377)
  • Fix block toolbar offset in site editor when toggling sidebars. (43172)
  • Fix popover glitch that results in incorrect toolbar positioning in site editor. (43267)
  • Improve appearance of controls in the Global Styles Typography panel. (43304)
  • Popover: Fix and improve opening animation, use framer motion. (43186)
  • Popover: Make sure offset middleware always applies the latest frame offset values. (43329)
  • Refactor Guide tests to @testing-library/react. (43380)

Global Styles

  • Check for recursive dynamic reference in the site editor. (43166)
  • Duotone: Prevent early return blocking other style generation. (43300)
  • Fix dynamic references on the site editor. (42976)
  • Fix error in handling spacing preset slugs. (43237)
  • Layout: Re-instate alignwide and alignfull in flow layout get alignments. (43502)
  • Spacing presets: Fix/minor issues noted in initial UI PR. (43214)
  • Layout: Fix has-global-padding classname for constrained layouts without contentSize. (43689)

Block Editor

  • Fix Cmd+A issue in Storybook. (43145)
  • Fix drag and drop indicator before first block and after last block. (43135)
  • Fix spinner position in URLInput component. (43472)
  • Partial select: Fix selecting into image. (42983)

Design Tools

  • Border Radius: Prevent invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. css unit only styles or empty radii style attribute. (42409)
  • Border Support: Fix disabling of border style control. (43109)
  • Post Comments Count: Prevent text-decoration from affecting warning. (43497)

Site Editor

  • Do not show scrollbar when toolbar overflows the editor wrapper. (43332)
  • Fix template part focus mode resizable editor height. (43408)

npm Packages

  • Jest Preset: Ignore is-plain-obj transformation. (43179)
  • Jest Preset: Improve is-plain-obj transformation ignore. (43271)

Widgets Editor

  • Fix 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. form positioning in 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.. (43297)

CSS & Styling

  • Group/Stack/Row: Scope the dashed placeholder rules. (43169)

List View

  • Ensure long anchors don’t cause the List View to extend. (43134)

Post Editor

  • Post Template: Don’t fetch settings and templates for non-adminadmin (and super admin) users. (42845)

Patterns

  • Fix custom placeholder not displaying on subsequent Paragraph blocks. (42519)

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

  • Block Editor: Remove aria-selected from LinkPreview. (43279)
  • Block Editor: Replace aria-owns with aria-controls in URLInput. (43278)
  • Separator: Disable the contrastChecker via block.json. (43357)
  • Fix Top toolbar buttons tooltips and style when ‘Show button text labels’ is enabled. (42815)

Performance

Lodash is known to unnecessarily inflate the bundle size of packages, and in most cases, it can be replaced with native language functionality. See these for more information and rationale: (16938, 17025, 39495)

The related PRs are: 43118, 43306, 43389, 42466, 43362, 43100, 43420, 43117, 42467, 42502, 43220, 43224, 43258, 43374, 43518, 43474, 43229, 43411, 42465, 43231, 43479, 43330, 43182, 43419

Experiments

Components

  • Font size picker: Use t-shirt sizes for the ToggleGroupControl component. (43074)

Documentation

  • Add documentation for useRootPaddingAwareAlignments in theme.json. (43463)
  • Comma is missing. (43446)
  • Convert HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. to Markdown in changelog for 13.9. (43324)
  • Handbook: Fix format 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. example link. (43477)
  • Stabilize the useResourcePermissions hook. (43268)
  • [Docs] Replace useState with edit in useEntityRecord usage examples. (43270)
  • Block Editor Handbook: Added missing codetabs end marker. (43185)
  • Docs: Fix some typos. (43175)

Code Quality

  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher: Use str_contains(). (43382)
  • PHP: Use str_starts_with. (43410)
  • Style engine: Pass options to CSS static methods. (43399)
  • Style engine tweaks. (43303)
  • Navigation block – minor refactor to classic menu conversion code. (43081)
  • Data: Bundle TypeScript types with the data package. (43315)
  • getTemplateInfo: Return stable reference to an empty object. (43155)
  • Remove duplicated ‘import’ comments. (43478)
  • Disabled: Migrate to TypeScript. (42708)

Components

  • Clean up unused and duplicate COLORS values. (43445)
  • Packages: Ensure dependencies use version ranges. (43355)
  • Swatch: Remove component in favor of ColorIndicator. (43068)
  • Update/floating UI version. (43206)

List View

  • Block list: Update block list view preferences name for consistency. (43494)

Widgets Editor

  • Use useResourcePermissions in block-library and the widgets editor. (43305)

Block Editor

  • Rich Text: Eliminate second scan when getting text content. (43207)

Global Styles

  • Theme_JSON: Use existing append_to_selector for pseudo-elements. (43167)
  • Enable appearance tools via theme_support. (43337)

Testing

  • Migrate wp editor 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 test to Playwright. (41519)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Exclude PHPUnit tests from file and class name sniffssniff A module for PHP Code Sniffer that analyzes code for a specific problem. Multiple stiffs are combined to create a PHPCS standard. The term is named because it detects code smells, similar to how a dog would "sniff" out food. (for Core parity). (43131)
  • PHPUnit: Let PHPUnit Polyfills match PHPUnit version. (43334)
  • PHPUnit: Turns on PHP notices and deprecations. (43102)
  • Update incorrect quote end-to-end test snapshot. (43407)
  • Update test fixture for performance test. (43359)
  • Quote: Stabilise flaky end-to-end test. (43460)

Build Tooling

  • Build Tools: Fix typo in performance tests workflow. (43153)
  • Packages: Update the minimum required Node.js version to 14 for tools. (43141)
  • ESLint Plugin: Remove all rules targeting test files from recommended presets. (43272)
  • Ignore library CSS and built CSS in stylelint. (42027)
  • Fix ‘Mark issues stale after needs testing for 30 days’ workflow. (43545)

npm Packages

  • Packages: Replace is-plain-obj with is-plain-object. (43511)

Components

  • (Custom)GradientPicker: Add flag to remove margins. (43387)
  • AlignmentMatrixControl: Improve stories. (43438)
  • AnglePickerControl: Add flag to remove bottom margin. (43160)
  • ComboboxControl: Add flag to remove bottom margin. (43165)
  • CustomSelectControl: Deprecate constrained width style. (43230)
  • DuotonePicker/DuotoneSwatch: Add stories. (43225)
  • Storybook: Add margin checker tool. (43223)
  • ToggleGroupControl: Improve stories for documentation view. (43265)
  • ToolsPanel: Tighten grid gaps. (43424)

Block Library

  • Buttons: Update selectors to work better with button elements. (43022)
  • Comments block: Remove empty block wrapper. (43383)
  • Group block: Update description to remove “layout.” (43498)
  • Image: Try different resting state for placeholder, alternate version. (43180)
  • Navigation: Try to improve the appender in an empty block. (43115)
  • Polish placeholder radius and enable duotone on image setup state. (43425)
  • Pullquote: Use inline rich text instead of multiline. (43210)
  • [Blocks] Paragraph and Heading: Add gradient support. (43119)

Patterns

  • Bundle new collection of 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. and Footer block patterns. (43157)
  • Mark which attributes of the image should be considered content. (43280)
  • Prefer _x() for 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. context in core patterns. (43409)

Design Tools

  • Add margin and padding supports to Audio block. (43351)
  • Add margin/padding support to Archives block. (43350)

Global Styles

  • Add documentation about spacing presets. (43349)
  • Spacing presets: Add editor UI support. (42173)

Site Editor

  • [Site Editor]: Add success notice upon template creation. (43430)

CSS & Styling

  • Style engine: Use style engine for block supports CSS in editor. (43055)
  • Style engine: Remove enqueue flag. (43103)

Block Editor

  • Merging blocks: Allow x to be merged into wrapper blocks (quote, list, group…). (42780)

Tools

Testing

  • Refactor Button tests to @testing-library/react. (42981)
  • Refactor Guide PageControl tests to @testing-library/react. (43148)
  • Refactor MenuGroup tests to @testing-library/react. (43275)
  • Refactor withSpokenMessages tests to @testing-library. (43273)
  • Editor: Refactor PostAuthorCheck tests to @testing-library. (43176)
  • Editor: Refactor ThemeSupportCheck tests to @testing-library/react. (43532)
  • Editor: Refactor a few component tests to @testing-library/react. (43376)
  • Components: Refactor Placeholder tests to @testing-library/react. (43069)
  • Components: Refactor Tooltip tests to @testing-library/react. (43061)

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.

Post Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 14.09.99 s43.36 ms
Gutenberg 13.93.95 s54.77 ms
WordPress 6.04.31 s59.53 ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 14.011.45 s34.75 ms
Gutenberg 13.95.17 s29.37 ms
WordPress 6.04.92 s20.11 ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @andrewserong @aristath @awps @carolinan @ciampo @derekblank @dinhtungdu @dmsnell @draganescu @drzraf @ellatrix @geriux @glendaviesnz @gziolo @hellofromtonya @hz-tyfoon @jasmussen @jostnes @kdevnel @MaggieCabrera @Mamaduka @markbiek @matiasbenedetto @mcsf @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @paulopmt1 @pbking @ramonjd @randhirexpresstech @Rink9 @ryanwelcher @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @titusdmoore @torounit @tyxla @walbo

The following PRs were merged by first-time contributors:

  • @drzraf: taxonomy-controls.js: Change REST context to “view” when fetching taxonomy terms. (43274)
  • @markbiek: ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. (42942)
  • @randhirexpresstech: Add font family and text-decoration typography supports to paragraph blocks. (39642)
  • @Rink9: Migrate wp editor meta box test to Playwright. (41519)
  • @titusdmoore: Add optional capture group to URL regex in wp-env. (43200)

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

Props to @gziolo @priethor @joen @bernhard-reiter @scruffian @oandregal for their assistance with the release.

#gutenberg, #gutenberg-new

Editor chat summary: 31 August, 2022

This post summarizes the weekly editor chat meeting (agenda here) held on 2022-08-31 14:00 UTC. in Slack. Moderated by @andraganescu.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releases

Key project updates

Key project updates:

Task Coordination

@mamaduka

  • I’m looking for more feedback on the “Block-based template parts for Classic themes” – it is important as we’d like to ship this in the next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.

@onemaggie

@andraganescu

Open Floor

Announcements, questions and discussions.

@luminuu

Are there plans to prioritize [the blocking] changes [for new TwentyTwentyThree style variations] until the Feature Freeze (which should be 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. 1)?

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

Editor chat summary: 24 August, 2022

This post summarizes the weekly editor chat meeting (agenda here) held on 2022-08-24 14:00 UTC. in Slack. Moderated by @zieladam.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releases

Key project updates

Key project updates:

Task Coordination

@nickdiego

  • I just wanted to shout out all the great work happening here. Having this completed by 9/20 would be amazing: Addressing Design Tooling Consistency. But it is a lot of work and help is needed

@bernhard-reiter

  • As mentioned here, I’m looking for volunteers to help with backporting PHP files for the 6.1. release. I’ve filed a GH issue here — if you’d like to help, please have a look at the it and add a comment and/or add your GH handle next to the relevant file(s)! This should be especially easy for the folks who contributed those changes to Gutenberg in the first place. And it’s a prerequisite for any of those features to make it into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.!

@zieladam

  • I am exploring running the entire WordPress, including the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files, in the browser using WebAssembly. It could power many interactive tutorials!
  • I stabilized the new data 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.useResourcePermissionsuseEntityRecord, and useEntityRecords (has now been merged)
  • With @gziolo, we’re working towards publishing TypeScript types with the data (useSelect()useDispatch()) and the core-data (getEntityRecords()) packages. Autocompletion is hopefully coming soon!

@amustaque97

@wildworks

Open Floor

Announcements, questions and discussions.

@onemaggie

it’s my first time leading a release, and I already have a PR in line for cherry picking for a Gutenberg plugin RC2, so if you have a PR that didn’t make it to the milestone today, let me know asap

To get more details go directly to the Open Floor discussions 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.

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

Core Editor Improvement: Refining the template creation experience

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement 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.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Alongside more template options comes some exciting refinements to the overall experience that should allow you to move faster with more accuracy to do what you want to do. In isolation, these enhancements might not catch your attention but, when viewed collectively, it’s clear that the template experience has been greatly improved. These will all be available in the future WordPress 6.1 but you can explore now in the Gutenberg plugin.

Start a new template with a strong foundation

Previously when creating a new template, you were met with an empty page. As of 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/ 13.9, you’re now given content from the closest related template in what’s called the template hierarchy. This addresses some long standing feedback around how frustrating and underwhelming it was to start from scratch each time, with some opting to copy/paste contents from other templates into their new creations. 

As a bonus, when Gutenberg 14.0 comes out, you’ll be notified right away about the new template being created upon entering the editor.

Find the exact template part you need

Template parts power parts of your site like a 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. or footer and make up some of the building blocks for templates. You can create your own, use the ones provided by your theme, and even customize the ones your theme offers. Previously, when searching the Inserter, your options were limited based on the groupings of template parts. This meant you still needed to select the template part you wanted, even after adding in an option like “Header”:

Now, you can search and add the exact template part you want directly from the inserter, saving a few clicks. It also allows you to have a nice preview before adding a template part in so you have a sense of what you’re adding ahead of time:

Going a step further, the ability to search template parts was also added to the template part setup state so you can find your favorite template part quickly:

A modal showing the option to search for a template part.

Move with accuracy

As folks make a site their own, there are two additional quality of life improvements to mention that help make it more obvious to see the impact of your actions. The first is a View Site link directly from the Site Editor so that, after saving some changes, you can quickly get a sense of how your site is coming together. While this is an interim step before something more comprehensive like a browse mode can be implemented, it’s still a step in the right direction. 

Toolbar showing new view site option in the Site Editor on a blue background

Finally, if you want to start over after making some changes, the experience to do so has had a nice copy update to make it clearer what actions you’re going to be taking. Rather than being presented with an option to clear customization, it’s now clarified that you’ll be using what’s provided directly by the theme by deleting the customized template. This aims to help ensure that important decisions made by folks lead to the outcomes they want. 

More to come

Expect work to continue here, especially as more templates are added and refinements to the experience at scale become more apparent. To learn more about what’s to come and get inspired, check out the Site Editor & Templates Roadmap overview issue.

#core-editor-improvement, #gutenberg

Editor chat summary: 17 August, 2022

This post summarizes the weekly editor chat meeting (agenda here) held on 2022-08-17 14:00 UTC. in Slack. Moderated by @zieladam.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releases

Key project updates

Key project updates:

Task Coordination

@paaljoachim

@zieladam

  • Here’s what I’ve been up to:
  • WP_HTML_Walker – a reliable way to update the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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. markup from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, forget about regexps. An official make coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site) proposal is coming soon!
  • I published the proposal to Stop merging experimental APIs from the Gutenberg plugin to WordPress core
  • I’m transforming the Create your First App with Gutenberg Data tutorial into a course on learn.wordpress.org!

@oandregal

  • I’m getting back into the swing of things, so a lot of catchup. Helped with the gutenberg release and I’m ramping up to help in the area of “locking a pattern” (Add: Content lock ability started by JorgeCosta).

Open Floor

Announcements, questions and discussions.

@ndiego

There was previously some concern around adding Font Family support to more blocks since the Web Fonts 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. was still being finalized. Given this recent tracking ticket and all the associated PRs, I’m assuming that are good to move forward with full typography support across blocks? 

A reply from @hellofromtonya

  • The Webfonts API is still in development, yes. This is true. It’s entire architecture is being changed. However, the API itself as it is in Gutenberg works. The issue of using these enqueued / selected fonts within blocks though is outside the scope of the API itself. What do I mean by that? Right now, any block level interface could get the fonts from the API. That functionality exists now in Gutenberg.
  • For WP 6.1, it’s highly likely the Webfonts API will not be ready.

See the full conversation on Slack.

@priethor

The WordPress 6.1 feature freeze is scheduled for September 20th (Tuesday), and the Gutenberg 14.2 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). is planned for Sept 21st. It has been common in past releases to arrange the last pre-freeze RC to align with the Feature Freeze, so I was thinking of moving the Gutenberg 14.2 RC1 one day earlier to align with the WP 6.1 Feature Freeze. There are mainly three options for the feature freeze:

  • Make 14.1 the last version included; effective feature freeze on Sept 7th, 13 days of buffer time until WP 6.1 FF.
  • Make the 14.1 cycle one week longer; effective FF on September 14th, 6 days of buffer time.
  • Make 14.2 the last version, but shorten the RC period, with the 14.2 RC1 and effective feature freeze on September 15-16th.

The last two options are very similar, but I would prefer the last one (making 14.2 RC shorter) so that we avoid altering the biweekly release cycles/dates.

See the full conversation on Slack.

@hellofromtonya

PHPUnit tests > to help reduce backporting effort, I’m working on bringing parity between Core’s and Gutenberg’s PHPUnit testing. For example:

  • Turning on and testing of PHP notices and deprecations > which means source code may need adjustment to get rid of these errors
  • Running the tests against all PHP supported versions to ensure there are no incompatibilities

Why? Tests will fail in Core when backported. So catching issues early and continuously throughout the development cycle will help to ensure the PHP side of things is Core commit ready.

To get more details go directly to the Open Floor discussions 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.

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

A new system for simply and reliably updating HTML attributes

This call for feedback will be open until September 9th.

Let’s introduce a reliable tool WordPress could use to adjust the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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. markup. The current practice of using basic replacements seems fine at a first glance but is easy to break. The system proposed here will help avoid these common pitfalls.

Consider this example of adding a style HTML attribute in the cover block:

preg_replace( '/class=\".*?\"/', '${0} style="' . $styles . '"', $html );

It assumes a specific HTML structure:

  • There is a class attribute
  • The style attribute isn’t already defined, as browsers ignore the repeated attributes.
  • There is no other attribute ending with the string class="", such as data-replace-class="…" or title='how to set the class="" attribute'
  • The existing class attribute uses double quotes and no single quotes or no quotes.
  • Regular HTML does not contain the class="" substring, for example in a post describing how to use the class attribute in an HTML document.

These assumptions are typically true, but only until they’re not. For example, applying a padding produces a markup such as below where the browsers ignore the second style attribute:

<!-- Formatting applied for clarity -->
<div
    class="wp-block-cover"
    style="background-image:url(/img.png);"
    style="padding-top:4px">

The original preg_replace could be patched, but eventually another assumption would break. The deeper, fundamental problem is that string replacements are not the right tool for updating HTML. They’re used out of necessity as WordPress does not provide any better tools. Well, let’s change it!

Let’s introduce a dedicated tool for reliably updating the HTML markup. It’s called WP_HTML_Walker:

$w = new WP_HTML_Walker( '<div></div>' );
$w->next_tag();
$w->set_attribute( 'style', $styles );
$updated_html = (string) $w
// <div style="display: block"></div>

Simple string replacements don’t account for nuances in HTML

The problem of updating HTML attributes frequently appears in block-related work. Recently @dmsnell and I (@zieladam) investigated how HTML attributes are typically updated in the WordPress codebase while exploring adding a CSS class to all Gutenberg blocks. We found the typical approach is to use string replacements similar to the one covered above.

Here are a few examples already in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. where we run into these nuanced problems:

The Site Logo block attempts to remove the href attribute:

// Remove the link.
preg_replace( '#<a.*?>(.*?)</a>#i', '\1', $custom_logo );

However, it also unintentionally removes all the attributes, including class and style.

The gallery block adds a CSSCSS Cascading Style Sheets. class:

preg_replace('/' . preg_quote( 'class="', '/' ) . '/', 'class="' . $class . ' ', $content, 1);

However, if there’s no existing class attribute, it will skip over the 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.) without adding the required class. The same technique is used in the duotone feature, and the block supports API.

As a side note, it’s easy to lean on the existing pattern of using more complicated functions such as preg_replace(). Calling preg_quote() in this example isn’t appropriate and the entire regular expression pattern does nothing more than a basic str_replace().

The block-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. attempts to find the first HTML tag:

preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );

However, it also matches non-tags like text hearts and mathematical expressions (<3, f(x) = {x, x<5; -1, x>=5}), DOCTYPE declarations, and HTML comments.

The media library adds the srcset attribute:

preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );

However, a > character inside a tag attribute (e.g. title="why tacos > burritos")  would break the srcset functionality and potentially introduce a vector for injection attacks.

The list goes on, and it’s not just blocks.

Here’s an example from shortcodes:

if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {

Media Embeds:

if ( preg_match_all( '#<(?P<tag>' . $tags . ')[^<]*?(?:>[\s\S]*?<\/(?P=tag)>|\s*\/>)#', $content, $matches ) ) {

Media Galleries:

preg_match_all( '#src=([\'"])(.+?)\1#is', $gallery, $src, PREG_SET_ORDER );

Twentynineteen:

preg_replace( '/<a\s.*?>/', $link, $item_output, 1 );

And many, many other places. The point is, this is how WordPress does it today.

Many features demand a more reliable way of updating HTML attributes. Block theming code, in particular, tends to modify block markup to apply visual styling:

The only way to reliably update HTML attributes is to follow the HTML specification. However, doing that from scratch every time a CSS class is added would only cloud the entire codebase with HTML parsing nuances and distract from the work being done. That’s why @dmsnell, @gziolo, and I (@zieladam) want to move this complexity into Core. It would be exposed as a tailored and restricted API that’s easy to use, hard to mess up, and easy to find.

The new system tokenizes HTML

WP_HTML_Walker (Pull Request 43268) recognizes HTML tags and updates their attributes. It’s reliable because it implements the same official HTML specification as WebKit, Chrome, Firefox, and other major browser engines.

Unlike full-fledged HTML parsers, the walker avoids handling malformed markup, semantic problems, and building a document tree. Any problems that are present on the input are passed on to the browser. The walker doesn’t fix HTML just as it won’t break HTML.

The tradeoff is that it only offers a simplified API to modify HTML attributes. If you want to replace an img tag with a full-fledged figure layout, this API won’t offer that functionality. Similarly, the walker won’t help you replace all the child nodes of a particular div with a completely new markup. This system is focused on finding specific HTML tags and adding, removing, or updating the attributes on those tags.

Remove the href attribute from an anchor tag:

$w = new WP_HTML_Walker( $html );
$w->next_tag( 'a' );
$w->remove_attribute( 'href' );

Add a style attribute to the first tag in the document:

$w = new WP_HTML_Walker( $html );
$w->next_tag();
$w->set_attribute( 'style', 'display: none' );

Add a CSS class to the first tag having the wp-block-media-text__content class:

$w = new WP_HTML_Walker( $html );
$w->next_tag(array(
    'class_name' => 'wp-block-media-text__content'
));
$w->add_class( 'wp-foo-bar' );

Add the srcset attribute to all image tags:

$w = new WP_HTML_Walker( $html );
while ( $w->next_tag() ) {
    if (
        isset( $w->get_attribute( 'src' ) ) &&
        ! isset( $w->get_attribute( 'srcset' )
    ) {
        $srcset = build_srcset( $w->get_attribute( 'src' ) );
        $w->set_attribute( 'srcset', $srcset );
    }
}

Processing HTML using this Core API could help avoid a broad array of mistakes that appear due to the oversimplification presented by the array of ad-hoc solutions. A common interface for operations on block markup would alleviate competition between changes. You can check the refactoring PR to see how this new API could improve code readability in the existing core blocks.

Why build a new API instead of using DOMDocument?

Using DOMDocument was extensively discussed. It’s not installed on every host so a polyfill would still be necessary. And even if it was available everywhere, it’s based on libxml2 designed to parse XML. Libxml2 does not implement the WHATWG HTML parsing spec, does not support HTML5, and brings with it a variety of parsing failures and quirks.

Like many DOM libraries, DOMDocument is a heavy interface that rewrites entire documents after several stages of transformation. In contrast, the walker exposes a focused interface closer to what string functions offer. For the kind of modifications occurring in WordPress this is a more natural and convenient approach.

If this resonates with you then please speak out before September 9th

This post will be open for feedback for the next three weeks until September 9th. After that @dmsnell, @gziolo, and @zieladam would like to merge the new API into the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to power adding CSS classes to Gutenberg blocks, block layout improvements, and changes in CSS style variations.

Also see the WP_HTML_Walker Pull Request.

Props to Dennis Snell (@dmsnell), Grzegorz Ziółkowski (@gziolo), Andrei Draganescu (@andraganescu), Carolina Nymark (@poena), and Ramon Dodd (@ramonopoly) for their reviews and help in putting this proposal together.
#core, #editor, #gutenberg, #proposal

What’s new in Gutenberg 13.9? (17 August)

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


The Gutenberg 13.9 is now available in the WordPress 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 repository. It continues the iteration and polishing on various fronts, such as UIUI User interface, interaction, and engine work.

Almost 50 people contributed to this release and 4 of them are first-time contributors.

Table of contents

Changelog

Enhancements

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

  • Archives: Add a control to make block’s dropdown label invisible. (43025)
  • Media&Text: Add help to ImageSizeControl. (40642)
  • Navigation: Move overlay colors to the responsive wrapper. (42875)
  • Navigation: Extract navigation block utils. (42865)
  • Navigation: Fix link inheritance in overlay. (42929)
  • Post Author: Rendering htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for the author description at the editor. (42109)
  • 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.: Add link target and rel attributes. (42853)
  • Post Title: Do not add rel attribute if empty. (42855)
  • Query Pagination: Correctly position the “next” link on the first page. (42764)
  • Query Title: Add a search title variation. (42662)
  • Quote: Unwrap on Backspace at start. (42808)
  • Search Block: Remove margins from the input. (42959)
  • Transforms: Add group unwrap. (42685)

Components

  • BaseControl: Add box-sizing reset. (42889)
  • BorderControl: Add box-sizing reset. (42754)
  • BoxControl: Export applyValueToSides util function. (42733)
  • ComboboxControl and FormTokenField: Enhance components with custom render callback for options. (42597)
  • ComboboxControl: Add support for uncontrolled mode. (42752)
  • Flex: Convert component to TypeScript. (42537)
  • FontSizePicker: Add 40px size variant. (42716)
  • List View Expander: Fix icon in RTL mode. (42997)
  • Placeholder: Convert component to TypeScript. (42990)
  • Popover: Rewrite Storybook examples using controls. (42903)
  • Popover: Tidy up code, add more comments. (42944)
  • ResizableBox: Change tooltip background to match other tooltips. (42800)
  • Storybook: Add global CSSCSS Cascading Style Sheets. switcher. (42747)
  • StyleProvider: Convert component to TypeScript. (42541)
  • Swatch: Convert component to TypeScript. (42162)
  • Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. (42844)
  • Typography Panel: Fix font appearance control width. (42795)
  • UnitControl: Update unit dropdown design. (42000)
  • Update control labels to the new uppercase styles. (42789)

Reusable Blocks

  • Make template part and reusable block creation language consistent. (43032)

CSS & Styling

  • Rename solid color. (42918)
  • Tab style subpixel fix. (42892)
  • Navigation: Try to keep :Where just for paddings. (42967)

Global Styles

  • Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. (42544)
  • Enable alpha (opacity) in Global Styles color pickers. (43045)
  • Add block spacing to root block support UI. (42797)
  • Elements: Update the load order of the CSS in the Site Editor. (42863)
  • Heading element UI controls. (42176)
  • 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.: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. (42776)
  • Upsize typography panel components. (42718)

Design Tools

  • Cover: Show Resize Tooltip on Drag. (23522)
  • Update color button style. (41838)
  • Add explicit bypass for fluid font size calculation. (42757)

Post Editor

  • Post Template: Update template title selector. (42091)

Site Editor

  • Add author nicename template creation ability. (42165)
  • Add fallback template content on creation. (42520)
  • Add a ‘View Site’ link in the site editor. (42331)
  • Update clear customizations copy for templates. (41765)

Widgets Editor

  • Format Library: Add missing keyboard shortcut description in 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. 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.. (43044)

Block Editor

  • Rich text: Add character shortcuts for wrapping selection. (42469)

Block Directory

  • Modernize DownloadableBlockListItem tests. (43026)

Bug Fixes

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)

  • Fix issue where changing the id of the recursion provider can result in focus loss. (42916)
  • Site Editor: Don’t disable the Save button. (42842)

Components

  • Block Styles: Truncate long button labels. (42975)
  • ColorGradientControl: Fix awkward padding in popover. (43018)
  • ColorPicker: Fix layout overflow. (42992)
  • External link component: Add a check for on page anchor links. (42259)
  • Icons: Fix storybook library icon names. (43034)
  • InputControl: Fix acceptance of falsy values in controlled updates. (42484)
  • InputControl: Fix incorrect size prop passing to Text. (42793)
  • Popover: Anchor correctly to parent node when no explicit anchor is passed. (42971)
  • Popover: Fix arrow placement and design. (42874)
  • Popover: Improve 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. offset computation. (42417)
  • Popover: Make sure that ownerDocument is always defined. (42886)

Block Library

  • Disabled blocks passed to BlockTypesList are no longer draggable. (42751)
  • Fix drag and drop performance when dragging over the insertion point. (42806)
  • LatestPost: Fix issue with floated featured images overflowing focus style. (40663)
  • List v2: Fix Cmd+A. (42858)
  • Media&Text: Round position attribute on focal point save. (33915)
  • Navigation: Fix current-menu-item class logic. (42849)
  • Navigation: Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. permissions warning by avoiding using trashed wp_navigation posts (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. implementation). (42982)
  • Separator: Fix the block CSS classes in the editor. (42769)
  • Social Link: add missing ‘width’ and ‘height’ attributes. (41373)
  • Social: Include has-visible-labels on edit component. (42791)
  • Tag Cloud: Fix alignment issue when align center. (43017)
  • Writing flow: Fix Shift+Arrow partial selection for lists & quote. (42885)

CSS & Styling

  • Layout: Fix flex direction column. (42939)
  • Layout: Merge CSS rule for block gap. (43052)
  • Style Engine: Include 6.1 CSS 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., ensure style engine can output CSS functions like clamp. (43004)
  • Style engine: Disable stylesheet optimization temporarily. (43051)
  • Style Engine: Defensive guarding for when style does not define ‘individual’ property. (43122)

Global Styles

  • Fix styles declarations returning before all properties output. (42954)
  • Fluid typography: Migrate fluid typography algorithm to JS for site editor. (42688)
  • Spacing presets: Prevent % spacing size units being stripped by sanitize_title. (43101)
  • Specify priority in remove_action. (43073)

Block Editor

  • Inserter: Avoid warning when CRA is displayed. (42723)
  • Pasting: Dismiss pasted image if file:// schema detected. (42785)
  • Prevent multiselection via dragging when already dragging blocks. (42877)
  • Quote: Fix raw transform handler. (43093)
  • Rich text: Fix error when attempting to remove placeholder on composition start. (42821)
  • Paste from 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/.: Interpret paragraph markup. (43114)

Post Editor

  • Decode the post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for the button label. (42930)

Site Editor

  • Internalization fixes for site editor template creation. (42762)
  • Fix error in compileStyleValue. (43116)

RichText

  • Firefox: Fix issue where it selects a nearby contentEditable. (42777)

Build Tooling

  • Fix: CSS files don’t build in dev mode on Windows. (42041)
  • Fix: Script name error in main package.json. (43089)

Testing

  • Fix: Just another end-to-end test. (42947)

CreateBlock

  • 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. references from save properties. (43035)

Accessibility

  • Shortcuts: Add Ctrl+Y for redo on Windows. (42627)
  • Change shortcut text for redo tooltip on Windows. (42830)

Performance

  • Lodash: Refactor away from _.isMatch(). (42271)
  • Lodash: Refactor away from _.zip(). (42926)
  • Lodash: Refactor away from _.delay(). (42966)
  • Lodash: Refactor away from _.startsWith(). (43019)
  • Lodash: Refactor away from _.isPlainObject(). (42508)
  • Lodash: Refactor away from _.maxBy(). (42914)
  • Lodash: Refactor Calendar block away from moment. (43029)
  • Lodash: Remove completely from @wordpress/dom package. (42912)
  • Lodash: Remove completely from @wordpress/element package. (42898)

Experiments

Style Engine

  • Enqueue block support styles. (42452) (42880)
  • Prettify combined selectors. (43003)
  • Prettify output. (42909)
  • Rename global function. (42719)
  • Combine style-engine stores for block-supports. (42970)
  • Add optimize flag and combine functions into wp_style_engine_get_stylesheet. (42878)

Documentation

  • Add examples for core/blocks actions. (42637)
  • Add examples for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./viewport package. (42921)
  • Added the allowedFormat details in richtext readme. (42426)
  • Adding @example entries to the public 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. exposed in core/blocks. (42745)
  • Cover: Fix rendered content PHPDocPHPDoc (docblock, inline docs) type. (43099)
  • Create Block: Update document links in templates. (42839)
  • Fix return type of home link attribute function. (42901)
  • Fix textual consistency about block attributes. (43075)
  • Link plugins GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ release pages. (42736)
  • Document the cherry-picking automation. (42932)
  • Fixed broken external link to Mozilla Developer documentation. (43065)
  • Release Docs: Troubleshooting failed “Bump version” job. (42936)
  • Release docs: Update performance test instructions. (43015)
  • Remove the emoji characters to fix the handbook rendering. (43028)
  • Update broken internal link. (43094)
  • Update theme-json.md to include new element support and :Ref. (42412)
  • Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. (42969)

Code Quality

  • Add mutations data and helper functions to useEntityRecord. (39595)
  • Remove old WordPress 5.8 code. (42818)

Block Library

  • Add separate callbacks for selecting a classic or 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. in the nav block. (43057)
  • Avoid reliance on status constants when consuming useCreateNavigationMenu hook. (42704)
  • Home Link: Use ‘sprintf’ in the render callback. (43024)
  • Nav block: Extract hook for inner blocks. (42743)
  • Nav block: Normalize to function expressions. (42744)
  • Normalize usage of Notifications in Nav block. (42706)
  • Remove duplicate speak calls from navigation block. (43079)
  • Site Title: Use home_url instead of get_bloginfo. (42857)
  • Page List: Fix indentation in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher file. (42852)
  • 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.: Try filters with ToolsPanel. (42629)

Site Editor

  • Navigation Menu 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.: Remove unnecessary Fragment. (43021)

Style Engine

  • Tweak Declarations filtering logic slightly. (43215)
  • Minor tweaks. (43111)

Global Styles

  • useGlobalStylesOutput: Use memo for derived values. (42917)

Tools

Env

  • Use git for wp-env‘s default WordPress version. (42826)

Testing

  • Migrate deprecated node matcher tests to playwright. (42759)
  • Migrate group block tests to Playwright. (42801)
  • Migrate missing block tests to Playwright. (41680)
  • Migrate Convert Block Type test to Playwright. (42760)

Build Tooling

  • Lodash: Refactor away from _.flatMap(). (42360)
  • Standardize script naming in main package.json. (42368)

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.

Post Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.19s40.25ms
Gutenberg 13.83.21s36.88ms
WordPress 6.03.03s28.02ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.81s26.64ms
Gutenberg 13.83.74s26.08ms
WordPress 6.02.95s20.01ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @hellofromtonya @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @ndiego @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo

The following PRs were merged by first time contributors:

  • @fellyph: Rendering html for the author description at the editor. (42109)
  • @merkys7: Fix social-link block missing ‘width’ and ‘height’ attributes. (41373)
  • @Smit2808: Added the allowedFormat details in richtext readme. (42426)
  • @theminaldiwan: Fixed alignment issue of tagcloud block when align center. (43017)

Kudos to all the contributors that helped with the release!

Props to @gziolo @priethor @andrewserong @joen @bernhard-reiter for the assistance with the release.

#gutenberg #gutenberg-new

Editor chat summary: 10 August, 2022

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

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party releases

Gutenberg 13.9 RC1 was released 11 August.
Thank you for @oandregal for handling the release.
This includes the following enhancements:

  • Style engine: Prettify combined selectors. (#43003)
  • Style engine: Prettify output. (#42909)
  • Style engine: Rename a global function. (#42719)
  • Shortcuts: Add Ctrl+Y for redo on Windows. (#42627)

Gutenberg 13.9 RC2 was released. This includes:

Gutenberg 13.8.2 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. was released to fix the following:

Key project updates

Key project updates:

Task Coordination

@mamaduka

@geriux

  • On the mobile-side we started with the 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 effort.

@zieladam

Open Floor

Announcements, questions and discussions.

@mdxfr

Some points that need to be added in the roadmap IMHO, because those are systematic needs:

  1. About 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. 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., i do not see the basic need “exclude current post from results” in the Query Loop Improvement V2 List.
  2. The Query Loop block should also be extended to become the Gutenberg Swiss knife, like the Clickly Query Builder, to cover more usages and add flexibility during content creation (also with WooCommerce). Otherwise we will enter in a tunnel to fine tune blocks by iteration, release after release… i can see some works are done in such area, but perhaps you can be more ambitious!
  3. About navigation, there is no sticky option on the roadmap ? another highly needed feature, for anyone building some websites with WP (yes there are third part plugins but this is needed by more than 80% of websites).
  4. Another “quick win feature” (i.e an every day project need) is Add a current-menu-ancestor class to navigation items (PR waiting for merge), but there were some discussions recently around this (cannot find the global related isuse) and @get_dave is following these. It is already in the roadmap but as normal priority. Should a nice addition to the 6.1 release (it is also a systematic need).

Replies from @ntsekouras and @paaljoachim

  1. Exclude current post from results” has been added to the overview issue.
  2. [Block Library – Query Loop]: Try filters with ToolsPanel has been merged. A feature request issue would be helpful to create for additional suggestions on how to improve this feature.
  3. Sticky option for the Navigation block has been added to this issue: Fixed Position Header and Footer Template Parts. (Title does not mention Sticky for the Navigation block. Making it more difficult to find.)
  4. No feedback.

@bph

Birgit shared this post.
Kick-off WordPress 6.1 release docs.

11 August Hallway Hangout: Editor Tech Lead role 101 was held. A video recording is available in the Hallway Hangout post.

@ndiego

@mamaduka and I have been running the weekly Editor Bug Scrubs for a few weeks and have run into countless old issues that are actually no longer issues in Gutenberg and/or CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..  I am thinking about a concerted “marketing” effort to encourage the broader community to review any old Gutenberg issues that they may have created and check if they are still relevant. Sort of a “community cleanup” effort ahead of 6.1. Obviously not looking for a decision here, but just general thoughts if anyone has any. Wasn’t sure if something like this was tried before?

Reply from @paaljoachim

That sounds like a very good idea Nick!
Perhaps a make core post could be created as it would give additional focus on cleaning up the old issues.

To get more details go directly to the Open Floor discussions in the Core Editor Slack channel.

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

Proposal: Stop merging experimental APIs from Gutenberg to WordPress Core

This call for feedback will be open for the next four weeks until September 7th.

I propose a way of harmonizing the process of merging new APIs from the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to the WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Right now, the two projects have very different policies, confusing contributors and sparking lively discussions on every major WordPress release. 

Today, experimental APIs are merged to Core and sometimes removed later

To date, 280 experimental APIs were merged from the Gutenberg plugin to WordPress Core. That’s problematic, and here’s why.

WordPress values backward compatibility. Upgrading to a new version should not break the plugins and themes, so WordPress public APIs these plugins and themes depend on are maintained across major versions. As the WordPress handbook states:

Historically, WordPress has been known for preserving backward compatibility across versions. 

The Gutenberg plugin values agility. It’s the safe space where new experiments are planted and grow into stable features without the same stability constraints. It is okay to ship a prototype, learn from it, and then start over again. New functions under active development often include the __experimental prefix in their name to indicate they may change at any point and shouldn’t be relied upon. Removing the obsolete code also makes the 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/. bundle smaller and reduces the editor loading time. As the Gutenberg plugin handbook states:

Experimental and unstable APIs are temporary values exported from a module whose existence is either pending future revision or provides an immediate means to an end.

In the Gutenberg plugin, it’s fine to remove these experimental APIs. In WordPress, it’s not. Unfortunately, many have already been released with major WordPress versions.

Tomorrow, experimental APIs could be restricted to the Gutenberg plugin and never merged to Core

Let’s remove the experimental prefix before merging new APIs into WordPress Core.

This way:

  • Core can deliver the expected level of Backwards Compatibility
  • The Gutenberg plugin can retain the freedom to remove the experimental APIs as needed
  • The experimental APIs would get audits
  • It would make the release easier

Wouldn’t stabilizing every 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. before the release slow down new features?

The goal isn’t to stabilize. It’s to avoid adding public experimental APIs to WordPress core. Here’s two alternatives to stabilizing:

What if a stable feature depends on an experimental feature?

Then it isn’t actually stable. Let’s stabilize the dependencies first (or make them private).

What about the existing experimental APIs?

Most of those already merged to Core would get a stable alias. It would preserve BC and shouldn’t noticeably affect the bundle size. Some will need a different treatment; let’s discuss that case-by-case.

What if an existing experimental API already in Core needs to be removed?

Does it? If so, let’s consider that on a case-by-case basis. There are established Core practices like contacting plugin authors, writing make Core posts, preferring soft deprecations, and so on. I don’t expect to see many instances of this.

What if a future stable Gutenberg plugin API really needs to be removed after it’s released in Core?

Yes, it will happen. Let’s acknowledge and embrace it. Some good reasons were mentioned in the GitHub discussion, and the future will surprise us with many new ones. Again, let’s follow the established Core practices. For example, deprecated.php shows that removing a function body is sometimes okay as long as the name keeps working.

What are the downsides?

I can see three:

  • Some Gutenberg plugin features will get merged into the Core later that they currently would be. The total amount of the development work won’t change, but the merging timeline will. That could be a good thing. Using the Gutenberg plugin is the intended way of accessing the upcoming features early.
  • Refactoring Gutenberg plugin APIs will be difficult once they get shipped with Core. In reality, that’s already the case.
  • Risk: Surgically removing all the Gutenberg plugin work spanning multiple WordPress releases from pre-release merges may become too complex. It would halt the merges entirely. If this risk does materialize, the merge guidelines will need to be adjusted again.

If you see any other downsides, please speak out!

What alternatives have been considered?

  • Keep not acting on the problem.
  • Use the same Backwards Compatibility policy for both WordPress and the Gutenberg plugin – which would make both projects worse off.
  • Find a way to ship the experimental APIs with Core as “internal” and unavailable to plugin authors – which has been explored without a successful resolution.

Unfortunately, neither is viable, as explained in more detail in the GitHub discussion.

If this resonates with you, speak out before September 7th!

Policies don’t contribute to the Gutenberg plugin. People do. This proposal will only work if we, the contributors, believe it’s the right thing to do.

Please share your thoughts under this post or in the GitHub discussion – even if it’s just “I like it.” All opinions are welcome, especially if you are not convinced about this proposal.

This call for feedback will be open until September 7th.

Props to Birgit Pauli-Haack (@bph), Grzegorz Ziółkowski (@gziolo), and Hector Prieto (@priethor) for their help in putting this proposal together.

#editor #gutenberg #core #proposal