Block position controls: use V2 legacy adapter instead of V1 CustomSelectControl
#63139
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
85 tasks
|
Size Change: -185 B (-0.01%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
ciampo
force-pushed
the
feat/custom-select-control-v2-adapter/block-position
branch
from
3be839c
to
0bcc221
Compare
ciampo
commented
Jul 4, 2024
Comment on lines
-7
to
-18
| .block-editor-hooks__position-selection__select-control__option { | ||
| &.has-hint { | ||
| grid-template-columns: auto 30px; | ||
| line-height: $default-line-height; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .components-custom-select-control__item-hint { | ||
| grid-row: 2; | ||
| text-align: left; | ||
| } | ||
| } |
There was a problem hiding this comment.
These overrides shouldn't be necessary anymore because the V2 legacy adapter already allows the item hint to render on a separate line when there isn't enough space and sets the correct line height
ciampo
commented
Jul 4, 2024
Comment on lines
-1
to
-5
| .block-editor-hooks__position-selection__select-control { | ||
| .components-custom-select-control__hint { | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
These overrides shouldn't be necessary if we don't set the __experimentalShowSelectedHint prop on CustomSelectControl
ciampo
commented
Jul 4, 2024
There was a problem hiding this comment.
Removing the .block-editor-hooks__position-selection* class names, since style overrides don't seem to be necessary anymore (and I couldn't find any other references to these class names in the codebase)
ciampo
force-pushed
the
feat/custom-select-control-v2-adapter/block-position
branch
from
0bcc221
to
99a9b37
Compare
ciampo
added
[Type] Enhancement
|
Hey @andrewserong , tagging you in this PR since you seem to have worked on this part of the editor last. You may be able to review and validate some of my assumptions, especially around removing style overrides (#63139 (comment), #63139 (comment)) |
|
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. |
|
Probably better to get some feedback from @WordPress/gutenberg-design regarding the small style differences for items with a hint (see the "Note" in the For context, we're trying to remove custom style overrides as part of a refactor of |
|
I appreciate all of this will be separate, but I wonder if we should consider aligning some of the details here with DropdownMenuV2:
I go back and forth on whether the icon should be aligned to the main label or not, keen to hear input from other @WordPress/gutenberg-design folks on that. The larger gap isn't a deal-breaker for me. A 24px line-height (rather than 28px) – or a 24px min-height – would be more universally aligned though. We use that technique in a few places to ensure text aligns with icons/small buttons. |
|
It would be a good task to separate out for any design system work, once that can happen, to simply design and specify metrics for every single component, and how they latch together. Inner paddings, font sizes, gap between, etc. The closest we have at the moment, is this, where we can compare metrics, and as far as I can tell, this looks right enough.
Yeah, that's a tricky one. My instinct would be to align with the label, and at the same time I just gave feedback on data views that went in the other direction. At the moment, we have this:
That's not great, tbh. I wonder if it's possible to align the icon to the first two lines of text? I.e. it will be centered vertically if there's 1 or 2 lines of text, but it will have the same placement from 2 and upwards. Not sure if that'd be better or worse, but seems like it should be possible with some flex magic? |
|
Thank you both for chiming in! Here is some additional context. We are currently in the process of swapping the current Separately, we're going to be looking at creating a separate
I know that I just said that I don't think that discussing these design aspects is in the scope of this PR, but I'd like share my mental model for types of selection
In my mental model, the dot is associated to radio semantics, and the checkmark to checkbox semantics |
|
I don't love the centrally aligned icon, but I can live with it until a broader redesign of the component. |
That should be easy enough to tweak quickly — I'll give it a try next week. |
|
@jameskoster checkmark alignment changes extracted in #63230 — once merged, I will rebase this PR to include them |
Rebased to include those changes. Here's what the block position control looks like when selecting an item with a long hint:
Let me know if there's any additional feedback — otherwise, we're probably good for a final review round. |
ciampo
force-pushed
the
feat/custom-select-control-v2-adapter/block-position
branch
from
99a9b37
to
b31ec99
Compare
tyxla
approved these changes
Jul 8, 2024
| @@ -1,18 +0,0 @@ | |||
| .block-editor-hooks__position-selection__select-control { | |||
There was a problem hiding this comment.
So cool to see all the custom styling cleaned up 👏
| @@ -283,13 +279,11 @@ export function PositionPanelPure( { | |||
| options.length > 1 ? ( | |||
| <InspectorControls group="position"> | |||
| <BaseControl | |||
| className="block-editor-hooks__position-selection" | |||
There was a problem hiding this comment.
Any chance someone was relying on these custom classes?
There was a problem hiding this comment.
I couldn't find direct usages in Gutenberg, and I also did a quick scan on WP Directory without finding any matches.
andrewserong
reviewed
Jul 8, 2024
huubl
pushed a commit
to huubl/gutenberg
that referenced
this pull request
Jul 10, 2024
…ordPress#63139) Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
…ordPress#63139) Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
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.
What?
Part of #55023
Requires #63131, #63137 and #63230 to be merged first
Replace the V1
CustomSelectControlwith the V2 legacy adapter in the block position controlWhy?
The goal is to ultimately replace the legacy V1 implementation entirely with the V2 legacy adapter. We're performing the migration gradually, and fixing any bugs / gaps as we go.
How?
Testing Instructions
trunkNote
There are some small style differences on the items with hint (see screenshots below):
cscv2.block.position.control.v1.mp4
cscv2.block.position.control.v2.mp4