Riad Benguella 10:53 am on March 11, 2020
Tags: core-editor ( 722 ), editor ( 219 ), gutenberg ( 503 ), gutenberg-new ( 183 )

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 release. 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 Site 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
- New icons. 20464
- Avoid empty menu groups. 20495
- Block Placeholders. 20441, 20676.
- Various tweaks 20679, 20578.
Improve the Back to WP Adminadmin (and super admin) button in Fullscreen Mode. 20603
Make 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

Add tutorial for creating a custom block editor instance. 20410
Create a new “Gutenberg as a Platform” page. 20666
Typos and tweaks: 20382, 20386, 20517, 20662, 20454, 20659.

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 system requirements checks. 20461 20456
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:
- TextControl 20467
- TextAreaControl 20472
- SelectControl 20482
- Tooltip 20322
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

wootimes 11:30 am on March 11, 2020

Will be 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 a part of the WP 5.4 release?
- Riad Benguella 11:31 am on March 11, 2020
  
  No, it won’t. 5.4 is in the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). stage now, we can’t include features and enhancements.
  
  It will be part of 5.5.
- Matias Ventura 11:39 am on March 11, 2020
  
  Target would be 5.5, which should give us a full release cycle to test, tweak, and gather further feedback.
Drivingralle 12:18 pm on March 11, 2020

I would like to see 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. patterns inside the block inserter. Find 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. to far away from where I want to insert a pattern.
- Riad Benguella 12:27 pm on March 11, 2020
  
  Hi there!
  
  Yes, that’s the ultimate plan. you can follow the patterns issue here https://github.com/WordPress/gutenberg/issues/17335
Sander van Dragt 1:22 pm on March 11, 2020

Great work! What’s the performance budget for Loading Time and KeyPress events? ie are we happy with the current numbers or are we looking to incrementalyl improve them?
- Riad Benguella 1:25 pm on March 11, 2020
  
  We’re pretty happy with the typing performance, a bit less about the loading time.
  
  Performance is an ongoing subject thought that we keep monitoring as we add features. We’re constantly making progress since the first release and hopefully, we’ll be able to find more wins here and there.
Gabriel Mays 2:53 pm on March 11, 2020

Great update, love where this is going, especially with patterns! The rate of improvement is quite impressive–awesome work team!
gbselect 10:31 am on March 18, 2020

I would like to see some liberty with 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. where we can add and create patterns. I have created my previous website using elementor now I using Gutenburg for all my new websites.
- Riad Benguella 12:24 pm on March 18, 2020
  
  An APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to add third-party patterns is definitely on the roadmap.
samjco 10:37 am on May 15, 2020

Here are my thoughts and ideas…

I think that it would be much cleaner if:
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. patterns opened in a popup showing the categories on one side (1/3) and the block pattern choices, based on cat selection, on the other side (2/3).

And…
It would be nice to allow the community to build custom patterns (based on categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. e.g: 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.. Hero, etc) and add them to a “Block Pattern Repository” so users can add them to Gutenburg the same way we do 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 and themes.

Some patterns in the repo can be dynamic (maybe packing a 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. somewhere) and static to be edited in the editor.

So then the theme block builders (who might phase-out because of Patterns) can focus their attention on building “Dynamic Block Patterns” that can be added to the Block Pattern Repository that we can add to out Gutenburn block library.

My two cents
- Riad Benguella 11:56 am on May 15, 2020
  
  Hi There! thanks for the comment and I agree with most of what you shared here.
  
  As you see here https://github.com/WordPress/gutenberg/issues/21080#issuecomment-605161443 it’s not a modal but having the categories on the side is being considered.
  
  Pattern categories are coming soon and patterns can already contain dynamic blocks.
  
  when it comes to 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. Pattern Repository”, that’s definitely something on a lot of people’s mind but as you can imagine, it’s a big project and it will be addressed on time.
irexoxer 3:30 pm on July 5, 2020

I would like to see some liberty with 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. where we can add and create patterns. I have created my previous website (Rexoxer.) using elementor now I using Gutenburg for all my new websites.