What’s new in Gutenberg 14.4? (26 October)

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


Gutenberg 14.4 has been released and is available for download!

It introduces a distraction-free mode for text-based content creation, it redesigns the main pattern inserter, it continues to improve recent responsive design features such as Fluid Typography and much more!

Fun fact: Johannes Gutenberg invented the printing press in 1440 and this version of Gutenberg is the 14.4.0

Table of Contents

Explore easier navigation and larger previews of patterns in the Inserter

A new design offers a split view between categories and patterns, improving the navigation between categories and providing larger previews for patterns, resulting in improved discoverability and at a glance context.

Enjoy distraction free writing

Gutenberg 14.4 includes a new mode that reduces various parts of the editor interface, allowing for a more focused writing experience. When enabled, the sidebars are closed and toolbars fade away, leaving your content to take center stage. You can toggle this mode on/off as you’d like, depending on what you’re looking for.

Control image captions from the 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

With this release, you can now add or remove a caption for an image directly from the block toolbar. If a caption has already been set, it will be included by default when the image is added to your content.

Lock the ability to edit the navigation block

The Navigation block offers an additional option when locking to restrict the ability to edit the content on its inner blocks (links and submenus). This helps further curate the experience, especially if you’re taking advantage of the ability to use block template parts in classic themes.

Lock modal open for the navigation block with all options locked, including the ability to edit a block.

Take advantage of improvements to Fluid Typography

In Gutenberg 13.8, Fluid Typography for font size presets was introduced to allow themers to generate fluid font size presets in 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.. This release of Gutenberg builds on this work by automatically converting custom font sizes to fluid values when fluid typography is enabled.

Changelog

Enhancements

  • Add prop to disable block selection clearer in BlockList. (44517)
  • Multi-select: Fix 1px indent. (44709)
  • ServerSideRender: Add new skipBlockSupportAttributes prop. (44491)
  • Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. (44597)
  • Try: Add a small radius to the multi selection style. (44708)
  • Rich Text: Use fallback icon for highlight format. (44705)
  • Create Block: Allows custom keys to be generated in block.json files and package.json files. (44649)

Block Library

  • Comments: Add spacing support. (45102)
  • Tag Cloud: Add typography supports (except font size). (43452)
  • Block Locking: Adds content locking to the navigation block. (44739)
  • Image: Add toolbar button to add a caption. (44965)
  • List Item: Adopt typography supports. (43312)

Components

  • BorderBoxControl: Omit unit select when values are mixed. (44592)
  • SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. (44573)

Block Editor

  • Introduce distraction free mode. (41740)
  • Redesign the main pattern inserter. (44028)
  • Inserter: Add a more pronounced hover effect. (44711)

Design Tools

  • SpacingSizesControl: Increase slider’s max value to 300. (44956)
  • Style engine: Permit wp custom CSSCSS Cascading Style Sheets. properties. (43071)
  • Try color theming. (44668)
  • Global Styles: Modify Frame animation of styles grid. (39717)

Bug Fixes

  • Clickable placeholder upload button. (44817)
  • Insertion point showing up unexpectedly. (44702)
  • Overflowing patterns. (44853)
  • Inspector is usable on the top level block even if it is content locked. (44878)
  • Use active variation as the parent block if available. (44609)
  • Placeholder for the navigation link label, to be about the label. (44733)
  • Hide the inbetween inserter consistently as you move the mouse. (44814)
  • Margin visualiser: Apply negative value to margins with calc(). (44718)
  • Placeholder: Fix hover style. (44701)
  • Post editor: Rename view to Preview. (45074)
  • Prevent empty block toolbars from showing empty slots. (44704)
  • Use inert attribute instead of useDisabled. (44865)
  • cleanForSlug: Replace multiple hyphens with a single one. (44873)
  • Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. (44998)
  • Most used tags: Try fixing label. (44859)
  • Only include theme.css if the theme declares support for wp-block-styles. (44640)
  • Merge inner blocks if wrappers are equal. (43181)
  • Try nested patterns previews with block editor setting. (44784)
  • Design Tools Adjust the custom range steps to match the units chosen. (44959)
  • Global Styles: Invoke zoomed-out view when selecting a style variation. (44987)

Block Library

  • Avoid querying block templates during installation. (44584)
  • Buttons: Add specificity for the editor. (44731)
  • Embed Block: Add support for Tumblr Dashboard URLs. (44854)
  • Fix list outdents on Enter in quote block. (44809)
  • Fix the cover block focal point picker. (44991)
  • Fix typo for word occurred. (44914)
  • Fix visibility of nested Group block appender. (45050)
  • Fix: Follow discussion settings in the comments block edit. (44463)
  • Group, Row, Stack, Columns. Fix missing border 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.. (44696)
  • List Item: Allow Gutenberg to override coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block type. (44911)
  • List v2: Selection when creating paragraph from empty list item. (44864)
  • Remove anchor support from the navigation block. (44721)
  • Removes __unstableMaxPages attribute from Page List block (and Nav block). (44415)
  • Site Logo: User permission HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. errors. (45104)
  • Site logo: Centered state, for upload button. (44861)
  • Media: Cover block text color heuristic for cross origin media. (44552)
  • Icons: Arrow icons being misaligned. (44666)
  • Patterns: Hide list items from content area of content locked blocks. (44676)
  • Templates 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.: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warning when getting dynamic template data. (44783)
  • Block Settings: Show move to on nested blocks when only one root block. (44827)
  • Navigation: Fallback to a classic menu if one is available. (44173)

Site Editor

  • Toggle Navigation Menus 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.. (44860)
  • Zoomed out view: Keep list view open when entering mode. (44781)

Block Editor

  • Cover: Fix erroneous focus style in editor. (44707)
  • Native inner blocks merge where appropriate. (45048)

Typography

  • Fluid typography: Convert server-side block support values. (44762)
  • Fluid typography: Covert font size number values to pixels. (44807)
  • Fluid typography: Ensure fontsizes are strings or integers. (44847)
  • Font Size Picker Hint: Fallback to font size slug if name is undefined. (45041)
  • Make custom font sizes appear fluid in the block editor when fluid typography is enabled. (44765)
  • Search block: Ensure font sizes values are converted to fluid in the editor. (44852)
  • Fluid typography: Convert font size inline style attributes to fluid values. (44764)

Components

  • FontSizePicker: Fix 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. order in RTL languages. (44590)
  • Navigator: Restore focus only once per location. (44972)
  • Spacing Sizes Control: Try improving layout spacing. (44858)

Global Styles

  • Ensure style card effect doesn’t cause scrollbars to appear. (44823)
  • Fluid Typography: Fix 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. in global styles where fluid clamp rules were not calculated for custom values. (44761)

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)

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

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.414.9s78.81ms
Gutenberg 14.315.3s84.59ms
WordPress 6.110.4s38.95ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.41.5s77.73ms
Gutenberg 14.34.7s75.05ms
WordPress 6.17.6s41.51ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @alanjacobmathew @amustaque97 @andrewserong @annezazu @BE-Webdesign @benridane @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @costdev @danielbachhuber @dcalhoun @desrosj @dinhtungdu @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jasmussen @jeremylind @jorgefilipecosta @joshuatf @jrfnl @jsnajdr @kevin940726 @Mamaduka @mikachan @mirka @mtias @noisysocks @ntsekouras @oandregal @ockham @pento @PooSham @ramonjd @ryanwelcher @sabernhardt @SantosGuillamot @scruffian @Soean @t-hamano @talldan @tellthemachines @thelovekesh @tyxla @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @benridane: Fix list outdents on Enter in quote block. (44809)
  • @jeremylind: FIX: Typo in block.json schema default scope values. (44944)
  • @PooSham: Add support for ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18 and later to jest-preset-default. (44680)
  • @thelovekesh: package(prettier-config): Update documentation. (44620)

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

Thanks to @priethor and @annezazu for their assistance with the release, and props to @javiarce for the images and videos!

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