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

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

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 new in Gutenberg? (27 November)

More than 51 contributors helped shape the 7.0.0 Gutenberg release. It’s one of the biggest number of contributors we’ve ever had.

The release includes a big number of fixes and enhancements to the Navigation block and marks it as a stable feature.

Navigation block in action

In terms of APIs, developers will be happy to know that this PR introduced some new APIs like allowing the internationalization of strings containing safe HTML, a new Card component in wordpress/components and a few other enhancements we encourage you to try and provide feedback.

7.0

Features

Enhancements

Bug Fixes

New APIs

Experiments

Documentation

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.0.0 5.1s 67.7ms
Gutenberg 6.9.0 6.6s 53.5ms
WordPress 5.3 6.3s 61.44ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (13 November)

In this newest release of Gutenberg, block content areas and the navigation block continue to be iterated upon. An experimental block pattern API has been added, and themes can now define custom gradient presets!

The navigation block, demonstrating newly improved horizontal block movers.
The navigation block, demonstrating newly improved horizontal block movers.

The block editor provides default gradient presets. Now, a theme can overwrite them and provide its own:

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'
        ),
    )
);

Note that this feature is currently experimental and subject to change.

6.9 🇦🇷

Features

Bugs

Enhancements

New APIs

Various

Experimental

Documentation

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 6.9.0 11s 77.36ms
Gutenberg 6.8.0 11s 74.78ms
WordPress 5.3 10.6s 80.85ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

Join the Gutenberg Customization Conversations 🎨

As we head towards the end of the year, two last projects surface as the culmination of the Gutenberg Customization phase. If you are interested in contributing, or want to join the ongoing discussions, this post outlines what the main focuses are and the threads to follow.

Full Site Editing.

Over the past eight months activity has focused on refining the editor experience, converting widgets to blocks, defining block areas, creating a new navigation block, introducing global blocks like site title, and several new tools to improve the customization capabilities of blocks. The idea is for all these elements to come together in an editor mode that comprehends the full structure of a site, including its global elements and dynamic pages.

Label “[Feature] Full Site Editing” in the repository for more details.

Block Patterns.

While blocks are powerful visual tools to achieve many different designs, it can take time and knowledge to combine them properly to achieve the most pleasing results. Since Gutenberg already supports block templates, it should be possible to offer users designs and patterns that are already assembled for them — made of various existing blocks — which users can then customize to their will with familiar tools. Part of this work includes exposing relevant APIs so these can be more easily developed and discovered.

You can also join the weekly meetings held in the #core-editor channel in the Making WordPress Slack, every Wednesday at 13:00 UTC.

Thanks for the help!

#gutenberg

What’s new in Gutenberg? (30 October)

Work on block content areas and the navigation menu block is accelerating in this release.

In the meantime, this release continues the work on Gradients support and expand it to the Cover block while relying on classnames instead of inline styles

Screenshot 2019-10-17 at 14 59 27

Block Nested selection and interactions is still being improved with a new Block Breadcrumb Bar allowing to quickly navigate the block hierarchy of . the current selection.

Capture d’écran 2019-10-16 à 11 34 50 AM

6.8

Features

Enhancements

Bugs

Experiments

New APIs

Various

Add knobs to the ColorIndicator Story.

Documentation

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 6.8.0 5.68s 47.28ms
Gutenberg 6.7.0 5.83s 47.92ms
WordPress 5.2 6.1s 63.22ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg