Héctor Prieto 3:48 pm on June 10, 2022
Tags: ,   

What’s new in Gutenberg 13.4? (8 June)

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

It’s been a busy time in WordPress. The first WCEU since 2019 was held just a few days after the WordPress 6.0 “Arturo” release. Similarly, Gutenberg doesn’t rest and keeps bringing us goodies every other week! The 13.4 release comes with 25 enhancements and nearly 30 bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Table of Contents

Support for button elements 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.

Gutenberg 13.4 adds support for button elements in theme.json, so themes can now add styles to their buttons using theme.json like this:

{
	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": "black"
				}
			}
		}
	}
}

To make the most of this change, blocks like the Buttons, Search, Post Comments, and File blocks now make use of the new CSSCSS Cascading Style Sheets. class wp-element-button to support button elements in theme.json.

Block spacing is a very useful design tool for the Gallery block, but what if you wanted to set different horizontal and vertical gaps? Well, you can now do that by opting in to the new axial spacing available in the Gallery block’s dimension panel.

As part of the iterative improvements to the components and post sidebar, Gutenberg 13.4 brings a new look and feel to the Publish popover.

The Color UIUI User interface gets its share of improvements, too. The color-picking interface has been unified and now uses the ToolsPanel introduced in Gutenberg 12.6. This change comes with a few quality of life improvements, too, such as when pasting a hexadecimal color, the # gets automatically stripped for a smoother workflow.

Search Block variations now support query vars

Starting with Gutenberg 13.4, Search block variations can limit their search results based on the query variables provided. For example, you can create a custom Search block variation limited to search when post_type=product with the following registration:

registerBlockVariation( 'core/search', {
   name: 'test/product-search',
   title: 'Product Search Block',
   category: 'test',
   attributes: {
      query: {
         post_type: 'product'
      }
   }
} );

Performance Improvements

Performance is top of mind for WordPress, and Gutenberg 13.4 comes again with a few performance improvements.

On the frontend, Global Styles CSS is enqueued conditionally only for the blocks currently in the page being loaded, resulting in serving smaller pages to the client.

As far as the Editor is concerned, the autocomplete performance has been improved. Last, but not least, 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/. Spring dependency has been upgraded, resulting in more efficient resource usage when the Block Editor is idle.

13.4.0

Enhancements

Block Library

  • Block deprecations: Provide context when blocks.registerBlockType is applied to deprecations. (36628)
  • File Block: Makes the button an element button. (41239)
  • Gallery: Opt-in to axial (column/row) block spacing controls. (41175)
  • Gallery block: Update the gallery gap to load styles in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. for block themes. (41015)
  • Navigation: Remove unnecessary ‘role’ attribute. (41360)
  • Post Author Name: Add to and from Post Author transformations. (41151)
  • Post Comments: Make the button an element button. (41251)
  • Search Block: Ability to specify additional search query vars. (40585)
  • Site Logo: Update/site logo constrain image. (41298)

Components

  • Allow removing the bottom margin from SelectControl. (41269)
  • ColorPicker: Only display detailed inputs. (41222)
  • ColorPicker: Strip hash from pasted hex values in ColorPicker. (41223)
  • Design updates to the Publish popover (DateTimePicker). (41097)
  • Spacer: Add RTL support. (41172)

Global Styles

  • Add support for button elements to theme.json. (40260)
  • Button Element: Add support to Site Editor. (41246)
  • Button Element: Update the button element selector. (41240)

Design Tools

  • Unify color UI. Refactor panel color gradient settings to use a tools panel. (41091)

Full Site Editing

  • Site Editor: Update single default template copy. (41302)
  • FSE Templates: Add info to templates created from wp suggestion. (41387)

New APIs

  • Move the visible blocks state to the block editor store. (41104)

Bug Fixes

  • Fix customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. block toolbar after popover refactor. (41312)
  • Get_style_nodes should be compatible with the parent method. (41217)

Block Library

  • Columns: Add default fallback gap value in block.json, and set it to 2em for Columns blocks. (41098)
  • Cover: Fix duotone when the background is set to fixed. (40554)
  • Gallery: Lower the priority of the gallery gap CSS so it loads after the block layout CSS. (41423)
  • Gallery: Support gaps that define column/row gaps to avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher Warning/Fatal. (41125)
  • Group: Check variation is registered before displaying it in the toolbar. (41305)
  • Image: Revert error handling. (41221)
  • List: List split bugs if one of the splits is empty. (41283)
  • Navigation: Fix broken Page title for pages created inline within in Nav block. (41063)
  • Navigation: Remove all references to the navigation areas. (41205)
  • Query: Inherit author from the global query. (40648)
  • Table of Contents: Convert <br> tags to spaces in headings. (41206)
  • Table of Contents: Fix list block check. (41351)

Block Editor

  • Block Variations: Fix block variation registration when the icon is an object and contains transform scope. (41457)
  • Handle no variation case in the block transform menu. (41328)
  • Update the block popover position as we scroll the container. (41402)
  • Writing Flow: Fix browser formatting with shortcuts on multiple selections. (41207)

Components

  • BorderBoxControl: Fix right border control alignment on small viewports and RTL styles. (41254)
  • ColorPalette: Update label correctly when value is CSS variable. (41461)
  • InputControl: Fix undo when changing padding values. (40518)
  • Popover, CustomGradientPicker, Dropdown: Fix positioning of popover when used in a dropdown. (41361)
  • Style Variations: Set min-width for styles preview. (41198)

CSS & Styling

  • Block styles: Account for style block nodes that have no name. (41446)

Site Editor

  • Code Editor: Avoid content loss when switching between editors. (41407)
  • Fix description in GetTemplateInfo. (41394)
  • 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. Sidebar: Fix vertical alignment of rows in navigation panel. (40883)
  • Persist new template’s description on creation. (41281)

Performance

  • Improve autocomplete performance. (41197)
  • Load block CSS conditionally. (41160)
  • Update React Spring. (41185)

Experiments

  • Remove Navigation screen from experiments page. (40878)

Documentation

  • Add missing entries to components package CHANGELOG. (41159)
  • Added example for getSaveElement. (41211)
  • Block support docs: Update blockGap notes. (41225)
  • Change ‘author’ to ‘categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.’ in onCategoryChange. (41299)
  • Components: Link Storybook in readme. (41182)
  • Create Block: Improve block templates. (41273)
  • Fix spelling mistake browser to browser. (41137)
  • Improve inline documentation. (41209)
  • SlotFill: Remove note about portals being unstable. (41359)
  • Update Page URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41188)

Code Quality

  • Entity configuration types. (40995)
  • Remove unused color panel files. (41148)
  • Remove the tooltip from the block selection button. (41154)
  • Search: Avoid double escaping. (41147)
  • Upgrade Rememo to v4. (41415)

Components

  • Refactor Autocomplete to pass exhaustive-deps. (41382)
  • Refactor BorderControl to pass exhaustive-deps. (41259)
  • Refactor ColorPalette to disable exhaustive-deps check for now. (41253)
  • Remove ‘useCombinedRef’ hook. (41186)
  • Update @types/react-dates. (41266)
  • Refactor AlignmentMatrixControl to pass exhaustive-deps. (41167)
  • Surface: Convert component to TypeScript. (41212)
  • TextareaControl: Convert component to TypeScript. (41215)

Tools

Build Tooling

  • jest-console: Add types directory to “files”. (41386)
  • Scripts: Convert file extension to js in block.json during the build. (41068)
  • Scripts: 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-zip to include root path files. (41439)

Plugin

  • Updates tested up to with 6.0 version. (41272)

Project Management

  • Limit TimothyBJacobs codeowners to the REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.. (41411)

Testing

  • CheckboxControl: Add unit tests. (41165)
  • Enable 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.-inline-styles end-to-end test. (35171)
  • Migrate code block tests to Playwright. (41136)
  • Migrate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block test case to Playwright. (41231)
  • Migrate preformatted block tests to Playwright. (41128)
  • Migrate revert template test to Playwright. (41310)
  • Migrate separator block tests to Playwright. (41130)
  • Migrate template part test to Playwright. (41048)
  • Refactor check-local-changes script. (41074)
  • Rewrite flaky tests reporter into its own package. (41106)
  • Revert “Enable iframe-inline-styles end-to-end test”. (41369)
  • Upgrade Playwright and use the official role selector engine. (41389)
  • Use @testing-library/user-event in BoxControl tests. (41422)
  • Use @testing-library/user-event in TimePicker tests. (41270)

wp-env

  • Allow skipping setting a configuration value by specifying it as null. (41084)
  • Fixed run Argument Passing. (41179)
  • Remove explicit git branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". fallbacks for wp-env and update readme. (41043)

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.45.47s49.19ms
Gutenberg 13.35.05s51.38ms
WordPress 6.06.09s47.62ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.46.53s42.94ms
Gutenberg 13.36.38s41.7ms
WordPress 6.06.12s41.17ms

Contributor props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @aduth @amustaque97 @andrewserong @aristath @chad1008 @ciampo @CWBudde @dd32 @derekblank @draganescu @ethitter @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @jameskoster @jorgefilipecosta @jostnes @JustinyAhin @kevin940726 @Mamaduka @matiasbenedetto @mirka @noisysocks @ntsekouras @ObliviousHarmony @pooja-muchandikar @ramonjd @SavPhill @scruffian @SiobhyB @stokesman @t-hamano @talldan @tellthemachines @TimothyBJacobs @tomasztunik @torounit @walbo @xconsau @youknowriad @ZebulanStanphill

The following PRs were merged by first-time contributors:

Kudos to all the contributors that helped with the release, not just with PRs but in any shape or form! 👏

Thanks to @jameskoster for the visual assets and @angelasjin for the peer review.

#gutenber, #gutenberg-new