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

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

Editor chat summary: Wednesday, 23 October 2019

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

Gutenberg 6.8

Gutenberg 6.8 RC is scheduled for release next week Monday.

Weekly Priorities

These week priorities are same as last week. There has been some progress on the PRs and some are getting close to merge.

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.

@ella

@andraganescu

@youknowriad

@jorgefilipecosta

  • Worked on the gradient related tasks.
  • Submitted a core patch to make KSES allow gradient backgrounds.
  • Proposed a solution for automatic editor styles generation.
  • Will work on oprn PR/Patch.
  • Will work on iteration to custom gradient picker.

@get_dave

@gziolo

  • Helped with Storybook, explored unit test generation for stories.
  • Fixed ESLint warnings.
  • Ensured repository works with Node 12.x.
  • Reviews and general help with tasks:
    • Card components.
    • Accessible toolbar.
    • prettier code formatter integration.
    • new packages with the base styles.
  • Will start work on Patterns API for blocks and continue working on items listed.

@karmatosed

  • Triaged and organized the project board.

@retrofox

@vindl

Open Floor

  • @bharath asked for update on adding background image support for group block https://github.com/WordPress/gutenberg/issues/14744.
  • There was some discussion around removing cover block in favor of group block with background image support.
  • @gziolo mentioned for backward compatibility reasons Cover block will have to exists forever.

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

What’s new in Gutenberg? (16 October)

Work on stability and performance continues, and these bug-fixes have now been included in WordPress 5.3 RC 1.

In addition, this release starts the work on gradient backgrounds. First, the support is added to the Button block. Improvements to the gradients palette API and support in more blocks will be worked on for future releases.

Storybook

For Developers, this release also introduces a Storybook.

Accessible on this link for the master version, but also available on each Pull Request (https://deploy-preview-{PR_number}--gutenberg-playground.netlify.com/design-system/components/). Storybook is an isolated environment where the reusable WordPress UI components (@wordpress/components) are developed, tested and showcased.

Down the road, the netlify integration and the exact URLs can be adapted. This tool is meant to be directly integrated into WordPress Developer Docs.

6.7

Features

Bug Fixes

Performance

Enhancements

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 6.7.0 5.52s 51.98ms
Gutenberg 6.6.0 5.57s 51.47ms
WordPress 5.2 6.53s 61.13ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (2 October)

This is release is essentially focused on stability and performance. These bug-fixes and improvements have now been included in WordPress 5.3 beta 2.

At the same time, architectural work is continuing to prepare the block content areas editing capabilities.

6.6

Enhancements

New APIs

  • Implement EntityProvider and use it to refactor the meta block attributes.

Experimental

Bugs

Performance

Various

Documentation

Mobile

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.6.0 4.7s 38.96ms
Gutenberg 6.5.0 4.68s 42.96ms
WordPress 5.2 5.69s 57.65ms

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg