Inspector Controls: resort the order of the design tools associated with styles hooks #35574
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… order in the UI. The DimensionsPanel is injected via a separate SlotFill group "dimensions" which is physically located immediately before the advanced controls in the block-inspector/index.js component.
ramonjd
added
[Type] Task
ramonjd
requested review from
aaronrobertshaw and
apeatling
and removed request for
ellatrix
ramonjd
changed the title
ramonjd
changed the title
|
Size Change: +2 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
Thanks for getting this started @ramonjd 👍 The grouped inspector controls slots will add a bit of a wrinkle to this as you mentioned. It might be handy to know that I'm creating these new inspector control groups as part of switching the block support panels to use the These new groups/panels were being approached one at a time, typography, color, then border. I'm not sure there is a quicker or more efficient means of adopting the new groups/approach. Obviously, this can be landed to get us one step closer if there is a hurry to improve it. Otherwise, we could address it incrementally, ensuring the panel switch PRs match the proposed order. |
Very handy, thank you! And thanks for linking to each of the group PRs.
I suppose it wouldn't hurt to merge this one and wait until the new groups flow in if folks agree. |
aaronrobertshaw
approved these changes
Oct 13, 2021
There was a problem hiding this comment.
LGTM 👍
I've tested this by opting into all the block supports for a single block and checking the order within the inspector controls is as advertised.
This should be fine to merge as mentioned. It might be best though to keep the original issue open until the PRs switching the block support panels to the ToolsPanel and new inspector controls slots are merged.
Thanks for the test and review!
Good point. I'll remove the Resolves keyword from the description. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to #35541
Description
This change attempts to sorts the order of block inspector controls according to the following pattern:
We're dealing with SlotFills, so, like making Bearnaise sauce, the order of execution matters.
The styles supports – Color, Typography and Border components – may be reordered.
The Dimensions Inspector Controls Group however is rendered as the penultimate SlotFill, before the Advanced Controls Group.
The consequence is the order is rendered so:
More excitingly, the reason Layout is currently rendered at the top of the list is because it's imported after style here. Last in first out. Moving
import './style';to the bottom of the import causes the styles supports to be rendered first in the SlotFill.Anyway, I've left the minor changes to styles as a preliminary PR for now to get us close, but for greater control over order, I think we'll need an immediate followup PR to further explore the use of Inspector Controls groups (introduced in #34069).
For example, whether we need to create more groups, as queried by @gziolo in #34069:
Or something to that effect. :)
Thank you!
How has this been tested?
Ensure that you've enabled all block supports in your
theme.json, i.e.,settings[color|typography|spacing|border].Next, activate support for a block in its block.json. The Group Block is fine block with which to test.
Here's how my
supportsobject forgroup/block.jsonlooks:Fire up the Block Editor and insert a Group Block. Select the Group Block and observe the order of the Inspector Controls.
Types of changes
Order change in the rendering of style supports components.
Checklist:
*.native.jsfiles for terms that need renaming or removal).