October is almost over, and we’re really close to WordPress 5.9, with this version 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/ being the second to last to make it into that release. This time around we have plenty of enhancements to the editing experience, including a way to discover Featured 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. Patterns, spacing tools for heading blocks, new animations for some elements (such as Dropzone, and Insertion Point), and more.

Featured Patterns from the Pattern Directory.

The Pattern Directory is the go-to source for great Block Patterns, and with 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. to the inserter, users get direct access to a selection of featured Patterns, making it easier to find rich Patterns to use or get inspiration from.

Spacing Tools now available to more blocks

Spacing controls are an important piece when getting your Posts, Pages, and Templates looking just right. In Gutenberg 11.8 we’re getting great Improvements in this area.

Spacing on Heading Blocks — Spacing controls were already available for the Site Title Block, and it made sense to add this possibility for all blocks that generate headings, including the Navigation Block, as seen below! With this enhancement, it’s no longer necessary to manually add padding or margin support to each Pattern or Template that uses heading blocks.

Gap support on the Navigation Block — Enables us to control the space between elements of a Navigation Block, taking advantage of the Block Gap support added in Gutenberg 11.5.

Button Block gap and vertical margin — Also related to Block Gap support, this enables us to control the space between buttons, as well as adding vertical margin support in order to adjust the space above and below the Buttons container. As a side note, the discussion behind this change shows off how Contributors come together to add these useful features to Gutenberg; a big thank you to everyone involved!

Enable always-on burger menu for Responsive Navigation Block.

This update is two-fold: users can now hide a 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. behind a button at all times, and they also get a new and improved Navigation Block Display options panel.

Other notable improvements

Allow child 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. to be merged with parent theme.json

Child themes containing a theme.json file will now apply their styles on top of those defined by the parent theme’s theme.json, allowing them to easily overwrite certain styles while maintaining the parent’s base ones. If no theme.json file is present on the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/., the parent’s styles are applied, and the other way around as well.

More control over Cover and Column blocks’ inner blocks

Starting in Gutenberg 11.8, there is more control over which types of blocks are allowed inside some container blocks, as allowedBlocks support has been added to the Cover Block and to the Column Block.

Enable the Slash Inserter for heading, list, and quote.

The Slash Inserter is the fastest way to find, and add blocks to your content, and from now on users are able to utilize it to add blocks within a Heading, List, and Quote blocks, similarly to how it works in basic Paragraph blocks.

---

Animations for insertion point, drop zone, and other elements

This release adds a nice touch by providing animations for insertion points and drop zones, among others. For extra clarity, and flair. ✨

Show the ellipsis menu in the ListView

Last but not least, this release also enables the List View’s ellipsis menu (block settings menu) in the Site Editor. Not only does this menu let users copy, duplicate, remove, and perform a bunch of options to blocks from within the List View, but it also helps access the recently revamped Template Part Focus Mode.

11.8.0 Changelog

Spacing tools

• Buttons: Add gap and vertical margin support. (34546)
• Add spacing controls to all heading blocks. (35772)
• Feature Image: Add spacing controls to the 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. (35775)
• Navigation block: Add block gap support. (35277)

More control over inner blocks

• Column: Allow the specification of blocks allowed within columns. (35342)
• Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)

Child theme support for theme.json

• Allow child theme.json to be merged with parent theme.json. (35459)

Featured Patterns from the directory

• Featured patterns from the pattern directory. (35115)

Other Improvements

• Enable slash inserter for heading, list, and quote. (35360)
• Show the ellipsis menu in the ListView. (35170)
• Add animations for insertion point, dropzone, and other elements. (33132)
• Heading: Autogenerate heading anchors. (30825)
• Enable always-on burger menu for responsive navigation menus. (35568)

Gutenberg 11.8

Enhancements

Block Library

• Add spacing controls to all heading blocks. (35772)
• Enable slash inserter for heading, list, and quote. (35360)
• Unify theme block placeholder content. (35517)
• Buttons: Add gap and vertical margin support. (34546)
• Categories: Add support for showing only top-level categories. (35726)
• Column: Allow the specification of blocks allowed within columns. (35342)
• Comment Content Block: Add typography, color, and padding support. (35183)
• Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)
• Cover: Add an option to set opacity when the background color is used. (35065)
• Cover: Allow setting the height from the placeholder state. (35068)
• Cover: Change dimRatio to 50 if media is added and dimRatio is set to 100. (35789)
• Cover: Only use white text when the background of the cover block is dark. (33541)
• Cover: Use the description in the placeholder. (34970)
• Embed: Add Pinterest as an embed provider. (34895)
• Feature Image: Add spacing controls to the featured image block. (35775)
• Featured image and Image: Remove descendent space. (35466)
• Gallery Block: Get media data in a single request. (34389)
• Heading: Autogenerate heading anchors. (30825)
• Quote: Update deprecation to expect style block supports. (35615)
• Page List: Show empty placeholder if no items. (35441)
• Post Date: Add more typography options. (35422)
• Post Comment Author: Add link settings and block supports. (35595)
• Post Comment Date: Add link setting and block supports. (35112)
• Quote: Added a “plain” style for quote blocks. (29856)
• Search: Enable inheritance in the search block. (35723)
• Site Logo: Add a basic example to the site logo block. (35588)
• Site Logo: Move the Reset button to the Replace menu dropdown. (35372)
• Site Logo: placeholder tweaks. (35397)
• Site Tagline: Add `fontStyle` control to Site Tagline block. (35507)
• Site Tagline: Add wide + full support to the site tagline block. (35589)
• Site Title: Add a basic example to the site title block. (35590)
• Site Logo: Remove the “Reset” button icon. (35434)
• Social Icons: Add top and bottom margin support. (35374)
• Social Links: Polish logos only style. (35586)

Design Tools

• ToolsPanel: Switch to the plus icon when no controls are present in the panel body. (34107)
• Block Supports: Add panel-specific className. (35793)
• Block Supports: Switch dimensions inspector controls slot to bubble virtually. (34725)
• Inspector Controls: Resort the order of the design tools associated with styles 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.. (35574)

Styles

• Allow users to store duotone data. (35318)
• Allow child theme.json to be merged with parent theme.json. (35459)
• Extract the three color panels to their own global styles view. (35400)
• Font family: Switch from CSSCSS Cascading Style Sheets. Custom Property to classes. (31910)
• Move the global styles reset action to a dropdown menu. (35559)
• Update descriptions for the different screens under global styles. (35429)
• Update the global styles 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.’s root view to use Card components. (35547)
• Use text color to render the Aa preview in global styles. (35631)

Theming

• Add [data-block] to appender. (35356)
• Enable theme supports automatically for block themes. (35593)
• Remove default padding/margin on the body of the page and editor canvas. (35421)
• Support title in `templateParts`. (35626)
• CSS: Add a reset for image heights. (30092)

Patterns

• Increase the number of items per page for default 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. Block. (35603)
• Featured patterns from the pattern directory. (35115)

Block Editor

• Add animations for insertion point, dropzone, and other elements. (33132)
• Adjust Link UIUI User interface visual styling. (35414)
• Add some top margin. (35717)
• Show the ellipsis menu in the ListView. (35170)

Template Editor

• Add more options to template areas in template details. (35577)
• Add template areas to template inspector. (35239)
• Add template details to template parts. (35444)
• Align the layout of the template card with the block card. (35391)
• Update site editor block placeholder styling. (35513)
• Use a dark background for the site editor. (35520)
• Try: Remove dotted ancestor border. (35637)

Components

• Add shortcut provider. (35652)
• Iterate on the design of the colors and gradients panel. (35535)
• Navigator: Update Navigator styling to facilitate sticky positioning. (35518)
• Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. (27374)
• Remove segmented control vertical separators. (35497)
• Storybook: Add RTL switcher to toolbar. (35711)
• Storybook: Add story for TypographyPanel. (35293)
• Storybook: Enable Controls and disable Knobs by default. (35682)
• Storybook: Remove outdated decorator configuration. (35678)
• Support “any” step in NumberControl and RangeControl. (34542)
• ToggleGroupControl: Allow custom aria-label. (35423)
• Update range control metrics. (35540)
• Update FontSize control. (35395)

Packages

• Create Block: Add PascalCase slug to create-block template strings. (35462)
• Create Block: Allow local directories to be passed to –template as relative paths. (35645)
• Test Setup: Add more complete mocks of common timer functions. (35368)
• Scripts: Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. (35371)

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)

• Rich text popovers: Move to block tools to fix tab order. (34956)
• Save button: Prevent focus loss. (34731)

Performance

Global Styles

• Pass only the data the site editor uses. (35458)
• Use a context provider for global styles configuration. (35622)

Bug Fixes

Block Library

• Block Settings: Don’t render ‘Move to’ if the block cannot be moved. (35463)
• Cover: Update placeholder minHeight style to support non-px units. (35614)
• Cover: Update ‘templateLock’ attribute. (35671)
• Featured Image: Center placeholder chip contents. (35417)
• Heading: Fix undo/redo “trap”. (35767)
• Heading: Remove anchor map when block unmounts. (35761)
• Site Logo: Fix site logo block on dark backgrounds. (35718)

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.

• Fix HelpHub link i18n for page-jumps. (35404)
• Fix template part block untranslated strings. (35715)
• Translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. note for Home/end to avoid mistranslations. (35669)

Packages

• Server Site Render: Prevent empty renders in `ServerSideRender` component caused by changing props while already fetching markup. (35433)

Components

• Color Picker: Fix some issues on the color picker component; Remove tinycolor2;. (35562)
• Navigator: Hide horizontal overflow in Navigator. (35332)
• Popover: Fix __unstableBoundaryParent. (35082)
• RawHTML component: Allow multiple children. (35532)
• Rich text: Fix internal paste across multiline and single line instances. (35416)
• Toggle Group Control: Fix the visual state when no option is selected. (35545)
• Toggle Group Control: Fixed condition to show separator correctly. (35409)
• Toggle Group Control: Fix ToggleGroupControlOption not passing ref to the underlying element. (35546)
• Tooltip: For Tooltips, prevent emitting events to child elements if they are disabled. (35254)
• Tooltip: Remove extra comma character from Tooltip when the underlying component is disabled. (35247)

Themes

• Custom Templates: Use “title” from the theme.json. (35592)
• Elements block support: Fix link color rendering on-site front end. (35446)
• Move the link color styles to the footer. (35425)
• Reset margin for all children of flow layouts. (35426)

Template Editor

• Use slug as template parts area item key. (35796)
• Fix missing titles in general areas. (35657)

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

• Blocks: Apply the most recent filters to previously registered blocks. (34299)
• Fix class serialization of font size and colors in dynamic blocks that use block supports. (35751)

Design Tools

• Border Radius Control: Fix undefined value on the first click into RangeControl. (35651)

Block Editor

• Fix updating the block list after block removal. (35721)
• Fix sibling inserter animation. (35729)
• Inserter: Fix gap between Search and Tabs. (35537)
• Saving post: Transparent disabled button. (35542)
• FSE: Coding standards: DOCTYPE should be the first line/character of any HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. document. (35442)

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

• Fix preloading middleware referencing stale data for OPTIONS requests. (35527)

List View

• Fix expand and collapse when the icon is clicked. (35526)

Global Styles

• Fix presets that use a callback to validate user data. (35255)

CSS & Styling

• Remove font size classes that are enqueued in the global stylesheet. (35182)

Block API

• Allow more than 1 block stylesheets. (32510)

Experiments

Navigation Block

• Add block gap support. (35277)
• Enable always-on burger menu for responsive navigation menus. (35568)
• Fix issue with space-between. (35722)
• Submenu item paddings & fixes. (35716)
• Fix navigation gap & padding issues. (35752)
• Remove color inheritance specificity. (35725)
• Remove deprecated class names from the Navigation Link block. (35358)

Navigation Screen

