Maggie Cabrera 4:30 am on September 1, 2022
Tags: ,   

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