Tag Archives: gutenberg-new

Nik Tsekouras 10:50 am on October 1, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.6 (29 September)

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/ 11.6 has been released! This release includes a number of nice enhancements and as usual many 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.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo 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.’s toolbar!

Locking control at block level

Alongside template level locking, now you can lock individual blocks to prevent moving or removing them; you can do this by adding a lock attribute on the block settings. Block-level lock takes priority over the templateLock feature and currently, you can lock moving and removing blocks.

The toolbar of locked blocks will have the movers hidden, and the Remove block option won’t be available either.

Query Pagination uses Flex Layout

Following previous releases bringing Flex Layouts to blocks, Gutenberg 11.6 improves the Query Pagination block to support the flex layout along with a justification option, for automatic best-fit.

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means 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. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and 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. are inherited.

The writing flow has also received some enhancements in this release: the Richtext format toolbar now shows a visual clue for hidden active items and, when using the quick inserter and clicking the Browse all button, your current filter value is now passed to the main inserter without the need to type it again, making this switch between inserters seamless.

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like a 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., and is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

  • Post Title block: Add typography formatting options. (31623)
  • Query Pagination block: Use flex layout. (34876)
  • Site logo: Add site logo crop. (31607)
  • Cover: Move cover min-height into dimensions panel via SlotFill. (34065)
  • Group Block: Add information about selected element types for Group Block. (33976)
  • Image Block: Create two-way data binding for ImageSizeControl. (34649)
  • Columns Block: Update block description of columns block. (34705)
  • Gallery block: Add toolbar button to convert old galleries to new format. (34606)

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass 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. value when clicking Browse All. (34912)

Components

  • ColorPicker: Enhance the new color picker design. (34598)
  • ColorPicker: Add reset timeout to ColorPicker’s copy functionality. (34601)
  • ToolsPanel: Refine component behaviour. (34530)
  • Resize Handles: Fix stroke width of resize handles. (34949)
  • ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. (28289)
  • ServerSideRender: Delayed loading state of ServerSideRender component. (35033)

Global Styles

  • Add a simple Global Styles preview to 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.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

Widgets Editor

  • 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. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

  • FSE: Add basic support for child themes. (34354)

New APIs

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.

  • Introduce lock control at the block-type level. (32457)

Design Tools

  • InspectorControls: Wrap block support slots in ToolsPanel. (34157)

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)

  • Improve file block accessibility by adding aria-describedby to download button. (28062)
  • Button Block: Add prefix to the description ID. (34900)
  • Snackbar: Fix focus loss on dismiss. (34736)

Performance

  • List View: Try disabling async mode provider around selected block in ListView. (34519)

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Prevent external styling of editing UI. (34727)
  • Page List Block: Fix gap in vertical page list. (35026)
  • MediaPlaceholder: Fix media library button opening the file upload modal. (34894)
  • QueryPagination: Fix layout support. (34897)
  • Query Pagination: Fix center alignment. (34739)
  • Group block: Lower CSSCSS Cascading Style Sheets. specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the 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.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

  • Fix Dropdown/DropdownMenu toggle closing in all UAs. (31170)
  • Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. (34721)
  • ToolsPanel: Allow SlotFill injection of panel items. (34632)
  • ToolsPanel: Remove / re-register panel items if the panelId changes. (34726)
  • ToogleGroupControl: Fix update when unmounted. (34756)
  • Unit Control: Always display current unit value if valid. (34768)

Template Editor

  • Fixes left & right floats for blocks that are direct children of .wp-site-blocks. (34635)
  • Fix new template form onSubmit logic. (34988)

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

  • Add missing field _invalid in menu item REST API. (34670)
  • Fix ‘menu_exists’ response status code. (34888)
  • Remove parent and position validation from menu item REST API endpoint. (34672)
  • Filters are incorrectly applied in the __experimental/menu-items controller. (34857)
  • Fix the parent menu item field in REST API responses. (34835)

Themes

  • Fix block gap added to the block templates skip link. (34986)

Widgets Editor

  • Fix disabled blocks logical error on Widgets screen. (34634)
  • Prevent welcome guide overflow x scroll. (34713)

Experiments

Navigation Block

  • Add a Submenu block for use in Navigation. (33775)
  • Initialize responsive modals with window onload event. (34544)
  • Enable open on click for Page List inside Navigation. (34675)
  • Hide theme-provided underlines when menu item is in setup state. (34486)
  • Only capture toolbars on the parent Navigation block when not in vertical mode. (34615)
  • Polish wavy underline. (34954)

Navigation Editor

  • Add initial navigation editor user documentation. (34985)
  • Adjust header toolbar icon styles. (34833)
  • Consolidate menu name and switcher. (34786)
  • Update Navigation Editor to support new submenu block. (34281)
  • Use response messages returned from API for notices. (34903)
  • Add global inserter to Navigation Editor. (34619)
  • Save menu items using the REST API. (34541)
  • Add space between menu name and switcher button. (34960)
  • Keep Navigation Editor snackbar from overflowing notices. (34661)
  • Navigation Editor: Avoid crash when transforming navigation link. (34980)
  • Correctly display notices. (34852)
  • Display error notice inside modal. (34884)
  • Fix navigation editor missing appender not showing appender when no blocks selected. (34678)
  • Fix navigation editor undo button being active when editor loads. (34839)
  • Open link control if submenu parent is link. (34798)
  • Stop submitting Create Menu form in busy state. (34983)
  • Fix saving locations using the “Manage Locations” popup. (34714)

Site Editor

  • Site Editor – add basic 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 support. (34460)

Documentation

Handbook

  • Minor copy improvements. (35015)
  • Update versions to include 5.8.1. (34789)
  • Fix typography.customLineHeight value in the compatibility table. (34791)

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

  • Add tests for slug to class/css variable conversion. (34787)
  • Refactor the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data store to thunks. (28389)
  • Remove some low impact APIs that were deprecated on WP 5.3. (34537)
  • Rewrite FocusableIframe as hook API. (26753)
  • Rich text: Only merge neighbouring equal formats when applying a format. (35016)
  • Writing Flow: Merge place caret at edge functions. (30481)
  • Site editor: fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice: Undefined index: __unstableType. (34735)
  • Use rest_is_field_included function in menu endpoints. (34673)
  • Remove duplicate Theme JSON block gap key. (34774)

Block Editor

  • Global shortcuts: Use React events (portal bubbles & contextual). (34539)
  • Rename experimental prop used in BlockControls. (34644)
  • Update callers to handle when getBlockType returns undefined. (34891)

Block Library

  • Latest Comments: Add missing parameter to widget_comments_args. (29403)
  • Navigation submenu block: Replace global shortcut event handlers with local ones. (34812)

Components

  • ColorPicker: Replace global shortcut event handlers with local ones. (34508)
  • Delete the createComponent utility function. (34929)
  • Refactor away from the createComponent function: CardMedia (34915), ControlLabel (34927), Elevation (34916), FlexBlock (34917), FlexItem (34918), Grid (34919), HStack (34920), Heading (34921), Scrollable (34922), Spacer (34923), Surface (34924), Text (34925), Truncate (34926), VStack (34928).
  • Remove all dashicon usages from Storybook stories. (33984)
  • Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. (34966)

Global Styles

  • Fix Global Styles double border. (34906)
  • Rename globalStyles to styles. (34946)

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.

  • Add a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky 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. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

  • Fix package lock inconsistencies. (34790)
  • Update caniuse package to the latest version. (34685)
  • VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. (34269)
    • Replace usages of workspaceRoot with workspaceFolder. (34887)
  • Bump jest-dev-server to v5. (34560)
  • ESLint Plugin: Update eslint jsdoc dependency. (34338)
  • Storybook: Remove G2 prefix from the Components section. (34734)
  • Block Editor: Update react-spring to 9.2.4. (30979)
  • Move react-native-url-polyfill to dev dependencies. (34687)
  • Use Jest related rules only when the package is installed. (33120)
  • Ensure that all *.asset.php files are included in plugin.zip. (34875)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.67.6 s38.38 ms
Gutenberg 10.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

Thanks to @priethor, @mcsf, @matveb, and @jameskoster for helping with the release!

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

Mike Schroder 7:56 pm on September 17, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.5? (16 September)

It’s been two weeks since 11.4, so it’s time for another 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/ release, 11.5!

This update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools.

Theme / Block Gap Support

Block Gap support adds the ability for blocks to opt-in to a control that allows users to choose the distance between items within a block.

The groundwork for this feature was introduced in 11.4, and was initially opt-out for themes. Following feedback, this feature is now opt-in. Thanks so much for the testing and feedback!

With Block Gap support in place, it has also been added to the Columns, Title, and Navigation blocks.

Buttons in the the Buttons Block move closer together or farther apart as the Block Gap is changed.

Flex Layout Highlights

Following the introduction of Flex Layout in 11.2.0, now Flex Layouts are supported within the Social Links and Group blocks! The Social Links block now has a ‘flex’ justification option, for automatic best-fit. 

There is also a new variation of the Group block that allows for flex layout. You can try it out by choosing “Row” from the block inserter.

Social Icons change flow when flex justification is selected.

Site Title and Logo Inside Navigation Block

It’s now possible to build your site logo or title directly into menus, enabling new design possibilities! Insert, and modify the title or logo that you prefer, using design tools, then re-order for your ideal look.

A Site Logo is added to a Navigation Block, then resized and placed.

Global Styles 

Global styles are now available to themes by default, allowing block, theme, and patterns to have a reliable set of styles provided by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Themes are now able to selectively disable text and background colors. This allows theme authors to provide exactly the experience they’d like to provide users, whether allowing custom colors, gradients, or only their curated selections.

Other Notable Highlights

The Heading Levels menu has been redesigned, and is now vertical, making it easier to visualize the hierarchy.

There is a new setting to customize the Next and Previous Page indicators in the Query Pagination block, allowing the addition of an arrow or a chevron to your designs.

New vertical Heading Levels menu, with H2 selected.

11.5.0

Features

Design Tools

  • Block Support: Add gap block support feature. (33991)

Enhancements

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)

  • Font weight screen reader description. (34312)

Block Editor

  • Media Placeholder: Change media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input type to allow a local URL path. (29138)

Block Library

  • Columns Block: Use blockGap between Columns blocks. (34456)
  • Group Block: Add a row variation. (34535)
  • Heading Block: Vertical heading levels menu. (32926)
  • Navigation Block: Allow Site Title and Logo inside Navigation block. (33316)
  • Navigation Block, List View: Do not show appender and avoid closing the modal on block select. (34337)
  • Navigation Block: Remove horizontal and vertical navigation block variations from inserter. (34614)
  • Navigation Block: Use gap instead of margin. (32367)
  • Post Author Block: Add duotone suport. (34408)
  • Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block’s arrow. (33656)
  • Site Logo Block: Update block description to be concise. (34471)
  • Site Title Block: Update block description to be concise. (34475)
  • Social Links Block: Use the new flex layout. (34493)
  • Video Block: Use existing video poster image on insert. (34415)

Components

  • MenuItem: Add right padding for unchecked radio and checkbox items. (34406)
  • ToggleGroupControl: Update stories to use knobs. (34497)

Core Data

  • Add isRawAttribute to entity configuration. (34388)

Design Tools

  • Add wide alignment control only if theme provides layout.wideSize. (34586)
  • Update justification control in flex layout. (34651)
  • ToolsPanel: Change icon from horizontal to vertical ellipsis. (34369)

Full Site Editing

  • Limit FSE adminadmin (and super admin) notices to the Themes screen. (34353)

Global Styles

  • Allow disabling text and background color via theme.json. (34420)
  • Make global styles available to all themes. (34334)

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.

  • Add context to ‘none’ strings for better translations. (34341)
  • Make permalinks documentation URL translatable. (34282)

Post Editor

  • Expose ThemeSupportCheck component. (20506)
  • Title block gap. (34570)

Themes

  • Add default editor styles applied to themes without theme.json and without editor styles. (34439)

Widgets Editor

  • Add ‘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. Group’ block to widgets screens. (34484)
  • Legacy widget rendering endpoint. (34230)

New APIs

Design Tools

  • Allow themes with theme.json to opt-out of block gap styles. (34491)

Bug Fixes

Accessibility

  • Fix button block focus trap after a URL has been added. (34314)

Block Editor

  • Fix menu item padding 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.. (34435)
  • Fix text-menu min widths. (34532)
  • Keep id on paste if internal link points to it. (31107)
  • Fix caret position on block merging. (34169)

Block Library

  • Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. (34222)
  • Gallery Block: 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. with stalled upload when image size too large. (34371)
  • Gallery Block: Fix media placeholder height in site editor. (34629)
  • Gallery Block: Fix problem with overflowing captions on new gallery block format. (34402)
  • Latest Posts: Fix various ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings in development log. (34428)
  • Navigation: Fix navigation block classname issues. (34344)
  • Navigation: Fix Page List styles inside responsive Navigation. (34517)
  • Navigation: Fix responsive menu height regression. (34488)
  • Navigation: Fix submenu layout in navigation page list. (34342)
  • Navigation: Fix submenus to only take up space when visible. (34382)
  • Navigation: Fix undo/redo ‘trap’ in navigation link block. (34565)
  • Site Title: Allow empty title in edit mode. (34274)
  • Social Links Block: Fix deprecation. (34639)
  • Video Block: Fix TypeError when removing poster. (34411)

Components

  • Align labels on focal point picker position controls above the inputs. (34209)
  • Check if in browser env before calling CSS.supports. (34572)
  • Combobox Component: Only force expanded state if the input has focus. (34090)
  • CustomSelectControl: Add describedBy fallback. (34385)
  • DateTime Component: Fix sizing of help info. (34370)
  • Fix ToggleGroupControlBackdrop not updating size when isAdaptiveWidth prop changes. (34595)
  • Fix selected value computation in CustomSelectControl when no initial value is set. (34490)
  • Fix subheadings from wrapping. (34319)

Design Tools

  • Border Controls: Display color indicator and check selected color. (34467)
  • Border Support: Fix check for displaying border support panel. (34516)
  • Gap block support: Force gap change to cause the block to re-render (fix Safari issue). (34567)
  • Letter Spacing: Group letter spacing correctly under typography supports. (34515)

Global Styles

  • Fix block-level global styles color panels. (34293)
  • Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. (34520)

MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Boxes

  • Change default value of enableCustomFields to undefined. (33931)
  • Fix metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. reordering. (30617)

Packages

  • Blocks: Register block when 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. value provided for the icon. (34350)
  • Core Data: Add ‘include’ to the query key. (34583)
  • Core Data: Use resolveSelect instead of select in saveEntityRecord. (34584)
  • Interface: Block Toolbar & Popover component – Prevent sticky position from causing permanently obscured areas of the selected block. (33981)
  • Scripts: Only use svgr/webpack in js files. (34394)
  • Scripts: Convert legacy entry point arguments for compatibility with webpack 5. (34264)

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

  • Default batch processor: Respect the batch endpoint’s maxItems. (34280)

Widgets Editor

  • Fix 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. unexpectedly collapsing. (34543)
  • Legacy widget’s preview functionality is broken when the page is moved. (34384)
  • Prevent focus trap in Legacy Widget block’s preview 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.. (33614)

Performance

Block Editor

  • Improve the getBlock and getBlocks performance. (34241)
  • Remove duplicated useValidAlignment hook. (34593)

Core Data

  • Move locks state from store to local variable. (34374)

Global Styles

  • Remove colors classes from the packages that are already provided by global styles. (34510)

Experiments

Navigation Editor

  • Add undo redo buttons in navigation editor. (34533)
  • Decode entities in the menu names. (34263)
  • Disable “block-nav-menus” feature for the purposes of removing the “experimental” status on the Navigation Editor. (34444)
  • Preload menu REST API requests on new navigation editor. (34364)
  • Update navigation editor placeholder. (34568)

Documentation

Handbook

  • Replace withSelect references with useSelect. (34549)
  • Updated Template Section copy. (34383)
  • Update block variations documentation about block scope. (34455)

Packages

  • Blocks: Correct typo in Blocks Documentation. (34396)
  • Componentes: Fix/update documentation alignment matrix control. (34624)
  • Componentes: Update DuotonePicker documentation for accuracy. (34494)
  • Eslint: Add no-unsafe-wp-apis to rules list in the documentation. (34416)
  • Prettier: Correct syntax in README.md for prettier-config. (34600)

Code Quality

Block Editor

  • Code cleanup to the getBlock refactoring. (34326)
  • Ensure that blockType is defined when accessing apiVersion. (34346)
  • Migrate lightBlockWrapper support to apiVersion for blocks. (34459)
  • Fix Animated warning log. (34197)
  • Rich Text: Replace global event handlers with local ones. (34492)
  • Rich text (core): OnFocus method can be replaced with HTMLElement.focus. (32054)
  • Use Setting: Consolidate the PATHS_WITH_MERGE constant to one instance. (34407)

Block Library

  • Gallery Block: Add docblockdocblock (phpdoc, xref, inline docs) comments to the new gallery hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (34562)
  • Gallery Block: Remove IE specific CSSCSS Cascading Style Sheets. hacks. (34372)
  • Button Block: Replace global shortcut event handlers with local ones. (34498)
  • Navigation Block: Refactor to use generic classnames. (34171)
  • Navigation Link Block: Replace global shortcut event handlers with local ones. (34500)
  • Gallery Block: Remove redundant css selector. (34277)

Components

  • CustomGradientBar: Replace global shortcut event handlers with local ones. (34505)
  • Guide: Replace global shortcut event handlers with local ones. (34503)
  • Navigate regions: Use React events for shortcuts (portal bubbles & contextual). (33633)
  • Rename PolymorphicComponent* types to WordPressComponent*. (34330)
  • Simplify Modal with hooks. (34412)
  • Simplify & polish heading levels. (34378)

Core Data

  • Fix linting errors. (34596)
  • Fix linting error in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (34464)
  • Migrate canUser resolver to thunks. (34580)
  • Migrate entities.js to thunks. (34582)
  • Migrate getAutosaves resolver to thunks. (34581)
  • Migrate getEntityRecord resolver to thunks. (34576)
  • Migrate getEntityRecords resolver to thunks. (34578)
  • Migrate resolvers to thunks: GetAuthors, _getCurrentUser, __getCurrentTheme, __getThemeSupports. (34579)
  • Refactor deleteEntityRecord to use thunks instead of generators. (34386)
  • Refactor editEntityRecord, undo, and redo to be thunks instead of generators. (34387)
  • Remove the PROCESS_PENDING_LOCK_REQUESTS action. (34343)
  • Refactor saveEntityRecord from redux-rungen to async thunks. (33201)
  • Remove extraction of raw values in saveEntityRecords. (34502)

Other Packages

  • Compose, useDropZone: Ensure drag event targets HTMLElement. (34272)
  • Editor: Replace hardcoded store key. (34296)
  • Env: Clarify config error within parse-config.js. (34322)
  • Post Editor: Fix gray W menu color. (34318)
  • URL: Add getFilename method to the URL package. (34313)

Tools

Build Tooling

  • ESLint: Add useSelect to direct function calls list. (34301)
  • ESLint: Update error message for @emotion/css with info about the useCx hook. (34418)
  • Fix build hang on Windows 10. (23589)
  • Linting: Remove global event listener warning. (34528)
  • More work on the stability of the performance metrics. (34229)

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

  • Added janw-me to the Codeowners for the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher FSE folder. (32990)
  • Fix title missing in bug report form. (34504)
  • Update bug form to use drop downs. (34458)
  • Update the minimum supported WordPress version to 5.7. (34536)

Testing

  • Add unit tests for edit site editor utils. (34401)
  • Debug e2e-tests in vscode. (29788)
  • Jest Preset: Restore the default setting for the verbose option. (34327)
  • Make Test_Widget compatible with WP_Widget. (34355)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.56.71s40.42ms
Gutenberg 11.46.80s44.79ms
WordPress 5.87.53s50.72ms

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

Thanks to @beafialho and @joen for the release post assets, @priethor for coordination and review, @youknowriad for release and tools wrangling, @mamaduka for answers and help throughout, and @talldanwp for inviting me to shadow a release in preparation.

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

ramonopoly 8:08 pm on September 1, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.4? (1 September)

Depending on where you live, it’s the first day of Spring. Or Autumn. Or, if you live on Venus, just another season of sulphuric acid showers.

No matter where you are, 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/ 11.4 has been released with new features to brighten your mood including the refactored Gallery 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., duotone filters for featured images, and more block design tools!

Gallery Block now uses Image Blocks

The Gallery Block now acts as a wrapper for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Image Blocks.

Individual gallery images will therefore feature all existing and future functionality of not only Image Blocks – for example, the ability to add custom links, filters, and styles – but also standard block behavior such as move, drag and drop, copy, and keyboard navigation.

For now, the new Gallery Block can be enabled on the Gutenberg Experiment page, but the plan is for the Gallery Block to ship with WordPress 5.9.

Theme and 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 authors can get wise about backward compatibility recommendations over in the Gallery Block Refactor Dev Note.

Duotone filters for featured images

Duotone filters were introduced to image and cover blocks in 10.6. By extending duotone filters to 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. blocks, 11.4 enables us to set consistent effects across post and page templates, recent posts lists, and Query Block content.

Padding support for Button Blocks

As of 11.4, we can define padding for Button Blocks with the further option of linking padding values to vertical and horizontal axial sides.

The aim is to provide greater control as well as uniformity in the way we display button elements. We can still set a single padding value for all sides – adding extra vertical or horizontal padding just gives us that extra flexibility to create variations on our design patterns.

Support for block gap spacing

Having a consistent way to tweak the margin/gap between blocks has been a long-standing feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged.. 11.4 introduces the groundwork for adding gap spacing control to blocks such as Buttons, Images, and Columns, opening up the possibility of more powerful and precise layout tools.

There’s work in progress to bring this to the editor so stay tuned for updates in upcoming releases!

Other notable highlights

Font weight support is now available for the Post Date and Post Terms Blocks.

An “early 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.” feature has also made it into 11.4: the ability to expose a parent block’s toolbar controls to its child blocks. A use case would be changing the alignment of Buttons when editing a single Button. Keep an eye out for a request for feedback on this developing feature soon.

11.4.0

Enhancements

  • 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)
    • Cover Block: Allow alt text in Cover blocks. (33226)
    • Add aria-describedby to custom select control component to describe currently-selected font size. (33941)
  • Block Editor
    • Block Lists: improve 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. block, pattern and template previews. (28165)
  • Block Library
    • 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.: update Post Template sub-block icon. (34204)
    • Convert Gallery block to use Image blocks. (25940)
    • Post Featured Image: add duotone block supports. (34113)
    • Post Featured Image: add contextual help text to the scaleproperty. (34158)
    • File block: update transform from image to use image filename if caption is empty. (34256)
    • Post date Block: add font weight support to the block. (34070)
    • Post terms: add font weight support to the block. (34142)
    • Site Tagline: add font weight support. (33983)
    • Button: update spacing support to use axial padding. (33859)
  • Components
    • Add deprecated props adapter for ColorPicker. (34014)
    • Wrap SegmentedControl in a BaseControl with an added help property. (34017)
    • Combobox: update the current selection if the list of suggestions is filtered. (33928)
    • Post Title: use rich text hook and updating 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.) to h1 (31569)
  • Design Tools
    • Add layout default value support for blocks. (34194)
    • Dimensions Panel: add padding tool as default for blocks where this is a common setting. (34026)
  • Navigation Screen
    • Update navigation screen topbar. (34166)
  • Packages
    • Updates the “settings” icon, which toggles the display of additional controls in an interface. (34165)
  • Post Editor
    • Migrate post editor feature preferences to the interface package. (34154)
  • Widgets Editor
    • Migrate customize widgets feature preferences to interface package. (34135)
    • Refactor editor ‘feature’ preferences to interface package. (33774)

Bug Fixes

  • 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.
    • Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. (34059)
  • Block Editor
    • Font-size adjustment for tablet and mobile device previews. (33342)
    • Fix single block selection by holding shift key. (34137)
    • Fix unwanted additional spaces added around pasted text on Windows. (33607)
    • Inserter: prevent non-deterministic order of inserter items. (34078)
    • Try: Fix multiselect toolbar indent and reformat BlockContextualToolbar(). (34038) (34173)
  • Block Library
    • Latest Comments: use site localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. in the editor. (33944)
    • Navigation: fix vertical layout on the frontend. (34226)
    • Navigation: add z-index value to responsive menu overlay. (34228)
    • Navigation: enable flex on container to fix space between. (34258)
    • Navigation: fix submenu icon positioning. (34168)
    • Navigation block: add missing </ul> closing tag. (34077)
    • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: remove interactive formatting. (34083)
    • RichText: fix space key for button and summary elements. (30244)
    • Search Block: add space between generated border class names. (34025)
  • Build Tooling
    • Webpack: Fix watch on .json and .php files. (34024)
    • Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. (34422)
  • Components
    • Fix RTL on Flex component. (33729)
    • NavigationSidebar: fix template content for content-navigation-item preview. (34203)
    • Remove deprecated import style for storybook/addon-docs. (34095)
    • ToolsPanel: add tools panel item deregistration. (34085)
    • Post Title: remove wrapper div and fix border style. (34167)
  • Core Data
    • GetEntityRecords returns items even if some included IDs don’t exist. (34034)
  • Design Tools
    • Allow zero values for theme.json styles. (34251)
  • Global Styles
    • Site editor: fix for how CSSCSS Cascading Style Sheets. custom properties are generated. (33932)
  • Packages
    • Rich Text: add check to toTree() in replacements before accessing its type. (34020)
  • Post Editor
    • Fix selector params in isPluginItemPinned() selector. (34155)

Performance

  • Data Layer
    • Data: Add a batch function to the data module to batch actions. (34046)

Experiments

  • Block API
    • Block Editor: absorb parent block toolbar controls. (33955)
    • Block Editor: use groups for InspectorControls. (34069)
  • Block Library
    • Add generic classnames to children of Navigation. (33918)
  • Global Styles
    • Add slashes back to the 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.. (33919)
    • Add block spacing gap configuration to theme.json and add support for this CSS variable to the “flow/default” layout. (33812)

Documentation

  • Handbook
    • Alphabetize glossary entries. (34058)
    • Correct minor typos in wp-plugin.md (34185)
    • Remove extraneous params from block_type_metadata hook. (34151)
    • Update incorrect settings examples in “Global Settings & Styles”. (34084)
    • Use block.json to add attributes in create block tutorial. (33978)
    • Fix typo in block gap documentation in theme-json.md. (34231)
    • Fix broken mobile testing documentation link in testing-overview.md. (34187)
    • Fix typo in legacy-widget-block.md. (34103)
    • Update spelling and fontSize examples in create-block-theme.md. (34152)
  • Library
    • Bump mobile version in experiments page for Gallery. (34220)
  • Packages
    • Add documentation for mobile components directory. (33872)

Code Quality

  • Block Editor
    • Render head and body with single portal for block previews. (34208)
    • BlockList: refactor element context for style/svg appending. (34183)
    • BlockList: use InnerBlocks internally. (29895)
  • Components
    • Unit Control: add unit tests for getValidParsedUnit utility method. (34029)
    • Rename SegmentedControl to ToggleGroupControl. (34111)
    • Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping (33995)
  • Core Data
    • Allow passing store definitions to controls. (34170)
  • Site Editor
    • Remove extra DOM element used for template part overlay. (34012)

Tools

  • Build Tooling
    • Automated Changelog: force group all documentation tasks under Documentation. (34042)
    • Automated Changelog: rename “Editor” grouping to “Post Editor” to avoid ambiguity with other editors. (34093)
    • Automated Changelog: sort feature groups by issue name. (34071)
    • Automated Changelog: use nested headings for feature groups instead of indenting lists. (34040)
    • Automated Changelog: remove Uncategorized 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. in output and place items at top. (34037)
    • Add Typescript extensions to watched files. (34094)
    • Remove obsolete step that pushes tags in NPM publishing flow. (34114)
    • Release workflow: only commit modified changelogs. (34211)
  • ESLint
    • Eslint plugin: use @typescript-eslint/no-duplicate-imports in TS projects. (34055)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ Contributor Templates
    • Issue Forms: simplify the 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. report form template. (34007)
  • Logs
    • Hide deprecation logs under a console group. (34163)
  • Testing
    • Emulate reduced-motion in end-to-end tests. (34132)
    • Re-enable Android end-to-end tests. (34243)
    • Remove extra props from Cover deprecations. (34066)
    • Remove the ENVIRONMENT_DIRECTORY env variable that was added to the performance jobs. (34086)
    • Add snapshot test for changelog formatting. (34049)
    • Experiment with using 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/. in end-to-end tests to build up states. (33414)

Performance benchmark

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.46.35s36.87ms
Gutenberg 11.36.29s36.97ms
WordPress 5.86.91s35.48ms

Thanks to @critterverse for our release preview assets, @priethor for guiding the release, @noisysocks, @talldanwp, and @andrewserong for their help with the release build and deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors., and to all who contributed to this release. Thank you for your splendid work!

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

Vicente Canales 7:51 pm on August 18, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.3? (18 August)

Two weeks have passed since 11.2, so here we are again for a new 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/ release, 11.3.0. This update includes inserter performance improvements, new controls for 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. Dimensions, and some enhancements around how we handle Featured Post Images.

New Dimensions Panel

Replacing the Spacing Panel, this new Dimensions Panel gives us a deeper control over supported spacing, size, and other related style options. It also offers the ability to customize what you’d like to have shown. This is a great addition that builds on the overall dimension controls work across blocks.

Block inserter performance improvements

The block inserter is getting a big performance boost! Enjoy searching and inserting blocks with speed and ease.

Dimension controls for 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

There are now new height, width, and scale controls for the featured image block, bringing it into greater parity with the Image block. This change impacts the 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 in a big way by allowing even more layout options.

New icons for Reusable Blocks and Template Parts

New icons are now available for Reusable Block and Template Parts to make them each more recognizable and more intuitive to interact with.

11.3.0

Enhancements

  • Block Library
    • Button: Add padding block support. (31774)
    • Post Featured Image: Add basic dimension controls. (31634)
    • Template Part: Try new icons for reusable blocks and template parts. (34002)
  • Block Patterns
    • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context on titles. (33734)
  • Block Editor
    • Enable rich previews for internal links. (33086)
  • Components
    • Add new ColorPicker. (33714)
    • Promote ItemGroup. (33701)
    • Polish the focus style for the segmented control. (33842)
    • Tune appender margin. (33866)
    • Update snackbar to use framer motion instead of reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. spring. (33717)
    • Use updated range styles. (33824)
  • CSSCSS Cascading Style Sheets. & Styling
    • Reduce specificity of reset & classic styles. (32659)
  • Document Settings
    • Disable spellcheck and autocomplete in permalink slug field. (33708)
  • Global Styles
    • Dimensions Panel: Add new ToolsPanel component and update spacing supports. (32392)
  • 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/.
    • Improve the likelihood of getting rich link previews by modifying UA string for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details REST API endpoint. (33747)
  • Site Editor
    • Add error boundary. (33921)
  • Template Editor
    • Template Mode: Add busy state to template creation modal. (33076)
  • Widgets Editor
    • Add error boundaries to 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. screens. (33771)

Bug Fixes

  • 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 some JAWS bugs. (33627)
  • Block Library
    • Button: Fix justification for button block when selected. (33739)
    • Image: Fix issue with canInsertCover not being set to false for empty arrays. (33863)
    • Query Pagination Numbers: Fix first page’s link. (33629)
  • 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.
    • Dimensions Support: Switch dimensions block support back to using spacing key. (34030)
  • Block Editor
    • Closing the block inserter decrements block type impressions. (33906)
    • Fix block appender position in classic themes. (33895)
    • Fix positioning discrepancy with draggable chip. (33893)
    • Force link text to wrap in the Link UIUI User interface when encountering extra long link text. (33753)
    • Improve display of LinkURL menu and fix spacing. (33652)
    • Only show rich preview for image and description if data is available. (33660)
    • URL Details: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when parsing protocol-relative icon URLs. (33779)
  • Components
    • useBreakpointIndex: Attach resize event listener to window instead of document. (33902)
    • Components: Fix RTL on custom gradient picker. (33831)
    • FontSizePicker: Use number values when the initial value is a number. (33679)
    • FormTokenField: Avoid error when maxLength value is hit. (33623)
  • CSS & Styling
    • Fix navigation block placeholder preview markup. (33963)
  • Global Styles
    • Avoid rendering duplicate elements stylesheet. (33680)
    • Fix presets for blocks with multiple selectors. (33951)
    • Fix Global Styles transient key clash. (33844)
  • MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Boxes
    • Fix Safari 13 metaboxes from overlapping the content. (33817)
  • Navigation Editor
    • Avoid React warning when creating a new menu. (33843)
    • Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. (33748)
  • Site Editor
    • Fix the site editor breaking in firefox. (33896)
  • Post Editor
    • Editor: Safer isPreviewingPost check. (33840)
  • Template Editor
    • Only show post template actions to users with correct capabilities. (33392)

Performance

  • Block Library
    • Improve the rendering/update performance of the image block. (33974)
    • Do not add to the block-library CSS bundle the colors that come from theme.json. (33924)
  • Block Editor
    • Lazy render the inserter search results. (33868)
    • Lazy render block types in the inserter. (33749)
  • Parsing
    • Improve the performance of the parser by removing the automatic custom classnames handling. (33903)
  • Post Editor
    • Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. (33418)
  • Template Editor
    • Template Mode: Remove ‘per_page’ argument from the template data selector. (33742)

Experiments

  • Full Site Editing
    • Site Editor: Implement a settings object 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.. (33737)
    • Template part selection popover – minor style updates for visiblity. (33733)
    • Template Part placeholder – Add title step to creation flow. (33703)
  • Navigation Block
    • Navigation: Fix navigation block appender 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (33964)
    • Enable the ability to remove a link from the Nav Link block in the Nav Block. (33777)
    • Fix navigation margin collapsing. (33021)

Documentation

  • Handbook
    • Add documentation to disable remote calls for block patterns. (33930)
    • Add missing comma. (33764)
    • Add more details about block attributes. (33880)
    • Add spaces in add_theme_support documentation code. (33796)
    • Correct spelling and grammar in documentation. (33860)
    • fix: supports.color.gradients is plural. (33781)
    • fix: Broken link in documentation to block support mechanism. (33780)
    • Update documentation to reflect new automated process for feature grouping. (33573)
    • link fix: Block editor SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. Tutorial. (33308)
  • Library
    • Fix gutenberg_resolve_template() return documentation. (33800)
    • Fix misspelling of “queries” in filter documentation. (33799)
  • Packages
    • Example for rest_endpoints filter in PHP. (33738)

Code Quality

  • Block Library
    • Site Logo: Use getMedia shorthand. (33992)
    • Featured Image: Use getMedia shorthand. (33943)
    • Search Block: Removed components class from icon button and polished css. (33961)
  • Components
    • Components utils: rtl() return type, rtl.watch() utility. (33882)
    • InputControl to TypeScript. (33696)
    • Use the __unsafe_useEmotionCache in the useCx hook. (33982)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data
    • Deprecate getAuthors in favor of getUsers. (33725)
  • Global Styles
    • No longer read from experimental-theme.json. (33904)
    • Remove the experimental prefix and rename theme.json files. (33925)
  • Post Editor
    • Refactor MetaBoxesArea to to functional components using hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (30542)
  • Scripts
    • Fix typo in format change message. (33945)

Tools

  • Testing
    • Add search performance measures and make other measures more stable. (33848)
    • Avoid double parsing the content when loading the editor. (33727)
    • Block Hierarchy Navigation waits for the column to be highlighted. (33721)
    • Widgets Editor: Try to fix flaky 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. inspector test. (33890, 33965)
  • Build Tooling
    • Readable JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. assets 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: Fix webpack 5 support. (33785)
    • Scripts: Use cssnano to minimize CSS files with build. (33750)
    • Scripts: Webpack configuration update to minimize CSS. (33676)
    • Scripts: Update webpack to v5 (try 2). (33818)
    • Scripts: Add missing fallback for target in webpack 5 configuration. (34112)
  • ESLint
    • Include .jsx extenstion when linting import statements. (33746)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ Contributor Templates
    • Update 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. issue template to use forms. (33713, 33786, 33761)
  • Plugin
    • Plugin: Fix jsdoc/check-line-alignment ESLint warnings. (33901)
    • Correct function_exists() check typo introduced in #33331. (33513)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.37.23s38.57ms
Gutenberg 11.27.82s37.89ms
WordPress 5.87.99s41.44ms

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

Thanks to @javiarce for our preview assets, @cbringmann and @mkaz for proof reading this post, @annezazu‘s great copy edits, @priethor for shepherding the process along so helpfully, @youknowriad for helping 🧑‍🚒 with the release, and everybody else who contributed to this release for your wonderful work!

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

Daniel Richards 6:07 am on August 5, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.2.0? (4 August)

Two weeks have already passed since 11.1, so this week 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/ 11.2 was released. This release seems to have had more of a focus on 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 and tooling, but nevertheless there are still some great features to highlight. Color support has been expanded on two blocks, a new layout option is being tested for parent blocks, and there’s now an option for creating a new post after publishing.

Search 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. – button and border colors

The range of options for customizing blocks continues to improve. The search block now has additional options for customizing button and border colors.

Group block – flex layout

An experimental flex layout option is being beta tested on the group block. This is an early glimpse at a feature that would give parent blocks the capability of defining the layout of their inner blocks.

In the near future the intention is to provide options for changing the orientation, alignment, justification, and spacing within a flex layout.

New button for creating posts as part of the publishing flow

If you’re creating more than one consecutive posts, you can now create a new post from the editor as part of the publishing flow.

11.2.0

Features

  • Search Block: Add color support to search button. (32416)
  • Search Block: Add border color support. (31783)
  • Pullquote: Add border and color support. (30951)

Enhancements

  • Post Editor
    • Add a new page/post button on publish panel. (33276)
  • Widgets Editor
    • 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. inserter: Clarify that the button toggles the inserter. (33561)
    • Update widget editor help links to point to the new support article. (33482)
  • Components
    • Spacer: Change props override order, split types. (33555)
    • Elevation: Reduced motion styles, updated documentation and README. (33551)
    • components: Add unit values utils. (33514)
    • components: Add isValueNumeric util. (33206)
    • [Components]: Add SegmentedControl. (31937)
    • Components: Promote VisuallyHidden from ui into full components (#31244). (31902)
  • 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)
    • Inserter: In text label mode, use “Close” label when inserter is open. (33534)
  • Data
    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Pass query argument to data selector shortcuts. (33689)

Bug Fixes

  • Block Library
    • 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.: Allow authors to select images uploaded by other users. (33567)
    • Template Part: Avoid button layout shift. (33362)
    • Remove instagram reference from embed block’s description. (33519)
  • Block Editor
    • Fixed that the block is selected instead of the title when using the select all shortcut. (33621)
  • Post Editor
    • Most Used Terms: Avoid 403 error for non-administrators. (33569)
    • Editor: Set ‘hide_empty’ for the most used terms query. (33457)
    • HierarchicalTermSelector: Use TextControl component. (33545)
    • PWA manifest: icon: Fix error when adminadmin (and super admin) bar is gone. (33702)
  • Widgets Editor
    • Fix 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/theme incompatibility, call onChangeSectionExpanded conditionally. (33618)
  • Components
    • Fix: Native UnitControl to handle single unit configuration. (33641)
    • NumberControl: Allow empty values. (33485)
    • BoxControl: Prevent 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. style values. (33444)
    • FocalPointPicker: Check if value is NaN. (33637)
    • UnitControl: Set correct unit when units has one option. (33634)
    • components: Use useCx to fix 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. support. (33301)
    • Card: Add missing box-sizing CSSCSS Cascading Style Sheets. rules. (33511)
    • CardBody: Change default value of isScrollable to false. (33490)
    • ItemGroup: Fix padding, split types, rename boolean props. (33553)
  • Themes
    • 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.: Fix broken 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 WP_Theme_JSON_Resolver. (33624)
  • Site Editor
    • Site editor: Check template resolution. (33527)
    • FSE: Fix content height. (33698)
  • Media
    • Format Library: Remove style from inline image if width not set. (32516)

Performance

  • Drag and drop
    • Set passive listener option for use popover scroll to avoid affecting scrolling performance. (33478)
    • Drag items via transform property to avoid layout and re-paints. (33395)

Experiments

  • Full Site Editing
    • Query Pagination: Update the arrows on the Next and Prev pagination blocks. (33626)
  • Block Library
    • Add flex layout support to the block editor. (33359)

Tools

  • Testing
    • E2E: Navigation wait for links before counting them. (33704)
    • Automation: Track Gutenberg performance metrics over time. (33694)
    • Re-enable “Save flow should work as expected” end-to-end test. (33548)
    • Skip some widgets editing related tests. (33547)
    • Enable the reusable blocks skipped test. (33510)
    • Skip end-to-end tests. (33503)
    • Tests: Run Prettier after regenerating test fixture. (33502)
    • Fix screenshots not being captured when snapshots failed. (33448)
    • Add coverage folder to .gitignore. (33413)
    • Automated Testing: Disable remote patterns in tests. (33160)
    • Improve function widgets test. (33489)
    • Make the performance CI job more stable. (33710)
    • Update button block corner radius test to px. (33562)
    • Add unsupported block title translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. test. (33340)
    • Re-enable skipped widgets end-to-end test. (33449)
  • Build Tooling
    • Update sass version to 1.35.2 with fixes. (33433)
    • Improve Feature mapping in automatically generated changelog. (33625)
    • Add depth to git fetch in npm publishing. (33595)
    • Release docs: Add process for creating a point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. of the Plugin. (33546)
    • Docs: Run Prettier after updating 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. in documentation. (33498)
    • Publish android artifacts with publish to s3 gradle plugin. (33441)
    • Build: Split configuration into two parts – blocks and packages. (33293)
    • Automate grouping of release Changelog PRs by feature. (33229)
    • Fix dependency extraction webpack v5 deprecation. (33090)
    • Scripts: Update eslint-plugin-markdown version. (33432)
    • Replace CRLF with LF when generating unminified assets. (33509)

Documentation

  • Add missing space in documentation. (33690)
  • Added common steps of plugin translation. (23535)
  • Packages: Ensure changelog entries are attributed to the correct release. (33590)
  • Add i18n filters to documentation table of contents. (33556)
  • Update the create a block theme how-to guide. (33382)
  • Block API: Improve how blocks assets are versioned. (33075)
  • Update the tested up to version in the readme file. (33760)
  • Correct {% end%} 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.) – missing a space. (33189)
  • Use tabs instead of spaces in block transform doc example. (33549)
  • Fix flaky widgets end-to-end tests by waiting for the snackbar correctly. (33317)
  • Scripts: Add changlog entry for module update. (33473)
  • Create block: Update “Tested up to” in readme.txt. (33493)

Code Quality

  • Block Library
    • Fix optional params in page list rendering. (33639)
  • Block Editor
    • Block editor: Use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. events for shortcuts (portal bubbles & contextual). (32323)
    • Block editor: Remove focus stopPropagation from appender. (32003)
    • Block editor: iframe: Incorporate writing flow. (33497)
    • Escape key sanity (avoid event.stopPropagation). (33630)
    • Writing flow: select all: Remove early return for post title. (33699)
    • Remove event.stopPropagation for past WritingFlow/ObserveTyping compatibility. (33632)
  • Post Editor
    • Editor: Refactor Post Author component. (33695)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.28.48s37.89ms
Gutenberg 11.18.54s38.17ms
WordPress 5.88.43s39.71ms

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

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

Kerry Liu 4:26 am on July 21, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.1.0? (21 July)

Two weeks have passed since the last 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/ release, which means a new version is available! Gutenberg 11.1 adds the ability to edit a 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. border easily, enables drag and drop support for the List View component, and includes many 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 centered around the Widgets Editor and Block Library.

Block supports: border

Take an early look at custom block borders! When borders are enabled in a theme.json file, and a block declares that it supports it with the block supports 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., a new block panel is available that lets us change the border radius, width, style, color, and border units.

Set and style custom block borders

List View drag and drop

Intuitively move and reorder blocks using drag and drop in the List View.

Use the persistent list view to reorder blocks

11.1.0

Enhancements

  • Adminadmin (and super admin) panel available as PWA. (33102, 33310)
  • Block Breadcrumbs: Small chevron icon for breadcrumb separators. (33042)
  • Block Library:
    • Columns Block:
      • Add stack on mobile setting to allow for columns without mobile breakpoints. (31816)
      • Add the percent unit to the default units in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (33468)
    • Latest posts: Remove grey color for dark themes. (33325)
    • List Block: Add link color control to list block. (33185)
    • Post Terms Block: Add a “separator” attribute to post-terms block. (32812)
    • RSS Block: Update block styles. (33294)
    • Tag Cloud Block:
      • Add ability to change number of tags shown. (32201)
      • Remove editor style so editor matches frontend. (33289)
  • Design Tools, Border:
    • Add support for custom border units. (33315)
    • Update border support UIUI User interface. (31585)
    • Set border style none when border width zero. (32080)
  • Link Editing: Add Unlink button to LinkControl popover. (32541)
  • List View: Enable drag and drop in List View. (33320)
  • 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: Adds auxiliary class names for editor styles. (33388)
  • General UI:
    • Block Settings Menu: Don’t render ‘Move to’ if there is only one block. (33158)
    • Disable ‘Post Publish’ button if saving non-post entities. (33140)
    • Preferences: Polish labels and consolidate options in preferences. (33133)

New APIs

  • 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/.: Block editor settings endpoint. (33128)
  • UI Components: Add a SearchControl component and reuse across the UI. (32935)

Performance

  • Improve List View performance. (33320)
  • Pattern Directory: Caching updates. (33052)

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)

  • Improve high contrast mode rendering of icon buttons. (33062)

Bug Fixes

  • Block Breadcrumbs: Fix breadcrumbs htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure and ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings. (33159)
  • Block Editor:
    • Move layout styles to document head (instead of rendering inline). (32083)
    • Warn only in edit implementation when using useBlockProps. (33380)
    • 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.: Remove reset styles. (33204)
  • Block Library:
    • Buttons Block: Remove green background color in button preview. (33116)
    • Embed Block: Include missing attributes when upgrading embed block. (33235)
    • Image Block:
      • Improve “can switch to cover” check. (33095)
      • Fix replace link control styling. (33326)
    • 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:
      • Prevent entering 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. values in the Query Loop block configuration. (33285)
      • Update getTermsInfo() to workaround parsing issue for translatable strings. (33341)
    • Search Block:
      • Fix search block button position dropdown accessibility/UXUX User experience issues. (33376)
      • Update search block to handle per corner border radii. (33023)
    • Site Title: Decode entities in site title. (33323)
    • Home Link: Remove padding. (33461)
    • Post Except: Fix excerpt_more 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. conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. and remove wordCount attribute. (33366)
  • Design Tools:
    • Color: Prevent color panel from showing as empty. (33369)
    • Duotone:
      • Avoid rendering duplicate stylesheet and SVG. (33233)
      • Update conditions to hide duotone panel. (33295)
    • 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.
      • Allow themes to provide empty values for color.duotone and spacing.units. (33280)
      • Specify what settings can be part of settings.layout. (33303)
  • Rich text:
    • Fix format deregistration. (31518)
    • Autocomplete: Reset state for empty text. (33450)
    • Run input rules after composition end. (33416)
  • Site Editor: Close navigation 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. when all posts clicked. (33393)
  • Slash Inserter: Fix slash command focus style. (33084)
  • Widgets Editor:
    • Fix moving inner blocks in the Widgets 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.. (33243)
    • Fix inserter size on Widgets Editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. (33118)
    • Merge conflicting wp.editor objects into a single, non-conflicting module. (33228)
    • Retrieve latest widgets before loading sidebars. (32997)
  • Writing flow:
    • Allow select all from empty selection. (33446)
    • Attempt to fix preview end-to-end failure. (33467)
  • Components:
    • Suggestion List: Check if a node exists to scroll into view. (33419)
    • Navigation component: Fix item handling onClick twice. (33286)
  • Editor: Extract snackbars into a separate component. (33355)

Experiments

  • Component System:
    • Promote g2 Popover as Flyout. (32197)
    • Add useControlledValue. (33039)
    • Add normalizeArrowKey. (33208)
    • Add mergeEventHandlers. (33205)
    • Add useCx. (33172)
    • Add useLatestRef hook. (33137)
    • Remove @emotion/css from Divider. (33054)
  • Navigation Block:
    • Add Color Options for Submenus. (31149)
    • Change Navigation block markup on front end only. (30551)
    • Improve handling of open overlay. (32886)
    • Menu item placeholder inheritance. (32512)
    • Pass block attributes with rendering with location. (33043)
    • Refactor of navigation block rendering using location attribute. (33244)
  • Global Styles:
    • Cover against non existing styles. (33127)
    • Missing link color on style properties to css var mapping. (33150)
    • Preset variables not being user on the site editor. (33149)

Documentation

  • Admin PWA: Make readme private. (33216)
  • Handbook:
    • Block API:
      • Apply enhancements included in WordPress 5.8. (33252)
      • Clarify the type of apiVersion in block metadata. (33249)
      • Fixes a typo in the documentation for block supports. (33247)
    • Block Editor API: Changes to support multiple admin screens in WP 5.8. (33262)
    • Custom Block Editor: Fixed bad image syntax and bold text. (32897)
    • Fix API documentation for data reference guides. (33384)
    • 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 Release: Update Gutenberg release documentation to clarify release post workflow. (33328)
    • theme.json:
      • Add examples and highlight backward compatibility. (33421)
      • Update theme.json documentation for WordPress 5.8. (33131)
      • Fix codetabs syntax in theme.json documentation. (33417)
    • Use markdown headings instead of links for API declarations. (33381)
  • Update documentation for link color in WordPress 5.8. (33162)
  • Packages:
    • Add PanelBody for InspectorControls. (33227)
    • Correct wrong setState call. (32808)
    • Remove withState HOC references. (33173, 33222, 33259)

Code Quality

  • Avoid calling gutenberg_ functions within code shipped through WordPress Core. (33331)
  • Block Editor:
    • Refactor the user autocompleter to avoid apiFetch and rely on the data module. (33028)
    • Warn when useBlockProps hook used with a wrong Block API version. (33274)
  • Block Library:
    • Image Block: Fix uncaught error. (24334)
    • Latest Posts Block: Refactor to drop apiFetch usage in favor of using the data module. (33063)
    • Template Part Block: Remove unnecessary function exists check on wp_filter_content_tags. (33182)
  • Components:
    • BlockNavigation: Restructure the BlockNavigation component. (31892)
    • Box Control: Rename VerticalHorizontalInputControls to AxialInputControls. (33016)
    • GradientPicker: Stabilises GradientPicker and CustomGradientPicker components. (31440)
    • Toolbar: Enforce isAlternate on ToolbarDropdownMenu. (33129)
    • ZStack: Remove @emotion/css from ZStack. (33053)
  • Packages: Hoist dependencies for WordPress packages. (33387)
  • Plugin: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Add basic Site Title block coverage. (32868)
    • Add some functionality to createUser and deleteUser. (33067)
    • Enable previously skipped widgets tests. (33121)
    • Skipping more end-to-end tests. (33353)
    • Skip unstable end-to-end tests. (33352)
    • Switch to new puppeteer APIs for emulating conditions. (33410)
    • Update end-to-end tests to use new puppeteer drag and drop api. (33386)
  • Dependencies:
    • Update CopyWebpackPlugin to v6. (33220)
    • Upgrade Husky to 7.0.0 and git ignorance improved. (33183)
    • Upgrade Puppeteer to 10.1. (33327)
    • Upgrade Storybook to v6.3. (33219)
  • NPM Packages: Introduce release types to npm publishing script. (33329)
  • Plugin: Introduce tools folder with configuration files. (33281)
  • Workflows:
    • Release Workflow: Remove “experimental” status from WP 5.8 stable items. (33214)
    • Re-enable manually triggered workflows on forks. (32821)
    • Use NPM caching built into action/setup-node. (33190)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.16.38s26.12ms
