Tag Archives: 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

Koen Van den Wijngaert 12:59 pm on May 14, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.6? (12 May)

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.6 introduces Duotone 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. supports, 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. Pattern suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, 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. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilities of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe. 

Dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.: Loading the template editor inside of an 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. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/.. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • 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 color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • 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:
    • Call deprecated 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. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • 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 white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not 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/.. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of 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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice to 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. block attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponent, ifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken 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.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on 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/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

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.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

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

Special thanks to @priethor and @youknowriad for guiding me through this release!

#block-editor, #core-editor, #gutenberg, #gutenberg-new
Ajit Bohra 12:22 am on April 30, 2021
Tags: , , , gutenberg-new   

What’s New In Gutenberg 10.5? (28 April)

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 already available! Gutenberg 10.5 introduces many new 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. patterns, embedded PDFs, enhancements to the Template Editing Mode, improvements to Widgets 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., and 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 as well.

New block patterns and pattern transformations

Gutenberg 10.5 puts the focus on bringing several new block patterns, revisiting the bundled block patterns as well as adding more opinionated Query Block ones. It also enables block pattern transformations that are contextual to the currently selected simple block, without inner blocks.

Enhancements to the Template Editing Mode

With the goal of editing templates with blocks, a “Template Editing Mode” was introduced in recent Gutenberg versions so that users can edit a template directly from the post editor, switching between post and template editing. This release provides several flow and interface enhancements to this feature, including the possibility to create custom block templates in classic themes. Other improvements include unifying the saving flow between Template Mode and Default Mode, moving the Template Mode Edit and New links to a dedicated new panel, and replacing the Document tab with a Template tab in Template Mode.

Embedded PDFs with File Block

The File Block now supports embedding PDFs in most major browsers. This option can be enabled or disabled through 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. toggle.

Improvements to Widgets in the Customizer

While Gutenberg 10.4 enabled Block Widgets in the Customizer, this new iteration enhances the experience by enabling upload capabilities for media and Richtext formats.

No more auto-scrolling when selecting blocks

Before 10.5, when any block that was slightly out of view was selected, the page would automatically scroll so that the top of the selected block was visible, potentially disorienting the user. From 10.5 onwards, the scroll will only happen if the block is not selected directly by the user.

10.5

Enhancements

  • Buttons Block:
    • Add Typography support. (30394)
    • Explicitly add text-align-center to legacy buttons. (30525)
    • Update to use color support utils to retrieve classes and styles. (30870)
  • Columns Block: Add column count to the column block label. (30248)
  • File Block: Add support for embedding PDFs. (30857)
  • List Block: Add placeholder attribute. (30958)
  • Post Comments Link Block: New block added. (29564)
  • Site Logo Block:
    • Update the site logo description to be more illustrative. (30909)
    • Add a default width value. (30907)
  • Site Title Block:
    • Normalize the toolbar. (30999)
    • Normalize the toolbar (II). (31032)
  • Social Links Block:
    • Add text placeholder next to the appender. (29851)
    • Remove obsolete hardcoded focus style from Social Links. (30721)
  • Template Part Block: Add active block variation information in Block Parent Selector. (30731)
  • Term Description Block: Don’t output if there’s no description. (30564)
  • Verse Block: Add support for custom colors. (27736)
  • Video Block: Add uploading state. (30837)
  • Block Patterns:
    • Revisit the bundled block patterns. (29973)
    • Suggest block pattern transformations that are contextual to the currently selected ‘simple’ blocks (no InnerBlocks). (30469)
    • Small adjustments to bundled block patterns. (31105)
    • Query Patterns:
      • Try more opinionated query block patterns. (30763)
      • Add the small image and title pattern back in, fix 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. length.. (30817)
  • Components: Add create-styles. (30509)
  • Design Tools:
    • Add border color, style, and width support. (30124)
    • BoxControl: Allow configurable sides. (30606)
    • Color Block Support: Add utilities to retrieve color classes and styles. (30869)
  • General Interface:
    • Animate the canvas transitions. (30802)
    • Include block title into block switcher label. (30808)
    • Inspector Controls: Rephrase, polish, and make consistent color labels. (30075)
    • Update design of the resize handles. (30339)
    • Icons: Update icons for text overlay and crop. (30673)
  • 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 resetLocaleData method. (30419)
  • Publishing Flow: Show post events in the post schedule calendar. (29716)
  • Template Editing Mode:
    • Allow creating custom block templates in classic themes. (30438)
    • Move the template mode edit and new links to a dedicated template panel. (30900)
    • Replace the document tab with a template tab in template mode. (30860)
    • Unify saving flow between template mode and default mode. (30793)
    • Update the template mode canvas padding and adds a backlinkBacklink Incoming links to a web page. Search engines view backlinks as a reputation builder. The more quality (as determined by the search engine) incoming backlinks a site has usually helps a site to rank better in search engine results.. (30658)
  • Site Editor:
    • Add ‘area’ selection to convert to template part flow. (30395)
    • Add do_block_template_part function. (30345)
    • Add skip link to block templates. (30336)
    • Remove single-post from the default templates set. (29668)
    • Themes: Fix template-hierarchy fallbacks. (30599)
  • Writing Flow: Scroll selected block only if it has no focus. (30924)

Bug Fixes

  • Apply a StyleProvider around fills that can be used inside the iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.. (31073)
  • 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. Fetch: Make preloaded OPTIONS requests use parse setting. (28862)
  • Block Library:
    • Duplicate media types to avoid bad imports. (30973)
    • Image Block: Disable media buttons in the uploading state. (30863)
    • Query: Fix max-height to query pattern preview. (30757)
    • Post Title: Fix warnings for RichText in inline containers. (30666)
    • Site Title: Add default block after pressing enter at the end of Site Title. (30996)
  • Block Editor:
    • Bring back imageDefaultSize shim for WP 5.7. (30955)
    • Fix the position of vertical add a new block in RTL mode. (31035)
    • Template part: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice for placeholder block. (30928)
  • Components:
    • Add a StyleProvider to support CSSCSS Cascading Style Sheets.-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. components inside iframes. (31010)
    • Fix “RadioControl: checked” style outside of Gutenberg. (30670)
    • Fix Post Date component. (30790)
    • Fix Post Publishing Popover moving when certain dates are clicked. (30298)
    • Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. (30667)
  • General Interface: Fix is-link style to take colors from wp-adminadmin (and super admin) theme. (30823)
  • Inserter: Stop event propagation for the select element’s onBlur to fix the behavior in iOSiOS The operating system used on iPhones and iPads. when selecting a pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (30717)
  • Site Editor:
    • Focus save button when entities save states panel is opened. (30873)
    • Remove call to wpautop that unintentionally alters block markup in template parts. (30552)
  • Template Editing Mode: Hide the template selector and template mode from non-viewable post types. (30861)

Experiments

  • Block-based Widgets:
    • API:
      • Don’t use deprecated widget_class property. (30429)
      • Fix null instance property when instance settings are empty. (30713)
      • Remove deprecated properties. (30853)
    • Customizer Integration:
      • Add media uploader capabilities to block-based 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. customize screen. (30954)
      • Add move to widget area dropdown in customizer. (30896)
      • Add rich text formats. (30952)
      • Fix editing performance in Widgets Customizer. (30654)
      • Fix block-based widget customizer initializing too soon. (30864)
      • Refactor the inspector in Widgets Customizer to use coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. controls. (30431)
    • Legacy Widget: Improve backward compatibility. (30709)
    • Widget editor:
      • Add a toolbar button to move between widget areas. (30826)
      • Fix the undo/redo buttons in the standalone block-based widgets editor. (30989)
  • Navigation Editor and Block:
    • Fix navigation placeholder height issue. (30824)
    • Fix alignment issue on the nav screen manage locations buttons. (30441)
    • Limit navigation nesting depth to 5. (30199)
    • Nav-created drafts should not render on the frontend. (29692)
    • Page List: Add ability to convert to navigation links. (30390)
    • Show justification controls for vertical variant. (30351)
    • Use theme locations description instead of the slug for navigation screen location labels. (30797)
  • Global Styles:
    • Absorb editor settings transformation in WP_Theme_JSON. (30610)
    • Clean cached data when switching themes. (30830)
    • Extract sanitize method. (30809)
    • Fix: CSS variable reference mechanism 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.. (31015)
    • Make the dependency of the star matcher explicit when translating theme.json. (30604)
    • Only remove the default font family in the editor from themes with theme.json file. (30895)
    • Refactor how we iterate over the tree. (30801)
    • Remove no longer needed translations handled in PHP for settings. (30605)
    • 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.: Add util to transform from a v0 schema to the latest. (30600)

Documentation

  • docgen:
    • Add support for TS exported static non-function variables. (30971)
    • Add support for assignment patterns. (30681)
    • Add support for object-destructuring. (30675)
    • Find parameters by index rather than name and handle array destructuring. (29945)
  • Handbook:
    • Add documentation for border block supports. (31039)
    • Add documentation for border styles. (31040)
    • Add fix to suggested prefixes of the 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".. (30953)
    • Change references from Block Style Variations to Block Styles. (30911)
    • Fix Block Editor 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) link. (30569)
    • Fix more examples for register_block_type – apiVersion to api_version. (30819)
    • Fix PHP example for register_block_type – apiVersion to api_version. (30818)
    • Fixed a type and made the whole explanation more clear. (30487)
    • Fixes broken 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/ links to commonly used labels. (30875)
    • Improve semantics in the block-based theme guide. (30946)
    • Include a note about is_default property for register_block_style. (30792)
    • Organize Block API Reference. (30980)
    • Packages: Further clarify the npm publishing process. (30733)
    • Update getting started with code. (30447)
  • Libs:
    • Blocks: Fix PHPDocs of gutenberg_block_has_support. (31050)
    • Query Utils: Fix return type of construct_wp_query_args(). (30611)
  • License: Interim dual license of future contributions. (30383)
  • Packages:
    • Block Library – Social Links: Update param type. (30652)
    • Components: Add documentation for the text prop on the Button component. (30796)
    • Core Data: Fixes return type for getEntitiesByKind. (30639)
    • Block Editor: Update import statement of ImageSizeControl component. (30704)
    • 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.: Add namespace param clarification. (30501)

Code Quality

  • Block Editor:
    • Simplify focus capture. (31036)
    • Standardize loading default block editor settings. (30245)
  • Block Library:
    • Button Block: Use hook-based border support. (30194)
    • Cover: Rename isBlogUrl to isUploadingMedia. (30435)
    • Cover: Use ALLOWED_MEDIA_TYPES shared constant. (30977)
  • Block Patterns: Clean up bundled pattern titles & categories. (30998)
  • Components: Remove create-styles in favor of vanilla emotion. (31048)
  • dom:
    • Add types to caret placement functions. (30750)
    • Add types to document-has-selection. (30386)
    • Add types to is-edge and dependencies. (30546)
    • Add types to miscellaneous files. (30774)
    • Add types to removeInvalidHTML and stripHTML. (30752)
    • Only assert defined in development. (30807)
    • Type the remaining files. (30841)
  • Drop zone: Rewrite without provider. (30310)
  • Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party:
    • Account for editor styles file removal on WP 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.. (30894)
    • Format all markdown files using Prettier formatter. (30715)
    • Format all JSON files using Prettier formatter. (30714)
    • Updated .editorconfig files to work with automatic file formatting. (30794)
    • Update WP compatibility check in gutenberg_pre_init(). (29938)
  • Improve get_merged_data() code. (30612)
  • Remove unnecessary semicolons in PHP. (30780)
  • Replace older-style PHP type conversion functions with typecasts. (30531)

Tools

  • Testing:
    • Cover Block:
      • Add edit media integration tests. (30270)
      • Replace media end-to-end test. (30306)
    • Fix end-to-end test failure screenshots not capturing at the right time. (28449)
    • Fixture regeneration: Infer tabs use from the prettier configuration. (30813)
    • Skip unstable template part end-to-end test. (30748)
    • Trim block fixture HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. when generating other test fixture files. (30981)
    • Wire PHP tests for block editor settings. (30984)
  • wp-env:
  • Build Tooling:
    • Add comments to the webpack entry point function. (30629)
    • Create frontend entry points for block-library, outputting code loadable from the browser. (30341)
    • Perf Workflow: Trigger upon release publishing. (30628)
    • Pull trunk before pushing. (30615)
    • Remind about required cherry-picks after npm publishing. (30868)
    • Update development tools to work with PostCSS (try 2). (30347)
    • Use consistently the latest keyword for npm publishing. (30866)
  • Scripts:
    • Allow CSS modules in the build commands. (29182)
    • Include YAML files in prettification. (30240)

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.57.86s55.86ms
Gutenberg 10.47.25s42.51ms
WordPress 5.76.86s37.1ms

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

Thanks @youknowriad and @priethor for helping with the release and the release post, respectively.

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

Héctor Prieto 9:46 pm on April 14, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.4? (14 April)

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 already available! Gutenberg 10.4 introduces cool features like 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. widgets 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., enhancements to the Site Editor, improvements to rich text placeholders, and, as always, 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 as well.

Block widgets in the Customizer

As part of the Block-based 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 project, one goal is to enable block widgets in the Customizer, with Gutenberg 10.4 introducing the first iteration of this feature.

List View design updates

This release brings us a set of design updates to the Site Editor List View, including updates to icon sizes and spaces and new colors for hover, focus, and select states.

More descriptive publishing UIUI User interface

The publishing content UI found in block editors now includes the site icon and name so that it’s clearer in certain cases, such as full-screen or mobile, where you are publishing to.

Revert template to theme defaults within the Site Editor

Until now, to revert a template to the default provided by a theme, it had to be done outside the Site Editor. Thanks to this new feature, it is now possible to revert template customizations directly in the editor.

Rich text placeholder enhancements

To improve the editing experience, rich text block placeholders have seen a few tweaks in this release. Starting in Gutenberg 10.4, blocks containing rich text will display a shorter placeholder text that will remain shown even when being focused.

Improvements to Navigation Block

The Navigation Block has good momentum and has received many improvements in this release, including a new “Post Format Link” variation, a clearer placeholder state, and more style polishing. 

Editor and frontend parity refinement

Providing a consistent markup between the editor and the frontend is key to deliver a smooth editing experience. Gutenberg 10.4 iterates towards this goal by ensuring a frontend-editor parity in blocks such as Quote, Separator, and Archives, among others.

10.4

Enhancements

  • Ensure Frontend/Editor block styles parity:
  • Block Library:
    • Latest Comments: Remove list padding and margin. (29402)
    • Post Date: Add option to make it a link. (30499)
    • 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.: Fix toolbar for post excerpt warning. (30280)
    • Post Title: Fix “‘length’ of undefined” error. (30208)
    • Preformatted: Add color controls. (28396)
    • Query: Use a WordPress 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 the query block. (30405)
    • Search: Add border radius support. (30227)
    • Site Logo: Style polishing. (30526)
    • Template Part: Add padding support to template parts. (29779)
    • Update placeholder text across blocks. (30404)
  • RichText:
    • Add min width to show caret for empty inline container. (30224)
    • Always show placholder on focus. (30393)
  • General Interaface:
    • Add site icon and name to the publish flow. (30231)
    • Use a darker canvas color. (30282)
    • Update the save button label in the site editor. (30439)
  • Icons:
    • Polish media & text icons. (30239)
    • Update “close small” icon so that its shape matches the “add” icon dimensionally. (30014)
    • Update site-logo block icon. (30211)
  • Inserter: Clarify that when the Inserter is open clicking the + button in the top bar will close it again. (29759)
  • Writing Flow: Use a shorter writing prompt. (29611)
  • List View: Improve the spacing, colors and icons (30455) (30303)
  • Block Themes: Clarify the empty block templates message. (30145)
  • Site Editor:
    • Allow reverting custom templates to their original theme-provided files. (28141)
    • Use “Custom Styles” label to signal there are global styles changes in the saving panel. (30521)

Bug Fixes

  • Inserter: Show only the patterns that use allowed blocks. (30300)
  • Block Library:
    • Buttons: Prevent overlapping button blocks in the frontend. (30253)
    • Columns: Prevent having a width > 100%. (30229)
    • Cover: Add ‘object-position’ to allowed inline style attributes list. (30243)
    • Gallery: Avoid adding all media items in galleries using external URLs. (30122)
    • Image: Do not preserve custom sizes when replacing images. (29919)
    • Query:
      • Fix undo trap during creation. (30203)
      • Pagination Numbers: Print nothing if content is empty. (30554)
    • RichText: Fix arrow navigation around emoji. (30206)
    • Search block: Fix alignment issues. (30444)
    • Site Logo: Delete sitelogo option when custom logo does not exist or was removed. (30427)
  • Block List: Fix mover position in the docked toolbar. (30242)
  • Code Editor: Revert save editors value on change (#27717). (30524)
  • Post Editor:
    • Avoid focus attempt on a non-existent post title in code editor. (29922)
    • Fix the post author selector for contributor roles. (30218)
  • Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: Ensure that plugin does not error with older versions of WordPress. (30230)
  • Inner blocks: Memoize allowedBlocks to prevent needlessly updating settings. (30311)
  • Server side renderer: Fix errors in template part editor context. (29246)
  • Writing Flow:
    • Fix copy pasting non textual blocks. (30225)
    • Fix horizontal caret placing for empty editable with placeholder. (30463)
    • Fix multi-selection copying in Safari. (30202)
  • Site Editor:
    • Fix nested template parts. (30416)
    • Fix media upload behaviour and error state. (30436)
    • Select the block inspector top upon selection. (30387)
  • Components: Stop matching autocompleter upon mismatch. (30649)

APIs:

  • Add padding server-side block support. (30332)
  • Remove small APIs deprecated in WordPress 5.2. (30283)
  • Block Patterns: Remove scope from Query patterns and introduce blockTypes. (30471)

Experiments

  • Customizer
    • Add customize widgets inserter. (29549)
    • Add Legacy Widget block. (30321)
    • Fix adding blocks in the widgets customizer. (30221)
  • Navigation Editor and Block
    • Apply mover tweaks to navigation and widgets. (30284)
    • Add src/navigation-link/index to side effect whitelist. (30200)
    • Add post format variation to navigation link block. (30403)
    • Avoid creating a new array/object on every render. (30374)
    • De-emphasize “Link” block. (30172)
    • Fix arrow inheritance, polish. (30287)
    • Fix hardcoded color in navigation submenu icon. (30385)
    • Fix Navigation Link block constantly updating its inner block list settings. (30274)
    • Fix navigation link block dragging error. (30219)
    • Fix snackbar list component blocking clicks to UI it overlaps. (30381)
    • Flip orientation of submenus that are towards the right of the viewport. (30342)
    • Indicate when a menu is deleted and show the menu switcher afterwards. (29201)
    • Make the navigation placeholder clearer. (30281)
    • Polish 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. submenus. (30335)
    • Replace arrow with chevron. (30180)
    • Save theme location on button click. (30340)
    • Use same default implementation of __experimentalFetchLinkSuggestions in post, site, navigation, widget editor. (29993)
  • Widgets Editor
    • Add manage with live preview link. (29839)
    • Handle when $instance is empty and use str_replace instead of sprintf in the Widget block. (30217)
    • Iterate on Legacy Widget block. (29960)

Documentation

  • Handbook:
    • Add description for templateParts 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.. (30118)
    • Add instructions for finding attributes for use in templates. (30258)
    • Added a practical example of adding a component 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.. (30379)
    • Clarify what is meant by “block wrapper”. (30315)
    • Fix broken links to typescript documentation. (30188)
    • Fix code snippet for disabling the block directory. (30365)
    • Fix formatting. (30309)
    • Fix typos in block-controls-toolbar-and-sidebar.md. (30513)
    • Rename, changed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Link. (30483)
    • Rich Text: Add section for disabling specific format types. (29383)
    • Updated documentation to reflect the output created currently by npx wordpress/create-block gutenpride. (30353)
    • Update feature deprecation guide. (30220)
  • Packages:
    • Api-fetch: Fix example code for apiFetch middlewares. (30534)
    • Block supports: Fix typos in layout supports comment. (30537)
    • Block Editor: Fix block-editor typo. (30401)
    • Components:
      • Remove references to __experimental* in the DateTimePicker component documentation. (29322)
      • Update CustomSelectControl component README.md. (29854)
  • docgen:
    • Components: Add types to Draggable. (29792)
    • Add types to clean-node-list. (30412)
    • Add types progressively to dom modules. (30103)
    • Add types to phrasing-content. (30102)
    • Export all types from api-fetch. (30539)
    • Fix arrow functions and TS index module support. (30028)
    • deprecated: Export DeprecatedOptions to align with DefinitelyTyped. (30677)
    • api-fetch: Align exported type names with DefinitelyTyped types. (30570)

Code Quality

  • Block Editor: Use proper insertion point for drop. (29933)
  • Block Library: Fix Post Excerpt warnings for RichText in inline containers. (30498)
  • Components: Simplify ScrollLock, adding types. (29634)
  • Gutenberg Plugin:
    • Prettify YAML scripts. (30409)
    • Remove deprecations planned for 10.3 release. (30417)
    • Update the objectFitPolyfill vendor library. (30507)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Coding Standards fixes. (30346)

Tools

  • Add /packages/stylelint-config to CODEOWNERS. (30264)
  • Build: Ensure non-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. changes are processed in the watch mode. (30343)
  • Testing:
    • Added end-to-end tests for navigation menu name editor. (29774)
    • GHA workflow improvements when setting up NodeJS. (29078)
    • Include NodeJS version in the cache key. (30512)
    • Remove button from forbidden elements. (30223)
    • Remove cache restore-keys. (30510)
    • Skip flaky end-to-end tests. (30344)

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.45.94s35.14ms
Gutenberg 10.35.98s32.58ms
WordPress 5.75.05s31.34ms

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

Thanks @youknowriad for managing the release and @critterverse for helping with the release post assets.

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

Héctor Prieto 2:11 pm on April 2, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.3? (31 March)

The first quarter of the year is coming to an end, and with it, 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/ 10.3 comes as well! This release brings us some important changes to Global Styles, as well as several improvements to blocks such as the Navigation 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., enhancements to the inserter, an editor performance boost, and even a few new blocks! As always, 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 are included, too.

Improving the Block toolbar

In order to provide a consistent UIUI User interface across blocks, blocks have seen their toolbars rearranged following a standard grouping layout. While the last release saw the Image block have its toolbar standardized, this time a whole set of blocks have been normalized as well, including blocks such as Button, Buttons, List, Heading, Paragraph, Quote, Audio, File, Media and Text, Video, Site Logo, Cover, and 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.

Introducing layout configuration 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.

Themes have always had the responsibility of defining alignments in the frontend through CSSCSS Cascading Style Sheets. rules. They also define different widths for both the editor and frontend. The content width, whether they support wide alignments or not, and the CSS to support all these combinations can be very hard to write properly.

With Full Site Editing, the templates are written in blocks and edited in the site editor. This means that the editor has to match the front end as much as possible while allowing theme authors to tweak these alignments and widths in the editor. If this doesn’t happen, it causes confusion and frustration as seen in the feedback from the FSE Outreach Program. 

To address these requirements and to simplify the way themes define and style alignments, Gutenberg 10.3 introduces the concept of layout and layout configuration, a feature automatically enabled when you rely on a theme.json file (experimental-theme.json file at the moment).

Theme authors should be able to make use of this feature by adding a layout config to their theme.json file and indicating in their block templates which containers inherit that config. The layout config is also automatically applied to the post editor.

If you’re using the experimental theme.json file already, you should be able to follow these two pull requests that update the empty theme and the twenty twenty-one blocks theme to use this feature.

Changes in theme.json block supports and supported styles 

Block supports are no longer used to decide whether the styles in the theme.json file for a block should be used or not. However, block supports are still used to show UI controls in both the block & global styles 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., but themes can now use any theme.json style property that exists in any block:

"core/paragraph": {
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--cambria-georgia)"
  }
}

Improvements to Navigation Block and Navigation Editor

Gutenberg 10.3 brings a number of improvements to the Navigation block and Navigation editor experience, including the list view in the Navigation editor, in-between inserter, and a better flow to build nested menus.

after, editor

Inserter enhancements

This release also brings updates to inserting blocks, including improvements to keyboard navigation and accessibility for the Block Inserter, and a new “theme” category for template parts and their variations. Moreover, the slash inserter now allows typing multiple words when searching for blocks. Each of these enhancements help make it easier to find and use the blocks you want.

New “Theme” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. (left); multiple keywords in the slash inserter (right).

More theme blocks

With the goal of providing classic template 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.) features with blocks, up to three new blocks are introduced in this release. The LogIn/Out block is now available to provide login and logout links. Optionally, it can display the login form instead of a link by setting the available block attribute.

Two new blocks for archive pages are also available. The Term Description block displays the description of categories, tags, and custom taxonomies. On the other hand, the Archive Title block displays the title of the archive itself.

Login/Out block (left); Archive Title and Term Description blocks as seen in the editor (right).

Cover block improvements

The Cover block now supports drag and drop for replacing the background image.

Editor performance improvements

In recent releases, the time it took for the editor to load increased slightly due to the growing number of patterns available in the Inserter. Gutenberg 10.3 fixed this so that the editor performs well regardless of the number of available patterns!

10.3

Enhancements

  • Add since versions to the deprecated features. (30072)
  • Blocks: Add “theme” category and better present Template Parts in the inserter. (30020)
  • Block Editor:
    • Add drag handle to select mode. (28815)
    • Improve block inserter keyboard navigation. (26938)
    • Open adminadmin (and super admin) sidebar menu over editor on small screens. (29955)
  • Block Library:
    • Cover: Allow drag and drop media replacement. (29813)
    • File: Make the editor markup match the frontend. (30148)
    • Social Links: Improve selected state of empty block. (29756)
    • Standardize the groups in the block toolbar. (30012, 29247, 29863)
    • Verse block: Add support for the padding to the verse block. (29820)
  • Components: Allow multiple words in the autocomplete phrase matcher. (29939)
  • Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: Improved cache bust without filemtime for assets. (29775)
  • Icons: Hint the lowercase icon by 0.15px to correct the font weight appearance. (29754)
  • Media: Use image default size from settings. (29966)

New APIs

  • Compose: Add new useCopyToClipboard hook. (29643)
  • Deprecated: Add since option to deprecated function. (30017)

Bug Fixes

  • Block Editor:
    • Ensure that uncategorized block types are properly handled. (30125)
    • Fix mover width/size regressions. (29889)
    • Fix navigation mode focus. (30126)
    • Fix 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. with multi select style. (30128)
    • Fix the issue with block style preview when example missing. (29894)
    • Fix sibling block inserter displaying at end of block list. (29920)
    • Revert showing empty paragraphs on fronted. (29809)
    • Show the active block variation’s icon in Select mode. (30143)
  • Blocks: Adding onRemove event to verse block. (30104)
  • Block Library:
    • Cover: Improve disabled media buttons check for placeholder. (29858)
    • Embed:
      • Fix overzealous aspect ratio scaling for embeds. (29510)
      • Embed: Fix select on focus. (29431)
    • Gallery: Fix gallery item clicking. (29860)
    • Image:
      • Fix block reset sizes on external URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org change. (26879)
      • Fix undo step with temporary URL. (30114)
    • Social Link: More accessible labels. (29659)
    • Video: Fix kind attribute missing subtitle value in video text track. (30040)
  • Components:
    • Don’t display Guide’s page control if there is only one page. (29629)
    • Prevent PanelBody title from being overlapped by arrow. (29914)
  • Compose: Call useMergeRefs when dependency changes after ref change. (29892)
  • Copy:
    • Restore dot at the end of a sentence. (29897)
    • Update the layout alignment description for better clarity. (29974)
  • Gutenberg Plugin: Update “requires at least” value to 5.6. (29646)
  • E2E Tests: Stabilize randomly failing tests 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.. (29836)
  • Navigation Component: Align item text to the left/right. (30083)
  • Post Editor:
    • Fix post editor layout regression. (30093)
    • Keep post publishing popover open when a date is clicked. (29738, 29893)
  • RichText: Fix inline display warning. (30193)
  • Themes: Restore the default editor font for the non FSE themes. (30080)
  • Raw Handling: Fix pasting special spaces. (28077)
  • Storybook: Fix block editor shortcuts. (29750)
  • Writing Flow:
    • Fix caretRangeFromPoint. (30031)
    • Fix tab behavior. (30000)
    • Remove arrow nav limitations. (30057)

Performance

  • Block Editor:
    • Optimise multi-selection select calls. (30140)
    • When inserting Block Patterns they get parsed when the browser is idle. (29444)
  • Block Library: Use early return in the Button block to optimize save.js. (29781)

Experiments

  • Components:
    • Add Heading. (29592)
    • Button: Add a default type of button. (29900)
  • 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 widgets customize inspector. (29755)
  • Full-Site Editing:
    • Add a layout configuration to the Group block and theme.json and make alignments declarative. (29335)
    • Add client ID trees selectors in block navigation. (29902)
    • Add description field to Post Content block. (29971)
    • Add Log In/Out block. (29766)
    • Add Query Title block and Archive Title variation. (29428)
    • Add Term Description block. (29613)
    • Add preload_paths 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. for widgets screen and full site editing. (28701)
    • Add support for experimental layout in Post Content block. (29982)
    • Add layout support to the Template Part block. (30077)
    • Add link color option in Site Title block. (29924)
    • Always use full screen mode. (29489)
    • Automatically open the sidebar to the appropriate menu. (26964, 30098)
    • Close navigation panel after template selection. (29956)
    • Expose Template Part block variations to the Inserter. (30032)
    • First step towards hybrid themes – fallback to PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher templates. (29026)
    • Fix block toolbar from overlapping navigation panel. (29918)
    • Fix different markup in the editor and on the frontend for the Site Title block. (29021)
    • Fix edge case where the default layout could be undefined. (30024)
    • Fix persistence of Preferences in site editor. (30019)
    • Fix Post Comment Count block attribute. (30056)
    • Fix 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 margin. (30078)
    • Fix Template Part alignments behavior. (30099)
    • Fix template saving issue after switching themes. (29842)
    • Polish site button focus/hover styles in post and site editor. (29888)
    • Prevent navigation panel focus when hidden. (29600)
    • Refactor the Post Content block. (29898)
    • Remove alignments from the root level of the site editor. (30079)
    • Remove 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. toolbar transition in reduced-motion mode. (29764)
    • Remove unused QueryProvider in Query block. (29947)
    • Template Part: Identify template parts in error messages. (28398)
    • Update Post Content icon, unuse justify. (29867)
    • Update Post Title markup so that editor and front match. (29824)
    • Update template details popover. (29439)
  • Global Styles:
    • Allow themes to use any styles in the theme.json whether or not the block supports it. (29941)
    • Better CSS reset style loader order. (30034)
    • Block Supports: Allow skipping serialization of border. (30035)
    • Optimistically continue with empty data when user data for global styles is not a JSON. (30088)
    • Remove kebab-case camelCase transformations. (29986)
    • Skip null when translating settings. (30171)
    • Translate custom templates in theme.json. (29828)
  • Navigation Editor and Block:
    • Add line-height to Navigation block. (30010)
    • Add padding to Navigation Link placeholder. (29832)
    • Allow vertical inserter in the Navigation block. (28833)
    • Consistently provide fallback variations for the block. (30117)
    • Enable list view. (29936)
    • Fix flyout background color in Page List block. (29932)
    • Fix link items in navigation screen. (30009)
    • Fix minor styling issues with nav editor. (30129)
    • Fix Navigation block styles in the navigation editor. (29748)
    • Fix navigation editor link search suggestions. (29707)
    • Fix navigation editor saving. (29749)
    • Fix navigation screen font. (30085)
    • Fix navigation screen inserter horizontal scrollbar. (29930)
    • Fix navigation editor block toolbar not visible on small screens. (29967)
    • Fix padding issues with nav screen. (30183)
    • Fix paragraph margin specificity inside layout containers. (30038)
    • Fix popover anchor in Navigation Link block. (30173)
    • Improve default label of location select. (29908)
    • Increase importance of submenus staying open. (30169)
    • Keep submenus open on select in the editor. (29713)
    • Match editor markup to rendered in Navigation Link block. (29935)
    • Move theme location settings to navigation editor sidebar. (29458)
    • 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.: Show submenus only on select in the editor. (29869)
    • Polish navigation screen. (29926, 30168)
    • Simplify focus style in Site Icon block. (29872)
    • Show all menus in manage locations. (29906)
    • Unset font weight and text decoration inheritance in Navigation block. (30011)
    • Use the interface package for the navigation screen. (30013)
    • Visual and design improvements for List View. (29769)
  • Widgets Editor:
    • Fix warning when widgets block editor is disabled. (30318)
    • Iterate on widgets 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/. endpoints. (29649)
    • Load block editor assets in the navigation and widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editors. (30076)
    • Unify menu item styles for Navigation Block and Page List blocks. (29975)
    • Use a default sans serif font for the widget screen. (30084)

