Jorge Costa 11:07 am on September 3, 2020
Tags: , , ,   

What’s new in Gutenberg? (2 September)

The big focuses throughout this release cycle were full site editing (FSE) and the widgets screen. On the FSE front, multiple FSE blocks were implemented and are now available for testing in the FSE experience (“Site Editor”). With regards to the widgets screen, more details are shared below.
Aside from these two focuses, 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/ 8.9 contains some small new features, multiple bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes, and some performance improvements.

Widgets moved out of experiments

One of the objectives of WordPress 5.6 is to allow using blocks in 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. areas. This is a complex task, and for now there is no decision on whether the new screen should be available for all users or a subset of users. Your feedback may help weigh the options.

In Gutenberg 8.9, the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based widgets screen is enabled by default and replaces the default WordPress widgets screen. Themes and plugins are able to opt out of this screen by calling remove_theme_support( 'widgets-block-editor' ) or by using the gutenberg_use_widgets_block_editor filter respectively.

Your testing, feedback, and insights are very useful to inform the direction of the next iterations. If you come across any bugs, please submit a new issue in the Github repository.

8.9.0 🇧🇯

Features

  • Enable the block-based widgets screen. (24843), (24087)
  • Add character count to the info panel. (24823)
  • Latest Post Block: Allow adding links to featured images. (24548)
  • List block: Add color controls. (21387)

Enhancements

  • Disable the tools menu while the code editor is enabled. (24923)
  • Add picture keyword to the Image block. (24755)
  • Adding a maximum height to the long blocks previews. (24493)
  • Add “read more” keyword to the More block. (24794)
  • Improve the UXUX User experience of inactive widgets area on the widgets screen. (24790)
  • Trim whitespace from rendered widgets. (24789)
  • Block Directory: Explicitly close the inserter on block add. (24709)
  • Make strings translatable in block patterns. (24647)
  • Improve the UIUI User interface of the custom gradient pickers. (23802)
  • Adds suggestions for categories and formats to link controls. (22600)
  • Clarify the font size control label. (24619)
  • Convert all px values in front-facing styles to relative (em) units. (24523)

Bug Fixes

  • Fix infinite loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. in the Disabled component. (24935)
  • Fix wp-env start for non-english WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. sources. (24884)
  • Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure on the widgets screen. (24866)
  • Fix 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. flickering caused by the block preview border. (24739)
  • Don’t use an offset when dragging using a draggable chip. (24707)
  • Fix Image alignment controls styles in the Latest posts block. (24655)
  • Improve the focus state of the tags control remove button. (24632)
  • Fix Crash after undoing with the top toolbar on. (24629)
  • Avoid double borders on 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. boxes panels. (24627)
  • Fix Inline text-color regex edge-case. (24621)
  • Fix inserter z-index. (24614)
  • Missing selected block highlighting in the list view. (24609)
  • Fix the Pullquote block text color after unsetting the main color. (24600)
  • Fix style specificity for Button blocks with outline style and background colors. (24599)
  • Remove references to $default-font from front-facing styles. (24567)
  • Center-align the block variations buttons. (24547)
  • Fix categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select in QueryControls component. (24516)
  • Image Block: Prevent Alt and caption written during image upload from being discarded. (24471)
  • Correct the Unicode character used to represent the macOS Control key. (24452)
  • Fix undefined $block_type->supports PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher error. (24411)
  • Fix adminadmin (and super admin)-theme colors in the editor canvas. (24408)
  • Limit the number of fetched tags to avoid infinite queries. (23841)
  • Fix error when inserting a 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.) with an apostrophe. (21693)
  • Fix the alignment of the 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. post button. (24889)
  • Make legacy widgets support for non-class-based widgets. (24861) (24792)
  • Remove WP_Widget_Block from the legacy dropdown list. (24787)
  • Fix isSavingWidgetAreas selector. (24788)
  • Inserter: Update the search form placeholder text when changing tabs. (24697) (24802)
  • Avoid lossy HTML entities encoding by setting charset. (24645)
  • Embeds: Don’t transform into specialized embed block variation if it’s not registered. (24559)

Performance

  • Fix getBlocks selector performance issues causing typing lags on Gutenberg 8.8.0. (24835)
  • Preload widgets on the widgets screen. (24855)
  • Only request the required fields to populate the parent page list. (23637)

New APIs

  • Core Data: Implement _fields data reuse for entities. (19498)

Experiments

  • Site Editing: Blocks
    • Add Post Comment block. (24781)
    • Add Post Comment Date block. (24854)
    • Add Post Comment Author block. (24824)
    • Add Post Hierarchical Terms Block. (24091)
    • Adds icons and descriptions to Post blocks. (24603)
    • Make Site title block render a link. (24725)
    • Add heading level toolbar to the Site title block. (24758)
  • Site Editing: UI
    • Alert when trying to leave the Site Editor with unsaved changes. (24659) (24719)
    • Update Template Part Block Placeholder Button Styles. (24633)
    • Template Part block – add border states in the editor. (24498)
  • Global Styles and theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. APIs:
    • Allow enabling/disabling custom colors from theme.json config. (24761) (24932)
    • Rename features.colors to features.color. (24933)
    • useEditorFeature: Take block context into account. (24416)
  • Navigation block and screen:
    • Add Post, Page, Category and Tag variations to Link. (24670)
    • Add block inspector to nav screen. (24669)
    • Add opt-in Navigation block rendering. (24503)
    • Support drag-and-drop for submenus of navigation blocks. (24479)
    • Fix invalid textarea markup. (24641)
    • Add unit tests for edit-navigation store. (24681)

Documentation

  • Document Components
  • Update tutorial Creating a block-based theme. (24736)
  • Correct BoxControl values in README examples. (24717)
  • Add ToggleControl at related components section in FormToggle documentation. (24636)
  • Typos and tweaks: (24857), (24811), (24695), (24650), (24628).

Code Quality

  • Keep the default color CSSCSS Cascading Style Sheets. variables for npm package consumers. (24890)
  • Refactor components as functional components:
  • Refactor and move drag and drop geometry code. (24715)
  • Only update state if we have a valid reference. (24496)
  • Add state for storing dragged block client ids to block-editor store. (24782)
  • Remove commented-out blank line. (24858)
  • Simplify gutenberg_widgets_init when $hook === ‘widgets.php’. (24793)
  • Refactor block drop event handlers into a single hook to support drag and drop in List View. (24649)
  • Move DOM utility functions from wordpress/blocks to wordpress/dom. (24618)
  • 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/. warning on text color formatter. (24686)

Build Tooling

  • Update package lock file. (24815)
  • Update the minimum version and the tested up to flag of the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. (24693)
  • Build: Make the watch rate slower to avoid using a lot of CPU while developing. (23998)
  • Fix Performance Tests on CI. (24925)
  • Add tests for slashing behavior. (24785)
  • Add permissions PHPUnit tests. (24784)
  • Update browserlist dependency. (24756)
  • Allow local Prettier configuration to take precedence in the recommended ESLint configuration. (24590)

Performance Benchmark

Gradual changes in the editor have made its rendering pipeline more asynchronous. As a result, the usual metrics (loading time, typing time) that we collect in the performance benchmarks may have not always represented the performance gains and losses experienced by some users.

We are improving the way times are measured to account for the more async nature of the editor rendering. We will update this post with performance results once we are confident that they accurately measure the performance of the editor.

The synchronicity changes in question only affect Gutenberg 8.8 and 8.9.
The numbers shared for previous releases are still an accurate way of measuring the editor’s performance.

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