• Use new coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functions in menu items REST API. (35648)
• Navigation: Preload more API requests. (35402)

Documentation

Handbook

• Add categories to TOC to help digest the FAQ. (35519)
• Add missing documentation for the wrapperProps property for the BlockListBlock component returned by the editor.blockListEdit 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.. (26961)
• Add section on using theme.json schema. (35739)
• Add Table of Contents to the FAQ page. (35455)
• Clarify documentation for InnerBlocks orientation prop. (35712)
• CustomRadius – Remove 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-only text. (35582)
• Update block categories. (35523)
• Update npm run build command for developing with Gutenberg locally. (35681)

Packages

• Block Editor: Update default value of the `viewportWidth` attribute in documentation. (35659)
• Components: Add the storybook link to the /components README. (35493)
• Components: Add readme for SkipToSelectedBlock component. (32958)
• Componentes: Add CHANGELOG entry for the fieldset removal from FontAppearanceControl. (35585)
• Components: Add an entry to CHANGELOG regarding the new ColorPicker. (35486)
• Components: Fix markdown highlighting on components CONTRIBUTING.md. (35633)
• Components: Mark CustomSelectControl hint option as experimental. (35673)
• Components: Polish ToggleGroupControl. (35600)
• Components: Small tweaks to contributing guidelines. (35620)
• Components: Update README for SelectControl. (28811)
• Components: Update DateTimePicker component README to remove reference to isDayHighlighted callback. (35363)
• Components, feat(SelectControl): Add children prop. (29540)
• Create Block: Update documentation and readme post-merge of #35645. (35679)

Code Quality

• Block Editor: Fix odd usage of transform-styles wrap function (and tighten types). (23599)
• Constrained tabbing: Simplify. (34836)
• Compose: Convert `usePrevious` hook to TypeScript. (35597)
• Update Callers to handle when getBlockType return undefined. (35097)
• Components: Polish ResizableBox and convert it to TypeScript. (35062)
• Components: Remove `tinycolor` object usage from the gradient picker. (35544)
• Components: Remove duplicated className in the Card component. (35333)
• Components: Remove unused useJumpStep utility. (35561)
• Components: Use new color picker props. (35566)
• Components: Replace the color picker component with the new version. (35220)
• Components, FontAppearanceControl: Remove fieldset wrapper. (35461)
• Components, ToolsPanel: Remove hardcoded classnames. (35415)
• Components, UnitControl component: Refactor JSX components to TypeScript. (35281)
• Global Styles: Refactor how the Global Styles access and sets data. (35264)
• Post Editor: Fix-up Post Editor’s preferences modal. (35369)
• Remove Tinycolor usage from component color utils. (35553)
• Reusable Blocks: Thunkify `reusable-blocks` store. (35217)

Tools

Packages

• Scripts: Remove inject polyfill by default. (35436)

Testing

• Child theme.json: Update test to better capture that children can update single parts in isolation. (35759)
• Border Radius Control: Add fallback px unit and add utils tests. (35786)
• Fix preview end-to-end tests. (35565)
• Flaky Tests: Fix taxonomies flaky tests. (35534)
• Flaky Tests: Try another fix for the flaky nav test. (35443)
• Performance tests: Add more detailed loading metrics. (32237)
• Components, Panel: Improve unit tests. (35658)
• Enable/skipped metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. test. (35594)

Build Tooling

• Revert version bump if build job fails. (33239)
• Updates `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-aztec` android to use S3 dependency for the Aztec editor. (35606)

A note to extenders on the Navigation Editor

Bugfix #35527 fixed preloading on the Navigation Editor; now cache gets deleted after the first cache hit for OPTIONS requests, potentially affecting 3rd-party plugins.

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version	Time To Render First Block	KeyPress Event (typing)
Gutenberg 11.8	6.21s	40.2ms
Gutenberg 11.7	6.29s	43.13ms
WordPress 5.8	6.74s	51.54ms

Thanks to @critterverse for the assets on this post, @priethor for shepherding the process along, @dd32 for assisting with the release to the plugin directory, and to those who contributed to this release! 👏

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