Documentation

  • Block Editor: Fix renderAppender documentation. (29925)
  • Handbook:
    • Fix broken image link in the documentation main README. (29857)
    • Fix broken link to developer resources in README.md. (#29795). (29796)
    • Fix link to native-mobile.md in pull request template. (29923)
    • Fix rebase error. (29753)
    • Remove superfluous sentence in create block tutorial. (30062)
    • Update block design principles with a new section on how to group controls. (29816)
    • Update broken link to Getting Started for the 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 based Mobile Gutenberg. (30162)
    • Update the quick view image on the documentation homepage. (29808)
  • Editor: Clarify the purpose of the @wordpress/editor package. (30136)
  • 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.: Replace dead link in README.md. (29699)
  • Interface: Fix typos in interface package. (29740)

Code Quality

  • 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. Fetch:
  • Block Editor:
    • Avoid isInsideRootBlock (DOM query) in useFocusFirstElement. (30178)
    • Focus mode: Fix opacity for inner blocks, move classes. (30130)
    • Move class for navigation mode. (30181)
    • Move is-typing and is-outline-mode classes up the tree. (30106)
    • Move nav mode exit from writing flow to block props. (30175)
  • Block Library:
    • Refactor ServerSideRender to use React 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.. (28297)
    • Remove obsolete editor styles for List block. (30094)
    • Rename loginOut variable to logInOut. (29979)
  • Blocks:
    • Ensure theme category is only added when not provided. (30089)
    • Rename getBlockContent to getBlockInnerHTML internally. (29949)
  • Components: Fix React warning in Text Control. (29724)
  • Date: Add types. (29789)
  • DOM:
    • Add types to focusable. (29787, 30030)
    • Split into smaller modules to facilitate typing. (30044)
  • Gutenberg Plugin:
  • Packages: Add types directive to api-fetch and date packages. (30252)
  • RichText: Remove dead and deprecated setFocusedElement. (29877)

Tools

  • Babel Preset: Update Babel to v7.13.x. (30018)
  • Create block: Require WordPress 5.7 by default and source it from the main plugin file. (29757)
  • E2E Tests:
    • Cover the case when using multiple words in the inserter. (29978)
    • Fix test plugin clash. (29744, 29745)
    • Set delay to zero in the reduce-motion mixin and tests. (29762)
  • Eslint Plugin: Add TypeScript as peer dependency and make it optional. (29942)
  • 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/ Workflows:
    • Release: Allow triggering manually. (28138)
    • Remove path ignore configs from CI. (30090)
    • Use Gutenberg token for version bump, changelog commits. (30212)
  • Packages: Enforce version bump for production packages after WP major. (29903)
  • Unit Testing: Allow TypeScript modules for transpiled packages. (29873)

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.34.90s31.86ms
Gutenberg 10.25.15s31.41ms
WordPress 5.74.88s25.24ms

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

Thanks @gziolo for managing the release, and @annezazu and @melchoyce for helping on the release post.

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

Bernhard Reiter 7:26 pm on March 17, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 10.2? (17 March)

It’s that time of the fortnight again: We’ve just published a new release of 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 10.2 brings to you a number of additions to Full-Site Editing (FSE) and Global Styles, and a sizeable list of improvements to the editing experience, as well as 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.

Offering Patterns on 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. setup

Introducing some initial explorations on how specific patterns can be better surfaced from a block’s placeholder state. Upon inserting a Query block there’s now a setup step that allows picking a block pattern for it to use. This allows users to start with a good design basis. Note that this goes beyond what block variations afford, as it’s 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. that can directly connect with a block pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The candidate block patterns are fetched via a new API that allows querying for patterns that include a given block type.

Alternatively, the user has the option to “start empty”, in which case they’ll be able to choose from the existing CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block variations (e.g. Title & Date, Title & 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., etc).

Spacer Block width can be adjusted (in Navigation Block)

When inserted into a parent block that dictates a horizontal orientation (such as the Navigation Block), the spacer block’s width (rather than height) can now be adjusted. This makes some new cool customizations possible on horizontally-stacked blocks.

Transform Media & Text to Columns

It has been possible for a while to transform any single block into a Columns block (with a single column). For the Media & Text block, that behavior is unlikely to produce the desired outcome. Thus, when transforming a Media & Text block into a Columns block, it will now result in two columns (and all the relevant fixings from the original block).

Hide writing prompt from subsequent empty paragraphs

Rather than showing the “Start writing or type / to choose a block” prompt in each of a number of subsequent empty paragraphs, we now only show it in the first one.

10.2

Features

  • Template part block: Add category panel. (29159)

Enhancements

  • Add check for button text before rendering button block. (29717)
  • Skip CSSCSS Cascading Style Sheets. minification via PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (29624)
  • Restore the margins of blocks relying on the figure element. (29517)
  • Add Columns transform from Media & Text. (29415)
  • Fix: Invert gallery gravity. (29367)
  • Components: Try to make the order of fills stable in regular slots. (29287)
  • Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. (29110)
  • Hide writing prompt from subsequent empty paragraphs. (28275)

New APIs

  • Plugins: Add scoping functionality to the Plugins API. (27438)

The registerPlugin() function (in the @wordpress/plugins package) now accepts a scope argument that will limit that 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 to be displayed only by <PluginArea /> components with a matching scope prop. See #27438 for more details.

Bug Fixes

  • Reusable Blocks:
    • Fix editor crash when converting block with visible styles to reusable (after a save and page reload). (29059)
    • Fix reusable block crash when converting a just created reusable block to blocks. (29292)
  • Buttons Block:
    • Buttons: Fix links inside links. (29273)
    • Fix legacy button center alignments inside the buttons block. (29281)
  • Cover Block:
    • Fix cover block content position not migrating correctly from deprecated version. (29542)
    • Fix solid-color only cover has small gray border in the editor only. (29499)
  • Social Icons and Links:
    • Fix social icons vertical spacing issue. (29657)
    • Yelp: Fix foreground color, make background transparent. (29660)
    • Social Links: Replace CSS variables with block context approach. (29330)
  • Table of Contents block:
    • Fix links when in archive 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. or when using “Plain” permalink structure. (29394)
    • Fix class attribute. (29317)
  • Add theme styles in the site editor. (29704)
  • Fix broken links to the block editor developer handbook. (29663)
  • Fix in between inserter edge case. (29625)
  • Fix the button component styles when used with a dashicon. (29614)
  • Revert moving is-typing class. (29608)
  • Fix inline block styles minification issues with calc(). (29554)
  • Packages: Update the publishing command for npm with next dist 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.). (29379)
  • Ignore build folders when native unit tests. (29371)
  • Fix mobile issue template label. (29344)
  • Interface: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings triggered in ActionItem component. (29340)
  • Search block: Add missing space to provide valid HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (29314)
  • Blocks: Ensure that metadata registered on the server for core block is preserved on the client (try 2). (29302)
  • Fix off-center appender in some themes. (29290)
  • Add enableCustomSpacing to block editor settings. (29277)
  • Border Radius Support: Fix application of zero radius values. (28998)
  • Fix Document Outline mouse click. (28589)
  • Fix typos in template part area tags. (29937)
  • Gallery Block: Fix the crop images setting. (29823)
  • Fix Error: Could not process the ‘wp-config.php’ transformation. (29800)

Performance

  • Revert “Block edit: Avoid memoized block context in favour of useSelect”. (29621)

Experiments

  • Global Styles:
    • Do not add padding sub-properties if there’s no values 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.. (29712)
    • Fix specificity 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. of blocks with single classes as selectors. (29378)
    • Fix specificity issue between theme and user styles. (29533)
    • Custom Link Color: Do not apply to buttons. (29557)
    • Implement skip serialization for color key in style att. (29253)
  • Full-Site Editing:
    • Site Title: Add text decoration and text transform controls. (29622)
    • Make border work on the site editor. (29618)
    • Prevent clicking on tag and category links in the site editor. (29583)
    • Print nothing in the front end if there are no results in Query block. (29521)
    • [Query block] Remove exclusion of current page id. (29432)
    • Handle missing categories/tags in Query block. (29424)
    • Query block setup with block patterns integration. (28891)
    • Update template descriptions for clarity and humanity. (29531)
    • 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 the template area unassigned type string. (29617)
    • Template Part: Prevent infinite recursion. (28456)
    • Update title, description, and icon of Post Categories. (29400)
    • Show Site Logo’s block toolbar when selected, after the editor loads. (29336)
    • Remove delete toolbar option from Site Logo. (29331)
  • Navigation Editor and Block:
    • Allow very thin menus. (29555)
    • Refactor and simplify navigation block CSS. (29465)
    • Make navigation placeholder state visible in dark themes. (29366)
    • Update navigation editor menu selection dropdown. (29202)
    • Make Spacer block width adjustable and add it to Navigation block. (29133)
    • Navigation: Try adding navigation link variants via server. (29095)
    • Navigation Editor: Allow menu renaming. (29012)
  • Group Block: Add support for custom border settings. (29591)
  • Pass block settings to the client for all blocks. (29474)
  • Button block: Add color support via block.json. (29382)
  • Add/new nav link icon. (29369)
  • Temporary hack to render blocks in 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.. (29365)
  • Fix shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. not showing in the widgets screen. (29282)
  • Fix: More resilient appender CSS. (28908)

Documentation

  • Add block variations page to Block API summary. (29725)
  • Update Readme of Animate Component to remove todo comment. (29702)
  • Docs; Organize contributors section using READMEs. (29688)
  • Remove mid-paragraph newlines. (29674)
  • Update Versions in WordPress to include release notes. (29532)
  • Extract block variations API into its own handbook page. (29515)
  • Docs: Fix deprecation message to be clear. (29451)
  • Fix typo in block-based-themes.md. (29410)
  • Fix typo in modularity. (29405)
  • Fix typos in git workflow documentation. (29324)
  • Docs: Table of contents – fix typos. (29319)
  • Add NVDA instructions to the 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) testing documentation. (29312)
  • Component Systems: Update references to external module. (29233)
  • Docs: Add info about npm release types and their schedule. (29028)
  • Docs: Update slug for block-based theme tutorial. (25839)

Code Quality

  • Rename load_separate_block_styles to load_separate_block_assets. (29703)
  • Update the minimum WordPress version required by the gutenberg plugin too 5.6. (29701)
  • Components: Ensure that SlotFill does not use portals in React Native. (29631)
  • Remove the subheading block. (29627)
  • useFocusFirstElement: Include useRef. (29435)
  • Include PHP: Replace dirname( __FILE__ ) with __DIR__. (29404)
  • Run phpcbf to fix PHP CS issues. (29368)
  • Register style attribute when any color property is supported. (29349)
  • Block context:
    • Remove unused onFocus block context. (29318)
    • Reduce memoized block context: Class names. (29186)
    • Remove obsolete block context. (29313)
    • Block edit: Avoid memoized block context in favour of useSelect. (29333)

Tools

  • Scripts:
    • Fork jest-environment-puppeteer to use puppeteer-core directly. (29418)
    • Add TypeScript support to linting command. (27143)
  • Needs Info / Stale bot
    • Add stale issues bot to help triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. efforts. (29321)
    • Do not automatically close message, update stale message. (29310)
  • Tests:
    • Temporary skip flaky test. (29601)
    • Paragraph block: Add test to ensure unwrapped editable paragraph. (29299)
    • Testing: Use snapshot-diff serializer to remove noise in snapshots. (29270)
    • Inserter: Add end-to-end test to make sure last inserted block is being focused. (29187)
  • Blocks: Preprocess validation log with util.format instead of sprintf. (29334)
  • Docs: Update release.md. (29091)
  • Docs/Tools/CI: Update references from master to trunk. (28433)

Various

  • Full-Site Editing
    • Site Editor: Browsing 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. templates menu restructure. (28291)
    • Site Editor: Persistent List View. (28637)
    • Template part block: Add variations based on areas. (29122)
    • Template Part: Update switching trigger. (29257)
    • Template part ‘area’ term – reword confusing ‘type’ terminology. (29679)
    • Add i18n support for template part variations’ descriptions. (29612)
    • Multi entity save panel – remove dynamic copy. (29637)
  • Table of Contents block
    • Add Table of Contents block (dynamic rendering + 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. version). (21234)
    • Deregister TOC block until issues are resolved. (29718)
  • Components:
    • Add next Button, ButtonGroup. (29230)
    • Add Card. (29350)
    • Add Divider. (29433)
    • Add Popover. (29084)
    • Add TooltipButton. (29523)
    • Add Tooltip and Shortcut. (29385)
    • Do not use ViewOwnProps for Portal. (29345)
    • Update Elevation story. (29454)
  • Component System:
    • Add basic tests for style system. (29320)
    • Add tests for color utils. (29301)
  • Types
    • api-fetch: Add incremental type checking. (29685)
    • docgen: Add TypeScript support. (29189)
    • docgen: Incrementally add types. (29684)
    • Dom: Add type-checking to data-transfer. (29682)
    • Components: Add types to Shortcut. (29633)
  • Button Block: Removes “Link settings” panel. (29664)
  • Add 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. test for editor JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. crash caused by rtlcss parsing exception, take 2. (29598)
  • Reset all WP Adminadmin (and super admin) styles in the wrapper of the editor styles. (29590)
  • Revert “[Mobile] – Fix splitting/merging of Paragraph and Heading”. (29587)
  • Try updating the minimum required WordPress version for the plugin. (29579)
  • Documents how the widgets editor works. (29572)
  • Drop zone: Fix media lib duplicate issue. (29567)
  • Update the category icons. (29553)
  • Try: Remove important on disabled switcher state. (29552)
  • Remove base control negative help text margin. (29550)
  • Navigation: Re-enable navigation block end-to-end tests. (29543)
  • Accessibility improvement on #29530 issue. (29534)
  • Pin SHA values as version numbers for 3rd party GHAs. (29485)
  • Update the visual design of the Sidebar Menu. (29476)
  • Focus on block selection: Skip inner blocks. (29434)
  • Use correct classname for nested Navigation Link container. (29380)
  • Integrate AztecEditor-iOSiOS The operating system used on iPhones and iPads. 1.19.4. (29355)
  • Block context: Separate native context. (29315)
  • Focus input when InputControl spinner arrows are pressed. (29305)
  • WP Block Styles: Only load in the editor if a theme opts in. (29252)
  • Add new overlay text icon, and use for image. (29215)
  • Add Missing URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org state to Navigation Link Block. (28861)
  • Improve dropcap behavior. (28685)
  • Improve the block editor handbook table of content. (28665)
  • RN: Add Bottom Sheet Select Control component. (28543)
  • RichText: Bypass paste filters for internal paste. (27967)
  • Block Directory: Update search results list UIUI User interface. (25521)

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.25.25s25.8ms
Gutenberg 10.15.01s23.1ms
WordPress 5.75.13s22.3ms

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

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

Nik Tsekouras 12:09 pm on March 2, 2021
Tags: , , gutenberg-new   

What’s new in Gutenberg 10.1? (3 March)

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/ 10.1 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. In addition Full Site Editing, Widgets and Navigation screens and Global Styles saw many improvements.

Reusable blocks improvements

With the ongoing effort to improve the different user flows related to Reusable blocks we’ve seen tons of enhancements recently that are worth mentioning 🙂 .

Visual clarity of Reusable blocks has been improved with the 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.’s title displayed next to the block type in toolbar, in Navigation List and in Breadcrumbs. Towards the same direction if a child block is selected, the Reusable block is outlined making it easier to identify where the block starts and where it ends.

Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to modify the saved title of reusable block in 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. inspector and the newest one is the enhanced creation flow, that also allows you to cancel the action.

Better clarity on the Image toolbar

The Image block’s toolbar has now better clarity by following the “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., block level, inline” order in the block toolbar. This makes the grouping so much clearer and other blocks are going to follow :).

Spacing options for Social Links and Buttons

You can now set how the space between and around Social Links will be distributed. In addition more options were added to Buttons block.

10.1

Features

  • Use a modal for the reusable blocks creation flow. (29040)
  • Normalize Image’s block toolbar. (29205)
  • Add Items Justification to Social Links. (28980)

Enhancements

  • Improve the sorting algorithm while searching parent pages. (29143)
  • Buttons: Add space-between justification controls. (29160)
  • Avoid focusing blocks when inserting them into the canvas. (28191)
  • Create Block: Use register_block_type_from_metadata to register blocks on the server. (28883)
  • Greatly improve dragging performance of the focal point picker. (28676)
  • Improve block search input’s accessible name and placeholder. (28393)

New APIs

  • Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array. (29099)

Bug Fixes

  • Fix Slash Inserter position. (29288)
  • Fix issue with invisible reset template hover state. (28912)
  • InputControl: Fix labelPosition rendering with new ui/flex component. (29226)
  • Button sizing style fix. (29208)
  • Create Block: Fix the background color in esnext template. (29223)
  • Add border-collapse to default block styles in Table block. (27628)
  • Navigation Block:
    • Fix Navigation Links when post type is not Page or Post. (28892)
    • Fix inline style inheritance. (28868)
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice shown when rendering a navigation link block. (28999)
  • Fix is-hovered event listener. (28715)
  • Fix function call in justify toolbar. (28955)
  • Fix footer icon color. (29199)
  • Show page titles special characters in the parent page selector. (29104)
  • Edit Post: Automatically connect a menu item with the pinnable sidebar 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. (29081)
  • Make Modal component use the aria.labelledby prop. (29020)
  • Fix adminadmin (and super admin) menu scroll on editor page. (28959)
  • Prioritize coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks in the inserter. (28945)
  • Make the __experimentalCaptureToolbars option work reliably. (28905)
  • Ensure sticky tabs are in front of their panel’s descendants. (28562)
  • Navigation Component: Increase color and padding specificity. (28619)
  • Add note to indicate why priority queue callbacks may be undefined. (28337)
  • Keep initial formatting on paste for Preformatted and Verse components. (27781)
  • Rich text: Keep block ID on split. (28505)
  • Fix cursor on rich text blocks when outline mode is active. (29106)

Experiments

  • Improve loading method for block styles. (28358)
  • Do not use __experimentalSelector to check the panel title. (29264)
  • Update documentation for social links & 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.. (29294)
  • Navigation Screen:
    • Add block deselection when clicking canvas background. (28876)
    • Improve experience for user creating their first menu. (28767)
    • Fix positioning of nested submenus. (28934)
  • Full Site Editing:
    • Use a modal for the template part creation flow. (29108)
    • Add an ‘area’ term for Template Parts. (28410)
    • Add content menu items preview in Navigation. (29225)
    • Replace locate_template method. (28942)
    • Site Editor:
      • Inject theme attribute into template parts too. (29080)
      • Organise semantic template parts. (29030)
      • Show contextual icon in the Inspector’s template tab. (29195)
      • Add template tab to sidebar. (28633)
  • Global Styles:
    • Support skipping serialization in the color hook (block supports mechanism). (29142)
    • Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. font-family list. (28960)
  • Widgets:
    • Use textarea for editing block widgets. (24899)
    • Set container classname dynamically depending on 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. block. (26375)
    • Add Widgets 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/. changes from Core-51460. (29242)
  • UIUI User interface Components:
    • Add Surface Component. (28596)
    • Add Elevation Component. (28593)
    • Add FormGroup + ControlLabel components. (28568)
    • Add spinner. (29146)
    • Rename ui files to match simpler scheme. (28948)
    • Add 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. based Scrollable component wrapper. (28979)
    • Add createComponent unit tests. (28949)
    • Add hooks based VisuallyHidden. (28887)
    • Add ControlGroup. (28982)
    • Add Portal. (28981)
    • Update documentation (README + inline docsinline docs (phpdoc, docblock, xref)). (29128)
    • Update color-picker snapshot tests to use diff matching. (28925)
  • Bugs:
    • Fix Site Logo Styles. (29227)
    • Template Part: Fallback to missing state if slug or theme is invalid. (29041)
    • Site Editor:
      • Fix misalignment with navigation toggle and 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.. (29093)
      • Fix navigation editor block selection clearing. (29293)
      • Fix navigate to link error. (29239)
      • Fix position and style of “Dashboard” link. (29034)
      • Fix end-to-end test errors introduced by template sidebar. (28950)
    • Widgets:
      • Fix widgets preview URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org typo. (29062)
      • Fix php error in the widget screen. (29137)
      • Fix legacy widgets not previewing and widgets saving issue. (29111)
      • Fix server rendered widget not previewing. (29197)

Documentation

  • Add 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) testing instructions. (28947)
  • Updates to Outreach Page. (28929)
  • Update Create a Block tutorial to use block.json. (29027)
  • Expose Block Directory references in the handbook. (29025)
  • Update “key concepts”. (28973)
  • Remove Font style, weight, decoration, and transform presets from the theme.json documentation. (29200)
  • Combobox Control: Update 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. doc. (28787)
  • Add block variations to FAQ. (29154, 29170)
  • Add templates and global styles to key concepts. (29071)
  • Update block metadata section to promote PHP API. (29023)
  • Fix the header links, add link to user documentation. (28857)

Code Quality

  • Replace store name literals in block-library. (28975)
  • Fix typos in PHP comments. (29198)
  • Format TS files according to coding styles. (29064)
  • WP_Theme_JSON_Resolver: Update translate terminology. (28944)
  • Improve code readability by not passing variables by reference. (28943)
  • Convert navigation link to use hooks and context. (28996)
  • Block props: Avoid memo (block mode). (29139)
  • Reduce memoized context:
  • Use ref callback:
    • 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., selection clearer, typing observer. (29114)
    • Canvas click redirect & typewriter hooks. (29105)
    • Clipboard handler. (29090)
    • Hover hook. (29089)
    • useBlockProps. (28917)
    • Block nodes. (29153)

Tools

  • Add support for native TypeScript. (28879)
  • Limit the npm version to be 6. (29204)
  • Run CI jobs on wp prefix branches. (29194)
  • Eslint plugin: Add suggestions to “data-no-store-string-literals” rule. (28974)
  • Update codeowners. (29280)
  • Scripts:
    • Coerce live reload port to integer. (29196)
    • Add Python 2.0 to other OSS licenses in license checker. (28968)
  • Create Block: Fix issue with processing unrelated engines. (29066)
  • Fix spacing in new contributor welcome message. (28958)
  • Add reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-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. package with i18n React bindings. (28465)
  • babel-plugin-makepot: Don’t transpile the package code. (28911)
  • docgen:
    • Don’t transpile the package code. (28910)
    • Replace doctrine with comment-parser. (28615)
  • wp-env:
    • Use Simple GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. instead of NodeGit. (28848)
    • Fix issue where mappings sources were not downloaded. (28930)
  • Changelog script: More fine-grained Changelogs for patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. releases. (28424)
  • End 2 End Tests:
    • end-to-end Tests: Add gallery caption coverage. (29127)
    • Add basic block preview coverage for inserter. (29117)
    • Make navigation editor end-to-end tests more robust. (28936)
  • Testing: Add snapshot-diff. (28897)

Various

  • Add a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. icon. (29232)
  • Update text color icon. (29212)
  • Blocks: Map block type definitions that use PHP naming convention for keys. (28953)
  • Safe access to window/document when in node context:

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.15.3 s30.11 ms
Gutenberg 10.05.7 s29.62 ms
WordPress 5.64.1 s35.47 ms

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

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