What’s new in Gutenberg 18.0? (27 March)

“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 tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor project (formerly called Full Site Editing).


Graphic w/ text: What's new in Gutenberg 18.0

Gutenberg 18.0 has been released and is available for download!

The 180th 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 release comprises a total of 206 closed PRs by 59 contributors and with a record-setting 17 first-time contributors. You’ll find in the release the result of additional Data View work, improvements for 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. and and media+ text 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 changelog also lists a ton 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, performance improvements and about 35 PRs of Documentation updates. 

Table of Contents

Sitewide Color and Typography presets

In addition to Style Variations, the Site view screen is now populated with the controls to set side-wide color and typography choices. This will streamline designers’ workflows.  (59594)

Users can use the Media + Text block in their templates as it now supports the featured image. The design possibilities now opened up beyond a column-bases layout also for single post or page templates. Drop shadow controls expand the design tools for developers, designers and site owner alike. (51491) (59616)

Data Views with improved filters and updated Template index page

The data views screens, which are also prototypes for the future adminadmin (and super admin) list pages, received quite a few intriguing updates. The Templates index page is now very flexible. In addition to the table view, users can now also enable a grid layout with preview cards or a list view that allows for full preview in a three-page window. The list view is available for templates, pages, and template parts. Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to select multiple criteria for filters. (59610)  (59858) (59792)

Other Notable Highlights

The Grid layout experiments are the next step to consistent responsiveness of posts, pages, and templates.
They are evolving quite a bit. If you haven’t opened them up you might want to start doing so now. This release includes a couple of updates. Blocks can now be grouped as a grid via the transform feature. With Column Start and Row Start controls in the 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., the Drag and Drop of blocks around the grid is now possible. (59483) (59853)

Changelog

Full changelog available

Enhancements

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Update method generating plural names. (59881)
  • Expand main content area to viewport when zoomed out. (59512)
  • Update ‘sidebar card’ appearance. (59997)

Data Views

  • Add: Command click to select item on table view. (59563)
  • DataViews: Add AND logic operators to filters. (59953)
  • DataViews: Add default getValue for fields. (59810)
  • DataViews: Implement multiple selection for filters. (59610)
  • DataViews: Make list layout stable. (59858)
  • Pages data view: Update quick-actions. (59551)
  • Reduce visual prominence of primary actions in table data views, and consolidate primary + secondary actions in ellipsis menu. (59128)

Site Editor

  • Patterns: Add a title to the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. delete flow and increase line height. (59645)
  • Standardize block tools toggle button size to 32px. (59625)
  • Update index page for templates. (59792)
  • [Site Editor]: Move featured image at the top of the inspector controls. (59783)

Block Library

  • Add featured image to Media & Text block. (51491)
  • Social Icons: Update Medium icon. (57073)
  • Table Block: Fixed width table cells on by default. (49672)
  • Update Reddit social icon to latest brand guidelines. (59438)

Components

  • Add typing for date and time typing for TextControl. (59666)
  • Add: Support for menu group to the Dropdown. (59723)
  • Update the line height for components. (60028)

Design Tools

  • Add Box Shadow support for featured image. (59616)
  • Background block supports: Move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles. (59889)

Layout

  • Add Column Start and Row Start controls to Grid children. (59483)
  • Allow blocks to be grouped as a Grid. (59853)

Global Styles

  • Remove preset headers. (59504)
  • Try color and typography presets in Site View. (59594)

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.

  • Display settings ‘label’ defined by the ‘register_setting’ method. (59243)

Rich Text

  • RichText: Add non-breaking space shortcut on Windows. (43150)

New APIs

  • Support the PluginDocumentSettingPanel slot in the site editor. (59985)
  • Add pre 6.5 compat for viewStyles. (59322)

Bug Fixes

