Jorge Costa 10:10 am on March 18, 2022
Tags: block-editor ( 65 ), chats ( 24 ), core-editor ( 490 ), core-editor-summary ( 107 ), gutenberg

Editor chat summary: Wednesday, 16 March 2022

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

WordPress 5.9.2

@jorgefilipecosta said WordPress 5.9.2 was an important security and maintenance release and asked everyone to update all their sites. There were updates until WordPress 3.7, everyone even if not on the last WordPress major version should be able to update.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 12.8

Gutenberg 12.8 was released around the chat time by @priethor. Details about the release can be backed on the release page.

Key projects updates

Patterns

@jorgefilipecosta shared the following update related to patterns:

The current experience when creating a new page and starting with a blank canvas is not ideal. It would be better if we had something premade ready. On #39147 we are interacting on this experience. Patterns will be able to specify they are full page patterns, and uses will be able to create pages in an easy way. We also merged recently changes to how one inserts and replaces the content of a template part and now are changing the flows for the query blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. #38997.

Styles

@jorgefilipecosta said that we have some improvements to how duotone styles are handled in #38681, and we also fixed the centered image alignment styles at #39422.

Comments loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block

@bernhard-reiter shared the following update:

Quite a bit of progress there, thanks to the team: There’s a fix for the broken pagination that’s now ready to merge. The Generic AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. block PR has also been approved. Finally, there’s a bugfix for two rather annoying bugs with inner block selection and duplicated settings in the inspector controls of the Comments Query Loop block.

Native mobile application

@carlosgprim said the team is focused on the following on Drag and Drop project and addressing content uploading issues.

Task coordination

@jorgefilipecosta

I will start for the next week I want to update #38997 and improve the modal UIUI User interface to contain a grid and carousel view. I also plan on working on the base editor experience be it by helping the effort to get partial multi block text selection, helping the nested blocks on quotes and lists and other related tasks. Let’s see how much we can improve the basics.

@paaljoachim

I have made multiple videos. Among these one is about going from a classic theme to an FSE theme.
Added notes into the fse-outreach-experiment channel.
Added feedback to a few Navigation block exploration issues.
Made a few new issues: #39490, #39380, #39307.

@mamaduka

I’m continuing my work on Block Locking UI and APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. Here’s my latest proposal on implementing “Locked by System” in the editor.
Finished an error handling audit for media blocks. They should correctly display upload errors now 🙂
Created PR to make error messages returned via uploadMedia utility more consistent. This is a breaking change, so I’m looking for some feedback.

Open floor

Template part resizing

@paaljoachim said: “With exploring the transition og going from a classic theme and over to Twenty Twenty Two I noticed that I was not able to adjust the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. template height.I also made an issue for it here: #39490“.

@jorgefilipecosta anwsred “To me template part is just a block to reference an area. It should not deal with the content its styles its size etc. I guess to control the height of an area like an header one can put a group block or cover block inside that header”.

The conversation continued and @paaljoachim said a group was already present, both participants in the discussion agreed there maybe be space for improvements and the conversation will continue on the issue. If you have some thoughts on this please share them.

wordpress/frontend-dx Gutenberg subteam

@bernhard-reiter shared the following:

I’d like to create a GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ team (under the WordPress org, as a sub-team of the Gutenberg team) for those of us that are currently working on Fronted Developer Experience (tentatively named “Frontend DX”, which means we’d use the handle @wordpress/frontend-dx). There’s currently a rather well-defined group of folks focusing on this, so it’d be quite handy for us to be able to @mention the entire team.

The participants showed support for this idea and @bernhard-reiter is going to create the subteam.

PR’s and Issues awareness

@mauriac raised the attention of the team to PR #39426 that is ready for review and to issue #39395 that is a regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. that happened on 5.9. @jorgefilipecosta said #39395 probably is something that we should fix in WordPress 5.9.3 release.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg

Héctor Prieto 8:36 pm on March 16, 2022
Tags: core-editor ( 490 ), gutenberg, gutenberg-new ( 113 )

What’s new in Gutenberg 12.8? (16 March)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

Depending on which hemisphere of the Earth you are at right now, either Spring or Autumn are coming soon. In either case, and regardless of your location, Gutenberg 12.8 is already here for everybody! This release comes with new APIs, iterative UXUX User experience enhancements, and, as always, many bugfixes to increase the editor’s stability.

New Webfonts API
Swift inline insertion of internal links
Steps towards full visual theme creation
Iterating on placeholder and loading states
Props to new contributors
Changelog
Performance Benchmark

New Webfonts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

Since 2007, WordPress has provided a framework to help theme and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers load scripts and styles in a standardized, integrated way. Now, for the first time, web fonts have the same types of tooling.

This API is the first step in helping people load fonts in a performance-friendly, privacy-friendly, and future-proof manner – something which has been tremendously difficult to do without such a framework.

That it’s taken so long to reach this point is a testament to how complex web fonts can be and evidence of how much work has gone into ‘getting this right.’ Now that this framework exists, more tools and optimizations can be built on top of it to ensure that WordPress delivers the best possible experience (and privacy) to end-users.

With a few weeks left until the next WordPress Beta release and because of the complexity to achieve this milestone, testing the API is encouraged, and as always, feedback is welcome!

Swift inline insertion of internal links

Gutenberg seeks to provide the best editing experience to all kinds of users, and power users will enjoy seeing inline links can now be inserted with a direct keyboard shortcut. If you thought using the slash inserter was fast, try the new [[ keyboard trigger to add an inline link without going through the inserter.

As with other enhancements aiming to improve the user experience, this new feature is gathering feedback; don’t hesitate to share your thoughts on the keyboard trigger and the overall experience.

Steps towards full visual theme creation

The Gutenberg team keeps making progress towards the goal of full visual theme building within the editor. When using the export tool available in the Site Editor, the theme.json file including the Styles settings is included in the zip, too, together with the index.php and styles.css files as well!

Iterating on placeholder and loading states

In continuation of work done in previous releases, Gutenberg 12.8 keeps iterating on placeholder and loading states. The Navigation block now provides a clear loading state for initial setup and subsequent loading of existing blocks, and thanks to the improved UIUI User interface feedback, creating a new menu is snappier.

The Media & Text blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. also comes with improved loading states. Starting in this version, the media being uploaded is also displayed behind the spinner.

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle!

@ahsanshaheen199: fix: Code example in flyout component. (39156)
@alshakerM: Render SVG props that have dashes correctly. (38936)
@awps: Missing ,toggleFormat from last code block. (39146)
@francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
@ironprogrammer: Raise z-index of content div relative to sidebars. (38893)
@joshuafredrickson: Add a resolvable JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. entry point to base-styles. (39240)
@jostnes: Remove rename rn UI tests. (39042)
@mashikag: Fix Blocks list ordering in Global Styles. (39093)
@tomasztunik: Fix Global styles overriding block’s element styles. (39012)
@Tumas2: Spelling error in JustifyContentControl example. (39234)

If you are interested in contributing but do not know where to start, join the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly meetings on Wednesdays at 14:00 UTC in #core-editor focused on all things Gutenberg.

12.8.0 Changelog

Enhancements

Block Library

Group: Show group option in Group blocks. (39094)
Navigation: Improve loading and placeholder states. (38907)
Navigation: Improve create new UI feedback in Nav block. (39219)
Media & Text: Display media while uploading. (39275)
Tag Cloud: Use flex for the Outline style. (38995)

Components

ConfirmDialog: add custom button text. (38994)
InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. (39109)

Block Editor

Add a link completer for inline links to posts. (29172)

Site Editor

Add theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. to export file. (39048)
Resolve homepage template on server-side. (38817)
Theme Export: Add index.php and style.css. (39173)

Icons

Update drag handle footprint. (39342)
Update Pin icon, add new Post icon. (39139)

General Interface

Raise z-index of content div relative to sidebars. (38893)

Media

MediaReplaceFlow: Add ‘onError’ prop to handle error notifications. (39197)

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

Block settings dropdown: Use block display title in remove label. (39110)
Try allowing tab into block placeholder. (39085)

New APIs

Webfonts API. (37140)
Add new @wordpress/preferences package. (38873)
Add reusable preferences modal to interface package. (39153)
- Add interface preferences modal to edit post. (39176)
- Migrate hidden block types (block manager data) to new preferences packages. (39132)
- Migrate post editor feature preferences to use new preferences package. (39115)
- Migrate customize widgets editor to use new preferences package. (39112)
- Migrate standalone widgets editor to use new preferences package. (39084)
- Migrate site editor to use new preferences package. (39158)
- Deprecate interface package’s preference APIs. (39418)
Create Block: Add support for more plugin headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. fields. (39096)

Bug Fixes

Block Library

Buttons: Added aria label to the button block with icon. (38966)
Buttons: Fixes Button highlight popover overflow conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with link popover. (38771)
Buttons: Don’t set a placeholder text color. (39034)
Code: Restructure code block styling. (38712)
Comments Pagination Number_ Fix Comments Pagination Number with no pagination settings. (39204)
Cover: Fix keep selected unit on deleting minHeight value. (39145)
Cover: Fixes #38761 by removing obsolete ::Before pseudo element. (38762)
File: Check if ‘fileId’ exists before setting the attribute. (39088)
File: Don’t display loading animation on upload error. (39213)
File: Fix file block validation error by not outputting aria-describedby if there’s no description. (39083)
File: Fix the undo trap. (39215)
Hide border panel when all border features have been disabled. (36791)
Hide current menu from dropdown list in Nav block. (38916)
Image: Fix image responsive rules. (39045)
Image: Display errors after failed upload. (39178)
Media & Text: Display errors after failed upload. (39245)
Navigation: Fix navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. error when menus are not yet fetched. (39151)
Post Comments Form: Show correctwarning relative to post/page context. (38011)
Post Expert: Fix missing class in post excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.. (38747)
Post Terms: Unescape HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities in term names. (39216)
WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Group: Make save() markup the same as render_callback markup. (38510)

Styles

Fix Blocks list ordering in Global Styles. (39093)
Fix default duotone preset SVG and style generation. (38681)
Fix header panel height. (39119)
Fix Global styles overriding block’s element styles. (39012)

Components

Update drag gesture of InputControl-based controls with axial constraint. (38968)
UnitControl: Fix controlled unit behavior. (39148)
Normalize font-family. (38969)

Block Editor

Fixes block highlight after block move. (38915)
Improve in_footer handling in gutenberg_override_script(). (39497)

Post Editor

Avoid error when ‘styles’ settings are removed. (39091)
URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Fix code drift in the Editor package by removing duplicate cleanForSlug function. (39033)

Site Editor

Expose plugin area to site editor’s List page. (39078)

Other Packages

apiFetch: Handle urlencoded and rest_route query params. (38914)
Base Styles: Add a resolvable JavaScript entry point to base-styles. (39240)
Compose: Avoid memory leak in use-drop-zone. (39038)
Render SVG props that have dashes correctly. (38936)
Url: Improvement to prototype handling. (39365)

Developer experience

Change copying PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files to dist directory to opt-in via a CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. flag. (39171)
Create Block: Add confirm prompt before showing the plugin options. (39105)
Create Block: Improve custom project template configuration. (39049)
Handle resolution errors in wordpress/data. (38669)

Documentation

Add import useBlockProps. (39072)
Components: Update changelog follow up for #38985. (39013)
Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
Element: Add changelog notes for serialize attribute casing. (39141)
Gutenberg Data Tutorial Part 3: Building an edit form. (38581)
Fix code example in flyout component. (39156)
Missing ,toggleFormat from last code block. (39146)
Move recent CHANGELOG entry to Unreleased section. (39169)
Spelling error in JustifyContentControl example. (39234)
Storybook: Support proper extraction of TypeScript prop types. (38842)
Storybook: Add webpack loader for easier story descriptions. (39165)

Code Quality

Componentes, UnitControl: Tidy up utils and types. (38987)
Components, FontSizePicker: Refactor stories to use Controls. (38727)
Components, ToggleGroupControlOption: Calculate width from button content and remove LabelPlaceholderView. (39345)
Core Data: Rename types directory to entity-types. (39225)
Core data: Fix some typing issues. (39212)
Core data: Fix some typing issues. (39214)
Fix @wordpress/comment-case ESlint errors but without adding the disable-rule pragma. (37006)
Delete widget editor redundant css for more menu. (39113)
Layout: Remove duplicate var declaration. (39111)
Move editor settings code to compat folder. (39030)
Refactor useSelect usages to useEntityRecords. (38827)
Refactor classic menu conversion process. (38858)
Post author name: Add “post” prefix to CSSCSS Cascading Style Sheets. class. (38320)
TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. (39002)
Update framer motion to 6.2.8. (38999)
useBlockEditorSettings: Remove unused unstableBase fetch. (39221)

Tools

Project Management

Code owners: Remove users without write access and fix typos. (39238)
Simplify Pull Request template. (39229)

Testing

Add end-to-end testing for experimental nav menu deletion. (38955)
Add Home/End keyboard end-to-end test for List View. (39265)
Add some tests for TreeGrid. Update README to reflect latest functionality. (39302)
Add test case for post locking feature saving. (39022)
Add tests for media replace flow. (39005)
Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. (39039)
ESLint Plugin: Make Prettier integration optional. (39244)
Fix performance tests by adding backwards compatibility to welcome guide utility. (39300)
Improve switch to draft button end-to-end test robustness. (38971)
Remove rename rn UI tests. (39042)
Social Icons: Begin Automating Existing Manual Test Cases. (39027)
Update ‘clickMenuItem’ test util to use full label matching. (39274)
Update preview test to wait for publish panel to appear before closing it. (39100)

Build Tooling

Fix spelling of contributors in changelog script. (39029)
Resolve peer dependency warnings. (39043)

npm Packages

Fix npm run docs:Build crashing when a block.json lacks supports key. (39241)
Packages: Automate npm publishing as part of Gutenberg release workflow. (39259)
Packages: Automatically acceppt all Lerna commands when run with CI flag. (39199)
Packages: Update CLI publishing tool to run in CI mode. (38993)

Plugin

Account for upcoming changes in styles metadata in WordPress 5.9. (36327)
Don’t filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. ‘theme_templates’ when running WP 5.9. (39017)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

Version	Time to first block	KeyPress Event
Gutenberg 12.8	5.01s	38.86ms
Gutenberg 12.7	5.07s	40.42ms
WordPress 5.9	5.22s	38.11ms

Site Editor

Version	Time to first block	KeyPress Event
Gutenberg 12.8	4.99s	33.12ms
Gutenberg 12.7	5.01s	37.61ms
WordPress 5.9	4.74s	32.03ms

Kudos to all 54 contributors that participated in the release! 👏

Thanks to @jameskoster for the release post assets, @jonoaldersonwp for crafting the Webfonts API summary, and to @cbringmann and @hellofromtonya for proofreading.

#gutenberg-new #gutenberg #core-editor

David Smith 9:34 am on March 14, 2022
Tags: core-editor ( 490 ), core-editor-summary ( 107 ), gutenberg, meeting notes ( 154 ), summary ( 529 )

Editor Chat Summary: 9th March 2022

This post summarises the weekly editor chat meeting (agenda here) held on 2022-01-19 14:00 UTC in Slack. Moderated by @get_dave.

Status Updates

The RC for Gutenberg 12.8 was released – thanks to @priethor for leading this one.
We’re just over a month away from the Beta 1 for WordPress 6.0.
Key project updates:

Task Coordination

The following items were shared by folks to update us on what work is in progress or where help is needed:

@zieladam:

I keep expanding the Create your First App with Gutenberg Data tutorial, three parts are already shipped and the part 4 is in a draft stage
Shipped useEntityRecord and useEntityRecords convenience hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., recently I also proposed a convenience-oriented set of throwing actions for creating, deleting, and updating entity records
Also, I merged TypeScript definitions for entity records and I keep working on TS signatures for core-data selectors such as getEntityRecord
Added resolution error handling to @wordpress/data – surprisingly, it was missing
I also encourage everyone to participate in two discussions about an API error handling policy and multi-entity permissions control

@mamaduka – I’m working on Block Locking UI and PR is ready for review/testing.

@get_dave – I’ve been working on both refactoring the Nav blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and improving the its UIUI User interface feedback when importing classic menus and creating empty menus.

@paaljoachim:

I went through the call for testing: https://make.wordpress.org/test/2022/02/23/fse-program-testing-call-12-hyping-headers/
Made a new issue for the Site Editor in relation to adding the ability to sort by template name, latest update, type etc. https://github.com/WordPress/gutenberg/issues/39307
Added feedback to block locking UI: https://github.com/WordPress/gutenberg/pull/39183#issuecomment-1062833856 Look forward to having a lock mechanism for Reusable blocks.

@zebulan:

Table of Contents block PR needs just one approving review so it can be merged.
Some bugs were found since the last time it was brought up in a meeting, but those are now fixed.
There does remain one quirk, as described in the latest comment, but I don’t think it’s a blockerblocker A bug which is so severe that it blocks a release..
Really wanting to get this one merged in time for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 12.8.

@scruffian – I’ve been working on Theme Export in Gutenberg.

@alexstine has an important a11y PR up which finds the most appropriate focus target in non-contenteditable blocks. More reviews encouraged.

Open Floor

The full Open Floor discussion is available on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Using useEntityRecord in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks

@cbravobernal asked when it would be suitable to include the new useEntityRecord hook in Core blocks?
@get_dave @gziolo and @zieladam all suggested using in one or two blocks as a testing ground before rolling out further.

New contributor – `@mehedi890`

@mehedi890 said he’d like to contribute core team.
@get_dave suggested the Good First Issue/Review labels as a good place to start.
@paaljoachim left a good thread of specific suggestions for where to start.

Request for Core team input on Standardized Design Tokens and CSSCSS Cascading Style Sheets. proposal

@cbirdsong asked whether there is an update from the Gutenberg Core team on Proposal: Standardized block markup, theme.json design tokens, and CSS classes to improve interoperability.
This PR has being getting a lot of community interest and summarises a number of previous threads and Issues which discuss similar topics.
@gziolo noted the relationship to an ongoing project which is trying to improve how the block styles are handled.
@get_dave promised to follow up with other Core team members to check when we can expect a response.
@matveb, @youknowriad and others have since responded.
@glendaviesnz has suggested some next steps.

Feedback request: editing Navigation menus in isolation from the Nav block

@get_dave highlighted two interesting PRs happening on the Navigation Menus system to allow menus to be manipulated in isolation from the Navigation block:
- Dedicated Navigation sidebar.
- POC Isolated Navigation focus mode.
Contributors would really appreciate testing and/or feedback on these PRs as they address one of the major points of feedback we received from WP 5.9.
Feedback can be technical or design/UXUX User experience. No prior experience required.
Never tested a Gutenberg PR before? Just follow this guide.

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

Carlos Bravo 9:45 pm on March 2, 2022
Tags: block-editor ( 65 ), core-editor ( 490 ), gutenberg, gutenberg-new ( 113 )

What’s new in Gutenberg 12.7? (2 March)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

Gutenberg 12.7 has been released and is available for download!

Improving the Patterns experience
List View Improvements
Changes to frontend HTML when using layouts and image blocks
Other notable highlights
Props to new contributors
Changelog
Performance Benchmark

Improving the Patterns experience

Gutenberg 12.7 includes new features that will make working with patterns even easier!

Make Patterns easier to discover

The block quick inserter now prioritizes patterns instead of blocks when all the following conditions are met:

We are editing a template, either on site editor or post editor.
The inserter is at the root level.
The content being inserted is between other blocks (neither as the first blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. nor as the last one).

Patters inserter demonstration animated screenshot

The template part (e.g. HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. / Footer / SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.) creation flow will now also show patterns, making it easier to create more advanced compositions than adding blocks one by one.

Work will continue improving the logic that decides to show a pattern or a block, so feel free to share your feedback in the Gutenberg repository!

Allow themes to highlight Patterns

Themes can now highlight specific patterns to their users!

Recommending patterns to the users is as easy as adding a pattern field to the theme.json file. When handling patterns from the Pattern Directory, you can find their slugs on the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org when browsing them individually.

List View Improvements

Once more, the List View keeps getting better! Gutenberg 12.7 includes a few iterative improvements to improve the block editor experience.

You will be able to select multiple blocks at the same level, and then drag and drop them to move them around. To select multiple blocks, the keyboard shortcuts are:

Shift Key + Click
Shift Key + Up/Down arrow.

List View drag and drop animated screenshot

Also, when you click on a block in the editor, the List View will expand to show the selected block for better visibility of the selection’s context within the block tree.

Block List view expanding animated screenshot

Changes to frontend HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. when using layouts and image blocks

In order to add consistency to the block editor, we are removing some wrappers divs that were generated on the editor in order to add alignment to some blocks.

Keep in note that this div cleaning can affect themes that support layout and many blocks that have this alignment support. Many contributors helped with testing, but theme developers are encouraged to check their themes and leave any feedback they may encounter.

Other notable highlights

Gutenberg 12.7 provides a few other iterative enhancements worth highlighting.

Now you can add border styles to the Columns blocks and margin to Group blocks.

Column options on Column blocks screenshot

Margin options available on Group blocks screenshot

To avoid backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutengerg 11.8 is now opt-in. To enable this feature, simply add:

add_filter(
	'block_editor_settings_all',
	static function( $settings ) {
		$settings['__experimentalGenerateAnchors'] = true;
		return $settings;
	}
);

Props to new contributors

Contributors avatars background and contributor text with an applause emoji.

Recognizing and celebrating contributors, both and new, becomes more efficient and effective! A contributor props list has been automated when creating the release and added to the changelog! Any user who merges a PR during a Gutenberg release cycle will be aknowledged.

In Gutenberg 12.7, up to 52 contributors merged PRs of any kind, including 6 new contributors. Props to @Alex-Kostov, @HasnainAshfaq, @mjstoney, @razwan, @sanzeeb3, and @Sisanu for their first PR! 🎉

Changelog

Enhancements

Block Library

Columns: Add border support. (31737)
Group Blocks: Add margin support (top/bottom). (37344)
Comment Template: Improve comment pagination with nested replies. (38187)
Comments Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: Show placeholder comments on site editor. (38072)
Navigation: Try unifying submenu arrow positioning. (37003)
Submenu: Add revert button. (38203)

Components

FocalPointPicker: Allow updating its value while dragging. (38247)
General Interface: Simplify site icon animation on hover. (38783)
Navigator: Add NavigatorButton and NavigatorBackButton components. (38634)
Type Refactor: Use forwardedRef type for all forwarded refs in wordpress/components. (38948)

Block Editor

Block Editor: Add settings to enable/disable auto anchor generation. (38780)
Block Transforms: Keep additional HTML classes during a block transform. (38964)
LineHeightControl: Enhance interactions by migrating internals to NumberControl on Style options. (37160)
List View: Add multi-select behaviour for blocks when shift key is selected. (38314)
List View: Expand block list tree on selection. (35817)

Styles

Add initial version of the style engine. (37978)
Style engine: Refine Box type. (38894)

Post Editor

Enable tooltip for the main dashboard button. (38790)

Themes

Lowered specificity of alignment rules for support layout so wide alignments work. (38947)
Remove data-align divs for themes that support layout. (38613)
Remove the div wrapper from the aligned image blocks. (38657)