What’s new in Gutenberg? (11 March)

With WordPress 5.4 around the corner, 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/ 7.7 is another exciting releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. It introduces patterns and the first iteration of a 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. UIUI User interface design which aims to synthetize the learnings from these past couple years of Gutenberg being out in the wild.

New Block UI

After more than a year from its first production release, the community pushed the boundaries of the editor further than we’d have expected. The number of third-party blocks exploded and millions of users are interacting with the editor in different ways. This led to a refresh of the Block UI to apply some of the lessons learned in the meantime.

The redesign includes:

  • A simpler Block Toolbar.
  • Better UI color contrast.
  • Consistent focus styles.
  • Redesigned icons.
  • Grid-based spacing and sizes.
  • And more.

As with any feature in the editor, this is the initial release and there’s still more work planned to bring more consistency in the remaining UI elements: 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. panels, drop-down menus, etc.

Block Patterns

While the editor has a rich set of built-in blocks, it is sometimes challenging for users to compose these blocks together in order to achieve the best designs for their pages. And as we accelerate towards Full Sitesite (versus network, blog) Editing, this becomes an important challenge to solve.

Different existing community-provided solutions have addressed this by providing rich sets of templates/layout that are ready to use and prevent that dreaded “white page syndrome”. There is a need to bring some consistency and coherence to these features. Gutenberg 7.7 introduces Block Patterns: predefined block layouts, ready to insert and tweak to address that problem.

As a first iteration, the Block Patterns UI has been added as a 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 from where you can pick and insert the patterns. This is considered an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia and the UI is expected to evolve over the next releases.

As a start, the plugin comes with a small limited set of patterns. The list will ultimately grow and be opened to third-party authors.

7.7 🇵🇭

Features

  • Add the initial version of the Patterns UI as a sidebar plugin (this is not the final interface and work is in progress to integrate with the main block inserter). 20354, 20715.
    • Add an initial set of patterns 20724.

Enhancements

  • Update the Block and editor UI. 19344
  • Improve the Back to WP Adminadmin (and super admin) button in Fullscreen Mode. 20603
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). the editor Fullscreen by default. 20611
  • Remove template locking from the columns block 20465
  • Make the inserter full height. 20526

Bug Fixes

  • 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):
    • Deselect first/last gallery images on blur. 14930
    • Revert top toolbar tab order 20571
  • Add an overlay to the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block preview to fix block selection in Firefox. 20425
  • Add missing 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) attributes in the SVG icons. 20538
  • 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. syntax error on Safari 12. 20507
  • Use a consistent width for the link suggetions. 20448
  • Use full labels for directional block movers. 20664
  • Columns block: Force 50% column width at mid-range viewport. 20597
  • Media & Text block: Fix frontend styles when “Crop image to fill” is selected 20539
  • Latest Post block:
    • Fix the 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. 20313
    • Don’t trim manual exerptts 20432
  • Fix sidebar scroll issue on small viewports. 20491
  • Social Link block:
    • Escape generated class name. 20479
    • Fix label attribute type as string. 20468
    • i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Use placeholder for the default label 20475
  • Simulated Queries (Device previews):
    • Check for match in stylesheet host and protocol to prevent Chrome breakage. 20673
    • Fix IE11 editor breakage. 20226
    • Fix incorrectly displayed preview option for private post types. 20604
    • Focus preview button after opening preview. 20570
  • Fix isURL regex to take account file urls. 20435
  • Fix error when deleting empty paragraphs in IE11. 20594
  • Fix hidden inserter toggle behind the popover. 20663
  • Fix block registration shared defaults reuse across blocks. 20565
  • Shim 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. attributes for early block registrations. 20544
  • Fix bouncing Custom color formatter. 20612
  • Fix Gallery block styles in Edge causing editor breakage. 20690

New APIs:

  • wordpress/env: Add support for ZIP URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org sources. 20426

Experiments

  • Lighter Block DOM:
    • allow block types to render their own wrapper 19701
    • Lighter InnerBlocks. 19910
    • Automatically add block class. 20658
  • BlockPreview: Add __experimentalOnReady prop. 17242
  • Edit Site:
    • Update template navigation to use new link control. 20366
    • Update the edit site save modal UI. 20608
  • Fix the block toolbar in the Widgets and Site Edit screens. 20458
  • Fix widgets screen inserter 20680

Documentation

Code Quality

  • Refactoring to existing blocks to use a lighter DOM:
    • List block. 20498
    • Image block. 20576
    • Heading block. 20493
  • Consistent block focus behavior on mount. 20577
  • Cleanup CSSCSS Cascading Style Sheets. variables. 20529
  • Use the EditorSkeleton component in the widgets and Edit Site pages. 20440, 20431.
  • Refactor SlotFill components. 19242
  • Remove useless style override for floats. 20501
  • Block popover: remove data-type. 20531
  • Resizable editor improvements. 20259

Various

  • wordpress/env:
    • Save the database as a volume. 20648
    • Fix accidental quotes in Site Title. 20520
    • Set owner of wp-content to www-data. 20406
  • wordpress/create-block:
  • 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 triggered by the BlockToolbar component. 20546
  • Skip the Type Writer effect component in IE 11. 20485
  • Update browserslist to fix out-of-date caniuse-lite messages 20709
  • Add storybook stories:
  • E2E Tests:
    • Add test for the Image block. 20622
    • More stable embed test. 20668
    • Fix intermittent RichText e2e test failure. 20457
  • Travis: Avoid skipping Puppeteer download. 20547
  • Plugin: Bump minimum WordPress version to 5.3 20628
  • @wordrpess/priority-queue: Fix for environments that don’t have window defined. 20486
  • Update jest configuration to only ignore tests from /wordpress/ as a subdirectory 20420

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.

Version Loading Time KeyPress event (typing)
Gutenberg 7.7.0 7.7s 37.86ms
Gutenberg 7.6.0 7.0s 34.97ms
WordPress 5.3 7.2s 66ms

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