Gutenberg 11.06.06s29.55ms
WordPress 5.78.52s36.26ms

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

Thanks to @javiarce for creating the release post assets, @cbringmann for proofreading, and @priethor, @youknowriad, and @get_dave for guiding me through this release!

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

David Smith 6:45 am on July 9, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.0.0? (9 July)

Two weeks have passed since the last 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/ release, which means the time is now upon us for Gutenberg version 11.0.0 (released 7th July).

With efforts still concentrated on the WordPress 5.8 release, this version of the Gutenberg Plugin is heavily focused on backports 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.

That being said however, it is not without its highlights! Gutenberg 11.0 introduces:

And of course, this release also includes a plethora of updates and fixes for the Widgets editors.

Editing overlay for Template Parts and Reusable blocks

Gutenberg 11.0 improves the user experience when interacting with Reusable blocks and Template parts via the addition of a new “clickthrough” behaviour which requires the block to be actively selected before child blocks can be interacted with.

The new editing overlay and interaction – shown here on a reusable 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..

When the block is not selected, hovering the block results in a blue overlay, whilst clicking anywhere inside the block will act to select the block itself, preventing its children from being selected before the parent.

This mechanic aims to address feedback from users who were surprised at the lack of friction when editing these reusable symbols, which resulted in a frustrating experience.

The new workflow is an improvement that streamlines the experience of working with these powerful blocks.

Support for CSSCSS Cascading Style Sheets. shorthand properties 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. and block attributes

Theme JSON is becoming a powerful way of defining reusable CSS rules across Themes. As usage of this feature grows, it’s important to support common ways of setting style properties.

To this end this release introduces full support for CSS shorthand (eg: margin: 0) and longhand (eg: margin-left: 0)  properties.

For example, the following is an excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. from an example theme.json file which adds unique padding and border values for the Button block:

{
	"styles": {
		"blocks": {
			"core/button": {
				"spacing": {
					"padding": {
						"top": "20px",
						"right": "40px",
						"bottom": "20px",
						"left": "40px"
					}
				},
				"border": {
					"topLeft": "1em",
					"bottomRight": "60px"
				},
			},
        },
    },
}

Aaron Robertshaw has a full working example of custom CSS units in his theme.json gist.

This feature also extends to block attributes which allows for improved UIs to be developed to accommodate properties such as border-radius which can have both unique or uniform values set for each side (as shown in the video below).

CSS short/long-hand properties in action with border-radius.

11.0.0

Enhancements

  • Template Parts & Reusable Blocks: Add editing overlay. (31109)
  • General UIUI User interface: Improve UI/UXUX User experience for block manager search. (32922)
  • Widgets editor:
    • Display shortcuts for navigating regions. (32757)
    • Improve insertion point and drag-n-drop in the widgets screen. (32953)
    • Set 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. form to display only when not hidden. (33015)
    • Stretch Widgets editor layout to full height. (32905)
    • Add ability for Legacy custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. widget to transform into custom HTML block. (32862)
    • Remove the widget switcher block toolbar button for the Legacy Widget. (32733)
    • Wire handle_legacy_widget_preview_iframe to admin_init_hook. (32854)
    • Add to WidgetAreasBlockEditorProvider. (33166)
    • Replace “technical” error notice with a user-friendly version. (33165)
    • Replace legacy widget icon with its new version. (33041)
  • Block Library:
    • Media Text block: allow drag and drop media replacement for Media & Text. (29710)
    • Categories block: Add a label for screen readers. (33060)
    • Post Template Block: Add post-classes in the 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. for Post Template block. (30497)
  • Global Styles and Templates:
    • Allow left/right/center alignments when a layout is defined. (32810)
    • Allow longhand and shorthand properties in theme.json and block attributes. (31641)
    • Add filters to get_block_templates functions. (31806)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data:
    • Allow making context-specific requests using the data module. (32961)
    • Make apiFetch requests abortable via AbortController in @wordpress/api-fetch. (32530)

New APIs

  • Add an APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to define the default template used for the template mode. (32771)

Bug Fixes

  • Widgets Editor:
    • Adjust widget form margins in the new Widgets Editor. (33040)
    • Adjust Legacy Widget form styles to match editor. (32974)
    • Fix creating and editing non-multi widgets. (32978)
    • Fix wide widget styles to allow floated contents. (32976)
    • Fix to allow adding the same image twice in Widgets Editor. (32951)
    • Fix Legacy Widget edit style bleed. (32871)
    • Fix flaky widgets-related end-to-end tests. (33066)
    • Fix widgets background when loading theme styles. (32683)
    • Fix widget preview not working if widget registered via an instance. (32781)
    • Don’t display adminadmin (and super admin) notices on the Widgets Editor. (32877)
    • Remove classic block in Widgets Editor. (32800)
    • Disable “FSE” blocks in Widgets Editor. (32761)
    • Align widget 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. button. (32738)
    • Fix move to widget area checkmark. (33213)
    • Fix Widget Block: widget_id is undefined when a widget is placed. (33152)
    • Reset z-index on focused widget form. (33122)
    • Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. (33200)
    • Fix legacy widget height overflow. (33191)
    • Fix pasting blocks by setting html block as freeform content handler. (33164)
    • Fix slash inserter for widgets screen. (33161)
    • Add width: 100% to components-base-control inside wp-block-legacy-widget. (33141)
    • Fix error message – bail out if get_current_screen() returns null. (33261)
    • 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.:
      • Fix block toolbar deselection when clicking scrollbar. ([32762]
      • Avoid adding default block to empty widget areas in customizer. (32979)
        (#32762))
      • Fix apparent overflow in Customizer caused by widgets editor. (32749)
      • Fix scroll jitter in Customize Widgets. (32479)
  • Block Library
    • [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.] Button block: Add deprecation for style.border.radius number. (33117)
    • Query loop:
      • Select first Query Loop found from pattern selection. (32737)
      • Fix race condition for making Post blocks inside uneditable. (33037)
      • Fix full width children from scrolling horizontally only in the editor. (32892)
      • Set default block variations not to inherit from global query. (33163)
    • Group block: Avoid rendering the layout configuration twice. (33045)
    • Button block:
      • Use border support provided styles and classes. (33017)
      • Adding buttons should respect the preferred style. (31089)
    • Categories block:
      • Fix broken experience for lower privileged users when fetching Categories . (32994)
      • Fix crash when trying to access categories on insertion. (32989)
    • Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. (32983)
    • Archives block: add custom classes to archive dropdown. (32971)
    • Post terms block: Fix broken experience for lower privileged users when fetching Terms. (32947)
    • Site Title and Site Tagline blocks: readonly view when the user has no the right permissions. (32817)
    • Image block:
      • Fix block validation errors when clearing height/width. (32524)
      • Correctly set image size slug. (32364)
    • Site Logo block: fix broken experience for lower privileged users via permissions handling. (32919)
    • Site Logo block: Update Site Logo block UI and option syncing. (33179)
    • Show fewer warnings when blocks try to render themselves. (33032)
  • Block editor:
    • Fix switcher focus style. (33031)
    • Fix drag and drop indicator above first block and RTL drop indicators. (33024)
    • Fix glitchy block focus style when multi selecting blocks. (32927)
    • Fix collapsing appender when paragraph disabled. (32894)
    • Fix unintended 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. search request in <LinkControl> when showSuggestions is false. (32857)
    • Ensure only valid URLs or anchors within the text are automatically created as links. (32663)
    • Fix drag and drop indices when a block list contains a style element. (32776)
    • Consistent border with focus styles for block appender. (33022)
    • Improve scrolling experience in Safari (32824)
    • Avoid flash of background color when scrolling in Safari. (32747)
    • Refactor appender margin. (33088)
    • Block Inserter: Prevent page scroll when searching a block. (33012)
  • Components:
    • useNavigateRegions: Don’t remove click event if there’s no element. (32816)
    • Stop modifying the parent context and correctly memoize it. (32745)
    • Clear event listeners on unmount in Tooltip component. (32729)
    • Allow decimals in spacing controls. (32692)
  • CSS and styling:
    • Remove “is-dark-theme” rules from mixins. (33058)
    • Set explicit z-index on interface body to ensure it’s pinned under interface 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.. (32732)
    • Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. (32869)
  • Template editor:
    • Fix: Template editor header area is difficult to navigate with screenreaders. (32938)
    • Do not allow users to create templates with blank titles. (32809)
    • TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. (32744)
  • Global styles:
    • Fix a regression where custom-units are forced as an array. (32898)
    • Allow custom properties to merge. (31840)
  • Editor
    • Fix “Select all” behavior in the editor. (33167)
    • Prepublish Panel: Disable the Publish and Cancel buttons while saving. (32889)
    • Revert “Prepublish Panel: Disable the Publish and Cancel buttons while saving”. (33113)

WordPress Core compatibility

  • Block Library: Improve view script integration to account for WordPress Core. (32977)
  • Auto-enable the template editor for themes with theme.json only. (32858)
  • Unify handling for block view scripts. (32814)

Documentation

  • Handbook:
    • Update ESnext code in the block toolbar documentation. (32422)
    • Fix “Gutenberg” typo in dynamic blocks tutorial. (33013)
    • Polish the Gutenberg release docs, performance audit section. (32770)
    • Update 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. in Widget Block Editor documentation. (32759)
    • Block Editor and Block API:
      • Add link color supports to Block API documentation. (32936)
      • Unify Block Editor readme language and example. (31850)
    • Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. (32921)
    • Testing: Update testing overview documentation. (32829)
  • Components:
    • ServerSideRender: Update documentation for placeholder props. (33030)
    • Add ‘area’ key to function doc for gutenberg_get_block_templates. (32746)
  • Widgets: Add technical implementation details for Widgets Customizer. (33026)

Code Quality

  • Block Library:
    • Query Loop: use plain div for wrapper element in patterns. (32867)
    • Post Template block: remove gutenberg domain from Post Template block. (32804)
    • Ensure there is no direct import from core/editor store. (32866)
    • Improve block categories by moving several blocks from Design to Theme. (32568)
  • Typings:
    • Begin adding types, starting with redus-store/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./actions. (32855)
    • Type promise-middleware. (32967)
    • Add types to redux-store/metadata/selectors. (32965)
    • Add types to redux-store metadata reducer. (32942)
    • Redux routine: Add types. (21313)
  • Card component refactor:
    • Remove the g2 implementation of Card. (32764)
    • Update Card component Storybook story. (32763)
    • Update components provider story. (32743)
    • Update to g2 implementation. (32566)
  • Components:
    • Remove duplicated space utilities. (32852)
    • Unit control Utils: Update JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. documentation and add basic test coverage. (32774)
    • Allow for non-polymorphic components. (32796)
  • Editors & Interface:
    • Update pre-publish setting copy. (32874)
    • Update FullscreenMode from class components to functional components. (32925)
    • Remove @wordpress/editor as a dependency from @wordpress/block-library. (32801)
  • Testing:
    • Iframed editor: Add Masonry integration end-to-end test. (33008)
    • Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. (32797)
    • Fix broken the post-template-editor test. (32904)
  • Linting:
    • Promote lint rule to error when validating store string literals. (32537)
    • Cleanup PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Codesniffer warnings and enable fail. (26516)
  • Data: Handle context state updates in core-data reducer on edits. (32991)
  • APIs: Remove deprecated APIs that are no longer supported in version 11.0. (33258)

Tools

  • Testing:
    • Improve image caret e2e-test. (32832)
    • Add getCurrentUser() to e2e test utils: , and use it for user switching. (33050)
    • Fix WP editor metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. e2e test. (32915)
    • Fix failing PHPUnit test caused by changes in WP core. (32888)
  • CSS & Styling:
    • Restrict imports of @emotion/css. (33051)
    • @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. (32834)
    • Upgrade to Emotion 11. (32930)
  • Linting:
    • Fix eslint-import resolver with extraneous dependencies. (32906)
    • Scripts: Update lint-md-docs script to use ignore-path. (32633)
  • Workflows:
    • Recursively clear node modules when building for ci. (32856)
    • Allow point releases after a new RC is out. (32560)

Performance

  • Add in memory cache for rich link previews data. (32741)

Experiments

  • Navigation Block and Editor:
    • Update the function name and correct the comment. (32918)
    • Correct the case of navigation __unstableLocation. (32783
    • Navigation block: Add an unstable location attribute. (32491)
    • Avoid double encoding of URLs in Navigation Link block. (32840)
  • Site Editor:
    • Fix logic error on site editor useSetting. (32793)
    • Fix oEmbeds not working in block template parts. (32331)

Performance Benchmark

Due to an ongoing issue with the benchmark tests details on the performance of Gutenberg 11.0 are currently delayed. They will be published here as soon as they become available.

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.04.82s29.82ms
Gutenberg 10.94.69s29.54ms
WordPress 5.75.51s29.79ms

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

Particular thanks to @bernhard-reiter, @priethor and @ntsekouras for guiding me through this release, and also to @hellofromtonya for a super quick last minute bug fix!

Updated on 2021-07-09: Added performance benchmark.

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

George Mamadashvili 4:01 pm on June 24, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.9? (23 June)

Two weeks have passed since the last 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/ release, which means the time has come for a new version. Gutenberg 10.9 introduces rich URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org previews for Link Control, the ability to expand/collapse nested blocks in List View, and a new name for the 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. 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. — Post Template. The release also includes enhancements 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 for Widgets Editor.

Rich URL Previews

When clicking on links in the editor, it’s now possible to see a rich preview of a URL including site title, meta description, icon and image. This is the first feature to take advantage of the new `url-details` endpoint, the enhanced form of which was shipped in 10.8. Currently, rich previews are only enabled for links which point to external URLs and then only for rich text blocks that utilize the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. link format library. In the near future however, we expect to extend this to provide previews of internal URLs and to roll out support to more areas of the software.

List View Enhancements

This release brings a new feature to the List View. It’s now possible to expand and collapse nested blocks, which helps users navigate complex block structures. For example, users can collapse the content in sibling columns to concentrate on that hierarchy level and expand a single column to focus on it.

A new home for the Block Manager

The Block Manager has been moved from the Tools menu, and is now integrated with the new Preferences modal under the Blocks section, consolidating all editor-related preferences in the same modal.

Block Manager preferences

Updated template creation modal

This modal has been polished, including an improved welcome guide, to make creating new templates a breeze.

Renamed Query and Query Loop blocks

With the Query and Query Loop blocks becoming stable and coming to WordPress 5.8, they have been renamed to increase clarity about their functionality. The Query Loop block has been renamed to Post Template to better represent its purpose within Query, whereas the Query block label now refers to it as Query Loop.

10.9

Enhancements

  • Components:
    • UnitControl: Reduce code duplication for defined units. (32731)
    • BoxControl: Add support for grouped directions (vertical and horizontal controls). (32610)
    • Notice: Added onDismiss option in createInfoNotice. (32338)
  • Block Library:
    • Latest Posts: Limit latest-post authors dropdown to users with published posts. (32662)
    • Calendar: Add loading and empty state. (31504)
    • Query Loop: Add helpful text to the block. (32694)
    • Query Loop: Rename QueryLoop to PostTemplate and change Query label. (32514)
    • Spacer: Try an alternate min-height fix. (32543)
    • Heading: Show all heading levels in toolbar group. (32483)
    • Post Terms: Add a CSSCSS Cascading Style Sheets. class to identify the 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.. (31832)
    • 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.: Move block to @wordpress/widgets. (32501)
  • Block Editor:
    • Enhance link control UIUI User interface with rich URL previews. (31464)
    • List View: Allow expanding and collapsing of nested blocks. (32117)
    • Editor Breadcrumb: Add a rootLabelText prop. (32528)
    • Don’t hardcode CSS units. (32482)
    • Refactor LinkControl component to support ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 17. (32552)
    • Remove snapshots from tests for LinkControl. (32592)
  • Block Support:
    • Update border support to allow non-pixel units. (31483)
  • Icons:
    • Add new icons. (32371)
    • Tweak people icon. (32354)
    • Expose trendingDown and trendindUp icons. (32124)
  • Template Editing Mode:
    • Update welcome guide language for the template editor. (32639)
    • Translate delete template confirmation message. (32647)
    • Disable renaming templates named by core; Display descriptions. (32636)
    • Update the template creation modal. (32427)
  • Post Editor:
    • Use the post type singular_name as the root Block Breadcrumb label. (32609)
    • Absorb block manager within blocks preferences. (32166)
  • Widget Editor:
    • Hide some settings from the “Options” menu on small screens. (32690)
    • Add Breadcrumbs Block. (32498)
    • Use button block appender in widget areas. (32580)
    • Add show block bread crumbs feature toggle to more menu. (32569)
    • Unhide the classic menu widget. (32431)

Bug Fixes

  • Block Library:
    • Image Block: Fix cover block exists check. (32666)
    • Embed: Fix embed to paragraph transform when caption has rich text formats. (32355)
    • Columns: Fix deprecation caused when adding a column. (32378)
    • Site Logo: Fix site-logo not getting removed on remove_theme_mod. (32370)
    • Social: Try to fix color inheritance for social links. (32625)
    • Social: Correctly position the link popover when List View is open. (32525)
    • Code: Try an experimentalSelector. (31742)
  • Block Editor:
    • RichText: Fix loss of list content when switching list types. (32432)
    • useBlockDropZone: Fix horizontal indicator. (32589)
    • Inserter: Fix insertion point displaying when there are no inserter items. (32576)
    • Drop indicator: Show around dragged block and show above selected block for file drop. (31896)
    • Fix vertical scroll in horizontal toolbar. (32655)
    • Fix block multi selection in nested blocks. (32536)
    • Fix block toolbar overlap with 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.. (32424)
  • Blocks:
    • Avoid keeping the same client ID when transforming blocks. (32453)
    • Allow themes to add inline styles for all blocks when using lazy styles loading. (32275)
  • Components:
    • RadioControl: Add hideLabelFromVision prop. (32414)
    • DatePicker: Fix crash when navigating between months. (31751)
    • Autocomplete: Prevent setting state for unmounted component. (32654)
  • Editor:
    • Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. (32658)
  • Widget Editor:
    • Don’t delete a widget if it is moved to a different area. (32608)
    • Fix button spacing in header. (32585)
    • Decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities for name and description props. (32503)
    • Fix dirty state after adding new block. (32573)
    • Don’t add undo levels when editing records on save. (32572)
    • Save deleted and restored widgets. (32534)
    • Don’t show widgets in menu without theme support. (32420)
    • Fix inspector opening on click outside widget area. (32450)
    • Legacy Widget: Don’t display “No preview” when widget has image tags. (32605)
  • Post Editor:
    • Prevent locking users in saving state when saving metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes fails. (32485)
    • Edit Post: Add metaBoxUpdatesFailure action. (32623)
  • Full Site Editing
    • Only add skip-link for block themes & templates on the frontend. (32451)
  • Storybook:
    • Fix misc warnings. (32401)
  • Data:
    • useSelect: Silently error (for block zombie children). (32088)

Performance

  • Block Editor: Remove is-typing root class. (32567)
  • Header Toolbar: UseCallback to avoid unnecessary rerenders. (32406)

Experiments

  • Component System:
    • Promote Scrollable component to a full export. (32446)
    • Promote Surface component to a full export. (32439)
  • Global Styles:
    • Allow presets to provide an empty set of values. (32679)
    • Allow theme authors hook into the preset classes generated by global styles. (32627)
    • Update WP_Theme_JSON 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. so presets are always keyed by origin. (32622)
    • Make syntax errors in theme.json visible to users. (32404)
    • Enqueue global styles in editor only once. (32377)
    • Enqueue core and theme colors by using separate structures per origin. (32358)
    • Do not migrate the old typography support if core already did it. (32487)
    • Generate classes and custom properties for global styles in the same way the post editor does. (32766)
  • Full Site Editing:
    • Template resolution for new posts and pages. (32442)
    • Monopolize navigation in Site Editor. (31810)
    • Prevent duplicate queries. (32700)
    • Split theme.css styles loading. (31239)
  • Navigation Editor:
    • Alternative fix: Set persisted menu id when no menus or missing menu. (32313)

Documentation

  • Handbook:
    • Update references to register_block_type_from_metadata. (32582)
    • Fix duotone support documentation. (32440)
    • Detail the Gutenberg release post process. (32429)
    • Update Legacy Widget documentation with new info on show_instance_in_rest feature. (32726)

Code Quality

  • Components:
    • Remove duplicated compose dependencies. (32709)
    • Sort entries in packages/components/tsconfig.json. (32675)
    • Update the popover component to rely on useDialog. (27675)
    • Card: Add types. (32561)
    • Card: Refactor subcomponents folder structure. (32557)
  • Compose:
    • Add types to useDialog and useFocusOnMount. (32676)
    • Add types to withSafeTimeout. (32674)
    • Type withState as any. (32326)
  • Block Library:
    • Page List: Avoid generic function names for page list block internal functions. (32736)
    • Latest Comments: Correct the format used for duplicate hook documentation. (32563)
    • Login/out: Update documentation for render_block_core_loginout function. (32158)
  • Block Editor: Remove unused select block function. (32532)
  • Core Data: Fix typos. (32480)
  • Editor: Fix different typos in inline comments, deprecation warnings and variable names. (32474)
  • Linting:
    • Edit Post: Fix no-string-literals warning. (32518)
    • Add ESLint import resolver. (31792)
  • 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:

Tools

  • Workflow:
    • Fix the add milestone githubGitHub GitHub is a website that offers online implementation of git repositories that can 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. (32691)
    • Use a different cache key for the PR automation workflow. (32588)
    • Improvements to NPM package caching across workflows. (32458)
    • Limit when release artifacts are built on forks: Pt. 2. (32494)
  • Build:
    • Load .min.js files even in dev mode, output unminified assets only in prod. (32621)
    • Upgrade husky package to the latest version. (32077)
    • Generate minified .min.js and unminified .js files for GB js entry points when building. (31732)
    • Include Legacy Widget block files in the plugin build. (32803)
  • End to End Tests:
    • Update mentions tests to use toMatchInlineSnapshot. (32727)
    • Add more user auto-completer (mentions) coverage. (32697)
    • Ignore JQMIGRATE (jQuery migrate) deprecation warnings. (32656)
  • Linting:
    • Update linting and formatting for test plugin files. (28033)
    • Update Eslint JSDoc package, introducing JSDoc line alignment check. (25300)
  • wp-env: Bump TT1 Blocks to v0.4.7. (32661)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.94.50s28.93ms
Gutenberg 10.84.91s30.30ms
WordPress 5.75.71s32.09ms

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

Thanks, @priethor, @get_dave, and @mikeschroder for helping with the release post.  Thanks to @youknowriad and @bernhard-reiter for coordinating the release.

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

Sandip Mondal 7:27 pm on June 10, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.8? (9 June)

Two weeks have passed since the last 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/ release, which means the time has come for a new version! Gutenberg 10.8 focuses on stability and performance, while also introducing enhancements to the Template Editor and enables more design tools for blocks, among many other things!

Performance Improvements

This release puts a focus on performance by providing iterative improvements. For instance, Gutenberg now allows passing of __experimentalLayout to a memo’d object so re-renders are not triggered when layout data doesn’t change. Thanks to this, blocks like BlockList don’t need to re-render so often, optimizing the editor performance.

More 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. Design Tools

To extend the design capabilities of blocks, more design tools have been enabled in this release, including support for font-weight for the heading block and support for custom fonts for the List block. As with other design tools, you can easily configure them in your theme.json file. 

Furthermore, it is now possible to add custom margin and padding to the Navigation link block.

Template Editor Enhancements

Gutenberg 10.8 also introduces a couple of enhancements for the Template Editor for a better user experience. Now, the title area in the Template Editor corresponds to the current post title. Also, the appearance of the template details popover has been enhanced with more detailed information and an improved layout. 

These improvements help users understand what post and template are being edited with a more clear and descriptive interface.

10.8

Enhancements

  • Block Editor:
    • Update Modal styling. (31639)
  • Block Library:
    • Archives Block: Show the label for archives block dropdown. (30527)
    • Audio Block: Add an example preview. (32333)
    • File Block: Add an example preview. (32350)
    • Heading Block: Add support for font-weight. (27639)
    • List Block: Add font family to the list block. (27510)
    • Page list block: Add active page classes. (32134)
    • Site Logo: Use option instead of theme-mod. (32229)
  • Components:
    • BoxControl: Add allowReset option. (32345)
      General Interface:
    • Remove opacity animation on canvas. (32266)
  • Design tools:
    • Add Letter-spacing and enable this for site title and site tagline. (31118)
    • Block Supports: Allow skipping spacing support serialization. (31973)
  • Reusable Block:
    • Add Convert to Regular Blocks button to ellipsis Dropdown. (32310)
  • 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/.:
    • Improve parsing and retrieve additional data in REST url-details endpoint. (31763)
  • Template Editing Mode:
    • Don’t display snackbar with the Welcome Guide. (32076)
    • Update the appearance of the template details popover. (32042)
    • Update the title area in the template editor. (32037)
  • Block-based Widgets:
    • 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.:
      • Add preferences menu group label to widgets and customize 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. (32259)
      • Display wide widgets as popovers in Customizer. (31736)
    • Editor:
      • Link to widgets.php instead of themes.php?page=gutenberg-widgets. (32299)

Bug Fixes

  • Block Library:
    • Image Block: Fix image border radius. (32393)
    • List Block: Fix theme.json styles for the core/list block. (32343)
    • Latest Posts: Limit latest posts 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. width to 100%. (32245)
    • Legacy Widget Block:
      • Fix legacy widget block preview 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.. (32300)
      • Fix legacy widget previews. (32260)
    • Search block: Fix vertical alignment of the search button text. (32340)
  • Block Editor:
    • Block Variation Transforms: Make focus style valid CSSCSS Cascading Style Sheets.. (32305)
    • Fixed Random Collapse of Colors Setting Section. (32388)
    • Block Toolbar:
      • Always close the options menu after toggling 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.. (31921)
      • Fix toolbar alignment in widget block editor. (31991)
    • Iframe: Fix embed dimensions with missing wp-embed-responsive class. (32057)
    • Patterns: Fix allowed patterns check. (32376)
  • Block-Based Widgets:
    • Editor:
      • Fix error when saving empty Legacy Widget block. (32359)
      • Assume light theme when editor canvas background color isn’t set. (32477)
    • Customizer:
      • Center the welcome image in the narrow viewport of widgets customizer. (32264)
      • Fix aspect ratio of welcome image. (32302)
      • Fix deselecting block when inspector is opened. (32361)
      • Fix escape key events in customizer closing the editor. (32175)
      • Fix some smaller styling issues and bugs in Widgets Customizer. (32072)
      • Fix creating and replacing legacy widgets in customizer. (32005)
  • Components:
    • SuggestionsList: Try to use a unique “key”. (32344)
    • Update Dropdown’s close-on-blur logic to work inside dialogs. (32133)
  • Editor:
    • Allow non-latin characters in slugs. (32232)
    • Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. (32341)
  • General Interface: Fix overlap of Notices and block toolbar. (32238)
  • Template Editing Mode: Remove metaboxes from template mode. (32315)
  • Fix the layout definition in the template mode. (32425)

Performance

  • Buttons: Move options to constants to avoid unneeded renders. (32356)
  • Experimental Layout: Pass the same object when no data changes. (32380)
  • Navigation: Avoid rerendering when the placeholder does not change. (32357)
  • Update Welcome Guides to use external image URLs. (32026)

Experiments

  • Block Editor:
    • Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. (32063)
  • Component System:
    • Add missing Divider, Heading type reference in tsconfig. (32104)
    • Adds a new ZStack component. (31613)
    • Adds new ItemGroup and Item components. (30097)
    • Add new BaseField Component. (32250)
    • Fix Shortcut polymorphism. (31555)
    • Promotes the Elevation component to a full export. (31614)
  • Global Styles:
    • Bugfix: Generate classes from preset slugs in the same way (server & client). (32352)
    • Fix Logic to enable custom colors, gradients, and font sizes. (32200)
    • Fix incorrect useCustomUnits import. (32248)
    • Group typographic block supports under a typography key. (32252)
    • Letter spacing should also respect skip serialization flag. (32459)
    • Skip typography serialization. (32444)
  • Full Site Editing:
    • Align block hover and select styles across list view, site editor, select mode. (31277)
    • Alignment styles: Centre blocks using grid not margins. (32231)
    • Avoid duplicate skip-links in WP 5.8+. (32346)
    • Remove now-obsolete get_template_hierarchy(). (32116)
    • Templates: Remove now-obsolete gutenberg_get_template_paths(). (32066)
  • Navigation:
    • Block:
      • Fix css bleed from navigation. (32384)
      • Fix collapsing 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. of Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.. (32081)
      • Lock the document from scrolling when the modal is open. (32269)
      • Refactor Navigation block paddings/margins to inherit global styles. (31878)
    • Editor:
      • Allow block attributes passed to block renderer by way of wp_nav_menu. (31911)
      • Hide sidebar when a menu isn’t selected. (32090)
      • Fix the visible widget area toolbar. (32262)
      • Fix block toolbar position after scroll. (32212)
      • Move modal state to ManageLocations component. (32078)
  • Site Editor:
    • Fix broken template part converter modal styles. (32097)
    • Remove title attribute from NavigationItem inside the site-editor. (30744)

Documentation

  • Handbook:
    • Fix broken contributors readme files. (32272)
    • Fix misspelling in the Widgets Block Editor section. (32242)
    • Mark all experimental components in the handbook. (32147)
    • Update the create a block theme tutorial. (31269)
    • Update iOSiOS The operating system used on iPhones and iPads. Simulator device command in 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 documentation. (32383)
  • Packages:
    • Navigation Editor: Augment and improve Nav Editor (and block) documentation. (31891)
    • Components: Fixed documentation for units attribute in Unit Control. (31901)

Code Quality

  • Block Editor:
    • Rich text:
      • Contextual default shortcut removal. (32327)
      • Remove inline display warning. (32013)
    • Colors: Remove __experimentalUseColors hook. (31438)
    • Remove usages of withState from edit-post and editor. (32349)
  • Block Library:
    • List View: Simplify the BlockNavigation component. (31290)
    • Navigation: Simplify htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. selector in nav burger menu. (32303)
    • Remove “class=” wrapper to already wrapped attributes. (29214)
    • Query Block: Remove query context leftovers. (32093)
  • Blocks Package: Make getBlockSupport support any lodash path.. (32322)
  • Block Supports: Avoid a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice when render_block() is called without attributes. (32135)
  • Components:
    • Button: Deprecate isPrimary, isSecondary, isTertiary and isLink props in favour of variant prop. (31713)
    • Combobox: Remove duplicated ComboboxControl component. (32397)
    • Dashicons: Add types to Icon . (32219)
    • Disabled: Add types to Disabled components. (32105)
    • Remove all withNext wrappers. (32205)
    • Rename ViewOwnProps to PolymorphicComponentProps. (32053)
    • Require explicit children prop for all components. (31817)
    • UIUI User interface Context: Delete unused types from context. (32254)
    • UI Popover: Remove unused content property from types definitions. (32049)
  • Compose:
    • Add types to useRefEffect and clipboard hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (31603)
    • Add Types to withGlobalEvents as any. (32290)
    • Add types to useWarnOnChange. (32288)
    • Add types to useViewportMatch. (32287)
    • Add types to useDropZone. (32286)
    • Add types to useDragging. (32285)
    • Add types to useThrottle and typecheck useFocusOutside. (32170)
    • Add types to useKeyboardShortcut. (32168)
    • Add types to useResizeObserver and type checking to useIsomorphicLayoutEffect. (32111)
    • Add types to useFocusReturn. (31949)
    • Add types to usePrevious. (31944)
    • Add types to useReducedMotion and useMediaQuery. (31941)
    • Add types to useMergeRefs. (31939)
    • Add test to useMergeRefs for disabling refs + better documentation. (32044)
    • Add types to useDebounce. (32015)
    • Deprecate withState in favor of useState. (32368)
    • Simplify compose function documentation and point to lodash documentation for it. (32324)
  • Global Styles:
    • Avoid enqueuing global styles twice when running on WordPress 5.8. (32372)
  • Keyboard Shortcuts:
    • Multi select: select all: Restore ref callback. (32318)
  • Linting:
    • Fix eslint warnings in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data package. (32198)
    • Fix eslint warnings in the edit-navigation package. (32196)
    • Fix eslint warnings in the edit-post package. (32195)
    • Fix eslint warnings in the edit-site package. (32156)
    • Fix eslint warnings in the edit-widgets package. (32155)
    • Fix eslint warnings in the editor package. (32153)
    • Fix eslint warnings in the nux package. (32145)
    • Fix eslint warnings in the rich-text package. (32142)
    • Fix eslint warnings in the reusable-blocks package. (32141)
  • Navigation Editor:
    • Fix React warning. (32165)

Tools

  • Babel presets: Prefix build with node command for Windows environments. (#32258). (32329)
  • Workflow:
    • Limit when workflows run on forks. (32114)
    • Only calculate the compressed size on pull requests when necessary. (32161)
    • Performance Tests Workflow:
      • Polish Bash script. (32284)
      • Run suite atop latest stable major WordPress version. (32244)
      • Use latest WP 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". for release tests. (32277)
  • End to End Tests:
    • Fix inserting cover block intermittent failure. (32014)
    • Navigation Editor:
      • Fix failing end-to-end tests. (32043)
      • Skip “Change detection” tests. (32151)
    • Move the Query and PostTitle end-to-end tests out of the experimental directory. (31691)
    • Multi select: Add end-to-end test for gruadual select all. (32304)
    • Remove redundant widget 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. endpoint tests. (32298)
    • Skip tests that are failing with the latest WordPress core. (32228)
  • Eslint: Ignore some eslint rules in react-native folders. (32143)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.85.78s42.03ms
Gutenberg 10.76.75s41.96ms
WordPress 5.76.95s42.81ms

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

Thanks, @ntsekouras for managing the release and @priethor for helping and guiding me with the release post.

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

Héctor Prieto 10:34 pm on May 27, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.7? (26 May)

We are already at the end of May and, after making it through the WordPress 5.8 feature freeze, a new 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/ version is among us! Version 10.7 represents the last Gutenberg release that will be included in the upcoming WordPress 5.8, so efforts have been focused on bringing forward many of the features that will be included in it. Gutenberg 10.7 introduces new features like the persistent List View in the Post Editor, responsive navigation menus, many design tools for blocks, and enhancements to the top toolbar, as well as iterative performance improvements and a lot of 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.

Persistent List View in the Post Editor

Before Gutenberg 10.7, the List View available in the Post Editor was displayed in a popover and would close after focusing somewhere else on the page. Starting with Gutenberg 10.7, the persistent List View previously available in the Site Editor is enabled in the Post Editor as well, providing a 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. that displays a full post 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. tree. This List View also provides some visual cues as it highlights the currently selected block(s), as well as accents in the canvas the corresponding block when hovering over the list entries. Moreover, anchors added to blocks are displayed in the list, providing a comprehensive view of the post hierarchy and structure. All these improvements combined will make navigating complex content much easier!

Responsive Navigation block

This release introduces the first iteration of responsive menus in the Navigation block. By introducing the new “Enable responsive menu” block option, the Navigation block will collapse into a so-called “Hamburger menu” when displayed on smaller screens. This implementation also prioritizes 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) by providing a fully keyboard-navigable menu.

More block design tools

Gutenberg 10.7 continues to bring us new design tools and to support existing ones in blocks.  This includes custom margin block support with configurable sides, supported by blocks like Site Title and Site Tagline.  The Query block had a special focus in this release with new design options in the form of supporting layout and color options along with the Column block, which now supports color and padding for individual columns.

Top toolbar enhancements

The “Top toolbar” mode’s behavior and placement have been refined in this release so that wider screens won’t display the editor bar and the block toolbar together anymore, improving the user experience. Now when enabled, the top toolbar has a fixed position stacked on top of the canvas, below the editor top bar, independent of the browser width. Furthermore, implementers will also benefit from this iteration unifying toolbar APIs under one simple <BlockTools /> component.

Loading patterns from the Pattern Directory

Working towards providing rich collections of block patterns from the inserter, patterns can now be inserted directly from the WordPress.org Pattern Directory, in a similar way blocks can. This integration opens the door to an exciting future full of beautiful patterns as the number of patterns available in the directory grows. If you want to know more, you can stay tuned for Block Pattern Directory updates and check the most recent design iterations for the Pattern Directory.

10.7

Enhancements

  • Block Editor:
    • Standardize block styles cursor on hover. (31188)
    • Support scripts in iframed editors. (31873)
  • Block Library:
    • Normalize theme block toolbars. (31952)
    • Buttons: Use column-gap for styling. (31386)
    • Column: Add color and padding support to individual column block. (31778)
    • Cover: Allow transforming from group block. (30890)
    • Media & Text: Add media width control. (31002)
    • Post Comments: Add basic CSSCSS Cascading Style Sheets. to the block. (30382)
    • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Update read more placeholder text. (30959)
    • 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.: Change wrapper element to figure. (31595)
    • Query:
      • Add layout and color support. (31833)
      • Update bundled patterns to have inherit:False. (31856)
      • Allow term addition from user case-insensitive input. (31301)
    • Site Logo: Add link toggle option. (31162)
    • Site Tagline:
      • Add margin block support. (31809)
      • Expand the site tagline block description. (31426)
    • Site Title:
      • Add additional text formatting options. (31734)
      • Add margin block support. (31728)
    • Social Links: Add some padding to the “click plus to add”. (31927)
  • Components
    • Add Spacer. (31509)
    • Improve display for multiple action buttons in notices. (31799)
    • Polish the switcher for horizontal blocks. (31645)
    • Promote Divider and use readable prop names. (31556)
    • Promote Grid. (31559)
    • Promote View. (31542)
    • Promote VStack and HStack. (31300)
    • UnitControl: Add support for unit step per unit type. (30376)
  • Design tools:
    • Add margin block support with configurable sides. (30608)
    • Add option to disable duotone. (32002)
    • Add reset button to Layout controls. (30828)
    • Add server-side support for margins. (31808)
  • Icons: Update icons. (31533)
  • List View:
    • Display block anchor in List View when set. (31992)
    • Enable persistent List View in the post editor. (31047)
  • Patterns: Load patterns from wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 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.. (28800)
  • Template Editing Mode:
    • Add a welcome guide to the template editor. (31330) (32055)
    • Add a Delete template action. (31678)
  • Word count: Adjust to count numbers as words. (27288)

New APIs

  • Babel Preset Default: Configure @babel/preset-env preset to respect a local Browserslist configuration. (31898)
  • Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType. (32030)
  • Global Styles: Rename and stabilize useEditorFeature as useSetting. (31587)
  • Stacked/unified block toolbar. (31134)
  • Babel Preset Default: Add polyfill for WordPress built from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-js. (31279)

Bug Fixes

  • Block Library:
    • Cover:
      • Remove fixed background when previewed in patterns list. (31640)
      • Show placeholder only if it has no inner blocks. (31402)
    • Gallery:
      • Fix focus caption prop for native. (32029)
      • Fix identical images getting duplicated when moving. (30555)
    • Image:
      • Remove figure margins consistently in image blocks. (31650)
      • Fix cover transform and excessive re-rendering. (32102)
    • Post Content: Apply the_content 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. even if content is empty. (31997)
    • Post Comments Count: Fix attributes declaration. (31976)
    • Post Comment Form:
      • Fix stylesheet dependency. (31528)
      • Fix to allow post comment button to inherit button & global styles automatically. (31338)
    • Post Featured Image:
      • Fix non-interactive placeholder when outside of a post context. (31663)
      • Fix placeholder 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.. (31709)
      • Fix selection scroll into view. (31835)
      • Fix image width for wide aligned Post featured image. (32070)
    • Site Logo:
      • Fix duplicate supports declaration. (31544)
      • Return nothing if logo is not set. (31513)
      • Only request media entity when a site logo has been chosen. (31673)
    • Template Part:
      • Don’t show the currently used template part as an option in the ‘replace’ flow. (31720)
      • Fix template part selection searches to use title/area instead of slug/theme. (31520)
      • Use label and icon per variation when displaying placeholders. (31721)
  • Block Editor:
    • Clear selection on 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element click, fix bottom click redirect. (31385)
    • Fix block ref when multiple useBlockProps hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. are called. (31906)
    • Fix moving animation for nested blocks. (31945)
    • Fix selecting aligned blocks. (31904)
    • Fix scrolling to the inserted block issue in the iFramed block editor. (31448)
    • Prevent rendering self also when the wrapper block matches the inserted block. (31592)
    • Toolbar:
      • Fix showing toolbar when caret enters formatting (and extract as implementation detail for the block editor). (31664)
      • Fix toolbar in device preview. (31600)
  • Design tools:
    • BoxControl:
      • Filter out unit only values when checking values defined. (31779)
      • Fix tooltip display for unlinked box control inputs. (31741)
    • Color picker:
      • Fixes color picker segmented control rendering and scrolling issues. (30994)
      • Fix text. (30039)
    • Duotone:
      • Fix duotone transform not transferring settings between blocks. (31801)
      • Fix duotone padding crash. (31780)
    • Font-family: Fix typo in font-family supports for dynamic blocks. (31974)
    • Spacing Support:
      • Properly hide UIUI User interface for disabled properties. (31726)
      • Fix custom units for margin. (31776)
  • Inserter: Hide patterns tab if no patterns are available. (31687)
  • Patterns:
    • Check for allowed blocks recursively in patterns. (30366)
    • Fix unregister_block_pattern notices. (32025)
  • Post Editor: Fix template name displaying incorrectly. (32035)
  • Server Side Rendering: Re-enable passing post_id query arg (#31786). (31787)
  • Template Editing Mode: Fix wrapper block name for template mode. (31985)
  • Writing flow, multi-selection:
    • Fix caret placing when the target is out of view. (31506)
    • Gradually ‘select all’ layers of nested blocks. (31859)
  • Fix errors caused by commits to WordPress core. (32176) (32183) (32059)
  • Components: Fix the list of package dependencies. (32167)
  • Fix issue with 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. title overlapping block toolbar. (32140)
  • Correctly read rawRequest for frontend ESM. (31917)
  • Fix generation of presets classes per block. (32190)
  • 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. Screen:
    • Fix unsaved changes notification. (31757)
    • Fix call to undefined __experimentalRegisterExperimentalCoreBlocks. (32138)

Performance

  • Block editor styles: Memoize transform. (31553)
  • Block editor async mode: Enable only for blocks out of view. (30995)
  • Improve performance of term search. (31703)
  • Blocks package: Memoize getBlockVariations selector. (32120)

Experiments

  • Block Library: Hide the PostAuthor block behind the Gutenberg experimental flag. (31983)
  • Block-based Widgets:
    • API:
      • Improve get_merged_data API so it requires less knowledge from the consumer. (31552)
    • Customizer:
      • Add ‘more’ menu. (31970)
      • Add undo redo to Widgets Customizer. (31653)
      • Add Welcome messaging. (31968)
      • Clear selected block when focusing on element outside the editor. (31530)
      • Fix removing legacy widget not working in customizer. (31535)
      • Implement mobile responsive block toolbar. (31589)
      • Remove Widgets Customizer experimental flag. (31876)
    • Widgets Editor:
      • Add default notices support. (31578)
      • Add more menu. (31926)
      • Add Welcome Guide. (31925)
      • Remove widget screen empty link in adminadmin (and super admin). (31408)
      • Update toolbar and notice positioning. (31582)
  • Navigation Editor and Block:
    • Add home link block. (30926)
    • API:
      • Add locations to the menu response. (31656)
      • Change default to 100 menu items returned. (21243)
    • Allow space between on page list. (29771)
    • Bring implementations of convert nav menu items to blocks back into sync. (31602)
    • Editor:
      • “Add new pages” use menu entity. (31643)
      • Add padding for navigation screen. (31583)
      • Clear ‘stub’ navigation post edits on save. (31735)
      • Fix menu location assignment. (31594)
      • Fix editor margin. (31493)
      • On mobile viewports, reveal the block inspector when clicking the menu name button. (31220)
      • Update sidebar. (31821)
      • Warn the user about unsaved changes. (31197)
    • Enable justification for burger menu. (31877)
    • Extract Navigation Block data fetching and management to hook(s). (31825)
    • Fix nav block hover z index. (31929)
    • Fix nav placeholder colors and height. (31875)
    • Improve the navigation block setup state / placeholder. (31371)
    • Introduce useMenuEntityProp hook. (31132)
    • Normalize converting nav menu items to blocks between Editor and Block. (31606)
    • Responsive Navigation. (30047)
    • Submenus shouldn’t take space unless they’re actually open. (31881)
  • Global Styles
    • Block Supports: Allow skipping serialization of typography attributes. (30880)
    • Fix condition for global styles on mobile. (31844)
    • Fix global styles settings retrieval for REST. (31534)
    • Make core color classes and custom properties always available. (31669)
    • Remove color.link from valid styles and alphabetize the rest. (31516)
    • Return consolidated global styles in REST Request. (31762)
    • Use elements mechanism for link color instead of a CSS variable. (31524)
    • Use mobile context in settings request & global styles. (31819)
    • Use wp_theme 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. for wp_global_styles cpt. (31436)
    • 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.: Replace hardcoded CSS_UNITS and inherit units from theme.json. (31822)
  • Full Site Editing:
    • Template Loader: Make templates arg required. (31671)
    • Simplify template loader logic. (31604)

Documentation

  • Handbook:
    • Add dedicated Block Styles page under Block API directory. (31055)
    • Add info on how to connect to the WP ENV MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. database. (31975)
    • Capitalize GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ properly in contributors README. (31549)
    • Clarify ‘Applying styles from a stylesheet’ how-to guide. (31824)
    • First pass at the documentation for the Widgets Block Editor. (31577)
    • Fix link to ESNext in callout. (31512)
    • Make the theme.json examples copy-pasteable. (32040)
    • Update Glossary with more FSE terminology. (31525)
  • Packages:
    • Add required “directory” prop to package.json template in packages documentation. (31570)
    • Fix typo: “packages” -> “package”. (32036)
    • Improve packages documentation – document root package json and public API knowledge. (31598)
    • Remove duplicate 1.52.0 changelog entry. (31659)
    • Scripts: Fix the CHANGELOG for @wordpress/scripts package. (31532)
    • Typo in edit-navigation layout translators note. (31541)

Code Quality

  • Block editor:
    • Block popover: Move scroll handling to block tools. (31611)
    • Log an error if styles are loaded through the compatibility layer. (31870)
  • Block Library:
    • Post Comments: Make CSS less specific. (31711)
    • Image/Gallery: Remove use of unstableOnFocus. (31796)
  • Linting:
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher lint issues. (32039)
    • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warning for alignment. (31931)
    • Fix lint issues. (31790)
    • Ignore data-no-store-string-literals rule for native files. (31936)
  • Components:
    • Add ToolbarDropdownMenu to render dropdown menus properly inside toolbars. (31460)
    • Don’t pass down index through context. (31852)
    • Remove color() utility function, use values directly. (31661)
    • Remove config() utility function, use values directly. (31646)
  • Compose:
    • Add types to withInstanceId and corresponding hook. (31341)
    • Add types useConstrainedTabbing. (31548)
    • Add types useAsyncList. (31523)
  • Docgen:
    • Replace assertions for getIntermediateRepresentation unit tests with snapshots. (31547)
    • Split getIntermediateRepresentation unit tests in smaller tests. (31468)
  • Inserter: Mark the inserter slot as unstable. (31417)
  • Multi-select:
    • Use ref callback for focus out, merge native selection hooks. (31618)
    • Use writing flow container for focus. (31572)
  • Rich text:
    • Build in isSelected check for children. (31802)
    • Consolidate applying from props. (31635)
    • Each hook should create its own ref. (31477)
    • Extract implementation-specific undo handling of automatic changes. (31676)
    • Extract internal delete handling. (31637)
    • Extract persistent change marking. (31760)
    • Extract splitValue to separate file. (31803)
    • Extract input and selection. (31631)
    • Extract indent list item on space. (31628)
    • Extract select object. (31627)
    • Extract paste handler. (31619)
    • Fix props on DOM element warnings. (31883)
    • Move autocomplete key handler to ref callback. (31770)
    • Move implementation specific attributes. (31674)
    • Move implementation specific delete and enter handling. (31644)
    • Remove avoiding setting selection on mount. (31788)
    • Remove dependency on block client ID. (31752)
    • Remove duplicate active formats state. (31771)
    • Remove old broken format prop. (31767)
    • Remove 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.) name dependency. (31679)
    • Simplify with hooks. (31718)
  • Rename construct_wp_query_args to build_query_vars_from_query_block. (32041)
  • Theme.json:
    • Remove unused code. (31666)
    • Remove declarations so API has coherence. (31596)
    • Remove: Declarations parameter from compute_style_properties. (31573)
  • Writing flow:
    • Extract and simplify “select all”. (31855)
    • Extract arrow nav. (31851)
    • Extract tab behavior to hook. (31834)
  • 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/.: Use batch endpoint included in Core. (32174)
  • Prepare for adding the Widgets block editor to Core. (32136)
  • Remove gutenberg domain from core blocks. (32152)
  • Remove filter_var from blocks. (32046)
  • 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 block editor settings to work with context. (32159)

Tools

  • End-to-end tests:
    • Add template loader unit tests. (31498)
    • Fix end-to-end test inserting the cover block. (31866)
    • Fix flaky change detection tests causing intermittent failures. (31861)
    • Fix intermittent embeds failure. (31860)
    • Fix intermittent failure of rich text end-to-end test. (31864)
    • Increase test coverage for pattern transforms. (31689)
    • Navigation: Add unit tests for onChange handler and fix cases around custom links tags and post-format. (31259)
    • Remove 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. filters performance test. (32028)
    • Skip unstable end-to-end tests. (32031)
    • Try stabilizing customize widgets end-to-end tests. (32023)
    • Update skip failing template mode end to end test. (32017)
    • Update tests for changes in core logic. (31982)
  • Gutenberg plugin: Update compatibility layer for loading separate core block assets. (31894)
  • Workflow:
    • Replace the Cancel workflow with native GitHub Action functionality. (32016)
    • Remove Custom Properties PostCSS plugin. (31715)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.75.28s28.4ms
Gutenberg 10.65.51s26.18ms
WordPress 5.75.35s29.19ms

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

Thanks @youknowriad for managing the release.

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