What’s New in Gutenberg? (20th February)

More than 51 contributors participated in this release. It marks an important milestone for Phase 2, as it’s the end of the porting widgets to blocks project. Next releases will be focused on explorations around the Widgets screen.

This release also includes a big refactoring to the formatting buttons and the RichText component, allowing us to fix a significant number of issues and to improve the writing flow.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks (aside from the Classic 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.) are not using TinyMCE under the hood anymore. This change should not have any perceivable impact, as the APIs of the RichText component and the custom formats registration have not changed.

In addition, contributors have worked on a number of improvements to existing blocks and UIUI User interface micro-animations.

5.1 🏳️‍🌈

Features

• Add a new Search block.
• Add a new Calendar block.
• Add a new Tag Cloud block.

Enhancements

• Add micro-animations to the editor UI:
  • Opening Popovers.
  • Opening Sidebars.
• Restore the block movers for the floated blocks.
• Consistency in alignment options between archives and categories blocks.
• Set the minimum size for form fields on mobile.
• Disable the block navigation in the code editor mode.
• Consistency for the modal styles.
• Improve the FormToggle styling when used outside of WordPress context.
• Use the block icons in the media placeholders.
• Fix rounded corners for the block svg icons.
• Improve the CSS specificity of the paragraph block styles.
• Require an initial click on embed previews before being interactive.
• Improve the disabled block switcher styles.
• Do not split paragraph line breaks when transforming multiple paragraphs to a list.
• Enhance the Quote block styling for different text alignments.
• Remove the left padding from the Quote block when it’s centered.
• 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):
  • Improve the permalink field label.
  • Improve the region navigation styling.
• Remove the 3 keywords limit for the block registration.
• Add consistent background colors to the hovered menu items.
• Allow the editor notices to push down the content.
• Rename the default block styles.
• Add inline image resizing UI.

Bug Fixes

• Fix a number of formatting issues:
  • Multiple formats.
  • Flashing backgrounds when typing.
  • Highlighted format buttons.
  • Inline code with backticks.
  • Spaces deleted after formats.
  • Inline boundaries styling issues.
  • Touch Bar format buttons.
• Fix a number of list block writing flow issues:
  • Allow line breaks in list items.
  • Empty items not being removed.
  • Backspace merging list items.
  • Selecting formats at the beginning of list items.
• Fix the color picker styling.
• Set default values for the image dimensions inputs.
• Fix sidebar panels spacing.
• Fix wording of the nux tip nudging about 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. settings.
• Fix the translator comments pot extraction.
• Fix the plugins icons color overriding.
• Fix conflicting notices styles when using editor styles.
• Fix controls recursion in the redux-routine package.
• Fix the generic embed block when using Giphy as provider.
• Fix the i18n message used in the Gallery block edit button.
• Fix the icon size of the block switcher menu.
• Fix the loading state of the FlatTermSelector (tags selector).
• Fix the embed placeholders styling.
• Fix incorrectly triggered auto-saves for published posts.
• Fix missing classname in the Latest comments block.
• Fix HTML in shortcodes breaking block validation.
• Fix JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser.
  https://www.javascript.com errors when typing quickly and creating undo levels.
• Fix issue with mover colors in dark themes.
• Fix internationalisation issue with permalink slugs.

Various

• Implement the inline format boundaries without relying on the DOM.
• Introduce the Registry Selectors in the data module.
• Introduce the Registry Controls in the data module.
• Allow extending the latest posts block query by using get_posts.
• Extend the range of allowed years in the DateTime component.
• Allow null values for the DateTime component.
• Do not render the FontSizePicker if no sizes defined.
• Add className prop support to the UrlInput component.

Chore

• Update lodash and deasync dependencies.
• Use addQueryArgs consistently to generate WordPress links.
• Remove merged PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher code:
  • jQuery to 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. heartbeat proxyfying.
  • References to the classic editor.
  • gutenberg_can_edit_post function.
• Disable CSS animations in e2e tests.
• ESLint
  • Add a rule to ensure the consistency of the import groups.
  • Add a rule to protect against invalid sprintf use.
• Remove obsolete CSS rules.
• Add e2e tests for tags creation.
• Add the feature flags setup.
• Implement block editor styles using a 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..

Documentation

• Add a new tutorial about the editor notices.
• Add JavaScript build tools documentation.
• Enhance the block’s edit/save documentation and code examples.
• Use Title Case consistently.
• Add e2e test utils documentation.
• Small enhancements and typos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

Mobile

• Add bottom sheet settings for the image block:
  • alt description.
  • Links.
• Implement the media upload options sheet.
• Implementing Clear All Settings button on Image Settings.
• Avoid hard-coded font family styling for the image blocks.
• Improve the post title component.
• Fix the bottom sheet styling for RTL layouts.
• Support the placeholder prop in the RichText component.

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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.

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg