What’s new in Gutenberg 9.9? (5 February)

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/ 9.9 is out now! Get those bytes into your website while they’re hot. This is the 99th(!!) release of the 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 and will be the latest release that is bundled into WordPress 5.7.

The team has been hard at work implementing Full Site Editing, Global Styles, the Navigation 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., the Widgets screen, and it shows. We also have plenty to offer for all you lovers of “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 enhancements”.

Yee-haw!

Custom icon and background colors in Social Icons

Does “Twitter blue” conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with your blogblog (versus network, site)’s aesthetics? You can now set a custom background color and/or icon color for all of the icons in a Social Icons block.

Preferences redesign

The Options modal is all grown up, has a brand new look, and is now called Preferences.

Text labels in the Block Toolbar

Prefer text to icons? Now if you turn on the “Display button labels” setting you’ll see text labels in the block toolbar.

9.9 🤠

Enhancements

• Preferences modal redesign. (28329)
• Add “Show block breadcrumbs” preference. (28133)
• Show text labels instead of icons in block toolbars when option is set. (26135)
• Social Icons: Add icon & background color options. (28084)
• Image Block: Add border radius support. (27667)
• Improve visual clarity of reusable blocks. (28318)
• In-between inserter: Support both horizontal and vertical layouts. (27860)
• Automatically turn Dark Mode on or off depending on theme’s background colour. (28233)
• Show the Spacer block’s background on hover. (28129)
• Switch to a more muted sibling inserter design. (28550)
• Show tooltips on disabled elements. (27529)
• Use system font for vanilla editor styles. (26822)
• Only consider legal block types for the block list when transforming files to blocks. (26816)
• Social Link: Add a class to the anchor element. (28494)
• Image block: Add flow for converting to cover block from toolbar. (28414)
• Cover block: Improve toolbar button labels. (28384)
• Show reusable block parent border when child is selected. (28283)
• Change the quick inserter border color. (27866)

New APIs

• Add disabled support in ToggleControl and FormToggle. (28228)
• 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.: Allow overriding the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. for block variations. (28482)
• Add ability 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. the return values of 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. functions. (27966)
• (Experimental) Add thunk actions to replace rungen and controls. (27276)
• (Experimental) Add __experimentalBatch(). (28210)
• Component System: Add Grid Component. (28531)
• Alow setting the crossOrigin attribute for the image transform’s image using a filter. (28255)
• Add Truncate component. (28176)
• Add buttonProps to PanelBody. (28147)
• NavigationMenu: Add isSearchDebouncing prop. (28102)

Breaking Change

The format of the experimental-theme.json has been updated as per:

• Split global block selector into root and defaults. (28533)
• Make settings and style top-level keys. (28110)

Before:

{
  "global": {
    "settings": { ... },
    "styles": { ... }
  },
  "core/paragraph": {
    "settings": { ... },
    "styles": { ... }
  }
}

After:

{
  "settings": {
    "defaults": { ... },
    "root": { ... },
    "core/paragraph": { ... }
  },
  "styles": {
    "root": { ... },
    "core/paragraph": { ... }
  }
}

Bug Fixes

• Fix sibling inserter color. (28579)
• Fix issues causing the cover block to black out with a fixed background. (28565)
• Fix site editor pins. (28547)
• Resolve issue where insertion point is in incorrect position after changing block selection. (28542)
• Components: Fix truncate export. (28527)
• Fix 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. with pinned plugin items on mobile. (28521, 28526)
• Fix margins and width of 100%-width buttons. (28467)
• Fix aborted rendering of non-nested reusable blocks. (28461)
• Show insertion point after the last block in a container. (28418)
• Reusable blocks: Prevent infinite recursion. (28405)
• Fix block inserter automatic reorder. (28392)
• Create Block: Extract the package name from the template value. (28383)
• Fix handling of raw transforms that return multiple blocks. (28371)
• Fix repeated backgrounds with transparent images. (28362)
• Ensure inline image width popover doesn’t appear over media library modal. (28333)
• Fix repeated backgrounds for cover srcset. (28310)
• Fix typo in default template type descriptions. (28288)
• Fix allowedFormats in RichText component. (28282)
• Fix backwards compatibility issue with Inline Image format. (28223)
• Inserter: Fix left padding on Block Pattern Inserter dropdown. (28150)
• Fix toolbar keyboard navigation after pressing alt+F10. (28068)
• Image Block: Update linkDestination when editing image link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (27801)
• Interface Skeleton: Limit the editor width to prevent some blocks to grow infinitely wide. (27695)
• Button component: Add margin around the dash icon. (27461)
• Fix issue where resetBlocks can result in an incorrect block selection. (21598)
• Make custom spacing work with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (28548)
• Block Validation: Allow unitless zero CSSCSS Cascading Style Sheets. lengths. (28501)
• Add check for zero to the FocalPointPicker mediaRef which prevents a division by zero error. (28499)
• Update HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Anchor description to refer to block instead of heading. (28367)
• Warning component: Remove extra margin. (28316)
• Block Directory: Silently avoid re-installing local blocks. (28304)
• Inserter: Add description to content used in search. (28301)
• Make empty paragraphs take up the same space on the frontend, as in the editor. (27995, 28268)
• Fix potential data loss in Code Editor. (27717)
• Adjust borders on gallery to prevent overlap. (27312)
• Block Directory: Filter out disallowed blocks before showing available blocks. (25926)
• Fix Cover block position. (28653)
• Add minHeightUnit to latest core/cover deprecation. (28627)

