Conversation
- Heading level shown in sidebar inspector variation picker - Level-specific icons in the sidebar picker - Proper variation detection via isActive callbacks The variations use scope ['block', 'transform'] to appear in the sidebar picker and transforms, while keeping the inserter clean with just the base "Heading" block.
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @mtias! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
Extends the inserter to include block-scope variations in search results, enabling slash commands like `/h3` to find variations that appear in the sidebar variation picker. Variations with only 'block' scope (not 'inserter') are marked as `isSearchOnly` and filtered from the inserter browse view, but remain searchable.
213eb4a to
25d5818
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +1.45 kB (+0.06%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
Remove level dropdown UI
|
@fabiankaegy what do you think will be confusing? It largely implements #55067. The stretchy text stuff is moving to a block support, it should not be polluting the variations space. I think the current state creates awkwardness like #73819. |
|
@mtias I think just the change in existing habits will create friction. Which is totally fine if we think it is worth it. I'm more concerned about hiding the level dropdown entirely in favor of just variations. If there are already existing other variations in plugins etc it just breaks those because they can now no longer change the heading level. And I do think the fact that we use the heading level dropdown in multiple blocks already makes it odd to remove it from the heading. Lots of 3rd party blocks also use the |
|
Looks like some e2e tests need adjusting, e.g. diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index b27c0fa52e4..719694b2210 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -366,7 +366,7 @@ test.describe( 'Heading', () => {
await expect(
headingListViewItem,
'should show default block name if the content is empty'
- ).toHaveText( 'Heading' );
+ ).toHaveText( 'Heading 2' );
await editor.canvas
.getByRole( 'document', { |
|
relatedly to what @fabiankaegy stated; in my organization, we remove the heading level 1 for our content editors since all of our templates are locked and let our content editors just use 2-6. So, currently, we have: That filter is no longer applicable with the proposed PR and will certainly deserve a devnote at the very least to inform developers of the change. although I can confirm that unregistering the variation prevents the variation from appearing (like the following for level 1): wp.blocks.unregisterBlockVariation( 'core/heading', 'h1' ); I am personally ambivalent about the change overall and understand its benefits. The block's toolbar has inconsistently been used for setting some really core settings to a block in some cases (like whether or not the list is ordered or not) but not for others (group block, whether it's stack or row or grid), so this isn't any different. |
|
@skorasaurus thanks for the example! Pushed some code to handle that directly. Unregistering the variation should be the more idiomatic way, but we can still keep support for the attribute filtering. Could you check that with the above your code still works? |
Yes, I can confirm that with the newer build from e6a6074 ; just having my current code example alone removes H1 from appearing. Thanks for the adjustment. |
| keywords: variation.keywords || item.keywords, | ||
| frecency: calculateFrecency( time, count ), | ||
| // Pass through search-only flag for block-scope variations. | ||
| isSearchOnly: variation.isSearchOnly, |
There was a problem hiding this comment.
This is a new flag right? I'm a little bit hesitant about it.
I mean "scope" have been used in variations to define where a variation should appear. And by adding this flag we now have two properties to define that. I may have a small preference for another "search" scope.
There was a problem hiding this comment.
This is not being set by the consumer, it's just an internal flag to explicitly treat "block" context to show up in search. I implemented the search scope initially but it seemed unnecessary and confusing, since you'd think you need to pass the extra search scope to ensure something shows up on searches, but "inserter" already handles that.
There was a problem hiding this comment.
Ah ok, maybe we can just pass down the scope or something no?
There was a problem hiding this comment.
Regardless, I'm way less concerned now :)
| unregisterBlockVariation( name, `h${ level }` ); | ||
| } | ||
| } ); | ||
| } |
There was a problem hiding this comment.
This works and I think it's totally fine for now but:
changing a "default" attribute value to define what levels are available seems like a bad thing to start with. I wonder if we should deprecate that attribute. Unregistering a variation seems like a way better approach.
There was a problem hiding this comment.
That would break sites that rely on the default options attribute to remove the heading levels.
I think @fabiankaegy is also suggesting keeping the toolbar dropdown item - #73823 (comment).
There was a problem hiding this comment.
This is why I said "deprecate" and not "remove" :)
There was a problem hiding this comment.
That said, reading @fabiankaegy's comment I do agree that at a "pattern" level it's a good idea to allow disabling level options and things like that.
youknowriad
left a comment
There was a problem hiding this comment.
This is working great in my testing
Just putting it out there, but looking at #63535 I believe one of the "strengths" of that API over the unregistering of Variations is that it was context aware and instance based where as variations are global. So with the olde model you were able to change the available heading levels on a per instance basis. Which this here doesn't allow for. |
jasmussen
left a comment
There was a problem hiding this comment.
This'll need a code review separately, I'm reviewing purely based on the visuals and the experience, which is captured here:
I like it! This feels more intuitive as far as using the heading level icons to immediately connect the heading level, also between block toolbar and inspector, which feels very ergonomic. You can always search for "Heading", whether slash command or inserter, and in that vein there's something semantically forward about this, in that it more or less embraces HTML and teaches you about the markup.
0c05b9d to
548d21d
Compare
548d21d to
82b3673
Compare
|
Flaky tests detected in 82b3673. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20142548400
|
|
@mtias Just a reminder, please make sure to copy the list of contributor props from the Props Bot comment on a given PR into the bottom of the commit message so that everyone is credited for their contributions. In this case, everyone who participated is an established, frequent contributor. So they will be included in the next release's props anyway and it's not an issue. But it becomes difficult to track while preparing for a release when they are one-off contributions. Thank you and everyone here for contributing! ❤️ |
|
I realized after merging, was going to follow up with another commit. In my defense, it's my first pull request on this project! |
| // Combine inserter and block variations. Block-scope variations without | ||
| // inserter scope are searchable via slash commands but hidden from browse. |
There was a problem hiding this comment.
It also modifies the behavior of
"block"scope in variations so that they are searchable via slash commands.This means variations with only 'block' scope (not 'inserter') are marked as
isSearchOnlyand filtered from the inserter browse view, but remain searchable in inserter and slash commands.
This new rule causes unintended behavior: variations that are only block-scoped can be searched with the slash inserter, for example, column block variations.
…view Pass `isSearchOnly` through the block serialization pipeline and use it to separate browsable blocks from search-only blocks (e.g. heading level variations h1–h6 introduced in WordPress/gutenberg#73823). Search-only blocks are placed in a dedicated `gbk-search-only` section that the native inserter hides in browse mode but includes when the user searches, matching the web inserter's behavior.
…view Pass `isSearchOnly` through the block serialization pipeline and use it to separate browsable blocks from search-only blocks (e.g. heading level variations h1–h6 introduced in WordPress/gutenberg#73823). Search-only blocks are placed in a dedicated `gbk-search-only` section that the native inserter hides in browse mode but includes when the user searches, matching the web inserter's behavior.
* build(deps): Upgrade @wordpress/* packages to .38 series Upgrade all @wordpress/* dependencies to their .38.0 versions to align with @wordpress/format-library@5.38.0's requirement for @wordpress/components@^32.0.0. The previous mix of .36.0 and .38.0 packages caused duplicate @wordpress/components installations (v30.9.0 at the root and v32.0.0 nested), which led to React context mismatches and block rendering failures. * build: Regenerate patch files for upgraded packages Regenerate patches for @wordpress/block-editor (15.11.0 -> 15.12.0), @wordpress/block-library (9.36.0 -> 9.39.0), @wordpress/editor (14.36.0 -> 14.39.0), and @wordpress/rich-text (7.38.0 -> 7.39.0). The underlying fixes are unchanged; only the target versions and file extensions (.js -> .mjs) were updated. * fix: Filter search-only block variations from native inserter browse view Pass `isSearchOnly` through the block serialization pipeline and use it to separate browsable blocks from search-only blocks (e.g. heading level variations h1–h6 introduced in WordPress/gutenberg#73823). Search-only blocks are placed in a dedicated `gbk-search-only` section that the native inserter hides in browse mode but includes when the user searches, matching the web inserter's behavior. * fix: Flatten native inserter search results into a single ranked list Instead of preserving section groupings during search, flatten all blocks (including search-only) into one section ranked by relevance. This avoids the same block appearing in multiple sections and provides a cleaner search experience, mirroring the approach used by the web inserter.



Closes #55067, #42181, and #32472.
This adds h1-h6 as block variations for the heading block, enabling the following behaviors:
The variations use scope ['block', 'transform'] to appear in the sidebar picker and transforms, while keeping the inserter clean with just the base "Heading" block.
It also modifies the behavior of
"block"scope in variations so that they are searchable via slash commands.This means variations with only 'block' scope (not 'inserter') are marked as
isSearchOnlyand filtered from the inserter browse view, but remain searchable in inserter and slash commands.Notes: