What’s new in Gutenberg? (25 March)

This release is mostly focused on polish work for the Block UI redesign.

Screen Capture on 2020-03-16 at 15-49-00

It also includes an official API to register custom Block patterns from themes and plugins. The API is still a work-in-progress and might evolve before reaching WordPress Core.

register_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'   => __( 'Two buttons' ),
        'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

7.8

Enhancements

  • Add visible labels to BlockPatternPicker pattern selection buttons 19789
  • Adds always on display of media URL 19504
  • Adds current menu class to navigation block 20076
  • Block: Outline when interacting with Toolbar Block Type/Movers 20938
  • Create block: Improve how prompts and values provided are handled 20756
  • Expand create block options and add readme.txt template 20694
  • Patterns: Make adding patterns easier 20854
  • Polish a few icons 20980
  • Polish date-picker component 20824
  • Improve permalink editing 12009
  • Nicer block footprint for social links 20978
  • Show inserter only when block selected for nesting contexts 20753
  • URL: Use test data from web-platform-tests for isURL spec conformance 20537
  • Adds multi-select to categories on Latest Posts 20781
  • Add basic nav block example for inserter and styles previews 21011

Bug Fixes

  • Allow media library in gallery mode to be reset 20675
  • Autocomplete: Add support for results with long titles 20962
  • Compat: Conditionally filter editor settings for image dimensions 20939
  • Compat: Use core-js-url-browser for URL polyfill 20225
  • Data: Migrate post editor persistence with fullscreenMode false 21082
  • Edit Post: Make sidebar header focusable for button focus normalization 21031
  • Fix auto-hiding appender regression 20780
  • Fix fullscreen mode device preview 21010
  • Fix link control search results spacing. 21003
  • Fix snackbar container block portion of UI while present 21000
  • Make the inner button block not allowed as a reusable block or editable as HTML 20948
  • URL: Fix getQueryString incorrect handling of hash fragment 20738
  • Update social links block to output a custom class on each individual link 20998
  • Update the inserter’s block preview to use the AutoHeightPreview 20817
  • Latest Posts:
    • Fix link for read more markup 20917
    • Fixes the categories selector crash when category does not exist 20960
  • Fix input rules 20964
  • Trim input value in navigation search input field 19832
  • Fix mobile header 20946
  • Fix visually hidden classnames 20649
  • Fix/screen reader text 20607
  • Fix SelectControl example code synax highlight 19803

New APIs

  • Add initial API to register patterns from themes and plugins 21074
  • Convert __experimentalCreateInterpolateElement to a stable API 20699

Experiments

  • Site Editor:
    • Add Fullscreen mode 20691
    • Add fullscreen close button 20989
    • Add more menu and fullscreen toggle 21006
    • Style resets for top level page 20886
    • Get current template part correctly for auto drafts 20438
    • Add template preview to the edit site template switcher 20958
    • Add things required to load custom blocks to Site Editor page 20549
    • Avoid page templates overwriting page title 20865
  • Lighter block DOM:
  • Navigation Block:
    • Fix dynamic rendering recursive function name typo 21078
    • Avoid hiding submenu when adding a link 21035
    • Fix toolbar overlap on navigation links 21033
  • PlainText v2 21076
    • Editable Component 18361

Documentation

  • Add ESNext example for unregisterBlockType 20784
  • Docs/SlotFills: Small update for consistency 20767
  • Correct 2nd param of useViewportMatch() usage 20911
  • Include npm run dev guidance in “Getting Started” 21015
  • Document default login credentials and wp-env run command 20678
  • Fixes docblock for useViewportMatch 20919
  • Lowercase visual editor and code editor to match block editor and classic editor 20968
  • Update README.md 20913
  • Add Custom Block Editor to TOC and Manifest 20749
  • Add tutorial link to Table of Contents for Custom Block Editor 20750

Code Quality

  • Block Editor: Use useResizeObserver in place of direct react-resize-aware dependency 20889
  • E2E Test Utils: Improve durability of embedding matcher 20811
  • Framework: Migrate/remove temporary compatibility script initialization 19178
  • Framework: Use WHATWG URL in place of legacy url module 19823
  • Nav Block: Remove ‘frontend’ from style comments 21034
  • Project Management Automation: Add TypeScript type-checking 20850
  • Refactor the inserter menu component and split into multiple smaller components 20880
  • Remove iframe from content elements 20976
  • Update Search/RSS block render method 20977

Various

  • Update glossary 20934
  • Improve performance testing 20802
  • Edit Post: Register block patterns as separate plugin 20871
  • Accessibility: updated headings to reflect semantic relationship between html tag and it’s content. 16444
  • Add Prettier shared config package 20026
  • Add default styles to the TabPanel component 20872
  • Add isFileURL method and use it on all native media upload checks. 20985
  • Add menus endpoints. 20292
  • Block Patterns: Update text-two-columns.json 20890
  • Block Styles: Remove the block margin in the style selector 19983
  • Block patterns: improve success notice 21005
  • Blocks: Allow the Default Style selector to be hidden. 20620
  • E2E Tests: Mock Embed response for InnerBlocks locking test 20481
  • ESLint Plugin: Relax prefer-const for destructuring assignment 20737
  • Gallery: Update UI of controls 20776
  • Improves RTL style conversion 20503
  • Minor change to switch Help link target to _blank, add rels 20800
  • Mobile: Add accessibility label to Block List Footer 20633
  • Moves category multi select from LatestPosts to QueryControls 20832
  • Paste: replace iframes with url 20983
  • Polish poster image button arrangement. 20754
  • Preview Button: Remove the separator and border, and reduce the size of the icon. 20683
  • RangeControl: Improve disabled rendering and interactions 20723
  • Reduce gap between block library and preview 20777
  • Remove aria-expanded from close button in Publish panel 20993
  • Remove feature flag for mobile page templates 20718
  • Remove inaccurate message from image block 20909
  • Removed the textarea width restriction for the Shortcode block 20624
  • Revert “Framework: Travis: Avoid skipping Puppeteer download” 20828
  • Show errors in the media replace control 19244
  • Styles Panel: Don’t force it to be closed by default. 20617
  • Update Navigation Menu Item icon 20763
  • Update page template picker after design review 20883
  • Latest Posts: Testing larger margins 20563
  • Add codeowners for env package 20667
  • Scripts: Update all webpack related dependencies 20916
  • Dependencies webpack plugin: Let the output file be specified when output is combined 20844

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.8 5193ms 23.05ms
Gutenberg 7.7 5134ms 22.79ms
WordPress 5.3 9512ms 25.83ms

#core-editor, #editor, #gutenberg

What’s new in Gutenberg? (11 March)

With WordPress 5.4 around the corner, Gutenberg 7.7 is another exciting release. It introduces patterns and the first iteration of a new block UI design which aims to synthetize the learnings from these past couple years of Gutenberg being out in the wild.

New Block UI

After more than a year from its first production release, the community pushed the boundaries of the editor further than we’d have expected. The number of third-party blocks exploded and millions of users are interacting with the editor in different ways. This led to a refresh of the Block UI to apply some of the lessons learned in the meantime.

The redesign includes:

  • A simpler Block Toolbar.
  • Better UI color contrast.
  • Consistent focus styles.
  • Redesigned icons.
  • Grid-based spacing and sizes.
  • And more.

As with any feature in the editor, this is the initial release and there’s still more work planned to bring more consistency in the remaining UI elements: sidebar panels, drop-down menus, etc.

Block Patterns

While the editor has a rich set of built-in blocks, it is sometimes challenging for users to compose these blocks together in order to achieve the best designs for their pages. And as we accelerate towards Full Site Editing, this becomes an important challenge to solve.

Different existing community-provided solutions have addressed this by providing rich sets of templates/layout that are ready to use and prevent that dreaded “white page syndrome”. There is a need to bring some consistency and coherence to these features. Gutenberg 7.7 introduces Block Patterns: predefined block layouts, ready to insert and tweak to address that problem.

As a first iteration, the Block Patterns UI has been added as a sidebar plugin from where you can pick and insert the patterns. This is considered an MVP and the UI is expected to evolve over the next releases.

As a start, the plugin comes with a small limited set of patterns. The list will ultimately grow and be opened to third-party authors.

7.7 🇵🇭

Features

  • Add the initial version of the Patterns UI as a sidebar plugin (this is not the final interface and work is in progress to integrate with the main block inserter). 20354, 20715.
    • Add an initial set of patterns 20724.

Enhancements

  • Update the Block and editor UI. 19344
  • Improve the Back to WP Admin button in Fullscreen Mode. 20603
  • Make the editor Fullscreen by default. 20611
  • Remove template locking from the columns block 20465
  • Make the inserter full height. 20526

Bug Fixes

  • A11y:
    • Deselect first/last gallery images on blur. 14930
    • Revert top toolbar tab order 20571
  • Add an overlay to the html block preview to fix block selection in Firefox. 20425
  • Add missing accessibility attributes in the SVG icons. 20538
  • Fix invalid syntax error on Safari 12. 20507
  • Use a consistent width for the link suggetions. 20448
  • Use full labels for directional block movers. 20664
  • Columns block: Force 50% column width at mid-range viewport. 20597
  • Media & Text block: Fix frontend styles when “Crop image to fill” is selected 20539
  • Latest Post block:
    • Fix the excerpt length. 20313
    • Don’t trim manual exerptts 20432
  • Fix sidebar scroll issue on small viewports. 20491
  • Social Link block:
    • Escape generated class name. 20479
    • Fix label attribute type as string. 20468
    • i18n: Use placeholder for the default label 20475
  • Simulated Queries (Device previews):
    • Check for match in stylesheet host and protocol to prevent Chrome breakage. 20673
    • Fix IE11 editor breakage. 20226
    • Fix incorrectly displayed preview option for private post types. 20604
    • Focus preview button after opening preview. 20570
  • Fix isURL regex to take account file urls. 20435
  • Fix error when deleting empty paragraphs in IE11. 20594
  • Fix hidden inserter toggle behind the popover. 20663
  • Fix block registration shared defaults reuse across blocks. 20565
  • Shim meta attributes for early block registrations. 20544
  • Fix bouncing Custom color formatter. 20612
  • Fix Gallery block styles in Edge causing editor breakage. 20690

New APIs:

  • wordpress/env: Add support for ZIP URL sources. 20426

Experiments

  • Lighter Block DOM:
    • allow block types to render their own wrapper 19701
    • Lighter InnerBlocks. 19910
    • Automatically add block class. 20658
  • BlockPreview: Add __experimentalOnReady prop. 17242
  • Edit Site:
    • Update template navigation to use new link control. 20366
    • Update the edit site save modal UI. 20608
  • Fix the block toolbar in the Widgets and Site Edit screens. 20458
  • Fix widgets screen inserter 20680

Documentation

Code Quality

  • Refactoring to existing blocks to use a lighter DOM:
    • List block. 20498
    • Image block. 20576
    • Heading block. 20493
  • Consistent block focus behavior on mount. 20577
  • Cleanup CSS variables. 20529
  • Use the EditorSkeleton component in the widgets and Edit Site pages. 20440, 20431.
  • Refactor SlotFill components. 19242
  • Remove useless style override for floats. 20501
  • Block popover: remove data-type. 20531
  • Resizable editor improvements. 20259

Various

  • wordpress/env:
    • Save the database as a volume. 20648
    • Fix accidental quotes in Site Title. 20520
    • Set owner of wp-content to www-data. 20406
  • wordpress/create-block:
  • Fix React warning triggered by the BlockToolbar component. 20546
  • Skip the Type Writer effect component in IE 11. 20485
  • Update browserslist to fix out-of-date caniuse-lite messages 20709
  • Add storybook stories:
  • E2E Tests:
    • Add test for the Image block. 20622
    • More stable embed test. 20668
    • Fix intermittent RichText e2e test failure. 20457
  • Travis: Avoid skipping Puppeteer download. 20547
  • Plugin: Bump minimum WordPress version to 5.3 20628
  • @wordrpess/priority-queue: Fix for environments that don’t have window defined. 20486
  • Update jest configuration to only ignore tests from /wordpress/ as a subdirectory 20420

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version Loading Time KeyPress event (typing)
Gutenberg 7.7.0 7.7s 37.86ms
Gutenberg 7.6.0 7.0s 34.97ms
WordPress 5.3 7.2s 66ms