Experiments

• Full Site Editing
  • Mark Post Comments Warning as block. (28511)
  • Update theme attribute injection and removal. (28368)
  • Template Part labels: Use title instead of slug. (28330)
  • Parse the template before gets rendered. (28319)
  • Use correct title property in snackbar after inserting Template Part. (28306)
  • Fix templates export. (28292)
  • Add template part missing state. (28277)
  • Hide resize handle. (28272)
  • Fix template part border states. (28241)
  • Fix entity spotlight system. (28239)
  • Post Title block: Add placeholder state. (28198)
  • Template Parts: Fix loading issue. (28088)
  • Add support for border configuration via theme.json. (28049)
  • Update the layout of the title in the top bar while template editing. (27845)
  • Expose group/ungroup buttons in site editor. (27611)
  • Global Styles: Root element & border radius. (28320)
  • Query block: Hide query block toolbar settings if query is inherited. (28290)
  • Query block: Pagination with InnerBlocks. (28125)
  • Add end-to-end tests for templates export. (28324)
  • Add 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 site templates export. (28323)
  • Add more tests for processing theme.json logic. (28202)
  • Fix button outline in Navigation component. (28230)
  • Fix template parts loading on frontend. (28752)
• Navigation
  • Fix menu item word wrap. (28516)
  • Fix URL cutoff. (28515)
  • Remove new navigation block features in the navigation editor. (28378)
  • Fix save, undo and redo keyboard shortcuts in navigation editor. (28257)
  • Fix the nav menu justify controls menu style. (28222)
  • Polish the appender focus style. (28219)
  • Fix navigation editor error. (28190)
  • Try: Allow space between on menu items. (28169)
  • Disable alignment for innerBlocks of Navigation block. (27365)
  • Placeholder empty state. (26947)
  • Open dropdown before focus on submenu item. (25322)
  • Improve robustness of nav screen test. (28344)
• Widgets
  • Add 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. id to blocks in the widgets screen. (28379)
  • Fix categorization not showing in the global inserter. (28036)
  • Fix end-to-end tests in widgets screen. (28375)
  • Fix widgets screen end-to-end tests. (28264)
  • Add some basic end-to-end tests for the widgets screen. (28160)
• Pattern Directory: Create endpoints to proxy api.w.org/patterns. (26578)

Documentation

• Add new page for i18n filters. (28553)
• Update list of core block categories. (28483)
• Fixed gramatical error in README. (28452)
• Update the main readme with the current Gutenberg project phase. (28359)
• Update links used in the developer portal. (28354)
• Update links to reference HEAD instead of a specific 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".. (28331)
• Fix supports color gradient(s). (28328)
• Add changelog for 28231. (28232)
• Updated readme to reflect current implementation of the BlockCard component.. (28226)
• Improve the intro page of the Block Editor Handbook. (28142)
• Update documentation to use allowedFormats instead of the deprecated formattingControls. (25639)
• Fix grammar in tutorial. (28447)
• Update tree and raw-content links to reference HEAD instead of a specific branch. (28431)

Code Quality

• Make sure toggleProps doesn’t replace important props on ToolbarGroup. (28401)
• Fix bad var name in BlockParentSelector. (28325)
• Fix file formatting for end-to-end test plugin. (28266)
• Polish block menu and show only fills when available. (28486)
• Rename some template part icons. (28458)
• Add hook: UseNoRecursiveRenders. (28428)
• Coding Standards: Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warnings. (28343)
• Change the way RTL styles get enqueued. (28274)
• Remove code no longer necessary. (28188)
• Update/simplify case transforms. (28171)
• Fix non static method WP_Block_Parser::Freeform called statically. (28017)
• Refactor out CSS gradient from custom-gradient-bar. (27936)
• Block Transform: Fix isMultiBlock property name. (28321)
• Components: Update dependencies shared with G2 components. (28280)

Tools

• Create Block: Add optional support for wp-env. (28234)
• Dependencies: Upgrade TypeScript. (28586)
• ESLint Plugin: Add missing eslint-plugin-import dependency. (28545)
• wp-env: Add MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. port info to start logs. (28441)
• Run the load time indicator computation multiple times. (28419)
• Don’t add default-custom-properties styles to all compiled files. (28395, 28462)
• Fix typewriter test by using mouse.wheel and waiting for scroll. (28376)
• Replace deprecated waitFor in end-to-end tests. (28360)
• Add stale issue workflow for issues with need info requested. (28179)
• Add script to remove node_modules of all packages. (28177)
• Testing: Add CI workflow covering Node.js 12. (28139)
• wp-env: Fix upload directory conflict in phpunit service. (28120)
• Update issue templates. (27570)
• Packages: Use canary flag for npm releases with next dist 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.). (28357)
• Packages: Fully automate npm publishing with the latest and next tags. (28335)

Various

• Components: Integrate G2 Text component. (28475)
• Block Mover wording: ‘Move block position’ to ‘Change block position’. (28454)
• Components: Upgrade FontSizePicker. (27594)

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	Loading Time	KeyPress Event (typing)
Gutenberg 9.9	5.083 s	27.05 ms
Gutenberg 9.8	4.633 s	29.64 ms
WordPress 5.6	4.718 s	27.11 ms

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

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