-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Site Editor Navigation panel: Update appearance of non-link blocks #48933
Site Editor Navigation panel: Update appearance of non-link blocks #48933
Conversation
Size Change: +247 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good one! Thank you. Brings it up to date with templates as well:
I think there's a question of why these styles need to be duplicated for both sections, could they have been the same? I.e. the focus styles should be the same across dark material sections. CC: @jorgefilipecosta
Thanks for the review. I'll hold on merging, pending a more pragmatic solution.
I suppose it's because the underlying components are different. The Navigation panel uses the off canvas menu editor, which in turn uses the List View components. So it's overrides on overrides 😕 |
Why is this better than simply hiding these blocks in this sidebar? |
Because if they're hidden you can't re-order them. |
The Navigation manage will be hidden in WP 6.2, so there's no need to backport this fix. See #49043. |
Part of #48675
What?
Updates the interactive behaviours of blocks like Site Logo, Spacer, Social Icons, Search, Custom Link in the Navigation panel.
It also fixes an issue where children of the Page List block had a semi-transparent background applied... see the "Before" video below.
Why?
The current behaviors feel a bit broken. Specifically: when you click one of these blocks they take on a 'selected' appearance (blue background). In this context the 'selected' appearance has no meaning, and leads to confusion.
How?
I did this by basically overriding a bunch of styles attached to the
is-selected
class. It's not very pretty.I figured it's okay to 'hijack' this class (at least as a short term solution) because in this context there is no concept of 'selecting' a menu item – Page / Post links reveal a drill-down, and the other blocks have no business in being selected.
Sadly I couldn't remove the background applied on hover for these blocks because there is nothing in the markup to identify them.
Testing Instructions
Screenshots or screencast
Before
before.mp4
After
after.mp4