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
Navigation: Try unifying submenu arrow positioning. #37003
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -85,7 +85,6 @@ $navigation-icon-size: 24px; | |
align-self: center; // This one affects nested submenu indicators. | ||
line-height: 0; | ||
display: inline-block; | ||
vertical-align: middle; | ||
font-size: inherit; | ||
|
||
// Affect the button as well. | ||
|
@@ -95,15 +94,18 @@ $navigation-icon-size: 24px; | |
border: none; | ||
|
||
// Scale to font size. | ||
margin-left: 0.25em; | ||
width: 0.6em; | ||
height: 0.6em; | ||
margin-left: 0.25em; | ||
|
||
svg { | ||
display: inline-block; | ||
stroke: currentColor; | ||
width: inherit; | ||
height: inherit; | ||
|
||
// Position the arrow to balance with the the text. | ||
margin-top: 0.075em; | ||
} | ||
} | ||
|
||
|
@@ -216,6 +218,16 @@ $navigation-icon-size: 24px; | |
} | ||
} | ||
|
||
// Push inwards from right edge of submenu. | ||
.wp-block-navigation__submenu-icon { | ||
margin-right: 0.25em; | ||
} | ||
|
||
// For hover-based menus, this class is duplicated for a button. | ||
.wp-block-navigation__submenu-icon .wp-block-navigation__submenu-icon { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this still needed? I notice you removed the extra span here (which wasn't meant to be there, so thanks for fixing 😄 ) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wildly excellent eye there. I started writing the CSS rule first, then figured the better fix was to remove the span, then forgot to remove the CSS 🙈 Thank you, removed! |
||
margin: 0; | ||
} | ||
|
||
// Reset the submenu indicator for horizontal flyouts. | ||
.wp-block-navigation__submenu-icon svg { | ||
transform: rotate(-90deg); | ||
|
@@ -245,7 +257,7 @@ $navigation-icon-size: 24px; | |
} | ||
|
||
// Show submenus on click. | ||
.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container { | ||
.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { | ||
visibility: visible; | ||
overflow: visible; | ||
opacity: 1; | ||
|
@@ -300,6 +312,18 @@ button.wp-block-navigation-item__content { | |
cursor: pointer; | ||
} | ||
|
||
// When set to open on click, a button element is used. | ||
// We pad it to include the arrow icon in the clickable area. | ||
// The padding can be blanket for click, since you can't set click and hide the icon. | ||
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle { | ||
padding-right: 0.6em + 0.25em; // Same size as icon plus margin. | ||
|
||
+ .wp-block-navigation__submenu-icon { | ||
margin-left: -0.6em; | ||
pointer-events: none; // Make the icon inert to allow click on the button. | ||
} | ||
} | ||
|
||
|
||
/** | ||
* Margins | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -235,14 +235,16 @@ const PageItems = memo( function PageItems( { | |
|
||
function ItemSubmenuToggle( { title } ) { | ||
return ( | ||
<button | ||
className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" | ||
aria-expanded="false" | ||
> | ||
{ title } | ||
<> | ||
<button | ||
className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" | ||
aria-expanded="false" | ||
> | ||
{ title } | ||
</button> | ||
<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"> | ||
<ItemSubmenuIcon /> | ||
</span> | ||
</button> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This change also needs to be done for the page list front end, here. As it stands there's still a diff in the front end between open on hover and click with page list submenus: There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you! I wanted to note that I missed this because it appears I can't currently a navigation menu with only a page list to open submenus on click in the interface. As of #36826, we currently hide those options unless the menu It seems like we should change that to simply just show those options if the menu I was able to check the box in the code editor though, so I'll take a stab at addressing the markup issue now. |
||
</> | ||
); | ||
} |
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.
Well.