Block Library

  • Add 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. for duotone to account for gutenberg_restore_image_outer_container in classic themes. (59764)
  • Add richText identifier to blocks. (59056)
  • Close navigation link ui on escape. (59838)
  • Code block: Preserve newlines. (59627)
  • Do not focus new navigation block menu until loading is finished. (59801)
  • File: Add center alignment editor class for classic themes. (59975)
  • Fix create menu after menu switch. (59630)
  • Fix image layout shift from placeholder to selected placeholder. (59857)
  • Fix overlay issue when empty featured image is used in Cover Block. (59855)
  • Media & Text: Remove the duplicate Media width control. (59776)
  • Prevent default on primary+k to prevent command center from opening on navigation link. (59845)
  • Quote: Show as active when deeply nested child block is selected. (59662)
  • RichText: Document the identifier prop. (60036)
  • Social icons: Only render label container when there’s a label. (60060)
  • Template Parts: Fix typo in translatable string. (59816)
  • Ensure consistent return type in WP_Navigation_Block_Renderer::Get_markup_for_inner_block(). (59820)
  • Return early from saving 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. data for the navigation without a $post->ID. (59875)
  • Fix root ID calculation when check if block can be transformed. (60167)
  • Featured Image: Fix overlay rendering in the editor. (60187)
  • Fix self closing navigation overlay. (60130)
  • Navigation: Avoid content loss when only specific entity fields are edited. (60071)

Font Library

  • Avoid auto-removing font families without font faces. (59910)
  • Ensure that errors reported from uploading font files are not duplicated. (59564)
  • Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. errors when activating or deactivating system fonts. (59935)
  • Fix typo in upload text. (59655)
  • Polish Google Fonts consent box. (59631)
  • Refactors the upload handler in order to check if files being uploaded are valid font files. (59648)
  • Reset notices when navigating away from the collection. (59981)
  • Activate the fonts coming from the backend and not the data from the frontend. (60093)
  • Install fonts in sequence to work around race condition. (60180)

Interactivity API

  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. fixes from Core. (59903)
  • Fix interactivity api end-to-end tests. (59836)
  • Interactivity: Ensure stores are initialized on client. (59842)
  • Interactivity: Restore scope when yielded promise rejects. (59708)
  • Prevent non-object state from being added. (59886)
  • Re-introduce data_wp_context() with _deprecated_function() call. (59834)

Site Editor

  • Don’t display welcome guide in hybrid theme. (55865)
  • Editor: Fix loading templates using a top level pattern block that includes a template part. (59900)
  • Fix opening of save panel when using the save shortcut. (59647)
  • Fix selected featured image when opening media library. (59769)
  • Make the delete 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. confirm dialogs consistent. (59825)
  • Restore the back button when navigating to the template from the home page. (59639)

Block Editor

  • Fix allow mouse users to edit link text when Link UIUI User interface is active. (59635)
  • Fix crash when unmounting an editor 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.. (59992)
  • Handle when attributes param passed into hasStickyOrFixedPositionValue is nullish. (59800)
  • List view: Fix stuck moving animation on Enter. (59644)
  • Shadow support enable skip serialization for dynamic blocks. (59887)
  • FlatTermSelector: Invalidate optimistic update if term creation fails. (59945)

Global Styles

  • Fix retrieval of referenced preset values in editor. (59811)
  • Global Syles: Apply fallback background color to typography elements. (59347)
  • Presets: Show the default empty variation as well as the other presets. (59717)
  • Remove filter for same number of settings. (59590)
  • Site editor: Find font families for typography presets crashes editor. (59806)
  • Force root min-height of 100% for backgrounds. (59809)
  • Featured Image: Fix block support selectors after shadow support addition. (60184)
  • Fix list of base theme fonts when a theme variation is applied.. (59959)

Patterns

  • Add pattern title in create modal in post editor. (59550)
  • Implement pattern overrides behind IS_GUTENBERG_PLUGIN flag. (59702)
  • Pattern Explorer: Pass ‘rootClientId’ to the pattern list. (60014)
  • Pattern Shuffling: Don’t assume that patterns have categories. (60070)

Data Views

  • Ensure the ‘select all’ checkbox appears on hover. (59799)
  • 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.: Default templates and template parts views do not work. (59794)
  • Ignore cmd-click when row not selectable. (59697)
  • [DataViews]: Fix item actions. (59748)

Components

  • DateTimePicker: Change day button size back from 32px to 28px. (59990)
  • Fix unwanted ToggleGroupControl backdrop vertical animation. (59642)
  • PaletteEdit: Fix order numbers. (52212)

Layout

  • Experiments: Fix label typo: “Grid interactivity”. (59796)
  • Show inherit toggle in the absence of settings.layout object. (59580)
  • Use correct layout type to display controls. (59979)

List View

  • Block Bindings: Remove Block Bindings icon from List View, fixes and CSSCSS Cascading Style Sheets. updates. (59477)
  • Heading Block: Show default block name in list view when content is empty. (59827)
  • Blocks: getBlockLabel: Use RichTextData.toPlainText if available. (58524)

Data Layer

  • Fix getEntityRecordsTotalPages when per_page is not provided. (59983)

Icons

  • Fix return icon viewbox. (59669)

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)

  • Add tooltip to several Back buttons. (59760)
  • Make save panel a dialog with proper labels, fix site editor focus loss after save. (59622)
  • Fix labeling of the navigation links in the list view. (59370)

Documentation

  • Block 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. schema: Add layout.allowCustomContentAndWideSize field. (59736)
  • Components: Fix headline hierarchy in README. (59726)
  • Components: Hide private READMEs from handbook. (60003)
  • Dataviews: Improve story. (59773)
  • Docs/fix typo in metadata reference guide. (59577)
  • Docs/fix typos and clarify wording in blocks supports guide. (59721)
  • Docs/fix typos in block context. (59575)
  • Docs/fix typos in block registration guide. (59720)
  • Docs/fix typos in block supports. (59919)
  • Docs/fix typos in edit and save reference guide. (59576)
  • Docs: Flex – Fix headline hierarchy. (59686)
  • Docs: List all minor versions on Versions in WordPress page. (58003)
  • Docs: Remove alert callout on block selectors page. (60020)
  • Docs: Update Interactivity API package readme. (59763)
  • Fix broken links in Interactivity API documentation. (59715)
  • Fix sample code on InputControl documentation. (59517)
  • Fix typo in platform-docs. (60042)
  • Fix: 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. links to getting started with JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. (59927)
  • Fixes pseudo code doc block to use real PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60012)
  • HeadingLevelDropdown: Fix JSDoc and documentation. (59727)
  • Improve Gutenberg platform documentation homepage. (59749)
  • InputControl: Make onChange observable in Storybook. (60055)
  • Interactivity API Docs: Clarify that getElement()’s ref can be null. (59868)
  • Platform Docs: Fix JSX error. (59967)
  • Plugin short description less than 150 characters. (59661)
  • RadioControl: Update deprecated suggestion in readme. (60002)
  • Replace screenshots of Radio Control. (60024)
  • Replace “sidebar” with “panel” in README.md. (59664)
  • Update GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ edit URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in docusaurus.config.js. (59969)
  • Update ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. documentation links for forms. (59657)
  • Update api-reference – data-bind–hidden is an incorrrect attribute – should be data-wp-bind–hidden. (59955)
  • Update block supports documentation for WordPress 6.5. (59862)
  • Update dependency-extraction-webpack-plugin documentation. (59973)
  • docs: Fix syntax in block filters example. (59636)
  • theme.json schema: Add settings.color.caption definition. (60017)

Code Quality

  • Add $schema to tsconfig files. (59861)
  • Added @global to PHP documentation Comments. (59725)
  • Consolidate template actions components. (59586)
  • Core Data: Clarify comments for entities’ plural methods. (59946)
  • Fix Code Standards for RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 2 release. (59774)
  • Fix typo in Dataviews and Font Collection packages. (59656)
  • Fix: Typo correction tff to ttf. (59665)
  • Global styles utils: Remove unused vars. (59805)
  • Refactor zoom-out iframe scale. (59618)
  • Refine include/exclude patterns in phpcs.xml.dist. (59712)
  • Typography Presets: Use && rather to avoid a messy nested conditional. (59920)
  • synchronizeBlocksWithTemplate: Extract common functions. (59682)

Block Editor

  • Block tree reducer: Avoid nested update for insertUsage. (59681)
  • Block tree reducer: Avoid repetitive Map.get. (59672)
  • BlockSettingsDropdown: No need to cast ‘clientIds’ to an array. (59940)
  • BlockSettingsMenuControls: Remove ‘__unstableDisplayLocation’ prop. (59942)
  • Don’t memoize callbacks in ‘BlockSettingsDropdown’. (59397)
  • Link dialog: Remove CSS hack. (59746)
  • Pattern Explorer: Remove leftover source filter state handlers. (60019)
  • Fix code formatting in Nav block view file. (60162)

Components

  • Button : Deprecate isSmall prop. (59734)
  • Button: Keep deprecated props in type definitions. (59913)
  • Replace isSmall prop with size in NavigationMenuSelector. (59667)
  • Replace isSmall prop #53560. (59302)
  • TextareaControl: Remove extra closing curly brace in inputStyleNeutral. (59744)
  • Update Snapshots for line height. (60041)

Block Library

  • Add explanatory comment to Nav Link block fix for Command Center. (59864)
  • Enforce @SInCE tags in block-library/src//.php files. (59700)
  • Refactor Enter keypress on Nav Link. (59848)
  • Update Nav block permissions variable naming accuracy. (59882)

Global Styles

  • Fetch the variations inside the component. (59588)
  • Theme JSON: Remove unused vars in layout class. (59938)
  • Use the preivew iframe to preview typography for consistency. (59587)
  • Background block supports: Move size defaults to 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. and block.json. (60008)

Plugin

  • Remove unnecessary ‘IS_GUTENBERG_PLUGIN’ check in ‘load.php’. (59873)
  • Update PHP Sync Issue generation script to ignore PRs with given labels. (59549)

Data Views

  • Update: Dataviews do not use strings on isCustom props passed down. (59609)
  • [Data Views]: Remove separator in item actions. (59822)

Data Layer

  • Data: Deprecate the getIsResolving selector. (59679)

Tools

Build Tooling

  • Add inline comment denoting version for Ruby setup. (59640)
  • Build: Dedupe packages. (57800)
  • GitHub Actions: Fix PHP file change detection logic. (59653)
  • Improve likelihood of Cherry Picking script including all PRs. (59871)
  • Interactive template: Use wp_interactivity_data_wp_context function. (59995)
  • Test: Dynamically detect and set max-workers. (59904)
  • Update docusaurus to the latest version. (59866)

Testing

  • Remove @kevin940726 and @Mamaduka from end-to-end test codeowners. (60067)
  • Upgrade Playwright to v1.42. (59339)
  • Use viewScriptModule block.json field for interactivity end-to-end tests. (59705)
  • end-to-end theme switch: Match incoming theme slug, then optional folder. (59851)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @afragen @ajlende @alexstine @andrewfleming @anton-vlasenko @artemiomorales @bacoords @c4rl0sbr4v0 @carolinan @chrisbellboy @colinduwe @creativecoder @DAreRodz @dcalhoun @draganescu @ellatrix @enejb @enodekciw @flexseth @fluiddot @gaambo @georgestephanis @geriux @getdave @huzaifaalmesbah @inc2734 @J0n-92 @jaclync @jameskoster @jasmussen @Jayanth-Parthsarathy @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krokodok @luislard @Mamaduka @matiasbenedetto @mattsherman @mcsf @megane9988 @michalczaplinski @mirka @mujuonly @mzahir @ndiego @noisysocks @ntsekouras @oandregal @pbking @ramonjd @rcoll @SahilThakur02 @Sam-Xronn @scruffian @shail-mehta @SiobhyB @sirreal @Soean @Strangehill @sunil25393 @swissspidy @t-hamano @talldan @tellthemachines @TeresaGobble @tjcafferkey @tomepajk @tyxla @vcanales @youknowriad

Props to @greenshady for review, @annezazu for highlights selection ,and @joen for the visuals in this post.

#gutenberg, #gutenberg-new