What’s new in Gutenberg 19.7? (20 November)

“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 19.7 has been released and is available for download!

  1. Global Styles available on the main site editor sidebar
  2. Swifter hiding & showing the template
  3. Set image blocks as featured image
  4. Changelog
  5. First-time contributors
  6. Contributors

Global Styles available on the main site editor 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 site editor sidebar is getting increasingly powerful, serving as the entry point to manage all-things your site. Up until this version, the styles panel offered limited style settings, focusing on style variations, color palettes, and typographies. Gutenberg 19.7 changes this by introducing a full-fledged Global Styles panel in its place, giving users site-wide granular control on styles at the top level.

Swifter hiding & showing the template

Switching between editing your site templates and content pages should be as smooth and seamless as possible; sometimes, you need to focus on the post content and hide the rest of the template. This was previously possible in the post settings, but now it is much easier thanks to the `Show template` toggle directly on the preview dropdown in the top toolbar.

Featured images offer a nice touch in external previews, making them more attractive to potential readers. However, it can be easy to forget to set one! To help set featured images more easily, image blocks now offer a dropdown action to directly set them as the featured image of the post or page containing 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..

Changelog

Enhancements

Block Library

  • Added toggle control to set any image as feature image if no feature image is set for post. (65896)
  • Improve cover z-index solution. (66249)
  • Post Content: Add border and spacing support. (66366)
  • 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.: Use templateSlug and postType for more context. (65820)
  • Update text case of “Starter Content”. (66954)
  • [Details Block]: Adds anchor support in details block. (66734)

Components

  • Guide: Use small size button for page controls. (66607)
  • MenuItem: Add 40px size prop on Button. (66596)
  • Notice: Add appropriate size props to Buttons. (66593)
  • PaletteEdit: Add appropriate size props to Buttons. (66590)
  • Popover: Add small size prop to close button. (66587)

Global Styles

  • Global styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.: Move focus and active state to list item. (66780)
  • Site editor: Integrate global styles controls and style book preview into the styles panel. (65619)
  • Add a landing section to stylebook tabs. (66545)

DataViews

  • DataViews Fields 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.: Default getValueFromId supports nested objects. (66890)

Block Editor

  • Inserter: Add ‘Starter Content’ categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to the inserter. (66819)
  • Add “show template” to preview dropdown. (66514)
  • Relocate “View” external link to end of editor 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. controls. (66785)

Zoom Out

  • Enable zoom out mode for non-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. editor. (66789)

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.

  • Theme JSON Resolver: Remove theme json merge in resolve_theme_file_uris. (66662)

Edit Mode

  • Image block: Add support for “more” dropdown for additional tools in Write mode. (66605)

Media

  • Media Library: Expose filters dropdown for individual images, such as with the Image block. (65965)
  • Media Utils: Add experimental sideloadMedia. (66378)

Bug Fixes

  • ComplementaryArea: Fix button position. (66677)
  • Fix Paragraph appender layout shift (building on 66061). (66779)
  • Fix: Set the fit-content width for images that are not .svg. (66643)
  • Preference modal: Avoid fetching all reusable blocks when the site editor loads. (66621)
  • Revert “Set image width to fit-content to solve aspect ratio problems in Firefox. (#66217)”. (66804)
  • Safari: Fix site editor template error. (66647)
  • Safari: Prevent focus capturing caused by flex display. (66402)
  • Select Mode: Hide tool selector in the post editor and force design mode. (66784)
  • Shadow panel: Make the delete modal text translatable. (66712)
  • WP Scripts: Make watch mode more resilient for developer errors. (66752)
  • getDefaultTemplateId: Ensure entity configuration is loaded. (66650)
  • Comments controller: fix issue where comments are allowed when closed (#66976)

Block Library

  • Cover: Fix media library image selection. (66782)
  • Cover: Show DropZone only when dragging withing the block. (66912)
  • Media & Text: Set .wp-block-media-text__media a display to block. (66915)
  • Prevent duplicate post format taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. queries. (66627)
  • Query Loop: Check for postTypeFromContext before using it. (66655)
  • Query Loop: Remove postTypeFromContext. (66681)

Block Editor

  • Appender: Fix initial position. (66711)
  • Appender: Fix outside canvas styles. (66630)
  • Block Inspector: Restore bottom margin for RadioControl. (66688)
  • Iframed editor: Fix relative wp-content URLs. (66751)
  • Block toolbar: Restrict visible child calculation to known blocks. (66702)

Global Styles

  • Section Styles: Fix insecure properties removal for inner block types and elements. (66896)
  • Style book: Reduce margin selector specificity so that it doesn’t override global block styles. (66895)
  • Theme JSON: Replace top-level background style objects on merge. (66656)

Components

  • FormTokenField: Fix token styles. (66640)
  • Storybook: Fix DataViews action modals. (66727)
  • ToggleGroupControl: Fix active background for zero value. (66855)

Post Editor

  • Disable device preview button in pattern/template part/navitation editor. (65970)
  • PostTaxonomiesFlatTermSelector: Abstract wrapper component. (66625)
  • VisualEditor: Always output has-global-padding classname when in post only mode. (66626)

DataViews

  • Fix TypeError when duplicating uncategorized theme patterns. (66889)
  • Tweak primary field in patterns grid layout. (66733)

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

  • Fix: Show Meta Boxes at the bottom of the screen regardless of the current rendering mode. (66508)
  • Hide metaboxes in Zoom Out. (66886)

Site Editor

  • DataViews: Fix ‘aria-label’ for pattern preview element. (66601)
  • Site Hub: Fixed navigation redirect on mobile devices for classic themes. (66867)
  • Site Editor: Fix template for page-on-front option. (66739)

Media

  • Add x-wav mime type for wav files in Firefox. (66850)
  • Ensure HEIC files selectable from “Upload” button. (66292)

Patterns

  • Fix uncategorized pattern browsing when pattern has no categories. (66945)

Interactivity API

  • Fix property modification from inherited context two or more levels above. (66872)

Block API

  • Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports. (66849)

Design Tools

  • Block Gap: Fix block spacing control for axial gap supported blocks. (66783)

Document Settings

  • Editor: Restore the ‘PluginPostStatusInfo’ slot position. (66665)

Templates API

  • Fix flash when clicking template name in the editor when a 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 registered template matches a default WP theme template. (66359)

Block bindings

  • Fix unset array key warning in block-bindings.php. (66337)

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)

  • Fix : Snackbar Notice Inconsistency. (66405)
  • Image: Add aria-haspopup prop write mode more tools menu items. (66815)
  • Site Icon Focus fix. (66952)
  • Popover: Fix missing label of the headerTitle Close button. (66813)
  • Fix inconsistent sidebars close buttons sizes. (66756)
  • Remove unnecessary tooltip from Video block Text tracks button. (66716)
  • Speak ‘Block moved up/down’ after using keyboard actions to move up/down. (64966)
  • Block Patterns List: Fix visual title and tooltip inconsistencies. (64815)

Performance

  • Inline Commenting: Avoid querying comments on editor load. (66670)
  • Patterns: Receive intermediate responses while unbound request is resolving. (66713)
  • Perf metrics: Update select and other metrics to use non-empty paragraphs. (66762)
  • Site Editor: Preload settings requests. (66488)
  • Site Editor: Speed up load by preloading home and front-page templates. (66579)
  • Site editor: Preload post if needed. (66631)

Global Styles

  • Preload user global styles based on user caps. (66541)

Experiments

DataViews

  • Add isVisible option to fields within DataForm. (65826)
  • DataViews: Implement isItemClickable and onClickItem props. (66365)
  • Quick Edit – Slug Field: Improve slug preview. (66559)
  • QuickEdit: Add password field data to the pages quick edit. (66567)

Documentation

  • Add 6.6.2 to Version in WordPress. (66870)
  • Add missing properties for DataViews/DataForm components. (66749)
  • Add section about the Fields API. (66761)
  • Block Bindings: Documentation API reference. (66251)
  • Docs: Include a note about supported licenses in WordPress packages. (66562)
  • Document filterSortAndPaginate & isItemValid utilities. (66738)
  • Feat: Storybook: Improve component organisation – Navigation Category – Issue #66275. (66658)
  • Feat: Storybook: Improve component organisation – Overlays Category – Issue #66275. (66657)
  • Feat: Storybook: Improve component organisation – Selection & Input Category – Issue #66275. (66660)
  • Feat: Storybook: Improve component organisation – Typography – Issue #66275. (66633)
  • Improve readability of DataViews documentation. (66766)
  • Move documentation for 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. operators to proper place. (66743)
  • Reorganize to bootstrap DataForm API section. (66729)
  • Storybook: Improve component organisation – Actions. (66680)
  • Storybook: Log warning() when in dev mode. (66568)
  • Update Commands documentation with the existing contexts. (66860)

Code Quality

  • BlockPatternsList: Use the Async component. (66744)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Commands: Fix add new post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org assignment. (66830)
  • Inline Commenting: Optimize store selector and misc changes. (66592)
  • Remove unnecessary boolean assignments. (66857)
  • TypeScript: Fix and improve types for private-apis. (66667)

Post Fields

  • Post fields: Clean up. (66941)
  • Post fields: Extract title from edit-site to fields package. (66940)
  • Post fields: Move comment_status from edit-site to fields package. (66934)
  • Post fields: Move date fields from edit-site to fields package. (66938)
  • Post fields: Move status from edit-site to fields. (66937)

Block Editor

  • Fix ‘useSelect’ dependencies for the ‘RichText’ component. (66964)
  • Fix ESLint warning for ‘useBlockTypesState’ hook. (66757)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Compiler error for ‘BlockProps’ util component. (66809)
  • Optimize getVisibleElementBounds in scrollable cases. (66546)
  • Revert: Fix unable to remove empty blocks on merge (#65262) + alternative. (66564)
  • URLInput: Fix incorrect classname for suggestions. (66714)
  • Iframe: Always enable for block themes, in core too. (66800)

Site Editor

  • Avoid using edited entity state in site editor loading hook. (66924)
  • Avoid using edited post selectors in welcome guide. (66926)
  • Edit Site: Refactor to remove usage of edited entity state. (66922)
  • Edit Site: Remove leftover ‘priority-queue’ dependency. (66773)
  • Remove useEditedEntityRecord hook. (66955)

Components

  • Fix React Compiler error for ‘useScrollRectIntoView’. (66498)
  • Panel: Add 40px size prop to Button. (66589)
  • Radio: Deprecate 36px default size. (66572)
  • Snackbar: Use link variant for action Button. (66560)

Data Layer

  • Convert the emitter module in data package to TS. (66669)
  • Data: Rename useSelect internals to fix React Compiler violations. (66807)
  • Data: Upgrade Redux to v5.0.1. (66966)

Post Editor

  • ESLint: Fix React Compiler violations in various commands. (66787)
  • Fix TS types for editor package. (66754)

Zoom Out

  • Zoom-out: Move default background to the iframe component. (66284)

Design Tools

  • Typography: Stabilize typography block supports within block processing. (63401)

Tools

Testing

  • Media: Check for wav mime type using isset. (66947)

Build Tooling

  • Enforce the same order of fields in package.json files. (66239)
  • Introduce React Scanner for component usage stats. (65463)

Various

  • Style engine: Wrap array_merge in conditionals to prevent unnecessary merging. (66661)

Block Library

  • Update placeholder text for blocks that support drag and drop. (66842)
  • update: Add Media to Add media in cover block. (66835)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @afercia @Aljullu @amitraj2203 @andrewserong @benharri @benniledl @carolinan @cbravobernal @DAreRodz @dcalhoun @ellatrix @fabiankaegy @gigitux @gziolo @hbhalodia @Infinite-Null @jasmussen @jorgefilipecosta @jsnajdr @juanfra @karthick-murugan @kevin940726 @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mikachan @mirka @n2erjo00 @ntsekouras @oandregal @ramonjd @renatho @rinkalpagdar @Soean @stokesman @swissspidy @t-hamano @tellthemachines @tyxla @up1512001 @Vrishabhsk @yogeshbhutkar @youknowriad


Thanks to @jameskoster for the visual assets.

#gutenberg #gutenberg-new