Riad Benguella 2:10 pm on April 1, 2020
Tags: core-editor

What’s next in Gutenberg? (April)

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

Full Site Editing

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

The team is still working on the Edit Site UI in order to bring parity with the Post Editor, support more template-management related features and improve the FSE blocks.

The important tasks have been splitted into sections and highlighted on this overview issue.

Global Styles

The Global Styles work is a major focus for this month. One of the most important aspect here is to add support for the global styles configurations (variables) to multiple blocks.

Some blocks have already been updated to support color settings and line height. This trend is expected to continue and expand to other settings and other blocks.

At the same time, the Global Styles UI is being iterated on the Edit Site screen.

You can follow the progress of this project on this overview issue.

Patterns & Inserter UI

Recently, the Patterns feature and APIs have been added to the editor. The UI is still experimental and an overall redesign of the inserter to absorb both blocks and patterns is one of the month’s priorities.

The team will continue to explore adding more patterns. This highlighted a need for more advanced block tools and customizations.

Updated Navigation Screen

A new experimental Navigation Menu screen is being explored and will serve as a block-based replacement for the existing menus page.

Refining the interface

The previous releases saw a big UI update for the editor. The team will continue to iterate based on the remaining tasks and the user feedback.

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

#core-editor

Ella van Durpe 1:45 pm on March 26, 2020
Tags: core-editor, editor ( 138 ), gutenberg ( 144 )

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:
- Group 20586
- Navigation 20729
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

David Smith 9:43 am on March 24, 2020
Tags: agenda ( 416 ), core-editor, editor-chat ( 23 )

Editor Chat Agenda: 25th March 2020

Note taker: @andraganescu.

This is the agenda for the weekly editor chat scheduled for Wednesday, March 25, 2020, 14:00 UTC. This meeting is held in the #core-editor WordPress Slack channel.

WordPress 5.4 Upcoming Release — Field Guide and release schedule.
Gutenberg Plugin version 7.8.0 – current RC.
Monthly Plan & Weekly Priorities.
Task Coordination.
Open Floor.

If you have anything to share for the Task Coordination section, please leave it as a comment on this post.

If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

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

Riad Benguella 10:53 am on March 11, 2020
Tags: core-editor, editor ( 138 ), gutenberg ( 144 )

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
- New icons. 20464
- Avoid empty menu groups. 20495
- Block Placeholders. 20441, 20676.
- Various tweaks 20679, 20578.
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

Add tutorial for creating a custom block editor instance. 20410
Create a new “Gutenberg as a Platform” page. 20666
Typos and tweaks: 20382, 20386, 20517, 20662, 20454, 20659.

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 system requirements checks. 20461 20456
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:
- TextControl 20467
- TextAreaControl 20472
- SelectControl 20482
- Tooltip 20322
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

Jorge Costa 10:04 pm on March 8, 2020
Tags: block-editor ( 15 ), chats ( 12 ), core-editor, gutenberg ( 144 ), meeting ( 36 ), meeting notes ( 71 )

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

https://github.com/WordPress/gutenberg/issues/20331: global style design tasks
Triage: keeping the flows flowing

@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

Have put up for review https://github.com/WordPress/gutenberg/pull/20530 that includes a global style sidebar in edit-site, using preferences from user, theme, and core.
Prepared a raw demo theme for testing purposes at https://github.com/WordPress/theme-experiments/pull/22.
Next up is expanding the system to other areas (scoped styles, custom fonts & colors, style variations, etc).

@mapk

Reorganized the project board for FSE to prioritize “Needs Design” issues.
Knock out a shortcode PR for this real quick: https://github.com/WordPress/gutenberg/issues/11079

@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

Is still focused on advancing the latest posts block.
Will try and continue the work on https://github.com/WordPress/gutenberg/pull/18869 PR about creating Navigation from existing menus
Is reviewing and testing the new PR that provides menu endpoints in Gutenberg # https://github.com/WordPress/gutenberg/pull/20292. It is a big PR and while it is tested in the feature plugin any extra eyes are welcome!
Would love to have the Author Block PR reviewed https://github.com/WordPress/gutenberg/pull/19894

@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

Riad Benguella 2:07 pm on March 4, 2020
Tags: core-editor

What’s next in Gutenberg? (March)

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

Block Content Areas

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

Continue improving the Edit Site UI
- Improve the saving flow. 20421
- Improve the template selector picker. 20469 20478
Continue on the Full Site Editing blocks (post tags 20418, post comments 19894).
Work on the Block Context API. 19685
Continue on the experimental block-based themes.

Global Styles

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

Patterns

These are different from the Block Variations API (that was initially named patterns as well). These are pre-made post/page sections that can be inserted and edited.

Create a rich built-in patterns library. 20345
Iterate on the Patterns UI. 17335

Tightening up

The first iteration of the new Block UI has been merged and it will be polished/iterated on during the upcoming month. 19344
Implement the first version of the Block Editor Controlling API. 20588
The ongoing effort to use a lighter Block DOM structure in the editor and match the frontend.

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

#core-editor

Jorge Costa 10:21 pm on February 26, 2020
Tags: core-editor, editor ( 138 ), gutenberg ( 144 )

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.