#core-editor, #editor, #gutenberg

Editor chat summary: Wednesday, 4 March 2020

This post summarizes the weekly editor chat meeting on Wednesday, 4 March 2020, 14:00 UTC held in Slack.

WordPress 5.4 Upcoming Release

WordPress 5.4 RC 1 is out, more details can be checked on the release page.

The list of editor PR’s cherry picked can be checked on #20593 and #20613.

The team published all the block editor dev notes. In total, the team ended up publishing a total of 10 posts with block editor dev notes https://make.wordpress.org/core/2020/03/03/wordpress-5-4-field-guide/ covering 32 PR’s that needed a dev note.

@jorgefilipecosta gave a big thank you to everyone that helped the big effort on writting the editor dev notes.

@jorgefilipecosta ended the topic by sharing the following information:

For the next RC currently, we have three issues that should be fixed. Two of the issues have a PR that needs review. Another one does not have a PR yet. The status of these tasks can be checked on https://github.com/WordPress/gutenberg/projects/39

Weekly Priorities

The Post with the priorities for March is published.

@gziolo shared the following summary of the priorities:

  • Block Content Areas
  • Global Styles
  • Block Patterns
  • Tightening up

Task Coordination

@karmatosed

@karmatosed referred that for Feedback from design just note in the core-editor channel or in GitHub.

@joen

Is experimenting with new iconography to explore the G2 iterations: https://github.com/WordPress/gutenberg/pull/20464.

@nosolosw

@mapk

@gziolo

  • Started development for the new block editor features API.
  • Code reviews, testing, etc.

@brentswisher

Is continuing to work through the components and adding storybook stories to any that are missing: https://github.com/WordPress/gutenberg/issues/17973#issuecomment-591093951

Referred that if anyone has experience with the story shot integration, he has some questions in the Disabled PR: https://github.com/WordPress/gutenberg/pull/20514.

@andraganescu

@ajlende

Is experimenting with WebGL blocks right now and working around the constraints. Is trying to get people’s thoughts/opinions on a Gutenberg feature request he has related to rendering in the background and providing a single requestAnimationFrame render loop for multiple blocks https://github.com/WordPress/gutenberg/issues/20483.

Open floor

Custom text color format

@paaljoachim brought to the discussion the fact that the text color may or may not be a main format.

@jorgefilipecosta clarified that the fact that the text color appears on the main formats when a color is selected and disappears from the main formats if no color is selected is not a bug. It was an implemented behavior to avoid too many main formats but at the same time give relevance to the format if color is chosen. We may discuss this behavior in an issue and it may make sense to change.

Fullscreen mode enabled by default

@paaljoachim raised the fact that now fullscreen mode is enabled by default, and referred he is very skeptical about this change as it can bring much confusion to users.

@gziolo referred that:

  • Fullscreen mode is a feature that already existed.
  • Customizer also uses fullscreen.
  • The feature will only affect new users as the current setting the users had is persisted in the local storage.
  • The feature is still being discussed and it may end up being reverted during the RC phase.

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

What’s new in Gutenberg? (26 February)

Gutenberg 7.6 brings considerable progress on the full-site editing (FSE) front, including four new FSE blocks:

  • Post Featured Image
  • Post Tags
  • Comments Count
  • Comments Form

In addition, this release includes many enhancements and fixes to existing blocks and features.

Any help testing FSE work is much appreciated. So, if possible, please enable FSE in your testing environments and share your feedback.

Gutenberg 7.6 also brings a rotating list of tips that appear in the Block Inserter to provide useful information to users:

The release also comes with developer-focused enhancements to wp-env and wp-scripts, thus improving the experience of building with WordPress.

