What’s new in Gutenberg 19.8? (04 December)

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

The latest 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 entails a myriad of user experience improvements for selecting section styles, image manipulation and font handling. The DataViews layouts also received important improvements. 

Table of Contents

Section styles selector in toolbar 

In zoom-out mode, users can now apply different sections styles and designs directly from the toolbar, cycling through them and inspecting them in the context of the rest of the page. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. streamlines the decision-making and production process. (#67140)

Font family preview in dropdown

Another user experience improvement can be found in the list of fonts: Each font family is now previewed in the font picker dropdown and gives users a better indication as to what the font will look like. (67118)

The outcome of the Image manipulation methods are now better communicated in 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. editor. The success notices are now displayed at the bottom of the editor. The notices also come with a handy Undo link to revert to the original if necessary. (67314)(67312)

Other Notable Highlights

DataViews improvements

This release also contains some Data View improvements. For instance,  the table layout received density options: A user can modify the amount of whitespace that is displayed per row on three levels: comfortable, balanced and compact.  (67170)  Developers working with the Dataviews can now make use of a new 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. to programmatically  register and unregister fields for the various display methods. (67175). 

Block supports from experimental to stable.

📣 Plugin authors and Theme builders might appreciate the stabilization of certain block support settings and functions. A separate make blogblog (versus network, site) post will explain the ins and outs. For now, you can read about it in two 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/ PRs:  (67018) (66918).

Changelog

Enhancements

Block Library

  • Details block: Use summary content as default label. (67217)
  • Make social icon navigation one arrow key press. (64883)
  • Social Link: Add contentOnly editing support. (66622)
  • Page List : Add border and spacing support. (66385)
  • 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. block: Remove ‘add new post’ prompt 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.. (67189)
  • Query block: Update Enhanced Pagination help text. (67173)

Components

  • Autocomplete: Increase option height. (67214)
  • CircularOptionPicker: Update Button sizes. (67285)
  • ColorPalette: Disable Clear button if there’s no color value. (67108)
  • ColorPicker: Update sizes of format select and copy button. (67093)
  • ComboboxControl: Update reset button size. (67215)

DataViews

  • Add density option to table layout. (67170)
  • DataForm: Enable fields to declare a different layout. (66531)
  • DataViews list layout: Hide actions menu when there is only one action and is primary. (67015)
  • DataViews table layout: Hide actions menu when there is only one action and is primary. (67020)
  • Reduce the size of action button in Grid layout. (67032)
  • DataViews: Allow register/unregister fields. (67175)

Global Styles

  • Block Supports: Extend stabilization to common experimental block support flags. (67018)
  • Borders: Stabilize border block supports within block processing. (66918)
  • Site Editor > Styles: Open styles inspector when clicking preview canvas. (66996)

Media

  • Block Editor: Add notice action to revert image to original after cropping. (67314)
  • Block Editor: Add success notices for image editing. (67312)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Feature: Set editor rendering mode by post type. (62304)
  • Terms: Respect order specified by register_taxonomy(). (67154)

Zoom Out

  • Leave help text regardless of zoom state. (67132)
  • Preserve footer template bar in zoom out. (67135)
  • Add section styles switch button in block toolbar in zoom out mode. (67140)

Post Editor

  • Move default template types and template part areas to REST API. (66459)
  • Move usePostFields to wordpress/editor package. (67024)

Site Editor

  • Blocks: Adds check for parent before showing convert to pattern button. (66158)
  • Try dark toolbar for the write mode. (66116)

Design Tools

  • Heading: Hide border controls by default. (67105)
  • Font family preview in the font family picker. (67118)

Bug Fixes

Block Library

  • Fix block mover clickable area. (67261)
  • Fix dropping media from inserter into Cover block. (67056)
  • Fix: Preserve Display Preview State in File Block. (67263)
  • Paragraph: Update condition for rendering Drop Cap for a selected block. (67111)
  • RSS block: Check for description field before rendering 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.. (66985)
  • Resolve search block button text overlapping issue. (66868)
  • Social Links: Fix font family and weight inconsistency in editor. (67204)

Components

  • Composite: Restore Hover and Typeahead functionality. (67212)
  • Menu.ItemHelpText: Better line breaking. (67011)
  • SlotFill: Fix a 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. with storing stale fillProps. (67000)
  • Storybook: Fix DataViews layout. (66999)
  • FormFileUpload: Prevent HEIC and HEIF files from always being uploaded on Safari. (67139)

Block Editor

  • Add all color palettes to select from editor panel. (65148)
  • Correctly mark Block Comment SlotFills private. (67271)
  • Fix media placeholder to only activate for media objects. (66986)
  • Rich text: Preserve comments. (62128)
  • Fix TS types for the editor package. (67196)
  • PostTitle: Exit early when post type doesn’t support titles. (67086)

Global Styles

  • Avoid zooming out when browsing styles if the preview mode is active. (67190)
  • Remove styles from blocks’ previews. (67144)
  • Style panel: Use correct 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. count. (67180)
  • 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.: Include block style variations in path only output of get_block_nodes. (66948)
  • Fix: Logic for Highlight/text-color format availability. (65530)
  • Fix complex variation selectors when using selectors API. (67061)

Site Editor

  • Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. (67010)
  • Site Editor Sidebar: Fixed focus/hover style for navigation item buttons. (67251)
  • Site Hub: Fix height in mobile layout. (67110)
  • Site Editor: Styles: Fix inspector opening. (67004)
  • Improve 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) and consistency of the ‘Last modified’ Revisions button. (66606)
  • Remove styles from examples. (67098)
  • Editor: Correctly select post title support in ‘DocumentOutline’. (67109)

DataViews

  • Fix action visibility logic. (67197)
  • Fix primary field misalignment in grid layout. (66995)
  • Fix spacing when combining combined fields (67226)

Zoom Out

  • Zoom In/Out to correct canvas location. (66917)
  • Zoom in/out to correct location. (67126)
  • Zoom Out: Disable zooming out when Distraction Free mode is activated. (67028)

Layout

  • Allow flex justification controls to be disabled at the block level. (67059)
  • Show vertical alignment toolbar with allowSwitching enabled. (67022)

Patterns

  • Fix: 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/. error when pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is unregistered. (67063)
  • Block Locking: Remove edit locking for Synced Patterns. (67021)

Accessibility

Components

  • ColorPicker: Add accessible label for copy button. (67094)
  • Modal: Increase size of the Close button. (66792)
  • DataViews: Fix focus loss when removing all filters or resetting. (67003)

Block Library

  • Improve accessibility of the video track editor. (66832)
  • Navigation: Fix ‘ariaLabel’ block support. (66943)

Post Editor

  • Improve the 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. UIUI User interface when it cannot retrieve the image file and data. (66936)

Experiments

  • Inline Commenting: Update placement of reply input and add author info 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.. (66580)
  • Place “Write mode” functionality behind a Gutenberg experiment. (67008)

Documentation

  • Add documentation about required CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. changes when updating minimum WordPress version. (67167)
  • BoxControl: Auto-generate readme. (67284)
  • Components contributing guide: Fix relative links. (67323)
  • DataViews: Reorganize documentation for actions. (67159)
  • Docs: Correct return type in block_core_query_disable_enhanced_pagination(). (67128)
  • Storybook
    • Feat: Storybook: Improve component organization Layout Category – Issue #66275. (66659)
    • Feat: Storybook: Improve component organization Selection & Input Category – Issue #66275. (66635)
    • Storybook: Restore stable components back into categories. (67216)
    • Update BlockMover Stories and README. (66519)
    • Icon: Improve icon prop usage documentation in Storybook. (67280)
  • GradientPicker: Auto-generate readme. (67250)
  • Icon: Auto-generate readme. (67282)
  • Update custom store readme to use thunks instead of controls. (67006)
  • Update versions-in-wordpress.md. (67298)

Code Quality

  • ESLint: Enable eslint-plugin-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. (61788)
  • Extract selectors from useResolveEditedEntity hook. (67031)
  • Pattern: Remove backward compatibility code for WordPress < 6.4. (67131)
  • Post fields: Move author from edit-site to fields package. (66939)
  • Posts DataViews: Refactor the router to use route registration. (67160)
  • Comments controller: Fix issue where comments are allowed when closed. (66976)
  • Fix fatal error in in_array call in post_type_default_rendering_mode. (67225)
  • Data: Add changelog for Redux update. (66968)

Components

  • BorderBoxControl: Suppress redundant warnings for deprecated 36px size. (67213)
  • ComboboxControl : Deprecate 36px default size. (66900)
  • CustomGradientPicker: Prepare Buttons for 40px default size. (67286)
  • Dashicons: Remove non-existent icons from type. (67235)
  • DimensionControl: Deprecate 36px default size. (66705)
  • Feat: Adds the deprecation warning for 36px default size in range control. (66721)
  • FontSizePicker : Deprecate 36px default size. (66920)
  • Remove createPrivateSlotFill function. (67238)
  • SlotFill: Fix dependencies of registration effects, deduplicate code. (67071)
  • SlotFill: Remove registration API from useSlot result. (67070)
  • SlotFill: Rewrite base Slot to functional, unify rerenderable refs. (67153)
  • TextControl: Deprecate 36px default size. (66745)
  • ToggleGroupControl : Deprecate 36px default size. (66747)

Post Editor

  • ESLint: Bump eslint-plugin-react-compiler to latest betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.. (67106)
  • Edit Post: Refactor ‘MetaBoxVisibility’ component. (67265)
  • Edit Post: Remove unused ‘hasHistory’ flag. (67293)
  • Editor: Update focus return handler for the Featured Image. (67236)
  • Make BlockManager component reusable. (67052)
  • Preferences: Use 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. instead of HoC in ‘EnableCustomFieldsOption’. (67023)
  • Preferences: Use hooks instead of HoC in ‘EnablePanelOption’. (66994)
  • Preferences: Use hooks instead of HoC in ‘EnablePublishSidebarOption’. (67002)

Block Library

  • Fix React Compiler error for shortcuts. (67019)
  • Home Link: Remove label attribute synchronization. (67151)
  • Use rems for Nav overlay left padding. (67168)
  • useBlockNameForPatterns: Refactor as a single useSelect call. (67171)
  • Navigation Block: Remove obsolete Block Hooks filters. (64676)
  • [mini] 🧹 remove obsolete rich text css. (67264)

Global Styles

  • Don’t call store actions during the render. (67146)
  • Edit Site: Fix settings mutation in ScreenBlock. (67085)
  • Remove unused ‘Fragment’ import. (67104)

Block Editor

  • Block Manager: Make it a private component in the block editor package. (67255)
  • Inserter: Set initial active tab ID during render. (67103)

Site Editor

  • Deprecate edited entity state. (66965)
  • Remove redundant style-edit route. (67057)

Tools

Testing

  • Fix ESLint Jest reporting entire body of the test function rather than the identifier. (67222)
  • Fix typo in use-block-sync tests. (67145)
  • Migrate Gradle wrapper validation action. (66602)

Plugin

  • Bump minimum required WordPress version to 6.6. (67117)
  • Add #7895 Core 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. PR to the changelog. (67319)
  • WP Scripts: Revert changes that inline CSSCSS Cascading Style Sheets. imports early in the build process. (66975)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @akasunil @AKSHAT2802 @benazeer-ben @benniledl @carolinan @cbravobernal @desrosj @dhruvang21 @dougwollison @ellatrix @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @Infinite-Null @jeryj @jsnajdr @juanfra @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @michalczaplinski @miminari @mirka @ndiego @ntsekouras @oandregal @ockham @PARTHVATALIYA @ramonjd @SainathPoojary @SantosGuillamot @sarthaknagoshe2002 @snehapatil2001 @Soean @Sukhendu2002 @t-hamano @talldan @tellthemachines @TylerB24890 @tyxla @up1512001 @vipul0425 @yogeshbhutkar @youknowriad

Thank you to @priethor for his outstanding support during release process.
Props @annezazu for review of the post and to @joen for the visual assets.

#gutenberg #gutenberg-new