What’s new in Gutenberg 18.3? (8 May)

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


Gutenberg 18.3 has been released and is available for download!

A special welcome to three new first time contributors!

The latest release includes 157 pull requests from 44 contributors, and generally focuses on polishing features, and addressing bugs. Significant activity has also been directed towards improving documentation and code quality.

In this issue:

Full page client-side navigation experiment

As part of continuing to bring a single page application experience to WP sites, this change enables an experimental setting for whole-DOM-replacement on the client navigating between different pages without the need for a full page refresh.  Previously this was only available for region-based replacement. (#59707)

Allow negative values for margin controls

Negative margin values can now be added directly in the editing experience, resolving a longstanding feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged. and matching the current 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. support. This expands the design options for users leveraging the Editor. (#60347)

Add defaultFontSizes option to theme.json (incrementing theme.json to v3)

A previous attempt at adding the ability to add a defaultFontSizes option to theme.json didn’t stick (#56661) and this change reintroduces that ability.  Because the default behavior of overriding font sizes has changed this has caused the version of theme.json to increment to version 3.  (See this comment for more details.) Now defaultFontSizes can be set to false in theme.json to disable showing the default font sizes supplied from Gutenberg. (#58409)

Add publish flow in site editor

This continues the work on unifying the publishing flow between post and site editors and adds to the site editor the publish/save button that is used in post editor. This means we have the same publishing flow between the two editors. (#61136)

Other Notable Highlights

  • The Zoom Out Mode got some love:
    • Insert patterns at the end of the root section (#60855)
    • Make the zoom out inserters work for sections inside the section root (#60909)
    • Don’t show appender at all inside sections on zoom-out mode (#60948)
    • Drop patterns and blocks between sections only in zoom out mode (#60828)
  • In the Post Editor we moved around word count, post status and last edited info in page summary (#61235)
  • Bumped the required WordPress version to 6.4 and tested up to to 6.5. (#60780)

Changelog

Full changelog Available

Enhancements

  • Output post classes in the editor. (60642)
  • Abstract keyboard shortcuts for heading to paragraph transform and vice-versa. (60606)
  • Capitalize more occurrences of 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.. (60747)
  • Clean up top toolbar to use same metrics as 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. toolbar. (61126)
  • Update template and template parts labels. (61146)
  • Update the template preview menu item text in the Template option. (57802)
  • Upgrade ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to v18.3. (61202)

Site Editor

  • Add PluginDocumentSettingPanel in template inspector controls. (60961)
  • Add publish flow in site editor. (61136)
  • Classic Theme: Expose new Patterns page and remove Template Parts submenu. (61080)
  • Consolidate editor/canvas resize handles. (60712)
  • Patterns data view: Remove icons in favor of dedicated sync status field. (60833)
  • Patterns: Remove “Manage all parts” page & link. (60689)
  • Tweak Template/Template Parts/Page creation modal. (61005)
  • Drop patterns and blocks between sections only in zoom out mode. (60828)
  • Insert patterns at the end of the root section. (60855)
  • Typography Panel: Use simple labels. (60886)
  • Font Library: Convert heading text to heading elements and group fonts as a list. (58834)

Block Editor

  • Add new TextAlignmentControl component. (60841)
  • Editor: Sort style overrides by block client ids. (61039)
  • Inserter: Bail early when a user has no permission to upload media. (60983)
  • List View: Use ‘isMatch’ for unselect the shortcut. (61223)
  • Move search into inserter tabs. (61108)
  • Polish Autocomplete popover. (60131)

Global Styles

  • Add scoping of feature level selectors for custom block style variations. (61033)
  • Allow negative values for margin controls. (60347)
  • Allow opt out of certain sets of styles in the editor. (61035)
  • 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. out color and typography variations. (60220)
  • Update utils for scoping CSSCSS Cascading Style Sheets. selectors. (61026)
  • Add defaultFontSizes theme.json (theme.json v3). (58409)

Block Library

  • Group: Remove hardcoded Group block example styles. (61027)
  • Remove Button component from social link block, replace with button element. (61270)
  • List View: Unify shortcut handlers. (61130)
  • Update list view spacing. (60713)

Post Editor

  • Editor: Move around word count, post status and last edited info in page summary. (61235)
  • Editor: Update post excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. panel with new designs. (60894)
  • Add duplicate post action. (60637)
  • Make duplicate post action available only on the 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 for now. (61192)

Data Views

  • Unbox items in grid layout. (61159)
  • Update alignment of preview contents in Patterns and Templates data views. (61190)

Components

  • ComboboxControl: Simplify string normalization. (60893)
  • Update help text alignment in CheckboxControl. (60787)
  • RangeControl: Remove deprecated reducedMotion util. (61119)
  • components – inputStyleNeutral: Remove deprecated reducedMotion util. (61122)

Bug Fixes

  • Editor: Do not show scrollbars when closing sidebars. (60889)
  • Fix block tab spacing when few available blocks. (61296)
  • Fix pattern preview focus styles. (60881)
  • Fix styles panel 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.. (61319)
  • Fix typo in clear customizations text. (61089)
  • Fix: Missing format, categories, and tags on the duplicate post action. (61194)
  • Fix: Post actions in post card panel is not checking for eligibility. (60994)
  • Notices: Fix snackbar placement. (60912)
  • Setup Node action – Set arch for key value. (61010)
  • docgen: Fix qualified types with type parameters. (61097)
  • Background image: Tools panel shouldn’t show reset button for inherited values. (61304)
  • Fix template files query by post-type. (61244)
  • Remove unnecessary period in template block selection notice. (61087)
  • Fix issue where pattern override values reset when saving. (61023)
  • Blocks: Merge variations bootstrapped from a server with the client definitions. (60832)
  • Bump minimum required WordPress version to 6.4. (60780)

Site Editor

  • DocumentBar: Account for when top toolbar is open. (61118)
  • Don’t show appender at all inside sections on zoom-out mode. (60948)
  • Editor: Avoid triggering the start page modal on unsaved pages. (61082)
  • Fix zoom out mode background color on Safari. (60873)
  • Fix: Pattern details page backpath. (61174)
  • Make the zoom out inserters work for sections inside the section root. (60909)
  • Select last section if parent section doesn’t exist. (61002)

Components

  • Box Control: Fix issue with negative values. (60984)
  • Fix usages of uSES with missing getServerSnapshot. (60943)

Block Library

  • Avoid unnecessary heading level and paragraph transform via keyboard shortcuts. (60955)
  • Navigation: Remove unnecessary __experimentalStyle. (60965)

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 aria-haspopup=”dialog” to Enable/Disable overrides button. (61309)
  • Fix unlabeled PostURL Copy button. (61195)
  • [Data Views] User patterns: Use excerpt as description. (60549)

Performance

  • Block lib: columns: Remove store subs on mount. (61123)
  • Block: Remove outline related store selecting. (61139)
  • Rich text: Combine all ref effects. (60936)
  • Template lock: Batch block disabling. (60934)
  • useBlockSync: Avoid replacing blocks twice on mount. (60967)
  • useMatchMedia: Cache queries. (61000)
  • ListViewBlock: Combine ‘useSelect’ 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., part two. (61054)
  • Remove showFixedToolbar from useShowBlockTools. (60717)
  • Editor: Optimize some of the post-support panels. (61003)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data: getEditedEntityRecord: Do not return empty object. (60988)
  • Drop zone: Avoid media query on mount. (60546)
  • Nav link: Use rich text value. (60503)

Experiments

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

  • Add full page client-side navigation experiment setting. (59707)

Documentation

  • Add AutosaveMonitor component JSDoc enhancements. (60905)
  • Add Documentation for CharacterCount component. (60906)
  • Add EditorSnackbars component documentation. (61110)
  • Add documentation for DocumentOutline and DocumentOutlineCheck components. (61129)
  • Add documentation for EditorHistoryRedo and EditorHistoryUndo. (60932)
  • Add documentation for EditorKeyboardShortcuts and EditorKeyboardShortcutsRegister. (60933)
  • Add documentation for PostAuthor, PostAuthorCheck, PostAuthorPanel components. (61090)
  • Added doc for components PageAttributesCheck, PageAttributesPanel, PageAttributesOrder, PageAttributesParent. (60977)
  • Change the name of the Interactivity API quick start guide markdown file. (61198)
  • Docs: Fix import statement of PluginMoreMenuItem. (60931)
  • Docs: Handle “oneOf” in theme.json schema doc generation. (61024)
  • Fix import in block editor’s readme example. (61218)
  • Fix use local version of theme.json schema in bundled files. (61312)
  • FontSizerPicker: Improve documentation for default units. (60996)
  • InputControl: Added password visibility story. (60898)
  • Move iAPI documentation from package to reference guides. (61143)
  • Refresh the folder structure documentation page. (60953)
  • Small-typo-change. (61178)
  • Theme JSON: 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. PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher annotations from Core. (61301)
  • Update an anchor link in block-in-the-editor.md. (59527)
  • Update block-deprecation.md. (60768)
  • Update documentation for theme.json version 3. (61221)
  • Update main readme file with relevant current information. (60942)

Code Quality

  • DataViews: Enable types. (61185)
  • Editor: Cleanup edit-post classnames and documentation. (61240)
  • Editor: Consistently deprecate edit-post and edit-site slots. (61134)
  • Editor: Unify the BlockContextualToolbar component between post and site editors. (61104)
  • Editor: Unify the more menu. (60910)
  • Editor: Unify the region navigation keyboard shortcuts. (60907)
  • Fix: Actions moved to the editor package still reference edit-site on their ids. (60899)
  • Remove unnecessary usesContext from paragraph block. (61008)
  • Removed Extra Space Before Since. (60918)
  • ToolsMoreMenuGroup: Remove form post editor. (61132)
  • Unify placeholders. (59275)
  • Use math.div for scss division. (61285)
  • useBlockProps: Remove dead code. (61133)
  • useBlockSync: Just testing without isControlled effect. (61114)
  • Add eslint autofix commit to ignored git commits. (61253)
  • Rephrasing for accuracy and link to Core TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.. (61284)
  • Blocks: Add a warning when registering variation without a name. (61037)
  • DataViews: Cleanup unused type property. (61197)
  • DataViews: More dataviews types. (61193)
  • Quality: Fix php warning error. (61321)
  • UseLocation instead of window.location.href. (61230)
  • Use contentOnly locking for pattern block. (61227)
  • Editor: No need to memorize callback in ‘SwapTemplateButton’. (61049)
  • Improve data-wp-context debugging by validating it as a stringified JSON Object. (61045)
  • Theme JSON: Extract util to get valid block style variations. (61030)
  • Elements: Deprecate old block support filter callbacks. (59538)

Components

  • AlignmentMatrixControl: Remove deprecated reducedMotion util. (61113)
  • FocalPointPicker: Remove deprecated reducedMotion util. (61116)
  • Navigation: Remove deprecated reducedMotion util. (61117)
  • Remove “experimental” designation for CustomSelectControlV2. (61078)
  • ToggleGroupControl: Remove deprecated reducedMotion util. (61120)
  • View: Fix TypeScript types. (60919)
  • components/elevation: Remove deprecated reducedMotion util. (61115)

Block Editor

  • Convert Media Inserter to Tabs Pattern. (60970)
  • Obviate mousetrap around Navigation Link popover. (61050)
  • editPost: Deprecate __experimentalPluginPostExcerpt. (61188)
  • editPost: __experimentalPluginPostExcerpt return <PluginPostExcerpt />. (61238)
  • useBlockRefs: Use more efficient lookup map, use uSES. (60945)
  • withBlockTree: Simplify code that replaces/removes controlled blocks. (61234)

Tools

  • ESLint Plugin: Handle multi-line translator comments. (61096)

Testing

  • Components: Fix snapshot tests of ToggleGroupControl. (61228)
  • Fix ESLint warning in Performance test files. (61311)
  • Hotfix: Fixed failing snapshot test. (61274)
  • Update 3rd party actions within composite action. (61211)

Build Tooling

  • Remove block-editor package usage from components. (60999)
  • lint-staged-typecheck: Don’t run TSC when no TS project is affected. (60998)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @carolinan @cbravobernal @colorful-tones @DaniGuardiola @desrosj @draganescu @ellatrix @fabiankaegy @fullofcaffeine @geriux @huubl @itzmekhokan @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @juanmaguitar @lanresmith @MaggieCabrera @Mamaduka @mirka @ntsekouras @oandregal @ockham @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shail-mehta @sirreal @stokesman @sunil25393 @swissspidy @t-hamano @talldan @twstokes @tyxla @youknowriad

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

#gutenberg-new