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

Editor chat summary: Wednesday, 18 December 2019

This post summarizes the latest weekly Editor meeting, held in the #core-editor Slack channel, on Wednesday, December 18, 2019, 14:00 UTC.

The agenda of the meeting is here.

Next core editor meeting is January 8th, 2020.

Because of a lot of people being AFK for their holidays we’ll skip the next two meetings and plan the next Gutenberg release (and #core-editor meeting) for January 8th, 2020.

Considering our consistent bi-weekly release schedule, there were 23 Gutenberg versions released in 2019.

Thanks to everyone who made this possible!

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@andraganescu

  • I migrated the MediaReplaceFlow to the video, audio, file and media+text blocks and the PRs are waiting for a review. They’re all pretty small code wise: 19198, 19174, 19162, 19158.

@karmatosed

  • Triage continues and trying to ensure everything has a design review on PRs within short time.
  • Wrote v1 of triage team doc and it’s up on issue.
  • Spending sometime this week clearing down queues a bit and already finding I can close some, so nice to close!
  • Began working on navigation in wp-admin: working out boundaries for this.
  • Did some mobile web testing and logged some issues, continuing this.
  • Sentence case merged.
  • Quick fix for welcome guide.
  • Lots of design feedback and testing.

@noisysocks

  • No new development happening from me this week but I do have this open PR for deprecating wordpress/nux that I’d love some eyes on: 18981

@youknowriad

  • I’ve been working on a few PRs to improve API and consistency for the Button component
  • I’ve been working on a keyboard shortcuts package to ultimately allow editing shortcuts and registering third party ones
  • A few janitorial PRs

@aduth

  • Been doing some fixups: – Fix ArrowUp/parent block selection: 19135
  • Fix IE11 Welcome Modal: 19201
  • Would still like to land removal of “shortcuts” (needs review): 19045
  • Starting to explore user preferences persistence (more “sticky” than browser storage): 19177

Hoping to hit on a few things in next days:

  • Better data reuse for REST API _fields (opens up new optimization possibilities)
  • docgen improvements (edited) 

@mapk

  • Linking Media in Media + Text block is merged! 18139
  • Was hoping for some dev help on new Block Library categories: 11406
  • If the widgets screen is ready for testing, @jorgefilipecosta, I’d like to do some usability tests.
  • Usability testing the Nav block.

@ella

  • Been working on Raw handling, RichText, and slowly making progress with the toolbar in popover PR.

@epiqueras

  • Been working on edit-site and new entity APIs. Also template part editing flows.

@richtabor

  • I have one small tweak left for adding background color support to the columns block. Refactored it to use the ‘useColors’ hook. Next I’ll do the same for the Column block on a separate PR 17813

@isabel_brison

  • I’ve been working on making the editing canvas resizable, PR in progress here: 1908
  • Branching off from that, I’m starting to look at how we might optimise default block styles with CSS variables without breaking things completely in IE.

Open Floor

There was a lot of discussion on improved revision control. The main point raised by @Carike was that by using branched revisions, with minor and major designations, users will be able to use block based themes more easily. @epiqueras offered that branching or minor/major revisions are too complicated and a better improvement to revisions si to have them support block level changes.

The general agreement was that we need better revisions performance and UX.

The discussion continues in Track ticket #48953.

A second discussion happened about adding pagination to the latest posts block. There was a heated debate on whether pagination is a stand-alone block or simply a feature of blocks that need pagination. @karmatosed argued that pagination is not an option that an user might think as requireing inserting a block. @epiqueras argued pagination should be a block and be developed in such a way that if it is used standalone it would default to paginating the default post loop in the page, while other blocks might opt to use it by default (e.g. the latest posts block).

The issue is still up for debate, UX and technical solution in the GH issue #13584.

On a final note, happy holidays for those who do that and happy new year!

#meeting-notes, #core-editor, #editor, #gutenberg

Editor chat summary: Wednesday, 11 December 2019

This post summarizes the latest weekly Editor meeting, held in the #core-editor Slack channel, on Wednesday, December 11, 2019, 14:00 UTC.

Gutenberg 7.1.0

  • Gutenberg 7.1.0 is released.
  • Massive progress on full site editing experience.
  • Some of the feature highlights:
    • New welcome UI in place of tips.
    • Table captions and UI to toggle between edit and select mode.
    • New fixed toolbar for mobile.
    • Improved multi-block selection experience.
  • This is a big release with 161 pull requests merged, for details checkout release post.

Weekly Priorities

  • Full site editing / block content areas
  • Block patterns API
  • Improvements to the Block UI  
  • Tightening up items

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@youknowriad

@karmatosed

@mkaz

@aduth

@gziolo

  • Refactoring to the block toolbar, including some visual tweaks
  • Iterations to Build Tools: Integrate DependencyExtractionWebpackPlugin in the JS build https://core.trac.wordpress.org/ticket/48154
  • Reviews, including some learnings about TypeScript, JSDoc, etc.
  • Ported wp-cli scaffold block to npm init wordpress-block – this generates ES5 JS code, I plan to provide ESNext +JSX template as an option next week

Open Floor

#meeting-notes, #core-editor, #editor, #gutenberg

What’s new in Gutenberg? (11 December)

Gutenberg 7.1 is a big release with 161 pull requests merged. Thank you to all the contributors of this release!

The release contains many refactors to the code base to make future changes possible, e.g., refactors to functional components so it is possible to use new hooks that are available.

This release tries to make block development using standard features like color picking UI easier. To do that the release expands the useColors hook to have new functionalities like color contrast checking and default color detection.

There was huge progress on the full site editing work, with the merge of the template part block. Documentation efforts for the FSE (full site editing) work are now in progress.

Gutenberg 7.1 brings a new welcome UI for new users:

This release also Introduces table captions and implements a UI mechanism to toggle between edit and select modes:

The last two enhancements to note are the new fixed-mobile toolbar and the improved multi-block selection experience:

7.1 🇲🇽

Features

Enhancements

Bug Fixes

APIs

Experiments

Documentation

Performance

Various

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.1.0 7.45s 88.56ms
Gutenberg 7.0.0 6.84s 94ms
WordPress 5.3 6.33s 75.19ms

#core-editor, #editor, #gutenberg

What’s next in Gutenberg? (December)

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

The previous weeks saw a lot of iterations towards building the block content areas APIs and the full site editing experience (Post content, Post title, Site title blocks landed, an early demo is now included in the plugin). In the next weeks, contributors will be working on expanding on this work:

  • Work on a UI to save multiple entities (post, site, template…) from the same interface. 18029.
  • Nested template areas. (Template parts). 18736.
  • Support for a view-only mode for non-admins. 18760, 18772.
  • Start working on a Full-site editing view/mode.
  • Start working on documentation and calls for testing.

Block Patterns

Block patterns are a way to provide a predefined set of blocks you can select for a given container block (Columns, Group, Media & Text) or without any container block as a way to insert a pre-made design into the editor. Some parts of the initial API are already available. In the next weeks, we’ll focus on implementing block patterns for several blocks and exploring UI to insert these patterns. 17335, 16283.

Tightening up

Existing interactions and blocks will be iterated on:

  • Polishing the Navigation block and addressing early feedback Projects/31.
  • Custom gradient picker 17603.
  • Improvements to the Media Flows. 16200.
  • Iterations on the block interface and the block toolbar 18667, 18686.
  • Toolbar Accessibility improvements 18619.

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

#core-editor

Editor chat summary: Wednesday, 27 November 2019

This post summarizes the weekly editor chat meeting on Wednesday, 27 November 2019, 14:00 WET held in Slack.

Gutenberg 7.0

Gutenberg 7.0 was released. It brings the navigation block out of the experimental state. The release was possible thanks to the efforts of 51 contributors. More details about this release can be checked on the release post.

Weekly Priorities

November priorities post: https://make.wordpress.org/core/2019/10/29/whats-next-in-gutenberg-november/

The priorities should remain pretty stable I think: Block Content Areas, Nesting Selection Tool, Navigation block will continue to be improved based on feedback. Gradients are almost “finished” and we may start thinking about improvements to the block interface based on this great issue https://github.com/WordPress/gutenberg/issues/18667.

@youknowriad

Task Coordination

@youknowriad

Worked on PR’s Edit/Navigation ToolFixed Toolbar on mobile, and Add a header menu to switch between edit and select tool. Hopes to continue a trend of 50% reviews and triage and 50% code.

@jorgefilipecosta

Gave support on the forums, triaged issues, rebased and updated some PR’s, submitted and merged several bug fixes, and worked on a PR that may increase the performance of the editor by caching styles https://github.com/WordPress/gutenberg/pull/18763.

On the next week: 

  • Plans to review and help some media-related PR’s, namely the refactor to the gallery, to increase reusability with the native mobile APP. 
  • Wants to finish the remove editor module usages in block-editor by applying changes to the reusable blocks and rich-text. 
  • Update the release tool to move readme and changelog files to the Github repository.

@noisysocks

Finished the work on adding a welcome guide modal, which is now ready for review.

Intends to spend the rest of this week playing with wordpress/env, seeing if we can deprecate local-env, and writing docs for this all.

@retrofox

Helped to finish the first approach of the Navigation block. Emphasize this comment: Navigation block will continue to be improved based on feedback.

@karmatosed

Contributed to the following tasks:

Is looking at iterations for navigation, going through design feedback in Tightening Up board, and seeing what needs work or is blocked, and is working on docs for the triage team.

@mapk 

 Worked on some reviews and triage, namely the NUX modal PR for @noisysocks.

@paaljoachim

Looked closer at this issue https://github.com/WordPress/gutenberg/issues/17640#issuecomment-556866662. Might need to create a new issue to bring a better focus on what he brought up.

@gziolo

Attended WordCamp Łódź, helped people on forums, worked on some triage based on reports from people. This week will resume the work on Block Patterns API.

@bph

Working on End User Documentation and connected with @melchoyce on her project to replacing gifs with videos.

Open floor

@scruffian brought the topic of how we handle Full Site Editing blocks for non-admin users.

@youknowriad referred the precedent we have in media blocks to allow/disallow features based on user capabilities, and @noisysocks referred the API we have to query user permissions.

@scruffian shared some questions he had on his mind:

  • Is the API change I suggested in https://github.com/WordPress/wordpress-develop/pull/120 sensible? 
  • I see a change in the block itself in the PR not the API and it seems reasonable.
  • How does the design of the block change when a non-admin see it – does it need a special treatment?
  • This is probably a per-block problem as you might have access to some features in the block but not everything (think alignment of a site title block)

For the API change question, @youknowriad answered, he sees a change in the block itself in the PR, not the API, and that the change seems reasonable. For the block design question, @youknowriad answered that this is probably a per-block problem as one might have access to some features in the block but not everything.

@mrMark asked the use case Navigation Block and if it is intended to replace the menu system eventually. @youknowriad said that replacing the menu system may be a possibility but not until we allow editing the full templates in Gutenberg.

As a follow-up question @mrMark asked:

As the Block Editor encroaches onto the realm of what themes would normally handle, ie presentation layer, what’s the plan for integration between the Block editor and themes?

And then @mrMark referred that the Next Generation of Themes and how they integrate with the Block Editor should start being conceptualized.

@youknowriad referred that this is a big topic and ongoing work that can be followed on https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing. @youknowriad is also happy to answer any specific questions, and this topic will be part of the next week’s meeting. So in case, this is something that interests you, please join us and share your insights!

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