Last but not least, this release cycle has prioritized bug fixing, and as a result this release brings numerous fixes that were also included in Betas 2 and 3 of WordPress 5.4.

Read on for the full change log.

7.6 🇱🇹

Features

  • Add a rotating list of tips to the inserter help panel 20163

Experimental

  • New blocks:
    • Post Featured Image. 19875
    • Comments Count block. 19953
    • Comments Form block. 19954
    • Post Tags block. 19580
  • Add new features to the Post Excerpt block. 19715
  • Allow changing Site Title block heading level. 20361
  • Render the post comments form properly 20279
  • Add new features to the Post Date block. 19857
  • Add multiple template loading 19141
  • Show error when resolved block template is empty 20239

Enhancements

  • Improve find-ability for social/video embeds 20224

New APIs

  • Ensure packages-update wp-scripts command works with missing dependencies 20408
  • Add new option in dependencies webpack plugin to combine assets files into one file 20330
  • Environment:
    • Add custom port numbers to .wp-env.json 20158
    • Add support for local override files. 20341
    • Add debug mode. 20348

Bug Fixes

  • Overflowing LinkControl block editor component. 20154
  • Broken gallery to image transform and inconsistent types used in the gallery block 20084
  • Missing label on heading toolbar. 20248
  • Sidebar jumpiness. 20355
  • Fix wrong imports in PluginBlockSettingsMenuItem 20356
  • Color formatter appears when color choosing is not possible 20222
  • Crash when updating a post with the latest post block 20289
  • Inconsistency on Import from JSON button look 20416
  • Inline image width pop-up ‘wanders’ down page 20232
  • Styling problem on vertically aligned blocks 20368
  • Remove unnecessary aria-label from link formatter 18742
  • Make navigation button expand to fit longer nav link text 20230
  • Flow for gallery creation and editing 20287
  • Fix background color for dark themes on the spacer block 20296
  • Show metaboxes peeking in even on tiny screens. 20262
  • Add an edit state to media frames to fix an issue when opening a new tab. 17642

Documentation

Various

  • Create block: Add support for format:js to ESNext template 20335
  • Add check for minimum system requirements on create block 20398
  • Conditionally apply Editor Skeleton html element styles 20245
  • Environment:
    • Check for legacy installs and provide the option to delete them. 20340
    • Fix testsPath on local sources 20353
    • Use user with UID=33 to run WP CLI commands 20403
    • Fix issue where docker & wp had different URLs 20228
    • No longer show error message twice 20157
    • Support wp-config.php overrides. 20352
    • Support overwriting generated file directory with an environment variable 20253

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.6.0 7.7s 48.59ms
Gutenberg 7.5.0 8.5s 55.45ms
WordPress 5.3 7.9s 77.23ms

#core-editor, #editor, #gutenberg

Editor chat summary: Wednesday, 26 February 2020

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

WordPress 5.4 Upcoming Release

Gutenberg 7.6.0

  • RC will be released on Monday.
  • The changelog can be checked on https://github.com/WordPress/gutenberg/releases/tag/v7.6.0-rc.1.
  • The FSE work evolved a lot, and Gutenberg 7.6 includes four new FSE blocks, besides many enhancements and fixes to the existing blocks and functionality.
  • Any help testing FSE work is much appreciated, enable FSE on your test/in development projects and share your feedback.
  • Enhancement to wp/env and wp-scripts to make the developer experience better.

Weekly Priorities

  • The first iteration of G2 (Block UI redesign) has been merged into master and will make it into Gutenberg 7.7.

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.

@nosolosw

@youknowriad

  • Working on G2.
  • Starting a new project with @nrqsnchz about Block Patterns.
  • Help with G2 follow-ups.
  • Triaging old issues.

@joen

@mcsf

  • Followed up on items related to Social Icons.
  • Discussed block variations and patterns with @gzioloo.
  • Pitched in around dev notes for 5.4, and some reviews.
  • Exploring how to implement embeds as block variations.

@ellatrix

  • Continuing work on lightening the block DOM and allowing blocks to render the entire block and inner block wrappers, hopefully making it easier to style block for block and theme authors. 

