Tag Archives: gutenberg-new

Ryan Welcher 2:26 pm on December 22, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.8? (21 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 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 released 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 Site Editor project (Formerly known as Full Site Editing).

What's new in Gutenberg 14.0

Gutenberg 14.8 has been released and is available for download!

A new, reorganized Site Editor interface

With Gutenberg 14.8, the Site Editor interface gets a major overhaul and introduces Browse Mode. It is now easier than ever to navigate through templates and template parts. It’s even possible to add new ones through 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 work on this feature is ongoing and will continue to improve as new Gutenberg versions are released. (44770), (45100), (46458)

Introducing the Style Book

Users and designers can view and edit all blocks via the new Style Book feature, which is an extension of the Styles panel in the Site Editor. The interface exposes both coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third-party blocks from plugins and are broken down by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The Style Book provides an overview of all 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. styles in a centralized location while also making it easier to quickly make changes at the global level. (45960).

The Styles panel also offers a preview when customizing individual blocks. (45719)

Add custom CSSCSS Cascading Style Sheets. rules for your site

Bringing feature parity with the WordPress customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., you can now add custom CSS via the Styles > Custom panel in the Site Editor. This will allow users and designers to quickly make changes that won’t be overwritten by a theme update. (46141), (46561), (46663)
Currently, this is an experimental feature that can be enabled by visiting Gutenberg > Experiments and ticking the Global styles custom CSS checkbox.

Other Notable Highlights

List/quote: Unwrap inner block when pressing Backspace at start

Gutenberg 14.8 will now unwrap inner blocks of the List and Quote blocks when backspacing at the start. This results in the first inner block becoming a Paragraph that is separate from its previous parent List or Quote container. (45075)

Pattern title tooltip

The inserter now shows pattern titles when focused on or hovering an individual pattern preview. These were previously hidden from view and only shown to screen readers. (46419)

Navigation Block Improvements

This release continues to improve on the Navigation block with several changes that are building blocks for future releases. These include adding a location fallback for classic menus and an “open list view” button. The Page List block also has a convert panel when used within a Navigation block. (46426), (45976), (46286), (46335), (46070), (46352)

Changelog

Enhancements

Block Library

  • Add a current-menu-ancestor class to navigation items. (40778)
  • Page List Block: Adds a longdash tree to the parent selector. (46336)
  • Page List Block: Hide page list edit button if no pages are available. (46331)
  • Page List: Add convert panel to Inspector Controls when within Nav block. (46352)
  • Page List: Prevent users from adding inner blocks to Page List. (46269)
  • Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)
  • Heading Block: Don’t rely on the experimental selector anymore. (46284)
  • Media & Text Block: Create undo history when media width is changed. (46084)
  • Navigation block: Add page list to Link UIUI User interface transforms in Nav block. (46426)
  • Navigation block: Add location->primary to fallback nav creation for classic menus. (45976)
  • Navigation block: Update fallback nav creation to the most recently created menu. (46286)
  • Navigation block: Add a ‘open list view’ button. (46335)
  • Navigation block: Removes the 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. from the navigation list view in the experiment. (46070)
  • Query: Remove color block supports. (46147)
  • Table block: Make figcaption styles consistent between editor and front end. (46172)
  • List/quote: Unwrap inner block when pressing Backspace at start. (45075)

Inspector Controls

  • Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. (46346)
  • Sidebar Tabs: Use editor settings to override display. (46321)
  • Summary panel: Try improving spacing and grid. (46267)

Global Styles

  • Add Style Book to Global Styles. (45960)
  • Add block preview component in global styles. (45719)
  • Move border from layout to own menu. (45995)
  • Add a CSS style to 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. to allow the setting of custom CSS strings. (46255)
  • Expose before 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. hook in useSettings for injecting block settings in the editor. (45089)
  • Global styles: Add a custom CSS panel to the site editor (currently behind an experimental flag). (46141)

Site Editor

  • Allow adding new templates and template parts directly from the sidebar. (46458)
  • Synchronize the sidebar state in the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (46433)
  • Try template drill down on the shell sidebar (browse mode). (45100)
  • Reorganize the site editor to introduce Browse Mode. (44770)

Block Editor

  • Update the synced block hover styles in Inserter. (46442)
  • Add new selector getLastInsertedBlockClientId. (46531)
  • Block editor: Hide fixed contextual toolbar. (46298)
  • Inserter: Pattern title tooltip. (46419)
  • useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. (46357)
  • Design: Augmented shadows for modals and popovers. (46228)

Components

  • Tabs: Try a simpler tab focus style, alt. (46276)
  • BaseControl: Add convenience hook to generate id-related props. (46170)
  • Dashicon: Refactor to TypeScript. (45924)
  • Lighten borders to gray-600. (46252)
  • Popover: Check positioning by adding and testing is-positioned class. (46429)

Icons

  • Icons: Update the border icon. (46264)

Testing

  • Tests: Fix toBePositionedPopover matcher message function. (46239)

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

  • Update the Gutenberg plugin to require at least the WP 6.0 version. (46102)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher: 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. changes from core theme resolver. (46250)
  • Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. (46249)
  • 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/. packages to v18. (45235)

Themes

  • Empty Theme: Add the $schema property in theme.json and rename template directories. (46300)

Mobile

  • Mobile: Disable Unsupported Block Editor Tests (Android). (46542)
  • Mobile: Inserter – Remove .done() usage. (46460)
  • Mobile: Update Heading block end-to-end test. (46220)
  • Mobile: Updates packages to not use GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. URLs. (46422)

Bug Fixes

Block Library

  • Fix Nav Submenu block Link UI text control. (46243)
  • Fix auto Nav menu creation due to page list inner blocks. (46223)
  • Handle innerContent too when removing innerBlocks. (46377)
  • Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. (46497)
  • Navigation Block: Add social link singular to list of blocks to be allowed. (46374)
  • Navigation Block: Fixes adding a submenu. (46364)
  • Navigation Block: Prevent circular references in navigation block rendering. (46387)
  • Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. (46279)
  • Navigation link: Use stripHTML. (46317)
  • Page List Block: Fix error loading page list parent options. (46327)
  • 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: Add migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of colors to v2 deprecation. (46522)
  • Site Logo: Correctly set the image’s natural height and width. (46214)
  • Strip markup from link label data in inspector. (46171)
  • Template Parts: Fix modal search stacking context. (46421)
  • Video: Avoid an error when removal is locked. (46324)
  • Layout child fixed size should not be fixed by default and should always have a value set. (46139)

Blocks

  • Paste handler: Remove styles on inline paste. (46402)
  • Improve performance of gutenberg_render_layout_support_flag. (46074)

Global Styles

  • Allow indirect properties when unfiltered_html is not allowed. (46388)
  • Fix Reset to defaults action by moving fills to be within context provider. (46486)
  • Fix duplication of synced block colors in CSS output. (46297)
  • Make style book label font size 11px. (46341)
  • Style Book: Clear Global Styles navigation history when selecting a block. (46391)
  • Global Styles 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/. endpoint: Check custom CSS is included before attempting to validate. (46561)
  • Reverts the custom CSS to an experiment while we resolve the handling of unfiltered HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. capabilities. (46663)

Block Editor

  • Block Editor: Fix content locked patterns. (46494)
  • Block Editor: Fix memoized pattern selector dependant arguments. (46238)
  • Block Editor: Restore draggable chip styles. (46396)
  • Block Editor: Revert deoptimization useNestedSettingsUpdate. (46350)
  • Block Editor: Fix some usages of useSelect that return unstable results. (46226)
  • useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. (46307)

Patterns

  • Add new pattern categories. (46144)
  • Block Editor: Add initial view mode in BlockPatternSetup. (46399)

Site Editor

  • Do not remount 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.. (46431)
  • Fix the top bar ‘exit’ animation. (46533)
  • Keep edited entity in sync when Editor canvas isn’t mounted. (46524)
  • [Site Editor]: Add default white background for themes with no background color set. (46314)

Components

  • InputControl: Fix Flex wrapper usage. (46213)
  • Modal: Fix unexpected modal closing in IME Composition. (46453)
  • MaybeCategoryPanel: Avoid 403 requests for users with low permissions. (46349)
  • Rich text: Add button to clear unknown format. (44086)

Document Settings

  • Fix template title in summary panel and requests for low privileged users. (46304)
  • Permalink: Hide edit field for users without publishing capabilities. (46361)

Patterns

  • Content lock: Make filter hook namespace unique. (46344)

Layout

  • Child Layout controls: Fix help text for height. (46319)

Widgets Editor

  • Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. (43392)

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.

  • HTML block: Fix parsing. (27268)

Mobile

  • Social Links mobile test: Wait for URL bottom sheet to appear. (46308)

Performance

Components

  • Avoid paint on popover when hovering content. (46201)
  • CircularOption: Avoid paint on circular option hover. (46197)
  • Lodash: Replace _.isEqual() with fastDeepEqual. (46200)
  • Popover: Avoid paint on popovers when scrolling. (46187)
  • Resizable Box: Avoid paint on resizable-box handles. (46196)
  • ListView: Avoid paint on list view item hover. (46188)

Code Quality

  • Lodash: Refactor blocks away from _.find(). (46428)
  • Lodash: Refactor core-data away from _.find(). (46468)
  • Lodash: Refactor edit-site away from _.find(). (46539)
  • Lodash: Refactor away from _.orderBy(). (45146)
  • Lodash: Refactor block library away from _.find(). (46430)
  • Remove usage of get_default_block_editor_settings. (46112)

Post Editor

  • Lodash: Refactor editor away from _.find(). (46464)
  • Lodash: Refactor post editor away from _.find(). (46432)

Block Editor

  • Avoid paint on inserter animation. (46185)
  • Improve inserter search performance. (46153)
  • Block Editor: Refactor the “order” state in the block editor reducer to use a map instead of a plain object. (46221)
  • Block Editor: Refactor the block-editor parents state to use maps instead of objects. (46225)
  • Refactor the block-editor “tree” state to use maps instead of objects. (46229)
  • Refactor the block-editor byClientId redux state to use maps instead of plain objects. (46204)
  • Fix typing performance issue for container blocks. (46527)

Testing

  • E2E: Fix performance tests by making inserter search container waiting optional. (46268)

Mobile

  • Columns mobile block: Avoid returning unstable innerWidths from useSelect. (46403)

Experiments

Block Library

  • Navigation List View: Remove empty cell when there is no edit button. (46439)

Web Fonts

  • WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. (46378)

Documentation

  • Adds clarifications and clears up inaccuracies. (46283)
  • Adds details of how to find the .zip file. (46305)
  • Doc: Fix description and documentation for link color support. (46405)
  • Docs: Add missing useState import in BorderBoxControl documentation. (42067)
  • Docs: Add missing useState import in color picker docs. (42069)
  • Docs: Add missing useState import in confirm dialog docs. (42071)
  • Docs: Adds reminder to use Node.js v14 in Quick Start. (46216)
  • Docs: Fix missing link to primitives package. (46290)
  • Docs: Update reference to IE 11. (46296)

Code Quality

  • Block Editor: Fix no-node-access violations in BlockPreview. (46409)
  • Block Editor: Fix no-node-access violations in BlockSelectionClearer. (46408)
  • Columns mobile edit: Remove unused updateBlockSettings action bind. (46455)
  • ESLint: Fix warning in getBlockAttribute documentation. (46500)
  • List View: Use default parameters instead of defaultProps. (46266)
  • Removed: Remove small APIs marked to be removed in WP 6.2. (46106)
  • Site Editor: Remove 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. CSS. (46288)

Block Library

  • Group Block: Remove placeholder leftovers. (46423)
  • Group: Remove unnecessary ‘useCallback’. (46418)
  • Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. (46329)
  • Navigation Block: Update attribute test for are-blocks-dirty.js. (46355)
  • Page List Block: Move shared “convert” description to constant. (46368)
  • Page List Block: Simplify Page List convert to links function API. (46365)
  • Query: Cleanup variation picker component. (46424)
  • RNMobile: Add an inline comment to clarify usage of ‘hard’ limit vs. unbounded query. (46245)
  • Shared standard Link UI component between Nav Link and Submenu blocks. (46370)
  • Template Parts: Remove unnecessary ‘useCallback’. (46420)

Components

  • AlignmentMatrixControl: Refactor to TypeScript. (46162)
  • Also ignore no-node-access for some components. (46501)
  • Fix no-node-access violations in FocalPointPicker tests. (46312)
  • Fix no-node-access violations in Popover. (46311)
  • Fix no-node-access violations in Theme. (46310)
  • Fix no-node-access violations in ToolsPanel tests. (46313)
  • withFilters: Use ‘act’ from React Testing Library. (46237)

Data Layer

  • Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. (45513)
  • ESLint: Fix warnings in the data package. (46499)

Global Styles

  • Add “custom-css” as an acceptable value in the documentation for gutenberg_get_global_stylesheet. (46493)
  • PaletteEdit: Add changelog. (46095)

Block Editor

  • Inserter: Update mobile tab navigation styles. (46186)

Layout

  • Clarify inline comment about switching to safecss_filter_attr. (46061)

Tools

Build Tooling

  • Adds 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/ Action to validate Gradle Wrapper. (46247)
  • Prevent api-fetch and core-data from being imported in the block editor package. (46302)
  • Serialize the map objects properly in the Redux dev tools. (46282)

Testing

  • E2E: Fix flaky Block Switcher tests. (46406)
  • end-to-end tests: Add width and color test to button block. (46452)

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.87.8s48.14ms
Gutenberg 14.76.25s46.4ms
WordPress 6.15.9s48.04ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.83.36s31.7ms
Gutenberg 14.75.47s34.78ms
WordPress 6.15.72s36.1ms

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

First time contributors

The following PRs were merged by first time contributors:

  • @corentin-gautier: Avoid paint on popover when hovering content. (46201)
  • @ingeniumed: Expose before filter hook in useSettings for injecting block settings in the editor. (45089)
  • @janusqa: Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @andrewserong @aristath @chad1008 @chintu51 @corentin-gautier @derekblank @draganescu @ellatrix @geriux @getdave @glendaviesnz @hideokamoto @ingeniumed @jameskoster @janusqa @jasmussen @jffng @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mburridge @mikachan @mirka @noisysocks @ntsekouras @oandregal @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad

Thanks to @joen for helping with the assets for this post and to @greenshady & @priethor for reviewing.

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

Daisy Olsen 7:01 pm on December 9, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.7? (7 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 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 released 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 Site Editor project (Formerly known as Full Site Editing).

Gutenberg 14.7 has been released and is available for download!

It introduces a new experimental tabbed 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., colors to help identify some 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. types in list view, and improvements to the Page List block to make it easier to manage page links in your content.

Improved organization of block settings with split control

An experimental view in the block inspector sidebar separates appearance and settings controls by adding a tabbed interface. This feature will make blocks with many controls, such as the Group Block and Navigation Block, easier to manage. You can enable this and other experimental features from Gutenberg > Experiments in the adminadmin (and super admin) sidebar. Leveraging this new tabbed interface, the Navigation Block also includes a Menu tab for the Navigation List View introduced in Gutenberg 14.6. (45483), (45991), (46027), (45005)

Quickly identify Template Parts and Reusable Blocks by color

To more easily differentiate Template Parts and Reusable Blocks from other types of blocks, these synced block types will now be outlined in a different color in the List View, Block Toolbar, and canvas. (45473)

Add media to your content directly from the inserter

A new media tab will be available, when media exists on the site, to allow users to add media from their library. A button to open the Media Library modal is also available, making it much more convenient to add images, video, and other media to your content. (44918)

See all pages in List View for the Page List block 

The Page List block can now be expanded to see the hierarchy of pages in the List View. An option to select the root page to build the Page List from has also been added in the Block Inspector Sidebar. This will allow a subset of pages within the hierarchy to be displayed in the content. (45776), (45861)

Layout controls added to children of flex layout blocks

A new dimensions control (width for row, height for stack) will be available for children Row and Stack blocks. An option to select between fit, fill and fixed has been added. If the fixed option is selected, an `input` for a dimension will be shown, where the fixed size can be set. (45364)

Improved load times by caching the results of querying settings from theme.json

Adding WP_Object_Cache to gutenberg_get_global_settings to cache the results of querying settings from theme.json, resulted in a significant load time improvement.

This change reduced the total time of a request with the Twenty Twenty-Three theme from 521.59ms to 339.62ms, a ~35% performance increase. Testing with the Twenty Twenty showed an improved load time from 329.60ms to 290.93ms, a ~12% performance improvement. These times were measured by testing the time required to load the “hello world” post for a logged-out user.  (45372)

Changelog

Enhancements

Style Engine

  • Style engine: Trim multiple selector strings. (45873)

Block Library

  • Heading Block: Add a wp-block-heading CSSCSS Cascading Style Sheets. class. (42122)
  • Nav Block: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • Nav Block: Add label field to navigation link and navigation submenu. (45964)
  • Nav Block: Add link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the navigation submenu inspector controls. (45816)
  • Nav Block: Fix for navigation anchor links to close modal. (45829)
  • Template Part Block: Colorize template parts and Reusable blocks. (45473)
  • List: Allow pasting pre/code. (45016)
  • Page List: Enable page list to expand in list view. (45776)
  • Page List: Add a starting page for page list block’s hierarchy. (45861)
  • Page List Item: Hide edit button. (46163)
  • Site Logo: Apply width to logo container in editor. (45821)
  • Table Block: Support colspan attribute in table HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., including when pasting. (45981)

Components

  • Add themeable background color. (45466)
  • Autocomplete: Only show UIUI User interface on user input. (45904)
  • Bump DateTimePicker deprecated prop removal version. (46006)
  • ComboboxControl: Add new opt-in prop. (45796)
  • FocalPointPicker: Add new opt-in prop. (45958)
  • Global styles: Add onChange actions to color palette items. (45681)
  • InputControl: Add help prop. (45931)
  • RangeControl: Remove margin override and add new opt-in prop. (45985)
  • SearchControl: Remove margin overrides and add new opt-in prop. (46081)
  • Storybook: Opt in to story store v7. (42486)
  • ToggleControl text overflows when it has a long label. (45962)
  • useControlledValue: Let TypeScript infer the return type. (46164)

Inspector Controls

  • Sidebar: Add list view tab for Navigation block et al. (45483)
  • Sidebar: Only render sidebar tabs possessing items to display. (45991)
  • Sidebar: Rename appearance tab to styles. (46027)
  • Sidebar: Split block tools into menu, settings, and appearance tabs. (45005)

Design Tools

  • Min Height: Add height control component with slider. (45875)
  • Spacing: Make visualiser appear on focus. (46096)

Block Editor

  • [Inserter]: Replace text in Reusable tab with an icon. (45851)
  • [Inserter]: Update pattern explorer button css. (45735)
  • [Inserter]: Add media tab. (44918)

Patterns

  • [Pattern Directory]: Add categories endpoint. (45749)
  • [Patterns]: Update pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. descriptions. (46005)

Nested / Inner Blocks

  • Mark applying block templates not persistent. (45843)

Rich Text

  • Create undo level before autocorrect. (45670)

Layout

  • Add Layout controls to children of Flex layout blocks. (45364)

Bug Fixes

Preferences

  • Disable distraction-free preference effects on small viewports. (45591)

Block Library

  • List Block: Fixed 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. that List block attributes were reset in 6.1.1. (46000)
  • Gallery: Use unbound query when fetching image details. (46143)
  • Heading: Add block classname deprecation. (46138)
  • Page List: If no parent page is set, still render all children. (45967)
  • Page List: Render the children correctly in the editor. (46165)
  • Post Author: Avoid errors when the user avatars are disabled. (45989)
  • Nav Block: 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. doesn’t appear when hamburger clicked on. (45773)

Block Editor

  • Fix broken Link Control hook. (46113)
  • Fix inserter tab panel content buttons’ position. (45800)
  • Block editor: rich text: Return early if __experimentalUndo is not defined. (46152)

Global Styles

  • Global Style Context: Consider global user styles ready if a theme has none. (46073)
  • Merged data should consider origin to return early. (45969)

Components

  • Remove CircleIndicatorWrapper focus-visible outline. (45758)
  • ColorPalette: Show Clear button even when colors array is empty. (46001)

Site Editor

  • Fix template list width. (45888)
  • Prevent edit-post from being loaded in edit-site. (45895)

CSS & Styling

  • Fix the editor area height. (45799)

Full Site Editing

  • Ensure post-featured-image block is intheloopLoop 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.() for BC with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and plugins, and to fix lazy-loading. (45534)

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 “Testing Instructions for Keyboard” to PR template to encourage accessibility testing. (45957)
  • BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • Sidebar Tabs: Set default tab to first available. (45998)
  • TabPanel: Support manual tab activation. (46004)
  • – Constrained tabbing: Fix unstable behavior in firefox. (42653)

Performance

  • Work on refactor away from Lodash to reduce build size continued” (see 13.7)

Global Styles

  • Add WP_Object_Cache to the gutenberg_get_global_settings method. (45372)
  • Global styles WP_Query. (46043)
  • Ignore cached wp_theme_has_theme_json when WP_DEBUG is enabled. (45882)
  • Make theme.json object caches non persistent. (46150)
  • Remove test_global_styles_user_cpt_change_invalidates_cached_stylesheet. (45993)
  • Update gutenberg_get_global_stylesheet to use WP_Object_Cache. (45679)
  • Update which origins are queried for gutenberg_get_global_settings. (45971)

Post Editor

  • useBlockEditorSettings: Return const empty array to avoid rerenders. (46117)

Block Editor

  • Update the attributes reducer to use a map instead of a regular object. (46146)

Experiments

Block Library

  • Nav Block: Add basic edit button UI to Nav block offcanvas editor. (45815)
  • Nav Block: Add submenu menu item to list view. (45794)
  • Nav Block: Alternative: Add inserter to Nav block offcanvas experiment. (45947)
  • Nav Block: Display inserter popover in offcanvas UI. (46013)
  • Nav Block: List View – Stop child item selecting a parent which is already selected. (45860)
  • Nav Block: Add simple back button to inspector controls. (45852)
  • Nav Block: Move color controls to support panel. (46049)
  • Nav Block: Enable easier drag and drop for navigation building. (45906)
  • Nav Block: Hide the create new menu button if the experiment is enabled. (46019)
  • Navigation List view: Fix incorect class. (46129)
  • Navigation List view: Include offcanvas specific styles. (45963)
  • Navigation List view: Scroll horizontally when table overflows. (45966)

Documentation

  • (docs) Document the special case of shipping point releases when new release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". already exists. (46083)
  • Added InspectorControls import to example. (45872)
  • Fix NavigableRegion README. (45879)
  • Fix link & code markdown. (45708)
  • Navigation: Adds a warning about duplicate code for the future. (45844)
  • Storybook: Add link to component folder on 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/, retire Storysource. (45727)
  • Style Engine: Add first draft of contributing doc. (45930)
  • Update applying-styles-with-stylesheets.md. (45925)

Code Quality

Components

  • Cleanup the BlockPreview component. (45936)
  • Convert the Snackbar component to TypeScript. (45472)
  • Fix ESLint violations in ContextSystemProvider tests. (46010)
  • Fix ESLint violations in NoticeList tests. (46011)
  • Fix no-node-access in Grid tests. (45900)
  • Fix no-node-access in Sandbox tests. (45908)
  • Fix no-node-access in Text tests. (45898)
  • Fix no-node-access in Theme tests. (45896)
  • Fix no-node-access violation in ControlLabel tests. (46007)
  • Fix no-node-access violations in Card tests. (46158)
  • Fix no-node-access violations in Disabled tests. (46156)
  • Improve BoxControl tests. (45968)
  • Improve Dropdown tests. (45911)
  • LinkedButton: Remove unnecessary span tag. (46063)
  • TextControl: Restrict type prop in TypeScript. (45433)
  • Tooltip: Add readme and unit tests for shortcut prop. (46092)
  • NumberControl: Refactor styles/tests/stories to TypeScript, replace fireEvent with user-event. (45990)
  • useBaseField: Convert component to TypeScript. (45712)
  • Small refactoring to the NavigableRegion component. (45849)

Block Library

  • ESLint: Fix minor ESLint warning in LinkUI. (46161)
  • Fix ESLint warnings in tests. (46034)
  • 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. attribute markup in core/home-link block. (46089)
  • Link UI: Destructure the props earlier in the component. (46209)
  • Navigation Link UI: Try to align both files. (46205)
  • Navigation Menu Selector: Share the functions needed for the NavigationMenuSelector. (46053)
  • Navigation: Extract components. (45850)
  • Navigation: Reduce duplicate code. (45779)
  • Navigation: Remove unused clientId prop. (46020)
  • Post 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.: Only get the post title when rendering alt text. (45835)
  • Reduce prop drilling in Block Card component. (46052)
  • Refactor link creation UI to standalone component/file. (46031)
  • Remove Nav block specific classes from Nav offcanvas Link UI. (46182)
  • Remove WrappedNavigationMenuSelector. (46056)
  • Update offcanvas back button to select parent Nav block and limited to Nav block only. (46037)
  • Don’t check if constants set by wp_initial_constants() are defined. (45979)

Block Editor

  • LinkControl unit tests: Use user.type to type into search field. (45802)
  • Simplify api for link UI abstraction to use a single prop for the value. (46189)
  • URLInput: Keep the search results label in sync with the results list. (45806)
  • Use wordpress/escape-html escapeHTML in Link UI in preference to Lodash method. (46184)

Global Styles

  • Cleaner logic in wpthemehasthemejsonJSON 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.. (45950)
  • Remove usage of wpgettheme. (45770)

Post Editor

  • Update BlockCard to pass className instead of isSynced prop. (46021)

Full Site Editing

  • Block editor: Separate content styles for the 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.. (44298)

Tools

Build Tooling

  • Bump caniuse-lite version. (46093)

Testing

  • Fix Quote block’s unwrap end-to-end test. (46168)
  • Remove ‘response.deleted’ check. (45992)
  • Warning: Fix ESLint warnings in tests. (46033)
  • ESLint: Enable testing-library/no-container rule. (46160)
  • Element: Fix no-node-access in createInterpolateElement. (45894)
  • Block Editor: Fix ESLint warnings in MediaUpload tests. (46035)
  • Block Editor: Fix no-node-access in RecursionProvider tests. (45902)
  • Block Editor: Fix block alignment tests 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. (45937)
  • Block Editor: Wait for popover positioning in MediaReplaceFlow tests. (45863)
  • Compose: Fix ‘no-container’ violations in ‘useDisabled’ tests. (45797)
  • Compose: Fix ESLint violations in withGlobalEvents tests. (46012)

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.711.45s59.36ms
Gutenberg 14.611.41s62.36ms
WordPress 6.110.72s68.08ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.79.68s58.42ms
Gutenberg 14.610.8s67.09ms
WordPress 6.111.69s64.87ms

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

First time contributors

The following PRs were merged by first time contributors:

  • @albarin: Remove ‘response.deleted’ check. (45992)
  • @artemiomorales: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • @coreyworrell: Fix for navigation anchor links to close modal. (45829)
  • @devanshijoshi9: Components: ToggleControl text overflows when it has a long label. (45962)
  • @flexseth: Added InspectorControls import to example. (45872)
  • @hiyascout: Update applying-styles-with-stylesheets.md. (45925)
  • @marissa-makes: BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • @mpkelly: Support colspan attribute in table HTML, including when pasting. (45981)
  • @TobiasBg: Fix invalid attribute markup in core/home-link block. (46089)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @albarin @alexstine @andrewserong @artemiomorales @brookewp @chad1008 @ciampo @coreyworrell @ddryo @devanshijoshi9 @draganescu @ellatrix @felixarntz @flexseth @fullofcaffeine @geriux @getdave @glendaviesnz @gvgvgvijayan @hiyascout @jsnajdr @kienstra @MaggieCabrera @Mamaduka @marissa-makes @mikachan @mirka @mmtr @mpkelly @ntsekouras @oandregal @ocean90 @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @t-hamano @tellthemachines @TobiasBg @tyxla @walbo @youknowriad

Thanks to @joen for helping with the assets for this post and to @annezazu, @bph & @priethor for reviewing.

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

Fabian Kägy 7:53 pm on November 23, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.6? (23 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 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.

Table of Contents

  1. Add a Variation Picker to the Group Block Placeholder
  2. Add List-Based Editing to Navigation Block
  3. Hide Block Toolbar when Spacing Visualizer is Shown
  4. Transform Paragraph into Heading via Keyboard Shortcut
  5. Update the Design of the Focal Point Handle
  6. Fluid typography: Adjust font size min and max rules
  7. Define a Minimum Height
  8. Generate New Color Paletts Automatically
  9. Changelog
  10. Performance Benchmark
  11. First Time Contributors
  12. Contributors

Add a Variation Picker to the Group 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. Placeholder

When a new Group block gets inserted into the page it now presents the user with a variation picker to instantly choose which type of layout they want to use.

Add List-Based Editing to Navigation Block

Managing the order of menu items just got a lot easier by allowing you to modify the arrangement of the individual menu items in a list view right inside the block settings 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.. This works similarly to the list view but is isolated to just the current navigation you are editing. Clicking on the “Edit” button selects the menu item in the editor so you can edit it inline.

Note: This is still experimental and needs to be enabled on 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 settings screen.

Hide Block Toolbar when Spacing Visualizer is Shown

The spacing visualizer has seen some improvements in the last few releases already. In 14.6 it now automatically hides the blocks toolbar as soon as you hover over the spacing setting allowing you to focus on the content whilst you adjust the spacing.

Transform Paragraph into Heading via Keyboard Shortcut

You can now easily transform paragraph blocks into headings using the new control + option + 1 – 6 keyboard shortcut.

Update the Design of the Focal Point Handle

In order to make it more clear that the focal point picker is selecting a broader region instead of a fine point the handle was updated to better fit the precision of the input.

Fluid typography: Adjust font size min and max rules

The minimum and maximum value calculations for fluid font sizes have been adjusted to prevent inconsistencies in certain viewports, such as having a bigger maximum than the custom size setting. You can check the github issue for the full set of rules.

Define a Minimum Height

The new “Minimum Height” dimension control is now available for the Group and Post Content block. For example, it can be used to make sure the site footer always stays at the bottom of the viewport.

Generate New Color Paletts Automatically

Coming up with the perfect color palette is hard. Sometimes you just want to explore some new quick ideas. This new “Randomize colors” feature is a subtle algorithm that can generate alternative color palettes on the fly.

Changelog

Enhancements

Block Library

  • Latest posts: Add color support. (41874)
  • Latest posts and latest comments: Add spacing support. (45110)
  • Navigation: Adds a list view. (45546)
  • Navigation: Add a new ManageMenusButton component. (45782)
  • Navigation: Reposition the navigation selector. (45555)
  • Navigation Link: Add the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field to the Navigation Link inspector controls. (45751)
  • Author: Make the Author selector display all users instead of just 10. (45640)
  • Columns: Add transform to unwrap the contents. (45666)
  • Read More: Add aria-label and screen reader text. (45490)
  • Group: Use a variation picker in the placeholder. (43496)

Components

  • Use new theming accent color in all components. (45289)
  • CheckboxControl: Replace margin overrides with new opt-in prop. (45434)
  • FocalPointPicker: Update the design of the focal point handle. (45053)
  • FontSizePicker: Update hint text to match the design. (44966)
  • CheckboxControl: Move icons out of labels. (45535)

Block Editor

  • Converts paragraphs to headings with keyboard shortcuts. (44681)
  • Restore the empty paragraph inserter. (45542)
  • Transform: Select all blocks if the result has more than one block. (45015)
  • Content-only locked patterns: Move “Modify” to the ellipsis menu. (45391)
  • Patterns: Adjust the space in the pattern explorer list. (45730)
  • Update: Lock icon to outline. (45645)
  • Don’t use capital case for ‘Distraction free’ strings. (45538)
  • Replace Justification/Orientation controls with ToggleGroupControl. (45637)

Site Editor

  • Replace FSE with Site Editor. (45699)

Design Tools

  • Add a minHeight block support under dimensions. (45300)
  • Hide the block toolbar when the spacing visualizer is showing. (45131)

Global Styles

  • Fluid typography: Adjust font size min and max rules. (45536)
  • Elements: Add a text decoration control to link elements. (45643)
  • Global styles: Convert preset font size values to CSSCSS Cascading Style Sheets. vars. (44967)
  • Try generating random color palettes. (40988)

Plugin

  • Updates tested up to version to 6.1. (45630)

Patterns

  • Pattern Directory 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 support for pagination parameters. (45293)
  • Update bundled patterns compat directory. (45620)

Bug Fixes

Block Library

  • Change the order of the pseudo-states in the pseudo-selectors array. (45559)
  • Cover: Avoid content loss when the templateLock value is all or contentOnly. (45632)
  • Fix alignment of create new post link. (45638)
  • Fix navigation appender position to prevent obstructing its items. (43530)
  • Fix: Button block text alignment. (45663)
  • Query Pagination: Fix positioning of the next link in editor when the parent is selected. (45651)
  • Site Logo: Use the correct home URL setting. (45476)
  • Switch background color to text color on the block separator. (44943)
  • Table Block: Apply borders and padding on both front end and editor. (45069)
  • Table block: Fix error in margin value. (45674)
  • Template Part Block: Update block isActive method. (45672)
  • Navigation: Fix overflowing menu name in the navigation selector dropdown. (45647)

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 focus return when closing the Post publish panel. (45623)
  • Fix navigate regions backwards for macOS Firefox and Safari. (45019)
  • Fix the Save buttons labeling and tooltip. (43952)
  • Fix the navigate regions focus style. (45369)
  • Fix: Contrast checker appears unexpectedly on some blocks. (45639)
  • Fix: Contrast checker does not update properly. (45686)

Components

  • Autocomplete: Fix unexpected block insertion during IME composition. (45510)
  • Fix ESLint warning for Dashicon. (45795)
  • FormTokenField: Fix duplicate input in IME composition. (45607)
  • Making size prop work for icon components using dash icon strings. (45593)
  • ToolsPanel: Prevent calling deselect when panel remounts. (45673)
  • Color Picker: Prevent all number fields to become 0 when one of them is an empty string. (45649)
  • ToggleGroupControl: Only show the enclosing border when isBlock. (45492)
  • Autocomplete: Check key events more strictly in IME composition. (45626)

CSS & Styling

  • Inherit font from theme on overlay close button. (45635)
  • Navigation: Fix font inheritance when using text menu button. (45514)
  • Remove hover style to button on dark block tools UIUI User interface. (45653)
  • Remove width from block mover button focus style. (45665)
  • Site editor hover/select: Fix double border. (45589)
  • Remove duplicate output of existing classnames in layout classnames. (45499)

Post Editor

  • BlockManagerCategory: Fix styles for indeterminate. (45564)
  • Fix: Updated names from List View to Document Overview. (45524)
  • Strip HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from Post Title when pasting multiline title containing HTML. (35825)

Site Editor

  • Decode entities in template title and description. (45716)
  • Link to homeUrl from site editor view menu. (45475)

Block Editor

  • Fix Link UI popover positioning when inspector control input is focused. (45661)
  • Paste: Fix list only paste from Google documentation. (45498)
  • Make Manage Reusable blocks match similar links. (45641)(45689)
  • List View: Disable branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". expansion when block editing is locked. (45541)
  • Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. (45739)

Experiments

  • A list view duplicate for use in navigation list view experiment. (45544)
  • Introduce experiment for inspector based navigation editing. (45515)

Documentation

  • Add missing CHANGELOG entry. (45691)
  • Change Title: How to use 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/. with Gutenberg. (45323)
  • Docs: Update the readme for the integration test fixtures. (45581)
  • Summarize “Available commands” section and refer them it to scripts documentation. (45636)
  • Update applying-styles-with-stylesheets.md. (45604)
  • [create-block] Reorganized sections to provide a better learning experience of this package. (45676)
  • Change “block style variations” references to “block style”. (45650)

Performance

  • Lodash: Refactor away from _.reduce(). (45460)
  • Lodash: Refactor block editor away from _.reduce(). (45455)
  • Lodash: Refactor blocks away from _.reduce(). (45457)
  • Lodash: Refactor site editor away from _.reduce(). (45459)
  • Lodash: Refactor post editor away from _.reduce(). (45458)
  • Do not look for block variants, if not supporting block-templates. (45362)
  • List: Disable nested list drop zone so dropping list items works. (45321)
  • Use low-level cache for get_user_data_from_wp_global_styles. (45634)
  • Update: Improve performance of block template object retrieval. (45646)

Code Quality

Block Editor

  • Block Editor: Improve LinkControl tests. (45609)
  • Block Editor: Improve ResponsiveBlockControl tests. (45610)
  • Block Editor: Improve ReusableBlocksTab tests. (45652)
  • LinkControl: Suppress errors on null values. (45742)
  • Simplify ResizableEditor component. (45578)
  • Remove duplicate colon. (45763)
  • Extract the manage menus button to a shared component to reduce duplicate code. (45769)
  • 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. pseudo selector comments from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (45619)
  • unstableSubscribeStore: Support store descriptors. (45481)

Components

  • BaseField: Remove unnecessary .firstChild from tests. (45687)
  • DateTime: Remove unused types. (45615)
  • Draggable: Convert component to TypeScript. (45471)
  • Fix no-container violations in FormGroup tests. (45662)
  • Fix testing-library/no-node-access in TreeGrid tests. (45554)
  • FontSizePicker: Use components instead of helper functions. (44891)
  • Improve tests for ToggleGroupControl. (45627)
  • MenuGroup: Convert component to TypeScript. (45617)
  • Popover: Fix exhaustive-deps warning. (45656)
  • Refactor ItemGroup to pass exhaustive-deps. (45531)
  • Refactor useFlex to pass exhaustive-deps. (45528)
  • Refactor withNotices to pass exhaustive-deps. (45530)
  • RefactorPaletteEditListView to ignore exhaustive-deps. (45467)
  • TabPanel: Fix the exhaustive-deps warning. (45660)
  • ToolsPanel: Fix exhaustive-deps hook warning. (45715)
  • Truncate: Remove unnecessary .firstChild from tests. (45694)
  • View component: Rename index.js to index.ts. (45667)
  • ColorPalette, BorderBox, BorderBoxControl: Polish and DRY prop types, add default values. (45463)
  • NavigatorScreen: Satisfy exhaustive-deps eslint rule. (45648)
  • Fix useCx story to satisfy exhaustive-deps eslint rule. (45614)
  • URLPopover: Use new placement prop instead of legacy position prop. (44391)
  • Tidy and minor refactor of Link UI code. (37833)

Block Library

  • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.: Escape the ‘get_author_posts_url()’. (45427)
  • Button: Remove unnecessary ‘useCallback’. (45584)
  • Make unwrapping columns slighly more efficient. (45684)
  • Simplfy handling of save of Nav block uncontrolled inner blocks. (45517)
  • Lodash: Refactor block library away from _.reduce(). (45456)

Tools

Testing

  • Components: Add exhaustive-deps eslint rule. (41166)
  • Fix typos in Paragraph block end-to-end tests. (45611)
  • FontSizePicker: Fix a buggy unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (45529)
  • Ignore warnings for window.wp in Playwright. (45598)
  • Migrate mentions tests to playwright. (43064)
  • Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. (45726)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native unit tests: Migrate getByA11yLabel usages. (45454)
  • Unit Tests: Rewrite ReactDOM.render usages to RTL. (45453)
  • E2E: Add site and widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor supports for ensureSidebarOpened. (45480)

Build Tooling

  • Include TS and JSX files to testing-library lint. (45533)
  • Remove use of set-output in workflows. (45357)

Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

  • Configure labels for GHA Dependabot PRs. (45516)

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.610.27s49.63 ms
Gutenberg 14.512.08s70.53ms
WordPress 6.14.1s31.3 ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.69.58s48.65ms
Gutenberg 14.59.35s77.82ms
WordPress 6.13.84s22.79ms

First Time Contributors

The following PRs were merged by first time contributors:

  • @edanzer: Template Part Block: Update block isActive method. (45672)
  • @TimBroddin: Fix alignment of create new post link. (45638)
  • @wojtekn: Make Author block selector to display all users instead of just 10. (45640)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @Copons @DaisyOlsen @desrosj @dinhtungdu @draganescu @dsas @edanzer @ellatrix @enejb @flootr @getdave @glendaviesnz @hz-tyfoon @jasmussen @javierarce @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @juhi123 @kevin940726 @Mamaduka @matiasbenedetto @mikachan @mirka @mmtr @mtias @ndiego @nielslange @noisysocks @ntsekouras @peterwilsoncc @ramonjd @ryelle @scruffian @spacedmonkey @t-hamano @TimBroddin @tyxla @vcanales @walbo @wojtekn @youknowriad @yuliyan

Thanks to @xavortm for helping with the assets for this post and to @javiarce & @priethor for reviewing.

#core-editor, #editor, #gutenberg, #gutenberg-new

Nick Diego 3:23 pm on November 9, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.5? (9 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 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.5 has been released and is available for download!

It consolidates the list view and document information, expands margin and padding support while improving spacing visualizers, and sets the groundwork for future releases with numerous code quality improvements and 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.

Table of Contents

Access the list view and document information all from one panel

Prior to Gutenberg 14.5, there were separate icons in the Editor toolbar for “List View” and “Details.” The Details popover presented a document outline and information like the character and word count. The List View panel displayed a hierarchical view of all blocks in the document.

The Details popover and List View panel have now been combined into a single panel offering a more streamlined way to manage the current document. This new “Document Overview” panel is accessible by clicking on the original List View icon in the toolbar.

Confidently edit 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. spacing using improved visualizers

Configuring block spacing (margin, padding) can be tricky, especially when determining how the spacing of one block will impact those blocks around it. Spacing visualizers significantly improve this experience by allowing you to “visualize” each change you make.

Gutenberg 14.5 enhances this functionality by displaying visualizers as soon as you hover over a spacing control rather than just when edited. This is a small change, but an important one since most CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks now support spacing controls. The release itself adds spacing to numerous comment-related blocks.

Changelog

Enhancements

  • Add block pattern categories’ descriptions to the 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/. and update the descriptions. (45244)
  • Create Block: Update templates to use APIs introduced in WP 6.1. (44185)
  • setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. (45156)
  • Spacing visualizer: Add option to trigger with mousover as well as value change. (44955)
  • Style Engine: Add support for dimensions.minHeight property. (45334)
  • Try: Add layout classnames to inner block wrapper. (44600)

Block Library

  • Audio, Video: Add toolbar button to add/remove caption. (45112, 45113)
  • Comment Template, Post Comment Count, Post Comments Form, Post Comments Link: Add spacing support. (45101, 45150, 45091, 45184)
  • Gallery: Register styles with Style Engine. (43070)
  • Navigation: Return undefined from useEffect. (45239)
  • Social Icons: Add rel attribute. (45469)
  • Video: Update tracks editor icon to text button. (45245)

Components

  • Block mover button: Do not show focus styles on pointer interactions. (45126)
  • BorderControl, BorderBoxControl, BorderRadiusControl: Update control components to allow 40px height. (41860)
  • BoxControl, Card, ToolsPanel: Remove unnecessary wrappers in stories. (45305)
  • Button: Change the color on the destructive button focus state. (44427)
  • Button: Refactor Storybook to controls and align documentation. (44105)
  • ColorPalette: Convert to TypeScript. (44632)
  • DateTimePicker: Add __next* props in Storybook. (45164)
  • FontSizePicker: Update design when withSlider is set. (44598)
  • FormFileUpload: Remove unused story file. (45286)
  • NumberControl: Add custom spin buttons. (45333)
  • RadioGroup: Mark as deprecated. (45389)
  • Navigator: Revert the removal of overflow styles from NavigatorScreen. (45303)
  • SelectControl: Add onChange, onBlur, and onFocus to storybook actions. (45432)
  • Storybook: Addon to wrap stories in max-width div. (45134)
  • TextControl: Set Storybook control types on help, label and type. (45405)
  • ToggleGroupControl: Add de-selectable variant. (45123)
  • ToggleGroupControl: Remove 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. props from types. (45114)

Post Editor

  • Edit Post: Improve distraction-free mode notices. (45348)
  • hasChangedContent: Remove obsolete blocks check. (45090)
  • Move document information and outline to list view panel. (44788)

Global Styles

  • Add :visited pseudo selector to 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. schema. (45236)
  • Embed, Gallery, Video: Add deprecation for the caption element. (45166, 45173, 45169)
  • File Block: Add a deprecation for the button element class name. (45159)
  • Table Block: Add a deprecation for the figcaption element class name. (45161)

Bug Fixes

  • Ensure block content is always returned as a string after processing. (45330)
  • Fix distraction free shortcut typo. (45186)
  • Fix resizeable editor scrolling. (45189)
  • Fix handling of nullish comments in the pot-to-PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher script. (45414)
  • Fix image caption supports Voice Control. (44850)
  • Fix PHP warning in pattern categories REST API controller. (45410)
  • Fix Prevent infinite 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. in Tag Processor in certain truncated documents. (45537)
  • Hide insertion point when moving out of the canvas. (45420)
  • Metaboxes: Perform hasMetaBoxes check on every save. (45145)
  • Prevent unexpected copying of the post title. (41284)
  • Raw Handling: When pasting bullet characters, convert to astericks for markdown converter. (45017)
  • Web Font: Fix ascent/descent-override property typo. (45125)

Block Library

  • Button: Reset background-image property for outline button style. (45234)
  • Cover, Search, Spacer: Fix control widths. (45329)
  • Navigation: Fix saving/loading experience of uncontrolled blocks. (45486)
  • Navigation: Add padding to buttons when Submenus Open on click is enabled. (44605)
  • List: Fix migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. when the nested list is invalid. (44822)
  • Page List: Allow direct selection of nested Page List block by avoiding dual rendering within block. (45143)
  • Site Tagline: Fix 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. (45140)
  • Site Title: Avoid 403 errors for users with low permissions. (45093)

Components

  • AnglePickerControl: Set Storybook label control type to text. (45122)
  • AutocompleteUI: Close popup when click happens outside of the popover. (44795)
  • BorderControl: Await floating-ui state changes when rendering/opening popover to fix unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. failures. (45241)
  • Button component: Fix RTL alignment when containing icon and text. (44787)
  • ColorPalette: Fix transparent checkered background pattern. (45295)
  • ExternalLink: Update to support onClick handler. (45214)
  • InputControl: Allow inline styles to be applied to wrapper instead of inner input. (45340)
  • ItemGroup: Fix RTL text alignment when item is clickable. (45280)
  • Popover: Fix deprecations. (45195)
  • PublishDateTimePicker: Retrieve all future posts in a given month. (44540)
  • SpacingSizesControl: Remove UnitControl inline style use. (45412)
  • TabPanel: Add tests and changelog for onSelect behavior change. (45211)
  • UnitControl: Fix disabled style is overridden by forms.css. (45250)
  • Visual Editor: Fix permission error. (45262)

Site Editor

  • Fix clipped body background style in the Site Editor. (45261)
  • Only mark the ‘Site’ menu item active when editing a home template. (42807)

Performance

Documentation

  • Add a readme to the letter spacing component. (45308)
  • Add changelogs for internal refactorings using inert. (45269)
  • Add “Do not use in production” message to content locking experimental 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.’s. (45291)
  • Add Storybook intro. (45115)
  • Code Quality: Fix some misspelled words. (45222)
  • Disabled: Update documentation to clarify the absence of inert polyfill. (45272)
  • Fix incorrect character in code example. (45355)
  • Fix missing anchor link in FAQ URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (45232)
  • FontSizePicker: Update changelog for #45041. (45180)
  • Updating curation document to include content lock ability. (44908)
  • useAnchorRef: Update deprecation message. (45302)

Code Quality

  • Block Editor: Improve MediaReplaceFlow tests. (45424)
  • Block Editor: Refactor align tests to RTL. (45152)
  • Editors: Refactor icon tests to follow no-container rule. (45422)
  • Fix indent and quote in dependbot.yml. (45167)
  • Fix PHP 8.1 deprecation for strncmp(). (44829)
  • Popover: Use new placement prop instead of legacy position prop. (44392, 44387, 44389, 44398, 44399, 44394, 44395, 44390, 44396, 44388)
  • PostTextEditor test: Wrap .blur calls in act(). (45243)
  • Replace the MainDashboardButton slot with a setting in the site editor. (45149)
  • Run script loader test. (45288)
  • Site Editor: Move the save view state to the edit site store. (45200)
  • Small follow-ups to the distraction free mode PR. (45151)
  • Tests: Use container instead of container.firstChild for snapshots. (45278)
  • useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. (45317)
  • useFocusableIframe: Refactor to TypeScript. (45428)

Components

  • Add a popover variant prop and refactor popovers to use it, deprecate isAlternate. (45137)
  • Add parseQuantityAndUnitFromRawValue tests. (45260)
  • FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. (45298)
  • BorderBoxControl: Improve tests. (45208)
  • ContextSystemProvider, useUpdateEffect, SlotFill, Snackbar, TabPanel: Refactor to pass exhaustive-deps. (45044, 44403, 44934, 44935)
  • Remove unnecessary .firstChild from tests. (45419)
  • Update some 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 related types. (45279)

Global Styles

  • Add wp_theme_has_theme_json as a public API to know whether a theme has a theme.json. (45168)
  • Deprecate WP_Theme_JSON_Resolver:Theme_has_support(). (45380)

Tools

Testing

  • Add Playwright Compatibility-classic-editor Test. (43979)
  • Add end-to-end tests for Drag-and-Drop in the inserter. (44631)
  • Cleanup after the writing flow end-to-end tests. (45119)
  • Fix failing PHPUnit tests. (45265)
  • Fix uploading artifacts even when the tests are successful. (45187)
  • Migrate 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.-rendering test case. (44535)
  • Migrate tests to Playwright. (43963, 45267, 44916, 44507, 45393, 43964, 45202)
  • Re-enable skipped Gallery block end-to-end test. (45266)
  • Try fixing Site Title flaky end-to-end tests. (45160)
  • Update Playwright to v1.27. (45193)

Build Tooling

  • ESLint: Add and enable eslint-plugin-testing-library. (45103)
  • ESLint: Exclude Playwright tests from testing library rules. (45366)
  • Fix native Demo editor build error when using Xcode 14 to build to a physical device. (45120)
  • Remove comments from compiled styles. (43177)
  • Upgrade rtlcss to v4.0.0. (43208)

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.512.08s70.53ms
Gutenberg 14.411.97s69.15ms
WordPress 6.09.29s42.64ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.59.35s77.82ms
Gutenberg 14.411.56s74.72ms
WordPress 6.06.92s37.79ms

Note that the performance benchmark tests were automatically run against 6.0 rather than 6.1. This is because the “Tested up to” version of 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 was not updated to 6.1 once the new version of WordPress was published. This will be corrected for Gutenberg 14.6.

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @alvitazwar @andrewserong @annezazu @aristath @BE-Webdesign @bph @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ellatrix @fluiddot @GeoJunkie @georgeh @getdave @glendaviesnz @gziolo @Initsogar @jorgefilipecosta @jornp @jsnajdr @kevin940726 @KevinBatdorf @kienstra @Mamaduka @mikachan @mirka @noisysocks @ntsekouras @oandregal @pkorzelius @pooja-muchandikar  @ramonjd @SavPhill @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad

The following PRs were merged by first-time contributors:

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

Thanks to @priethor and @mamaduka for their assistance with the release, and props to @joen for the image and video!

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

JuanMa Garrido 3:58 pm on October 27, 2022
Tags: , , , gutenberg-new   

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

Aaron Robertshaw 12:29 pm on October 13, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.3? (12 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.3 has been released and is available for download!

It continues to build on recent writing flow improvements, refines image 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. creation via drag-n-drop, adds an enhanced tools panel to the Styles interface, and much more!

Table of Contents

Quickly navigate blocks of text

Continuing on from the improvements to writing flow in the last release. Gutenberg 14.3 includes support for alt + arrow keyboard combinations to make navigating blocks of text a breeze.

For example, if your cursor is towards the end of a long paragraph, you can quickly press alt + up arrow to move to the beginning of that paragraph. If you are already at the beginning of a text block, you’ll move to the start of the previous paragraph. Similarly, alt + down arrow will move you to the end of a block of text.

Improved drag and drop for images

As of Gutenberg 14.3, you can now drop an image onto an empty paragraph block to replace it with a new Image block.

Improved tools panels for the Styles typography controls

Building on past releases, Gutenberg 14.3 now brings the Tools Panels to the Styles interface. This makes the Styles interface consistent with the Block Settings interface, but it also makes it more usable by being able to reset values and opens the door to adding hidden-by-default controls, too!

Changelog

Enhancements

Post Editor

  • Optimize legacy post content layout. (44506)
  • Remove right border when sidebars are closed. (44613)

Block Library

  • Comment Pagination Numbers: Add background color. (43902)
  • Navigation Submenu: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • Post Author: Include option to link author archive. (42670)
  • Post Terms: Add spacing support. (43646)
  • 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.: Hide instructions for FormTokenField. (44641)
  • Tag Cloud: Remove strtolower around 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. name. (16112)
  • Video: Update placeholder style. (44215)

Components

  • FontSizePicker: Make control take up full width. (44559)
  • Placeholder: Remove unnecessary background color. (44497)
  • Placeholder: Update placeholder style. (44190)
  • ToggleGroupControl: Fix unselected icon color. (44575)
  • ToolsPanel: Add subheadings and reset text to tools panel menu. (44260)

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.

  • Blocks: Deprecate non-string descriptions. (44455)
  • Tag Processor: Document and test XSS prevention in set_attribute. (44447)
  • Tag Processor: Throw error when supplied with unacceptable attribute names. (44431)
  • Tag Processor: Use (start,length) values for tracking tag name. (44479)
  • Tag processor: Update ‘since’ version tags to 6.2.0. (44432)

Global Styles

  • Hide the done button of the Global Style palette editor when there aren’t colors to edit. (44372)
  • Use ToolsPanel in Global Styles → Typography. (44180)

Block Editor

  • Allow dropping an image on an empty paragraph block to create an image block. (42722)
  • Writing flow: Implement Alt+Arrow. (44081)

Site Editor

  • Allow drag and drop for blocks and patterns in zoom-out mode. (44402)

Block Directory

  • Use ‘tertiary’ in missing block warning. (44368)

New APIs

Block Library

  • WP_HTML_Tag_Processor: Inject dynamic data to block HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (42485)

Bug Fixes

  • Add a correct TS signature for useEntityRecords. (44448)
  • BlockDraggable: Change prop name passed to children when dragging is disabled. (44371)
  • Fix Lint warning/errors in cherry-pick script. (44662)
  • Fix: Content blocks with nested blocks always appear as top level. (44098)
  • Hide the Classic block in the Site Editor. (44554)
  • PHP 8.2: Remove deprecated callable in Style Engine value functions. (44561)
  • Persisted preferences: Fix context property of user 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. configuration. (44489)
  • Resizable editor: Fix height setting 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.. (44637)
  • Style engine: Kebab case preset slugs in the editor. (44406)
  • Add submenu block href only if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is not empty. (44337)
  • Update 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. $schema to allow pseudo selectors on button property. (44303)
  • Preserve the generic signature of getEntityRecord and getEntityRecords through currying. (44453)
  • Template editor: Fix crashes due to undefined vars. (44482)
  • Add missing value to CSSCSS Cascading Style Sheets. font-display descriptor in theme.json. (44622)
  • Rich text: Avoid updating partial selection unnecessarily. (44330)
  • useMergeRefs: Don’t call/mutate refs passed if unused. (44629)

Block Library

  • Code Block: Add box-sizing to fix inconsistent layout. (44580)
  • Comment Author: Fix empty links created for the author’s name. (44650)
  • Comments: Support nested comments settings in the comments blocks. (44351)
  • Group: Legacy Group inner block wrapper should work with a constrained layout. (44660)
  • Image: Fix rotated image crop area aspect ratio. (44425)
  • Image: 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/.-easy-crop to bring in fix for site 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.. (44408)
  • Navigation: Fix console error. (44594)
  • Navigation: Fix semitransparent burger icon. (44525)
  • Navigation: Try fixing link color in some TT2 contexts. (44578)
  • Paragraph: Disable drop cap control if text is aligned. (42326)
  • Post 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.: Fix borders after addition of overlay feature. (44286)
  • Post Featured Image: Fix application of default border style in editor. (44520)
  • Query Loop: Fix condition for displaying ‘parents’ control. (44630)
  • Query Loop: Rename Query Loop variations allowControls to allowedControls. (44523)
  • Quote block: Stop slash inserter popup showing in the citation. (44634)
  • Site Title: Fix link color not being applied in editor #37071. (44333)
  • Template part: Prevent adding block in post editor or inside post template or content blocks. (44480)
  • Video: Don’t display placeholder SVG when Video block selected. (44564)

Global Styles

  • Fix empty color indicator with a custom style. (44364)
  • Re-add styles that were removed for classic themes. (44334)
  • Remove border from Global Styles previews. (44556)
  • Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides. (44141)
  • Style cards: Fix focus style. (44612)
  • Theme.json: Fix some shadow properties not working properly in the site editor. (44569)
  • Use color hex + index as key in the Palette component color indicator. (44344)

Design Tools

  • Fix padding/margin visualizer accuracy. (44485)
  • Fix padding/margin visualizer placement. (44484)
  • Fix spacing property generation in flow layout type. (44446)

Components

  • BorderBoxControl: Ensure the most common unit selection is maintained. (44565)
  • Popover: Fix limitShift logic by adding iframe offset correctly (and a custom shift limiter). (42950)
  • Popover: Refine position-to-placement conversion logic, add tests. (44377)
  • Navigator Screen: Fix bug where focus moved erroneously. (44239)

Block Editor

  • Fix block search for non-Latin characters. (44652)
  • Prevent empty block toolbars from showing empty slots. (44704)

Widgets Editor

  • Add extra guarding against legacy widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. preview errors. (44635)

Themes

  • Theme export: Fix broken spacingScale export. (44555)
  • Theme export: Stop slugs being cast to integers when a theme is exported. (44589)

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)

  • TokenInput field: Try alternative approach to fix screen reader focus issue. (44526)

Patterns

  • Fix patterns drag and drop in Safari. (44366)

Post Editor

  • Add layout styles from Post Content block to post editor. (44258)

Performance

  • Compose: Introduce an in-house throttle() utility, deprecate Lodash version. (44225)
  • Improve Slot/Fill performance. (44642)

Documentation

  • Add documentation for extending the Query Loop block via variations. (44137)
  • Add more details about possible values for block assets in block.json. (44199)
  • Add missing import statement for useBlockProps. (44607)
  • Instruct people to keep using wp-scripts even when extending webpack. (44348)
  • Style engine: Updating and fleshing out documentation. (44405)
  • Style engine: Update readme. (44308)
  • Add callout for experimental packages. (44056)
  • Expand class-level documentation for WP_HTML_Tag_Processor. (44478)
  • Experiments: Add README.md and CHANGELOG.md. (44457)
  • Remove the package name from the sub-menu item for clarity. (44643)

Code Quality

  • Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. (44658)
  • Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. (44323)
  • CS/QA: Various minor fixes. (44551)
  • CS: Always use parentheses when instantiating objects. (44550)
  • CS: Remove redundant parentheses for include/require statements. (44544)
  • CS: Use pre-increment instead of post-increment. (44549)
  • Fix comment typo in document generation tools. (44583)
  • I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Use consistent string: ‘Link rel’. (20162)
  • PHP 8.2 | Fix deprecated embedded variables in text strings. (44538)
  • PHP 8.2 | Fix for partially supported callback. (44537)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Use PHPCompatibilityWP. (44542)
  • QA: No control structures with empty body. (44548)
  • Script loader: Remove 6.1 wp actions. (44519)

Components

  • Components refactor Mobile to ignore exhaustive-deps. (44207)
  • Convert FontSizePicker to TypeScript. (44449)
  • FontSizePicker: Replace SCSS with Emotion + components. (44483)
  • RangeControl: Remove unused UseDebouncedHoverInteractionArgs type. (44411)
  • Refactor Notice to pass exhaustive-deps. (44157)
  • Refactor ResizableBox to pass exhaustive-deps. (44370)
  • Refactor Sandbox to pass exhaustive-deps. (44378)
  • Refactor SearchControl native files to ignore exhaustive-deps. (44381)

Block Library

  • Archive Block: Remove unnecessary spaces from class attributes. (44440)
  • Archive: No need to escape class variable. (44468)
  • Gallery: Remove unnecessary caption state. (44383)
  • Remove unnecessary view.js file from navigation-submenu block. (44570)

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

  • CS: All methods must declare visibility. (44543)
  • Move wp_enqueue_block_view_script to experiments. (44414)

Layout

  • 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. code quality changes from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to Gutenberg. (44661)

Parsing

  • Block Serialization Default Parser: Bring back no-more-tokens type. (44459)

Global Styles

  • Add blocks to the list of valid origins for theme.json. (44363)

Lodash

  • Lodash: Remove completely from @wordpress/compose package. (44568)
  • Lodash: Remove completely from @wordpress/library-export-default-webpack-plugin package. (44571)
  • Lodash: Remove completely from @wordpress/list-reusable-blocks package. (44567)
  • Lodash: Refactor away from _.flow(). (44500)
  • Lodash: Remove completely from @wordpress/block-directory package. (44206)
  • Lodash: Remove completely from @wordpress/rich-text package. (44204)

Tools

  • Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • Limit access to experimental APIs to WordPress codebase. (43386)
  • Cherry Pick Script: Restore retrieval of merge_commit_sha. (44890)

Testing

  • Autocomplete Component: Add end-to-end tests (take two). (42905)
  • Fix failing quote to reusable block conversion end-to-end test. (44350)
  • Add strict meta schema validation test for block.json. (44423)
  • Migrate iframed block test to Playwright. (44164)
  • Add theme.json schema tests. (44252)
  • Remove enzyme completely. (44494)
  • Fix typo from in writing flow spec. (44358)
  • Fix typo in WP_Navigation_Page_Test. (44685)
  • Popover: Convert unit tests to TypeScript and modern RTL assertions. (44373)
  • Refactor AlignmentMatrixControl tests to use @testing-library/react. (44670)
  • End-to-end Test Utils: Don’t use hardcoded login credentials. (44331)
  • Refactor PluginPostPublishPanel tests to use RTL render. (44667)
  • Refactor AutosaveMonitor tests to @testing-library/react. (44492)
  • Refactor PostPreviewButton tests to @testing-library/react. (44470)
  • Refactor BlockSwitcher tests to @testing-library/react. (44493)
  • Refactor ResponsiveBlockControl tests to use @testing-library/react. (44669)
  • Style engine: Add JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests for outline properties. (44518)

Build Tooling

  • Upgrade Lerna to the latest version. (44456)
  • wp-env: Use case insensitive regex when checking WP version string. (44887)

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.314.3s79.51ms
Gutenberg 14.212.6s76.31ms
WordPress 6.09.8s41.28ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.310.8s72.89ms
Gutenberg 14.210.3s66.83ms
WordPress 6.07.5s36.81ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @ajlende @alecgeatches @andrewserong @anton-vlasenko @BE-Webdesign @BenoitZugmeyer @blindingstars @carolinan @chad1008 @ciampo @derekblank @dmsnell @ellatrix @getdave @glendaviesnz @gziolo @imanish003 @inc2734 @jameskoster @jasmussen @javierarce @jorgefilipecosta @jrfnl @kevin940726 @loxK @Lucisu @luisherranz @Mamaduka @michalczaplinski @ndiego @noisysocks @ntsekouras @oandregal @pagelab @philwp @ramonjd @Rink9 @ryanwelcher @SantosGuillamot @scruffian @Soean @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @vcanales @youknowriad

The following PRs were merged by first time contributors:

  • @alecgeatches: Add theme.json schema tests. (44252)
  • @BenoitZugmeyer: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • @blindingstars: Update Theme JSON $schema to allow pseudo selectors on button property. (44303)
  • @imanish003: Add missing import statement for useBlockProps. (44607)
  • @loxK: Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • @Lucisu: Fix empty links being created for the author’s name comment. (44650)
  • @philwp: Post Author block now includes option to link author archive. (42670)

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

Props to @talldanwp, @priethor, @getdave, and @gziolo for their assistance with the release, and props to @joen for the images and videos!

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

Michal Czaplinski 3:27 pm on September 30, 2022
Tags: , , , gutenberg-new   

What’s new in Gutenberg 14.2? (28 September)

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

It comes with writing flow improvements, a more polished Calendar 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., smarter autocompletions and much more!

Table of Contents

Smarter suggestions for 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 variations 

Block variations have been available in Gutenberg for a long time. They allow you to have similar versions of the same block that share some common functionality. From now on, if you have an active variation of the Query Loop block on your site and that variation has registered some block patterns, only those patterns will be suggested in the inserter.

For example, you might have a Products List block that is a variation of the Query Loop block. That Products List can also have a registered block pattern. Now, when inserting the Products List block, you will not see the default Query Loop block patterns but rather your own block pattern associated with the Products List. Pretty neat!

Improvements to the writing flow

Several improvements to the writing flow have been shipped in Gutenberg 14.2:

  • The sibling and line inserters now feature a more natural animation effect.
  • Selecting multiple blocks is now more visually consistent.
  • The block inserter is now hidden when the user is typing, reducing visual clutter.

Letter spacing in headings

It is now possible to modify the letter spacing of the headings directly in the Global Styles interface.

A more polished Calendar block

You can now set the background, link and text color of the Calendar block. Global Styles will now also affect the colors of the Calendar block and it will inherit the default text color from its parent block.

Four screenshots of the Calendar block in a 2 by 2 grid, each one of them using a different background color

New “Banners” and “Footers” block pattern categories

Two new block pattern categories are introduced in order to better reflect the structure of web pages. “Banners” here refers to visually distinctive elements that help structure or contrast the contents of a page (including headings and “hero” elements). 

A screenshot of the block inserter showing all of the block pattern categories

From now on, it is possible to autocomplete links in any block. Previously, blocks had to explicitly opt into this functionality with __experimentalSlashInserter  but now links will be autocompleted everywhere! The [[ shortcut is used to trigger the autocompletion in the editor.

Editor performance improvements

Introducing a new version of the List block that uses inner blocks uncovered a previously unknown performance issue: Whenever a block that contains inner blocks was displayed for the first time on a page it would re-render once for each level of nesting! So, if a List item was inside of a List that was inside of another List block, that block would re-render 3 times! This problem has now been fixed and the initial load performance of the editor should be improved.

Changelog

Deprecations

  • Officially deprecate the children and node block attribute sources. (44265)

Enhancements

Components

  • Link/Unlink buttons: Add more polished styling and UXUX User experience. (43802)

Global Styles

  • Allow setting Letter case and Decoration to ‘None’ and add Letter case to Global Styles. (44067)
  • Block supports: Allow overriding prettify options for enqueued CSSCSS Cascading Style Sheets.. (44248)
  • Show Letter Spacing in Global Styles -> Typography -> Headings. (44142)
  • Spacing presets: Switch to using numbers instead of t-shirt sizes for labels. (44247)

Block Editor

  • Hide all floating block UIUI User interface when typing. (44083)
  • Update animation for line and sibling inserter. (44269)
  • Warning component: Align the action buttons. (44328)

Block Library

  • Calendar block: Add color supports and polish styles. (42029)
  • Embed block: Mark which attributes should be considered content. (44039)
  • List Item block: Improve writing flow. (43954)
  • Post Navigation Link block: Add arrows. (40684)
  • Query Loop block: Suggest active variation patterns.
    (44197)

Patterns

  • Add a new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. for block patterns called “Banners”. (44203)
  • Add a new category for block patterns called “Footers”.
    (44200)

Bug Fixes

Components

  • BlockMover: Clean up focus styles. (44241)
  • Fix animation running in loop while dragging an image on a dropzone. (44264)
  • Fix popover stacking in the customize widgets editor. (44282)
  • Link autocompleter: Enable for all blocks. (44078)
  • Remove unexpected has-text class when empty children are passed to Button. (44198)

Block Library

Bugfixes to blocks:
  • Cover block: Fix preview. (44321)
  • Freeform block: Hide “Convert to blocks” when the block locked.
    (44288)
  • Group block: Change default variation in inserter. (44176)
  • Missing block: Fix HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block check. (44327)
  • Navigation block: Fix submenu colors for imported classic menus.
    (44283)
  • Navigation block: Remove ellipses as menu icon options for now. (44222)
  • Pullquote block: Fix transform to quote crash.
    (44315)
  • Post 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. block: Fix height/scale overwriting img inline styles. (44213)
  • Query Loop block: Fix broken preview in specific category template. (44294)
  • Query Loop block: Fix variation with declaredicon object with src.
    (44270)
  • Avoid showing the recursion warning in previews when replacing template parts. (44256)
  • Ensure replacing a template part using a pattern doesn’t update the existing entity. (44221)
  • Fix demo content cover block text color. (44174)

Block Editor

  • Block Toolbar: Update position when moving blocks. (44301)
  • Capture state changes scheduled between render and effect. (38509)
  • Writing flow: Fix partial selection when dragging in between blocks. (44230)

Global Styles

  • Block supports: Prioritize prettify options over SCRIPT_DEBUG. (44254)
  • Fix padding on the post editor when RootPaddingAwareAlignments setting is enabled. (44209)
  • Remove the 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. label from global styles 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.. (44251)

Site Editor

  • Make template names and descriptions dynamic. (43862)
  • Prevent editor from creating multiple templates when multi-clicking the
    “create” button. (44146)

Keycodes

  • Keyboard Shortcuts: Fix settings 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. toggle shortcut. (43428)

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 role=application to List View to prevent browse mode triggering in NVDA. (44291)
  • Block label and title don’t consider variations. (44250)
  • Make inline toolbar navigable by arrow keys. (43645)
  • Text Selection in Safari: Try new fix for recent version. (44148)

Performance

  • Avoid calling redux actions constantly when moving the mouse or scrolling. (44325)
  • Batch container block settings action calls. (43958)
  • Prevent resize observer loops in BlockPreview. (44319)

Documentation

  • Include information about multiple scripts support added in WP 6.1. (44155)
  • Popover: Write better documentation regarding the recent 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. changes. (44195)
  • RangeControl component: Clarify rail vs track difference. (44057)
  • Update links in the Development Platform document. (44181)
  • Updating versions in WP for 6.0.2. (43826)

Code Quality

  • 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. template creation changes from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Enforce coding guideline regarding the usage of quotation marks. (44305)
  • Fix missing TS types for a11yAccessibility 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) in packages/components. (44277)
  • Preferences-persistence: Remove wordpress/compose dependency. (44202)
  • Refactor style engine border styles. (43594)
  • Removes whitespace from l18n-strings. (44314)
  • Renaming functions to match their naming in Core. (44266)
    (44299)
  • useInstanceId: Convert to typescript. (43790)

Updating dependencies

  • Update fast-average-color library to latest version. (44175)
  • Update json2php to v0.0.5. (44313)
  • Remove wp-editor from wp-edit-blocks dependencies. (33496)

Block Library

  • Comments Pagination blocks: Rename for consistency. (44287)
  • Embed block: Remove incorrect comments about block variations. (43834)

Components

  • Refactor NavigationMenu to ignore exhaustive-deps. (44090)
  • Refactor RangeControl to pass exhaustive-deps.
    (44271)
  • Popover: Add anchor prop which supersedes all previous anchor-related props. (43691)
  • UnitControl: Fix exhaustive-deps warnings. (44161)
  • UnitControl: Use hideHTMLArrows prop to hide spin buttons. (43985)
  • useSetting: Minor refactor. (44267)

Refactoring tests to use @testing-library/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.

  • Refactor BlockControls tests to @testing-library/react. (44122)
  • Refactor ColorPalette tests to @testing-library/react. (44108)
  • Refactor KeyboardShortcutHelpModal tests to @testing-library/react.
    (44077)

Work to remove dependency on lodash

  • Compose: Introduce in-house compose and pipe utils. (44112)
  • Compose: Introduce in-house debounce() utility, deprecate Lodash version. (43943)
  • Lodash: Remove dependency from wordpress/widgets package. (44201)
  • Lodash: Refactor away from _.flowRight().
    (44188)

Testing

  • Storybook: Set up local visual 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. testing.
    (43393)

Tooling

  • Ensure all packages get minor/major version bump when requested. (44317)

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.28.4s48.69ms
Gutenberg 14.112.7s54.31ms
WordPress 6.06.4s29.97ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.24.1s44.76ms
Gutenberg 14.115.7s54.39ms
WordPress 6.05.0s26.15ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla  @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @kkoppenhaver: Update RangeControl documentation to clarify rail vs track. (44057)
  • @pagelab: Enforce coding guideline regarding the usage of quotation marks. (44305)

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

Props to @priethor @bernhard-reiter @matveb @cbravobernal for their assistance with the release and props to @javiarce for the images and videos!

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