What’s new in Gutenberg? (12 February)

This is the last release that is going to be fully included in WordPress 5.4, containing one week of updates from 45 contributors. The release cycle was temporarily shortened to align features with WordPress 5.4 Beta 1.

The Social Links block has been in the works since a few releases, but now it’s a stable (no longer experimental) block.

Adding a Social Links block.
Adding a Social Links block.

Rich text can now be coloured!

Adding inline colour to text.
Adding inline colour to text.

It is now also possible to display featured images in the latest post block.

Latest post with featured images.
Latest post with featured images.

7.5 🇹🇭

Features

  • Mark the Social Links block as a stable block 20134 19887 20074 20150 20101
  • Support adding featured images to Latest Posts block 17151
  • Add support for TikTok video Embeds 19345
  • Add inline text color support 16014
  • Add text color support to Columns block 20016

Enhancements

  • Add type and angle picking to the custom gradient component 19582
  • Add transform for button to buttons block 20063
  • Navigation block:
    • Implement new design for sub-menus 19681
    • Set inherit color to anchor elements 20038
    • Fix getting Navigation parent block 20032 20057
    • Set width in order to show caret 20075
    • Improve colors handling 20022
    • Rename background color CSS class 20018
  • Block Library: Avoid column width auto-adjustment when sibling width changes 19515 20169
  • A11y:
    • Incorporate settings in the edit state of the LinkControl component 20052
    • Announce all Notice components messages 15745
    • Button block: Remove title attribute 19735
    • Navigation block: Remove title attribute 19990
  • Image block: Keep existing caption if the stored one is empty 19641
  • Enhance the custom gradient picker UI 20099

New APIs

  • Allow third-party keyboard shortcuts registration in the keyboard shortcuts modal 19965
  • Stabilize the AnglePickerControl component 20118
  • Add .wp-env.json config file support to wordpress/env 20002
  • Blocks: Promote block variations to stable API 20068
  • Mark the gradients theme API as stable 20107

Experimental

  • Add ability to disable the block popover through __experimentalUIParts.hasPopover option 19922
  • Add the __experimentalEditorSkeleton component to the block-editor package 20050 20132

Bug Fixes

  • A11y: Show open button when the sidebar is closed and tabbing out of the content 19726
  • IE11 Compatibility: Add DOMRect polyfill 20110
  • Block Editor: Fix warning when rendering InnerBlocks 20082
  • Featured image appears cropped 20128
  • Fix predefined text colors used in the Group block on the frontend 20119
  • Use array form for contrast checkers. 20143
  • i18n: make experimentalUseColors labels translatable 20112
  • Multi select: remove inserter between selected blocks 20096
  • Remove alignment options from nested Button blocks 19824
  • URL: Conform to URL Living Standard definition of valid URL 19871
  • Select the correct media in the media modal when replacing existing media 20100
  • Avoid resizing the editor canvas when opening the publish panel 19843
  • Fix Media & Text block styling when media is set to show on the right 20125
  • Fix excerpt rendering in the Latest posts block 19669

Documentation

  • Docs: Contributor Guide update subpages 19939
  • Prettier: Update format-js to use default config, and update editor docs usage 20036
  • Target docs to manifest.json 15639
  • Update main project README 19743
  • Update the Getting Started Docs to use wp-env 20044
  • Typos and tweaks: 20055 20077 20025 20060 19470

Various

  • Block Editor: Update BEM syntax to CSS modifer guidelines 19738
  • Block Library: Standardize PHP function names used 20085 20039
  • Project Management Automation:
    • Log skipped tasks and retain wrapped task names. 20034
    • Support adding milestones for fork PRs. 20058
    • Avoid gracefully handling error 20009
    • Avoid milestone task for forks 20049
    • Call core setFailed with error message 20012
    • Check error object for parsed errors 20014
    • Guard against non-matching commits in addMilestone. 20147
    • Tolerate duplicate milestone 20011
    • Pull Request Automation: Avoid automation tasks for forked repository 20021
  • wordpress/env:
    • Fix GitHub source pattern 20131
    • Fix syntax error where spread operator could fail 20113
  • Move existing icons to the wordpress/icons package 20091 20072 19959 20094 20087
  • Ensure the default Prettier config is used with lint-js when needed 20071
  • Data: Log first-pass useSelect errors 20122
  • Compat: Social Links: Remove legacy renderers from packages 20098
  • Core Data: Mark the getEntityRecordNoResolver selector as experimental. 20053
  • Core Data: Remove unused __experimentalUseEntitySaving hook. 20148
  • Hide the navigation block behind feature flag 20133
  • Fix Intermitent e2e test failures 20065
  • Move the e2e tests to the right folders 20135
  • Switch social link icons to import svg parts from primitives 19877

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.5.0 6.491s 34.695ms
Gutenberg 7.4.0 6.413s 36.81ms
WordPress 5.3 6.331s 75.19ms

#core-editor, #editor, #gutenberg

Editor Chat Agenda: 12th February 2020

Note taker: @itsjusteileen

This is the agenda for the weekly editor chat scheduled for Wednesday, February 12, 2020, 09:00 AM EST. This meeting is held in the #core-editor WordPress Slack channel.

Highlighted Blog Posts

Discussion Topics

  • WordPress 5.4 Upcoming Release
  • Exclusion of the Navigation Block from the 5.4 Release
  • Gutenberg 7.5.0
  • Weekly Priorities
  • Task Coordination
  • Open Floor

If you have anything to share for the Task Coordination section, please leave it as a comment on this post. If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #editor-chat

#editor

What’s new in Gutenberg? (5 February)

More than 51 contributors participated in this exciting release.

It introduce some handy color related features to the Group and Columns block. Instead of changing the text color block by block you can now wrap a group blocks in a Group block and assign the base color to the parent block.