@brentswisher

@gziolo

  • Paired with @azaozz to improve the build process for the editor’s JavaScript scripts in WordPress core.
  • A few bug fixes/enhancements for @wordpress/scripts and @wordpress/create-block packages.
  • Several reviews including SlotFill refactor.
  • Plan to work on the block features API proposed by @youknowriad.

@getdave

@itsjusteileen

  • Working on FSE and block templates from a user and theme creator perspective.

@andraganescu

Open Floor

Capitalization in strings used in the editor

Encouraging component maintainers to get involved with the non-editor parts of Gutenberg

  • @noisysocks some discussion around how to encourage Widget component maintainers to get involved with the experimental Block Widgets functionality. There’s a lot of expertise there that the Core Editor team could use.
  • @youknowriad suggested inviting component maintainers to the core editor channel.

Query Blocks

  • @andraganescu some discussion around reusability of query block https://github.com/WordPress/gutenberg/pull/20106
  • @revgeorge It’s working, but I’m working with @epiqueras to figure out how to best structure it’s de-duplication feature, or possibly going ahead without de-duplication at launch. It’s behind the FSE flag in the branch because it needs the post blocks to display results
  • @itsjusteileen from a plugin perspective, I’d love to see it with de-dupe
  • @revgeorge I can show you how I plan to use it with a plugin use case. The current plan for deduplication is to provide a container block that uses hooks to provide a way for blocks to get a list of displayed posts and add to that list, the container would be aware of the order the blocks are in and what they’ve displayed.
  • @gziolo what’s the difference between Query block and Latest Posts block?
  • @youknowriad Query block doesn’t have a fixed output based on attributes, it uses InnerBlocks to render each “post”. So you could combine PostTitle, post content, PostExcerpt, Post* blocks as a template for each “Post” entry in the Query block.

Semantic HTML inside the Group block

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

What’s new in Gutenberg? (12 February)

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

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

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

Rich text can now be coloured!

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

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

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

7.5 🇹🇭

Features

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

Enhancements

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

New APIs

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

Experimental

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

Bug Fixes

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

Documentation

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

Various

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

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version Loading Time KeyPress event (typing)
Gutenberg 7.5.0 6.491s 34.695ms
Gutenberg 7.4.0 6.413s 36.81ms
WordPress 5.3 6.331s 75.19ms

#core-editor, #editor, #gutenberg

Dev Chat summary – February 5, 2020 (5.4 week 4)

The chat was facilitated by @davidbaumwald on this agenda.

Full meeting transcript on Slack

This devchat marked week 4 of the 5.4 release cycle.

Highlighted posts

Upcoming Releases – 5.4

We are currently in week 4 since WordPress 5.4 kick-off.

Further informations:

@audrasjb pointed out that it would be good to add more bug scrubs to help ticket triage and punting when necessary, to help contributors to focus on tickets that are realistically going to land in 5.4.

In addition to the scrub he scheduled for early Friday morning and Monday, @davidbaumwald will host another on Sunday.

Reminder: Beta 1 is the deadline for Feature Request and Enhancement type tickets. The full list of such tickets can be found with this Trac query.

Gutenberg Navigation Block

@noisysocks noted that including this block in the release could generate confusion for end users, as it will appear as a standalone block without any of the accompanying features (Full Site Editing and a new nav-menu.php page) that will make this block actually useful. He felts unsure if we want to remove this block from the 5.4 scope or not.

@jorgefilipecosta agreed with the concerns being raised by Robert. He said he was operating under the assumption that the navigation block needed to be part of 5.4. But from his side, he think we can change that assumption. He also think the navigation block by itself without Full Site Editing is not very useful for most users.

Note: the Navigation Block was officially removed from the release scope two days after the dev chat.

Plugins & Themes Automatic Updates

For reference, see the two related Trac tickets: #48850 and #49199.

@audrasjb updated the current work on the related tickets:

  • Technical aspects of the feature still need a lot of review from deeply experimented core committers
  • Design changes need to be validated by the design team

According to @audrasjb, there is a quite solid basis, but the Core team still needs to take some decisions about this feature, as we are approaching beta 1.

@desrosj made a deep review of the technical changes, and shared his concerns about the feature and also an alternative patch.

@mapk, @karmatosed and @audrasjb iterated on the user experience and their work is close to be finalized.

Email notifications are handled by @desrosj and will need copy review. @marybaum is available to help on that side.

The release Team will take the final decision about implementing automatic updates for Plugins & Themes in WordPress 5.4 before Beta 1 is released, and will publish a post on Make/Core to announce their progress on this specific topic.

#5-4, #auto-update, #gutenberg

Navigation block exclusion from WP 5.4

After plenty of great discussions about the Navigation block recently, the Gutenberg Team, including Dev Lead @jorgefilipecosta and me ( I’m the Design Lead), has decided not to include it in the WordPress 5.4 release.

We’ve been sharing this decision with the Release Squad for 5.4 and among many seasoned contributors to get a perspective on how everyone felt about this. The general consensus: people understand why the Gutenberg Team has made this call, and they support the decision.

Navigation block

Historical context

The Navigation block was a priority project for 2019. It was also planned for the WordPress 5.4 release. So we absolutely did not make this decision lightly. Ultimately, we recognize that although the block itself is ready to merge into Core, the Gutenberg Team believes this move is premature.

Why?

As I said, the Navigation block is usable right now. But we don’t think it’s useful yet – at least not until it has an intuitive place to live.

It’s hard to imagine cases where users would want to add a Navigation block to the post or page content. It’s much more likely that a given user would want to add a Navigation block to Header or Footer block areas – maybe even a Sidebar. However, that functionality in Gutenberg just isn’t ready.

Now, let me add this: if a user does want a set of links in a page, the new Buttons block in WordPress 5.4 can probably meet that need.

Buttons block

As I look back at the WordPress Project’s to-do list for 2019, the Navigation block didn’t exist in a vacuum. There was also the matter of Themes registering content areas which is still in progress as we speak. Both of those should co-exist and be released together. To include the Navigation block without a proper home isn’t really useful for users, and it doesn’t seem to justify a feature mention in the 5.4 release.

Going forward

Our next steps include adding a few more features to the block:

  • Creating a new page from within the block (19775).
  • Creating a Navigation block based on existing menu structures (18869).
  • Indicating “current” menu items visually (20076).

So that’s what’s happening with the Navigation Block and WordPress 5.4.

I want to ask you, personally, to join us in Core and in the Gutenberg Team discussions and give us your thoughts. Please review this block, to help further testing around it.

I’ll be picking up usability testing for this block again soon, and I’m looking forward to hearing from you how we can improve it.

And don’t forget to install the Gutenberg plugin to test the Navigation block in near-real-world conditions. With your feedback, we can make this block a great success.

#5-4, #gutenberg

What’s new in Gutenberg? (5 February)

More than 51 contributors participated in this exciting release.

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

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

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

7.4 🇰🇷

Features

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

Enhancements

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

New APIs

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

Bug Fixes

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

Experiments

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

Documentation

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

Various

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

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version Loading Time KeyPress event (typing)
Gutenberg 7.4.0 5.037s 34.54ms
Gutenberg 7.3.0 5.461s 34.63ms
WordPress 5.3 6.631s 71.553ms

#core-editor, #editor, #gutenberg

Editor chat Summary: 5th February 2020

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

WordPress 5.4

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

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

Gutenberg 7.4

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

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

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

Weekly Priorities

Our short term general priorities remain:

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

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

Task Coordination

@nosolosw

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

@youknowriad

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

@aduth

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

@get_dave

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

@andraganescu

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

@karmatosed

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

@itsjonq

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

@mcsf

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

@mapk

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

@retrofox

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

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

@tellthemachines – from the agenda comments

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

Open Floor

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

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

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

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

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

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

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

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

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

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

The CSS meeting announcement had many positive reactions 🙌

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

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

Final note

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

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

Thank you and keep up the good work!

#gutenberg, #meeting-notes