What’s new in Gutenberg 13.8? (3 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.8 comes with Fluid Typography, 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) improvements, revamped Quote 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 Template parts UXUX User experience enhancements. The release is also packed with bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes and code quality improvements. All these thanks to a fantastic team of contributors, including two first-timers.

It’s 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.

Table of contents

Fluid typography support

This new option allows themers to define text size that can scale and adapt to the screen’s real state available, so your content looks great on any screen.

Note: It’s a new feature, and the Gutenberg team would appreciate your feedback.

Revamped Quote block leveraging inner blocks

After the recent Gallery block improvements, it’s time to re-introduce the Quote block. Thanks to robust nested blocks 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., now you can shape the quotes to your heart’s content, which means that you can place any block inside the quotes 🎉 

Template part UX improvements

Template parts are essential for many themes; Gutenberg 13.8 introduces improvements for those who leverage variations and patterns to provide flexibility for their users.

The specific template part variations are now available in the block inserter, making it easy to add “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.”, “Footer,” or “Newsletter Subscription” template parts to your site.

Speaking of easy, the new search component in the template parts replacement modal will help you find just the right pattern for the block.

Border controls for Image blocks

The Image block now supports the full range of border controls, including Color, Style, and Width. I’m curious to see what creative folks at the Museum of Block Art can accomplish after this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature..

Accessibility enhancements

The Gutenberg team is always trying to make the Gutenberg plugin more accessible with each release, and 13.8 is no different. The release includes iterative accessibility enhancements, including improved and consistent labels and tooltips across the Editor(s), as well as more keyboard-friendly clickable elements in the “Add template” modal.

Other notable highlights

  • The Post Comments and Comments block are now consolidated into a single block – Comments.
  • Now it’s possible to exit container blocks like Group blocks using the `Enter` key on an empty paragraph.
  • The new settings under “Global Styles > Layout” allow users to override content dimensions defined by a theme, giving the users better control over the full-width content.

13.8.0

Enhancements

Block Library

  • Image: Add border block support for color, width, and style. (31366)
  • Merge Comments and Post Comments blocks. (41807)
  • Social Icon: Added WhatsApp icon to the Social Icon Block. (42137)
  • Template Part: Swap block action places. (42221)
  • Template Part: Add search to replacement modal. (42459)

General UIUI User interface

  • Equalize modal content padding. (42370)
  • Remove top margin on the first paragraph in a modal. (42369)

Components

  • BorderControl: Render border color/style dropdown as UnitControl prefix. (42212)
  • ColorPicker: Cleanly implement large size. (42002)
  • InputControl: Decrease large default padding if has prefix/suffix. (42166)
  • SelectControl: Add flag for larger default size. (42456)
  • ToggleGroupControl: Add size variants. (42008)
  • UnitControl: Update unit select’s focus styles. (42383)
  • CustomSelectControl: Use styles from SelectControl. (42460)
  • Dropdown: Add wrapper for custom padding. (42595)
  • InputControl: Add padding wrapper for prefix/suffix. (42378)
  • ScrollLock: Improve Storybook story for documentation view. (42344)
  • ColorPalette: Display checkered preview background when value is transparent. (42232)

Global Styles

  • Add layout content size controls to global styles. (42309)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. support for root padding and align full blocks. (42085)
  • 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 block support feature level selectors for blocks. (42087)
  • Theme.json: Add support forw heading / caption elements in theme.json schema. (42433)

Document Settings

  • Make ‘Move to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.’ button full width. (42577)

Block Editor

  • Add setting to display rich text toolbar inline. (42399)
  • Add block variations for individual template parts. (42454)
  • Enable onEnter support for group block. (40724)

Site Editor

  • On template creation, don’t show search if not needed. (42357)

Icons

  • Add shuffle icon to library. (42193)

Nested / Inner Blocks

  • Quote: Use nested blocks. (25892)

Colors

  • Update color palette popover style. (41900)

Bug Fixes

Block Library

  • Button Block: Change text-decoration style to low specificity. (42545)
  • Cover Block: Prevent transform to Group block when 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. is set. (42638)
  • Cover block: Adding background-size and background-repeat properties to the block CSS. (42470)
  • Fix tab/focus order issue in Media & text block. (40806)
  • Page List: Fetch items with ‘view’ context. (42559)
  • Post title: Fix single line paste. (42321)
  • Social Icons Block: Fix button opacity in template parts. (42641)
  • Group block: Add context to the word “Row”. (42255)
  • Post terms: Hide prefix and suffix placeholders in post terms. (42418)
  • [Media Text]: Fix deprecations 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.. (42816)

Components

  • AnglePickerControl: Fix gap between elements in RTL mode. (42534)
  • ColorPalette: Fix background image in RTL mode. (42510)
  • Context System: Don’t explicitly set undefined value to children. (42686)
  • MaybeCategoryPanel: Update categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector. (42663)
  • Popover: Fix width on expandOnMobile. (42635)
  • RangeControl: Clamp initialPosition between min and max values. (42571)
  • Tooltip: Avoid unnecessary re-renders of <select> child elements. (42483)
  • Tooltip: Fix positioning by anchoring to child element. (41268)
  • Fix condition bug on BoxControl. (42402)

Post Editor

  • Avoid 403 errors for users with low permissions. (42413)
  • Display post template selection for non-adminadmin (and super admin) users. (42705)
  • Fix typo in translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. string. (42673)

Block Editor

  • Prevent link control popover from going offscreen. (42389)
  • Writing flow: Fix caret movement for multiple lines. (42423)
  • Writing flow: Fix caret placement in corners. (42437)
  • Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. (42530)

Global Styles, CSS & Styling

  • Elements: Buttons: Fix the path with the css to style the cursor for all button elements. (42129)
  • Link elements: Add a :where selector to the :Not to lower specificity. (42669)
  • Element styles: Adding stylesheet to load in the editor. (42132)
  • Elements: Fix heading and caption element selectors. (42479)
  • Layout content size controls: Add left alignment to line up with description and other elements. (42576)
  • Layout: Ensure defaultEditorStyles are still output in Classic themes. (42906)
  • Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. (42756)
  • Theme.json: Fix schema for button elements. (42431)

Widgets Editor

  • Add configuration option to skip autop on freeform blocks when parsing blocks. (42623)

Rich Text

  • Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. (42596)

Site Editor

  • Fix typo in default category template’s description. (42586)
  • Fix Reakit warning on creation template component. (42392)
  • Remove leftover class. (42591)

Themes

  • Remove core/post-comments-form block styles that are overriding button element styles. (42053)

Icons

  • Icons Package: Fix line icons styling. (40315)

Accessibility

  • BorderControl: Update labelling, tooltips and wrap with fieldset and legend. (42348)
  • Add aria-hidden to query pagination arrows. (42583)
  • Fix labelling and semantics of the paragraph block Left to right control. (42324)
  • Fix mismatching label and visible text on the Toggle block inserter button. (42359)
  • Fix the description text of block movers for horizontal movement. (42393)
  • Replace clickable div elements with buttons in the Add template modal. (42668)

Experiments

Style Engine

  • Style Engine Rules & Store objects. (42222)
  • Add a WP_Style_Engine_Processor object. (42463)
  • Add elements to the frontend. (41732)
  • Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. (42428)
  • Style engine: Check item value validity. (42487)

List v2

  • Add forward delete. (42564)
  • Improve paste handling. (42524)
  • Merge with nested items. (42551)
  • Switch to default block type on Backspace from start. (42633)
  • Remove quote transforms as removed by Quote v2. (42700)

Global Styles

  • Block supports: Add fluid typography. (39529)
  • Layout: Reduce specificity of fallback blockGap styles. (42665)

Documentation

  • Add examples to core/blocks selectors. (42572)
  • Consolidate editor filters and actions. (42356)
  • Correct the documented return type for WP_Block_Parser::Render(). (42642)
  • Doc: Update getEntityRecord/s param description. (42488)
  • Docs: Add variations key to block.json JSON schema definition. (42539)
  • Docs: Add missing data module references. (42651)
  • Fix: Repetition of wrong word in string. (42621)
  • Flex: Remove experimental from documentation and storybook. (42301)
  • Include section on how to test code for a given WP major. (42390)
  • Marking internal action as @ignore to remove them from the documentation. (42163)
  • Theme JSON Docs: Clarify null, true, and false values for blockGap setting. (42447)
  • ToolsPanel: Add a readme section related to laying out a ToolsPanel. (42615)

Components

  • Improve documentation for the SpaceInput type. (42376)
  • BorderControl: Add missing changelog for accessibility enhancements. (42411)

Code Quality

  • Base Styles: Apply long-content-fade gradient from transparent to color. (42401)
  • Fix jsx-a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) label-has-associated-control configuration. (42671)
  • Two code issues on navigation link edit missing text. (42440)
  • Remove deprecated eslint rules. (42654)

Style Engine

  • Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. (42464)
  • Update return PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher doc comment and other nitpicks. (42453)

Componentes

  • ComboboxControl: Refactor onKeyDown to use keyboardEvent.code. (42569)
  • Elevation: Convert component to TypeScript. (42302)
  • ScrollLock: Covert component to TypeScript. (42303)
  • Shortcut: Covert component to TypeScript. (42272)
  • Divider: Complete TypeScript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of component. (41991)
  • Lodash: Refactor a few components away from _.isEmpty(). (42468)
  • Lodash: Refactor away from _.compact(). (42438)
  • Lodash: Refactor PageAttributesParent away from _.deburr(). (42429)
  • Lodash: Refactor away from _.snakeCase(). (42427)
  • Lodash: Refactor away from _.fromPairs(). (42217)

Global Styles

  • Dimensions Global Styles: Split props into separate 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. to tidy up the panel component. (42620)

Block Library

  • Remove unnecessary ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fragments. (42529)

Tools

Testing

  • Added unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. for cover block render function. (42108)
  • Migrate hooks api test to playwright. (42584)
  • Skip flaky navigation block permissions test. (42693)
  • end-to-end Tests: Tweak Comments block tests after migrating to Playwright. (42406)
  • Utilize WordPress PHPUnit Test Library Included By wp-env. (41852)

Build Tooling

  • Update to reflect change in Documentation label. (42395)
  • Add inline documentation on building API documentation to commit block API verify error message. (42432)
  • Scripts: Exit error code 1 when status value is null. (42396)
  • Env: Download WordPress PHPUnit Into Container. (41780)
  • Env: Restrict WP_TESTS_DOMAIN constant to just hostname and not home URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41039)

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.83.87s57.86ms
Gutenberg 13.73.03s57.48ms
WordPress 6.03.46s52.23ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.85.12s26.49ms
Gutenberg 13.74.5s25.72ms
WordPress 6.04.56s20.91ms

Contributor props

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini

The following PRs were merged by first-time contributors:

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

Props to @priethor for the assistance with the release, @critterverse and @jameskoster for the images and videos.

#gutenberg, #gutenberg-new