Navigation: Refactor and simplify setup state. #36375
Merged
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
|
Size Change: +26 B (0%) Total Size: 1.09 MB
ℹ️ View Unchanged
|
| className: 'wp-block-navigation-placeholder__actions__dropdown', | ||
| }; | ||
| return ( | ||
| <DropdownMenu | ||
| text={ __( 'Select existing menu' ) } | ||
| icon={ chevronDown } | ||
| text={ __( 'Existing menu' ) } |
There was a problem hiding this comment.
Could we keep "Select existing menu"? My fear is that "Existing menu" is a bit too cryptic. The other buttons are clearer in their intent with "Add...", "Create..." etc.
There was a problem hiding this comment.
I was looking at it yesterday, and wondered if it could be shortened to just 'Select menu'.
| border: 0; | ||
| min-height: $border-width; | ||
| min-width: $border-width; | ||
| background-color: $gray-900; |
There was a problem hiding this comment.
I'm thinking this could just be a border-left: 1px solid $gray-900, and if we override the inherited border-bottom we won't even need to set it to display: none in the vertical layout.
There was a problem hiding this comment.
I recognize the rules here are a bit creative, but I actually wrote them this way in hopes that I could make them work for both vertical and horizontal cases, so that there was a reason to add these to the Placeholder component directly. It technically worked:
But it is a bit noisy and awkward in the vertical orientation.
I think for now I'll remove the rules from the placeholder component and keep them only for the navigation block.
jasmussen
force-pushed
the
try/nav-setup-state
branch
from
ef0b9a9
to
ba37b76
Compare
|
Thanks for the feedback. I rephrased the menu picker, and moved the hr rules: I'll land this one after the checks pass (unless someone objects in the mean time), but I'll be here for followups. |
jasmussen
force-pushed
the
try/nav-setup-state
branch
from
ba37b76
to
c024a35
Compare
jasmussen
added
the
Backport to WP Beta/RC
noisysocks
removed
the
Backport to WP Beta/RC
noisysocks
pushed a commit
that referenced
this pull request
Nov 15, 2021
* Navigation: Refactor and simplify setup state. * Address feedback.
jasmussen
added
the
Backport to WP Beta/RC
noisysocks
removed
the
Backport to WP Beta/RC
|
Removing the backport label as this was backported in WordPress/wordpress-develop#1883. |
|
My bad, thank you! |
82 tasks
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.
Description
The navigation block setup state has a lot of complexity, both technically and visually. This PR simplifies things in light of recent refactors to the flex properties of it. Before:
After:
The addition of the primary button style was in hopes of making it clearer items inside were clickable. In effect it has primarily worked to add complexity and noise. This PR attempts at segmenting the controls inside to aid readibility, with a simpler separated design.
This PR also starts work on the vertical version, which at the moment is only seen in narrow contexts:
More work is needed here, including removing the old
is-verticalclasses, but I omitted that to keep the PR small. Theoretically though, it should be possible to inherit the orientation even in the placeholder, so that's something to look at in the followup.Another step on the journey could be to get rid of the gray placeholders blobs:
Finally the blobs are a great deal of CSS complexity that falls apart in a few ways in the layout, and are causing layout shifts, for example as shown here:
So I'll explore that separately, but this is a first step on the path.
How has this been tested?
Insert a navigation block and select it. Try it also in a narrow viewport, or inside a thin column.
Checklist:
*.native.jsfiles for terms that need renaming or removal).