For consistency with the Navigation and the buttons block, the Link UI has been updated in the RichText formats.

This is also an exciting release of the block authors, we now have an official tool to scaffold blocks quickly. It’s as easy as running npm init @wordpress/block locally.

7.4 🇰🇷

Features

  • Add background color support to the Columns block. 17813
  • Add text color support for the Group block. 19181

Enhancements

  • Navigation Block:
    • Add submenu chevron indication setting. 19601
    • Save the ID to the destination entity. 18641
    • Select Parent Navigation Block after clicking “Create from all top-level pages”. 19817
    • Update Appender visibility. 19598 19846
    • Move the Link Settings panel. 19917
    • Improve the UX to add links. 19686
  • Multi-selection: don’t focus first selected block. 19762
  • Use the new link control component in the RichText link format. 19462
  • Copy: Apply sentence case formatting to panel titles. 19901
  • A11y: Add conditions and new translation strings for the BlockMover. 19757

New APIs

  • Add a new wordpress/create-block package for block scaffolding. 19773 19867
  • Add a new wordpress/icons package:
    • Introduce the package. 17055
  • Add a new wordpress/primitives package. 19781 19876

Bug Fixes

  • Prevent gallery images from creating undo levels as they load. 19937
  • FontSizePicker: Adjust Select Button size. 19479
  • Remove post title escaping. 19955
  • Fix Failure message styling in placeholders. 19673
  • Fix RTL styles for the Media Text block. 18764
  • Fix panel header styles. 19842
  • Fix the editor fixed position at the 960px breakpoint. 19970
  • Allow disabling color selection but keeping gradient support. 19925
  • Prevent crash when creating a hierarchical post without a title. 19936
  • Media & Text block: “Crop image to fill entire column” setting resets on image change. 19765
  • Prevent Alt+F10 from scrolling to the top. 19896
  • Fix clearing multi-selection with side click. 19787
  • Update hover and focus selectors for “Move to Trash” to ensure the link is always red 19974.
  • Popover component:
    • clean up requestAnimationFrame. 19771
    • fix typo causing the mobile inserter to go out of view. 19978
  • Fix bug in block multi-selection causing Rich text editing to be disabled. 19839
  • Fix useSelect React hook timing and rerendering issues. 19286
  • Core-data: do not publish outdated state to subscribers during updates. 19752
  • LinkControl component (Navigation and buttons blocks):
    • Initialize inputValue state from value prop. 19737
    • Handle submission via form handler. 19651
    • Use URL as a link when title empty. 19739
    • Prevent focus loss in edit mode toggle. 19931
    • Resolve error when value is undefined. 19856
    • Handle Popover onClose for LinkControl. 19885

Experiments

  • Add AnglePicker Component and useDragging hook. 19637
  • Add Global styles CSS variables generation mechanism. 19883
  • Allow blocks to register variations that shows-up in the inserter. 19243
  • Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. 19330

Documentation

  • Add docs for LocalAutosaveMonitor and __experimentalUpdateLocalAutosaveInterval. 19915
  • Add markdownlint script to lint docs markup. 19855
  • Add format-js detailed documentaation to wordpress/scripts package. 19946
  • Reorganize the Contributors Guide. 19853
  • Clarify when isEligible function is called. 19899
  • Typos and tweaks: 19833, 19914, 19736, 19759, 19869, 19802, 19813.

Various

  • Introduce Prettier Formatting:
    • Add the formatting script. 18048 19994
    • Format the codebase. 19963
    • Set a consistent line width. 19992
  • Automation:
    • Fix pull request merge automation errors. 19768
    • Run pull request automation on closed. 19742
    • Add a step that updates CHANGELOG files before npm releases. 19764
  • Allow Babel Stage 4 features. 19831 19065
  • Use a Link to the changelog instead of adding it inline in the plugin README. 19761
  • Use require.resolve() in wordpress/jest-preset-default config 19957.
  • Fix multi-selection intermittent e2e failure. 19865
  • Add Placeholder component to Storybook. 19734
  • Include block.json files in the plugin build output. 19786
  • Rename patterns to variations in the Block API. 19966
  • Paragraph block:
    • remove min-height. 19835
    • remove unnecessary CSS after shortcuts removal. 19821
  • Refactor ObserveTyping as function component. 19881
  • Move the is-navigate-mode classname to the WritingFlow component. 19868
  • Block: use React context to provide the selected element. 19782
  • Remove dead is-hovered selectors. 19870
  • Remove the editor dependency from the block library. 16160
  • Remove an unnecessary import from the playground. 19893
  • Refactor the RichText wrapper to use React hooks for wrapper component. 19095
  • RichText API: Limit “prefix” transformations to Paragraph blocks. 19727
  • Apply width-based modifier classes to Placeholder only when the width is known. 19825
  • Various:
  • Refactor the server-side rendering of the Navigation block. 19989 19991
  • Fix server-registered fixtures script. 19884
  • Remove the RichText is-selected class. 19822
  • Testing: Use deterministic selectors for incremented IDs. 19844

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.4.0 5.037s 34.54ms
Gutenberg 7.3.0 5.461s 34.63ms
WordPress 5.3 6.631s 71.553ms

#core-editor, #editor, #gutenberg

Editor chat Summary: 5th February 2020

This post summarizes the weekly editor chat meeting agenda here. Held on Wednesday, 5th February 2020 held in Slack. Moderated by @andraganescu.

WordPress 5.4

Gutenberg is getting ready for the incoming WordPress 5.4 release. This board should be a good summary of the current WP 5.4 project. @youknowriad mentioned that the beta1 is due next Tuesday, and it means feature-freeze.

So all features that should go in WordPress 5.4 should land this week (3rd – 7th Feb 2020) or wait for WP 5.5.

Gutenberg 7.4

If all goes as expected, the stable release should be published a bit later today, 5th February 2020.

Amongst the new updates it will include, a few highlights:

  • added shippedProposals to babel-env options
  • Navigation block’s submenus now have a chevron display option
  • background colour support to the Columns block
  • over 25 bug fixes and more than 80 documentation and other various updates

Weekly Priorities

Our short term general priorities remain:

  • Landing the Gutenberg 7.4.0 release
  • Getting Gutenberg ready for the WP 5.4 release

The February, “What’s next in Gutenberg” post is up!

Task Coordination

@nosolosw

I’ve continued the work initiated by @jorgefilipecosta and consolidated the overall Global Styles data proposal in this PR 20047 While waiting on reviews, I’m going to focus on putting together a PR to demonstrate how this data would be used client-side.

@youknowriad

I’ve been working on a few things:
– Priorities post
– WP 5.4 patch (e2e testing)
– Continue my icons package refactoring
– Allow third-party keyboard shortcuts registration
I expect to continue on some of these (icons, WP 5.4) and maybe rework on the G2 branch and land it after WP 5.4 beta1

@aduth

I’ve been focused largely on trying to land things in time for WordPress 5.4 beta. Right now mostly around: The new link editing UI, columns resizing improvements. I sort of hoped to get something with “sticky” preferences using user meta, but that one might slip, based on how the discussion around it is unsettled.

@get_dave

Working on the ability to create Pages within Nav Block, in PR 19775 

@andraganescu

I have been working on:
– the PostAuthor block 19894 – this could use a review, and some design eyes cc: @mapk
– pushed with @jorgefilipecosta a fix for the rendering the Navigation block in core
– tinkered more with always-on URL showing in the MediaReplaceFlow component 19504 – a bit stuck on wether to use the LinkControl or move along with the older controls

@karmatosed

I am deep in the global styles world with a side order of triage. Lots of interesting thoughts bouncing around: 19255 This week I am going to be exploring if we need more tools for global styles, interface beyond side and also try and create some things with the tools we are suggesting.

@itsjonq

Also deep in Global styles work, alongside @karmatosed, @nosolosw, and @jorgefilipecosta
Mostly planning and coordinating. Also helping with Design x Dev explorations with @karmatosed on the UI

@mcsf

I’m focusing on the reimplementation of Social Links using the new Block Variations API (19887). Should be good to go.
Other focuses concern 5.4: little items needing core patches, etc. 

@mapk

– Helping to wrangle PRs for WP 5.4
– Providing feedback on Columns block work
– Moved reusable blocks link to Block Manager

@retrofox

We keep working on Navigation improvements in general. One of the most important was the implementation of the new design of sub-menus:
19681. It makes the Navigation really better especially in terms of UI.

Also, we tried to consolidate the styles for both front-end and editor-canvas in a single file in order to make them as similar as possible. among other improvements.
Here is the navigation dashboard, just in case.

@tellthemachines – from the agenda comments

I have been working on a fix for a few columns styling issues, and aiming to make the columns block compatible with the above editor resizing functionality. The PR is 19297

Open Floor

First @aristath raised attention on 19993, which is an important addition to the Navigation block. Also he mentioned the meeting in #theme-review starting soo, agenda here.

We had a few things from the agenda comments for the open floor.

@paaljoachim highlighted pr 20015 about where to place the caption alignment button. Following a discussion between @mapk, @youknowriad, @epiqueras and @jeffreycarandang  more discussion will be held in the PR.

Also @paaljoachim highlighted pr 15102 and Trac ticket 49185 about optionally not embedding links to another WordPress site. Many people approved @mcsf ‘s suggestion to “combine the undo behaviour with a timely snackbar notice”.

@tellthemachines had three things for the open floor, from the agenda comments.

1st is that the resizable editor work in 19082 is now complete and in need of code review.

2nd was the new public facing API of adding CSS markers to define where to start and where to end media quert manipulation. @youknowriad asked if we should wait with this feature until WP 5.5 beta 1 and not launch it as part of WP 5.4.

Probably @tellthemachine ‘s offer to write documentation/blog post explaining how it works will draw even more attention and help deciding when to include the feature.

3rd is that there’s going to be a CSS meeting!

To discuss evolving standards, new tools and best practices join the CSS meeting on the 13th February, 9pm UTC. All details here.

The CSS meeting announcement had many positive reactions 🙌

On a final note, @jorgefilipecosta raised the new discussions happening around global styles and how those might affect they way we simulate styles and hence how the resizable editor works. @youknowriad suggested that he seeks @tellthemachine ‘s input on those global styles discussions.

<-- /meeting: 5 February 2020 -->

Final note

If you want something discussed during the next #core-editor meeting, on Wednesday, 12th February 2020, 2pm UTC do one of:

  • add it to this agenda document
  • or add a comment below
  • or comment on the meeting agenda post once it’s published.

Thank you and keep up the good work!

#gutenberg, #meeting-notes

What's next in Gutenberg? (February)

This is a monthly update containing the high-level items that Gutenberg contributors are focusing on for the next month. Join us in our efforts.

WordPress 5.4

The main priority for this month is to ensure that the version of Gutenberg included n WordPress 5.4 is stable and performant.

  • Fix all critical bugs discovered before and after the WP 5.4 beta 1.
  • Write dev notes and document the API changes landing in WP 5.4.

Block Content Areas

Work on this major focus is ongoing and is expected to continue iterating over the next months.

  • Work on a separate Edit Site UI
    • Switching templates. 19141.
  • Add more Full Site Editing blocks (post navigation 19956, comments form 19954, comments count 19953) and enhance the existing ones (Post Author, Post Date).
  • Continue on the experimental block-based themes.

Global Styles Settings

Global styles are an ongoing project that has two main goals:

  • Simplify how theme authors tweak the visual aspect of the different blocks.
  • Allow the user to override these styles globally in the UI for Full site editing.

The next steps are:

  • Update the Core blocks styles to support the Global styles variables;
  • Define and document the available settings.

Block UI

The first iteration of the new Block UI is expected to land later this month. 19344.

Tightening up

Existing interactions and blocks will be iterated on:

  • Social Icons block update to use the Block variations API. 19887.
  • Resizeable editor (Multi-device preview) 19082.
  • Polishing the Navigation block Projects/31.

While these are our focuses don’t forget you can always help with triage, needs testing issues, good first issues and reviewing PRs

#core-editor

Controlling the Block Editor

One of the important use-cases of the block-editor is the possibility to control the experience programmatically. Controlling the experience means allowing agencies and developers to configure or restrict the usage of the different features available in the editor. This has always been one of the priorities while adding features to Gutenberg and it will continue to be.

As of today (included in WordPress 5.3), the block editor comes with a number of API to achieve this:

Blocks

Blocks are the main extensibility API of the editor. Thus, developers have the possibility to register custom blocks but they can also restrict the list of available blocks. This can be done both server-side and client-side. Here’s one of the available techniques to do so:

function my_plugin_allowed_block_types( $allowed_block_types, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $allowed_block_types;
    }
    return array( 'core/paragraph' );
}
 
add_filter( 'allowed_block_types', 'my_plugin_allowed_block_types', 10, 2 );

Refer to the documentation for more block types restriction techniques.

Block Style Variations

Several core blocks offer style variations. For instance, the Buttons block comes with two variations “Fill” and “Outline”. The editor provides APIs to register custom style variations and to remove existing ones:

// Registers a style variation for quotes.
register_block_style(
    'core/quote',
    array(
        'name'         => 'blue-quote',
        'label'        => __( 'Blue Quote' ),
        'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
    )
);

// Unregisters the style variation named "fancy-quote"
unregister_block_style( 'core/quote', 'fancy-quote' );

Locked Templates

Locked Templates offer a way to restrict the content of Posts, Pages, CPTs to a given format.

For example the following template can be used to restrict the content of a Books CPT to an image, a paragraph for the author and a description.

array(
	array( 'core/image', array(
		'align' => 'left',
	) ),
	array( 'core/heading', array(
		'placeholder' => 'Add Author...',
	) ),
	array( 'core/paragraph', array(
		'placeholder' => 'Add Description...',
	) ),
)

Refer to the documentation more information about the Templates API.

Theme Supports

Colors

Several blocks offer color customization features. Developers can customize the default color palette to provide a consistent color scheme across the whole website.

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'Strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'Light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
) );

Users have the possibility to choose a custom color as well. This feature can also be disabled:

add_theme_support( 'disable-custom-colors' );

Additionally, it is possible to define an empty color palette to remove all color customization panels from the editor.

add_theme_support( 'editor-color-palette', array() );

Font sizes

Some blocks also allow the user to tweak the font size and developers have the possibility to define their own set of font sizes.

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'Small', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'Regular', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    )
)

Developers can choose to remove the ability to use a custom font size.

add_theme_support( 'disable-custom-font-sizes' );

Additionally, it is possible to define an empty font sizes set to remove all font size customization panels from the editor.

add_theme_support( 'editor-font-sizes', array() );

Gradients

Recently, the ability to use gradients was added to the editor (only available in the Gutenberg plugin). Similarly to colors, developers can define a custom gradients palette, disable custom gradients, or disable the gradients entirely.

// Define a custom palette.
add_theme_support(
    '__experimental-editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
        array(
            'name'     => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
            'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
        ),
    )
);

// Disable custom gradients.
add_theme_support( '__experimental-disable-custom-gradients' );

// Disable gradients
add_theme_support( '__experimental-editor-gradient-presets', array() );

Third-party blocks

One of the strengths of the block editor is its block library. The community have built dozens of block plugins. But, while Core blocks do support the controlling APIs exposed above, a lot of third-party blocks don’t adapt properly to these options.

For more consistency between the different block libraries and the Core blocks, block authors are encouraged to support these options in their custom blocks.

The block primitives made available to block authors to build their blocks (e.g. the FontSizePicker component, the experimental useColors and useGradient hooks) do support these options by default, but if you’re using custom UIs, you’re encouraged to adapt to these options. You can access these settings by using the select( 'core/block-editor' ).getSettings()selector.

/*
 * @property {Array} colors Palette colors
 * @property {boolean} disableCustomColors Whether or not the custom colors are disabled
 * @property {Array} gradients Gradient palette
 * @property {boolean} disableCustomGradients Whether or not the custom gradients are disabled
 * @property {Array} fontSizes Available font sizes
 * @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled

 * @property {boolean} __experimentalEnablePageTemplates Whether the user has enabled the Page Templates
 */
const settings = wp.data.select( 'core/block-editor' ).getSettings();

Going further

As shown above, the block editor already provides a big number of APIs to control the experience, but it’s fair to acknowledge a lack of consistency and a few missing APIs (for instance to disable drop caps in Paragraph blocks).

In order to address this, I’m proposing a new block_editor_features hook that looks like this:

// Non-exhaustive representation of the block-editor configuration options.
$block_editor_features = array(
    'colors' => array(
        "enabled" => true,
        "colorPalette" => array(),
        "allowCustomColors" => true,
        "gradientPalette" => array(),
        "allowCustomGradients" => true,
    ),
    'typography' => array(
        "enabled" => true,
        "fontSizes" => array(),
        "allowCustomFontSizes" => true,
        "allowDropCap" => true,
    ),
);

apply_filters( 'block_editor_features', array $block_editor_features, WP_Post $post );

And these would be made available to block authors using a dedicated selector.

const features = wp.data.select( 'core/block-editor' ).getFeatures();

In addition to the PHP filter, this configuration can also be made available in the proposed theme.json file.

#block-editor, #core-editor, #gutenberg, #themes

Editor chat summary: Wednesday, 22 January 2020

This post summarizes the weekly editor chat meeting on Wednesday, 22 January 2020, 14:00 WET held in Slack.

Gutenberg 7.3

@gziolo announced that the Gutenberg 7.3 release was planned to happen later in the day and said, this release includes among others:

  • Multiple performance improvements.
  • A new block collections API. The API is useful when a developer wants to group the blocks in its section in the inserter.
  • Further improvements to the Navigation block.
  • New experimental blocks for the full site editing.

More details about this release are available on the release post.

Weekly Priorities

For this week, we keep the same priorities as last week:

  • Block Content Areas (Full site editing)
  • Block UI updates
  • Block Patterns
  • Navigation block improvements

Task Coordination

@karmatosed

Has been mostly focusing on navigation block feedback/iterations and global styles – will continue to do this into next week.

@retrofox

Has been working on adding the background color feature to the navigation block, it is already merged.

Now is improving the sub-menus design, and polishing the feature.

It is possible to track the progress in the project dashboard.

@isabel_brison

Worked on resizable editor PR https://github.com/WordPress/gutenberg/pull/19082.

All the tests are now updated, and it’s ready for further review. There’s a bit of discussion on how to isolate the editor-specific styles for manipulation in the core, any feedback appreciated at this point!

@youknowriad

Has been working on the icons package. Referred Icons are all over the place in Gutenberg right now, and thinks at least we should gather them in a single package. Said technology-wise, we still need to explore different options to how best ship them for authors, but a tree-shakeable npm package seems like the best initial path forward without BC concerns. @youknowriad will continue working on a solution to this problem.

@youknowriad is also working on an Extensibility API Proposal ( will share more very soon) and keeps doing heavy triage as time allows.

@andraganescu

Is working on an attempt to have responsive backgrounds in blocks which have image backgrounds, and doing various tidying up PRs for the navigation block.

@getdave, @marek, and @jeryj

Are working on the navigation block.

@jeryj is improving the UX.

@getdave and @marek are working on the ability to Create Pages from within the Block on the fly. Relevant issue and PR:

@nosolosw

@nosolosw is focusing back on the work on Gutenberg. Revived a lingering PR to fix a focus issue in the gallery block https://github.com/WordPress/gutenberg/pull/14930. The PR needs a technical review!

@jorgefilipecosta 

Since last week:

For the next week:

  • Help to have a “Global Styles” mechanism in the core.
  • Continue the work on Angle Picker and Gradient type picker for the custom gradients.
  • Focus on triage issues. Reviewing PR’s required for 5.4 beta 1.

@mapk 

@aduth

  • Helping around improvements and consistency among various link components
  • Hoping to try to push user-meta-based preferences persistence (sticky preferences) over the finish line. @aduth referred it would be a nice feature for WP 5.4.
  • Would like to visit some project management automation at some point.

@chopinbach

Is getting up to speed on Gutenberg development.

f you are also starting and are finding any challenge, please share it so that we can improve the experience for everyone.

@gziolo 

Open floor

Template lock active at the post type level, and templateLock={ false } in InnerBlocks causes an invalid block warning

@chrisvanpatten brought up issue https://github.com/WordPress/gutenberg/issues/11681 and asked if there are any options to move the issue forward as the issue is causing a frustrating experience. The ticket seems stalled without a clear path.

Currently, @chrisvanpatten  relies on dispatch('core/block-editor').setTemplateValidity(true); as workaround to the problem.

@youknowriad said the plan outlined in https://github.com/WordPress/gutenberg/issues/11681#issuecomment-549641097 seems a sensible one. But the ticket is stalled because implementing that solution is a big-time investment.

@chopinbach volunteered to help address this problem, and @chrisvanpatten volunteered to team up. Thank you both!

FormTokenField: Make it possible to add children

@scruffian asked for feedback on https://github.com/WordPress/gutenberg/pull/19676.

@youknowriad said that while the change is minimal, it would be good to expand on the use-cases. @youknowriad referred that adding random children may not be the best path forward, and asked if there is another abstraction possible, or if the button is something that can be built-in.

@scruffian said @youknowriad ideas are valid, but his thought was that it would be more useful as it was proposed in the PR. @scruffian  is open to achieving the result differently.

Server-side context API

@chopinbach asked for the latest updates on server-side context API @epiqueras is working on.

@epiqueras said the API is similar to React context and that he needs a PR review.

@youknowriad and @mcsf referred that ideally, a block consumes from a “contextname”, not a “blockname” and different blocks can use the same context name to expose their context.

@epiqueras linked to a comment providing some reasons where the approach may have problems.

The conversation will continue on https://github.com/WordPress/gutenberg/issues/19685. If you have any insights on this issue, please provide them as it may be valuable.

#chats, #core-editor, #editor-chat, #meeting, #meeting-notes, #summary

What’s new in Gutenberg? (22 January)

The second Gutenberg release of 2020 includes 159 PRs by 56 contributors!

The navigation block received again quite a few improvements this release. You now have the ability to set text and background colours!

Screen Shot 2020-01-10 at 6 36 18 PM
New colour options fo the navigation block.

This release we’ve also made some considerable performance improvements. The average time of an input event has almost been reduced by half (47.76%) and the loading time of a fairly large post by 29.25%! This is the result of making the block DOM tree lighter, meaning taking the block controls out of the block rendering and DOM tree and removing div element wrappers.

There’s a new block collections API which can be used to group blocks in the block inserter.

registerBlockCollection( namespace, { title, icon } );

Included are also new post layout blocks (author, date and excerpt) and improvements for the site editing experiment.

7.3 🇬🇷

Enhancements

  • Add border to table header & footer 19450
  • Add the new replace flow to the cover 19583, media text 19198, file 19174, audio 19158 and video 19162 block.
  • Components: improve ToolbarButton 18931
  • Sibling inserter: fix dead zone between blocks 19719 19729
  • Top toolbar: adjust tab order 19623
  • Regions: position publish region after sidebar 19427
  • Better accessibility labels for blocks 18132
  • Breadcrumb: add accessibility label 19597
  • Navigation: add background color 19108

Performance

  • Lighter block DOM:
    • Put sibling inserter in popover 19456
    • Remove extra div wrapper 19010
    • Remove inner div wrapper 19593
    • Split out toolbar rendering 19564
    • Put side inserter in Popover 19406
    • Rewrite drop zone with hooks (useDropZone) 19514
    • Merge effects 19617
    • Fix alignments 19704
    • Clean up after control removal 19618
    • Reposition tabbable inserter 19596
  • Avoid rerendering every block when caret moves in and out of formatting 19524

Bug Fixes

  • Navigation:
    • Format the allowed styles 19477
    • Show recent pages as default suggestions when creating Nav Links 19458
    • Define allowedFormats option for NavigationLink 19507
    • Rename the LinkControl’s edit button title 19505
    • Use underline instead of bottom border for nav links 19538
    • Do not output navigation links with empty labels 19652
    • Remove draggable from all navigation-link blocks 19648
    • Remove duplicate CSS from Navigation that is aleady in Navigation Link CSS 19540
    • Remove the text color button double border on the navigation block toolbar 19567
    • Replace, on editing a navigation link, the current label with the title of page or post 19461
    • Add description for the Link Settings Description in the Link Block settings 19508
    • Fix Navigation Link url escaping 19679
    • Fix alignment on left border between menu navigation controls and menu item 19511
    • Styling fixes after navigation feature merge 19455
  • Add support for align wide to deprecated versions of gallery block 19522
  • Block top toolbar: fix mover direction 19574
  • Editor keyboard shortcuts: fix Toggle Sidebar 19605
  • Editor: Fix Block Embed Input size 19438
  • Fix ServerSideRender component showing className 19555
  • Fix writing flow focus capturing 19621
  • Fix small visual select glitch 19590
  • Fix the height of the tags tokens 19592
  • Fix buttons block Link shortcut not working with multiple buttons 19492
  • Disable HTML on navigation link 19483
  • Fix managing page break in the block manager 19303
  • Show predefined colors in the navigation block 19493
  • Update CSS rule on the widgets screen required for drag & drop 19428
  • Multi block selection: fix tabbing 19700
  • Multi block selection: set focus back after attempt 19720
  • RichText: don’t set focus when applying format 19536
  • Writing Flow: fix list selection 19721
  • Fix Color Picker Format Toggle placement 19607
  • Fix Columns block pattern picker item margin. 19494
  • Fix block styles for More block 19745
  • Block: fix hasMovers BlockList setting for top toolbar 19619

New APIs

  • Components: add ImageSizeControl component 17148
  • Add block collections 17609
  • Add Text component 18495
  • Add warning package 19317
  • Components: add isFocusable state to Button 19337

Experiments

  • Edit Site:
    • Add a Post Author block 19576
    • Add a Post Date block 19578
    • Add a Post Excerpt block 19579
    • Implement Template Part block editing 2 19203
    • Add template loading 19081
  • Block Directory:
    • Change ‘update’ icon to text to be more communicative 19451
    • Update the action button label to read ‘Add block’ 19412
  • useColors:
    • Fix contrast check 19500
    • Directly pass ref for color detecting 19474
  • InnerBlocks: Fix toolbar capturing 19530

Documentation

  • Add js syntax highlighting to documentation 19467
  • Add lint-md section to scripts readme 19716
  • Add linting of source in markdown files 19518
  • Document packages-update wp-scripts command 19711
  • Linting Documentation 19543
  • More visibility to the theme opt-in styles documentation 19463
  • Remove spaces in title for consistency with other components and docs 19466 19464
  • Update block-filters.md 19595 19684
  • Update contributors guide with docker-compose info 19362
  • Add js syntax highlighting to documentation 19465
  • Use import statement instead of deconstruction in docs 19469 19471
  • Fix Navigable Container component usage code 19615

Various

  • Block Editor: Remove (more) legacy “editor-” class name compatibility 19489
  • Block toolbar: rewrite toolbar forcing 19527
  • Breadcrumb: isolate logic 19573
  • Contain selection logic in useMultiSelection 19529
  • Move navigation and selection logic to WritingFlow 19397
  • LinkControl
    • Refactor LinkControl API 19396
    • Remove Popover from LinkControl component 19638
    • Add search results label for initial suggestions 19665
    • Prevent space being reserved for scrollbar when items fit box 19633
    • Remove non-public fetchSearchSuggestions from LinkControl documentation 19710
    • Update Nav Block to use new showInitialSuggestions prop on LinkControl 19667
    • Flatten LinkControl components by mocking useSelect for tests 19705
  • Remove core editor usage from block editor rich text 18789
  • Add script to automatically update core packages 19448
  • Adds tests for horizontal mover descriptions 19549
  • Remove: Gradient Picker from cover block placeholder 19712
  • Add SVGR support to wp-scripts 18243
  • Add storybook for Panel component 18541
  • Add supports html: false to new website blocks. 19646
  • Add: Block editor keyboard shortcuts on the widgets screen 19432
  • Added 8px padding to search input block. 19452
  • Adds a “(no title)” label to links to pages or posts with no title 19528
  • Array type attribute source query comma missing 19717
  • Block Editor: Make initial inner blocks non-dirtying. 19521
  • Block Popover: editor canvas as boundary 19322
  • Check for existing of avatar_urls array before trying to return the avatar img part of user autocomplete fragment 18259
  • Update downshift dependency to v4.0.5 19661
  • Components: replace console.warn with wordpress/warning 19687
  • DOM: Mark stripHTML as unstable 19725
  • Decode HTML entities for publish link 19517
  • Expose custom gradient picker 19480
  • Gallerys ids are saved as numbers 19163
  • Media & Text: Remove “Insert from URL” from the replacement flow. 19606
  • Page template previews 19106
  • Post-Author: Move HTML tags outside of the translatable string 19675
  • Priority Queue: Invoke callback when flushing queue 19282
  • RichText: split out inline warning 19545
  • Storybook: Update to latest 5.3 19599
  • Update npm-package-json-lint-config docs 19584
  • Update the float on the Spinner to none 19338
  • Wrap color palette in fieldset with label inside of a legend 19546
  • Check Symbol.iterator not Symbol.toStringTag (redux-routine) 19666
  • Skip intermittent end to end test on the button block 19653
  • Fix e2e test failures via console log exception to handle temp wpnonce error 19532
  • Packages: Mark build-styles as side-effectful 19535
  • docgen: Omit unknown type tag from Markdown format output 19571
  • Build Tooling: Skip package for build if package.json unreadable 19439

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.3.0 4.550s 33.8ms
Gutenberg 7.2.0 6.431s 64.7ms
WordPress 5.3 6.481s 69.865ms

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (8 January)

The first Gutenberg release of 2020 includes not less than 180 PRs 😍crafted by more than 56 contributors. These change include some of the most asked for features from the community.

It includes a new Buttons block to align more than one button in a row. Several block plugins had this block available already and now it made its way into Gutenberg Core.

Accessibility-wise, a new tabbing behaviour has been introduced for Edit mode (mode you’re in when you’re editing blocks). Tabbing forward out of the block will bring you to the end of the content (the sidebar) and tabbing backward will bring you to the block toolbar and then the header. This makes it easier to navigate the editor and brings it closer other editors that let tabbing focus the next element outside the editor, rather than the next element inside the editor. Of course you can still navigate to other blocks with the arrow keys and by escaping the Navigation mode (press Enter to return to Edit mode, arrow keys or tab to navigate to other blocks).

From a developper perspective, this release also includes a big refactoring to the Button component: It now supports an icon prop and the design have been tweaked for more consistency across the different variations.

A new package @wordpress/keyboard-shortcuts has been added. Ultimately, this package will allow users to edit their keyboard shortcut combinations and third-party developers to register their own keyboard shortcuts.

7.2

New Features

  • Add a new Buttons block. 17352
  • Support adding links to Media & Text block image. 18139
  • Navigation block: Support changing the font size. 19127
  • Gallery block: Add images size selector. 18581

Enhancements

  • Improve the block inserter search algorithm. 19122
  • Improve the block placeholders design and responsiveness. 18745
  • Navigation mode: Auto-enable when tabbing to the block list with an existing block selection. 19238 19298
  • Use tabs for gradient and color. 19133
  • Add “download” keyword to the File block. 18995
  • Add “poem” keyword to the Verse block. 19355
  • Convert to blocks:
    • preserve text alignment. 19097
    • Skip shortcode if not on its own line. 19059
  • Writing flow: Improve tabbing for Edit mode. 19235
  • Use Popover for the block toolbar. 18779
  • Improve the block multi-selection styles. 19094 19121
  • Support reduced-motion for Social Links transitions. 18750
  • Use the default cursor for Select Tool 19157
  • Round position attributes on cover focal point save. 19183
  • Remove block inserter shortcuts. 19045
  • Navigation block:
    • Clarify the placeholder label. 19105
    • Removes the reusable block option from the items. 19250
    • Sub-items white background adjustment. 18976
  • Adjustments to the welcome guide. 19195
  • Audio block: Don’t render an empty audio tag. 18850
  • Make validation of block html tags and attributes case insensitive 19207
  • Block examples: concatenate strings and add translators notes. 19048
  • Show the trash button as a link. 19131
  • Removed the bottom-margin for the RadioControl component. 19340
  • Copy:
    • Capitalize “Manager” in Block Manager. 19375
    • Expand on sentence case usage. 18758 19377
    • Update the copy of the Experiments page 18233
    • Removes title case from alignments for text and image. 18757
    • Unify not capitalizing the heading for each of the attributes. 19374
    • Updates description of the navigation block. 19098

Performance

  • Remove the BlockAsyncRenderProvider and render parents asynchronously 19343

Bugs

  • A11y:
    • Make text alignment items radio menu items. 19233
    • Add group role to the block wrapper element. 19213
    • Prevent tabbing to the block drag handle. 19211
    • Add a label attribute to the Social Icons block. 18651
    • Improve Welcome guide and modal component. 19261 19290
  • Pasting:
    • Content that results in a new block shouldn’t be treated as inline content. 19084
    • Preserve inline images. 19064
    • Remove trailing br elements. 19035
    • Remove windows paste markers. 19040
    • Strip HTML formatting space for inline text. 19043
    • Apply active formats when pasting inline. 14815
  • Rich Text:
    • Fix applying a format across 2 other formats. 19053
    • Fix using composed characters on Safari. 19171
  • Fix block navigation using the up arrow key. 19135
  • Fix Welcome Guide modal display for Internet Explorer. 19201
  • Fix Gallery block crashing on the contributor role. 19060
  • Only show available image sizes for Image and Gallery blocks. 19301
  • Remove the circle mask style from the Image block, and add a “rounded” style instead. 19028
  • Fix the Jest Preset Default package: Update preset file extension for inclusion in NPM deployments. 19306
  • Fix the Base Styles package: Import colors into variables. 19159
  • Limit the Next Page (Page Break) block to root level only. 18260
  • Navigation mode: fix reverse tabbing to the post title. 19305
  • Reposition Popovers on click. 19268
  • Fix RangeControl initialPosition prop to accept 0 as a value. 18611 19202
  • CustomSelectControl: Use items width instead of 100%. 19150
  • Verse block: fix white space. 19173
  • Add missing i18n to the Latest Posts block settings strings 19032
  • Fix ColorPicker alpha value normalization. 18991
  • Fix Post title encoding. 19187
  • Fix dates alignments in the picker. 19294
  • Media Replace Flow: Don’t show the URL option unless there is a handler. 19063
  • Popover: don’t render fallback anchor if anchorRef is defined. 19308
  • Fix cursor position when splitting blocks with IME keyboard. 19055
  • URLInput: Avoid showing the suggestions loader when disabled. 18979
  • Translate block example strings. 18162
  • Writing flow: simplify & fix tabbing out of block. 19312

New APIs

  • Button component:
    • Support the icon prop and use a consistent button height. 19193 19366 19123 19058
    • Deprecate IconButton and replace its usage with Button. 19299 19241
    • Support isPressed prop in Button and SVG components. 17748
  • New the wordpress/keyboard-shortcuts package:
  • New React hook: useInstanceId. 19091
  • Support running arbitrary commands on the wordpress/env containers and use it for linting and server registered fixtures. 18986
  • Font Size Picker: Add default size 18273

Experiments

  • Full Site Editing:
    • Add package with barebones site editor screen. 19054
    • Add Multi-Entity Saving flow. 18029 19155
  • Widgets screen & customizer:
    • Fix Customiser block editor crash. 19023
    • Fix Drag & Drop not working on the widgets screen. 19029
  • Allow parent Block to consume child Block’s toolbar. 18440
  • Allow disabling the Block UI. 18173
  • Block Directory:
    • Update the regular expression that determines whether the plugin is using an img URL or an icon slug. 19316
    • Use the block’s title for alt text on block directory plugin items. 19263

Documentation

  • Add types documention:
    • wordpress/a11y 19096
    • wordpress/blob 19092
    • wordpress/dom-ready 19089
    • wordpress/is-shallow-equal 19090
    • wordpress/priority-queue 18997
    • wordpress/i18n 19099
  • Document the CustomSelectControl component. 19026
  • Document the WritingFlow component. 19314
  • Link to the User Support Documentation. 19361
  • Add more documentation for wordpress/env. 19194
  • Add nested block / InnerBlocks tutorial. 17559
  • Add Developer Tools setup in Getting Started. 19074
  • Use ESNext as default code example format. 17873
  • Add standalone npm package release docs 19381
  • Typos and tweaks: 19280 19236 19376 19146 19022 19005 18423 19347

Various

  • Block Editor: Remove legacy “editor-” class name compatibility. 19050
  • Block Editor: Test ContrastChecker notices by string comparison. 19169
  • Fix useColors crashes on storybook. 19046
  • Data: Remove unused forceRender argument 19206
  • Define useSelect dependencies properly. 19044
  • Deprecate wordpress/nux package. 18981
  • E2E Test Utils: Remove empty, unused KeyboardMode file. 19166
  • Popover: remove buffer options 19283
  • Refactor the MediaReplaceFlow component to use Dropdown. 19126
  • Remove unused is-hovered class from the block wrapper. 19390
  • RichText:
    • Rewrite withFilters with hooks. 19117
    • split out boundary style calculation. 19319
  • WritingFlow: rewrite with hooks. 19393
  • Project management: Add prepublish packages command for npm releases. 19214
  • Remove unused blocks-font-size classname. 19208
  • Add a pre-commit hook to check whether API docs are updated. 18820
  • Add mechanism to set a width on withViewportMatch. 17085
  • Add minimum and maximum values to the Gallery columns attribute. 16314
  • Include demo block templates in build ZIP. 19072
  • Fix CSS Coding Standards issue. 19272
  • Resolve WordPress package type imports. 18927
  • Add e2e tests:
    • Splitting and merging text. 19049
    • InnerBlocks renderAppender. 14996
    • Navigation block. 19189
    • Validate embed rendering before proceeding to next 19042
  • Add unit tests to the useViewportMatch and useMediaQuery React hooks. 19019

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.2.0 6.233s 66.615ms
Gutenberg 7.1.0 5.669s 71.415ms
WordPress 5.3 6.481ms 69.865ms

#core-editor, #editor, #gutenberg

What’s next in Gutenberg? (January)

This is a monthly update containing the high-level items that Gutenberg contributors are focusing on for the next month. Join us in our efforts.

Block Content Areas

Work on this major focus is ongoing and is expected to continue iterating over the next months.

  • Work on a separate Edit Site UI
    • Load the front page template. 19081.
    • Switching templates. 19141.
  • Framework: Nest block lists from multiple entities (posts). 19203, 18739.
  • More Full Site Editing blocks (post author, post tags, site description…).
  • Expose global styles. 19255.
  • Experimental block-based theme.

Block UI

In a continuous effort to improve the accessibility and the usability of the Gutenberg design based on user feedback, an updated Block UI design is being explored. 18667.

  • Move the block movers to the block toolbar 18685.
  • Update the Block UI 19344.
  • Lighter Block DOM structure 19010.

Tightening up

Existing interactions and blocks will be iterated on:

  • Polishing the Navigation block and addressing early feedback Projects/31.
  • Expand the new Media Flow component to other blocks. 19198, 19174.
  • Block patterns for several blocks and inserter UI. 17335, 16283, 19243.

While these are our focuses don’t forget you can always help with triage, ‘needs testing’ and reviewing PRs

#core-editor