Navigation Block: Rotate submenu indicator icons on submenu expansion #70442
Conversation
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @ShreyaShrivastava@192.168.1.12. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
There was a problem hiding this comment.
Thanks for the PR!
I believe there are two issues that need to be discussed and resolved here:
Arrows in nested menus
First, let's discuss and decide whether the arrows should be flipped in nested menus:
Personally, I prefer not to flip them here.
Change which elements are flipped
It should not be the button itself that is flipped, but the svg element inside it. Otherwise, the position of the flipped icon will be incorrect.
Flip button element (current PR state):
Flip svg inside button (my suggestion):
I agree. It looks likes clicking on the link left to the menu would close the sub-menu, but that's not the case. |
|
Changes made:
Screen.Recording.2025-06-16.at.7.37.15.PM.movNote: @media (min-width: 782px) {
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
transform: rotate(-90deg);
}
}overrides the submenu icon |
There was a problem hiding this comment.
LGTM! It appears to be working as expected in all scenarios.
Finally, I'd like to suggest some improvements to the code:
.wp-block-navigation-submenu__toggle {
cursor: pointer;
// Rotate submenu icon when open.
&[aria-expanded="true"] {
+ .wp-block-navigation__submenu-icon > svg,
> svg {
transform: rotate(180deg);
}
}
}- Use existing CSS selector
- Make selectors simpler
- I found the comments to be verbose, so shorten them
|
@shrivastavanolo Thank you for working on this PR!
Do you mind submitting a new issue regarding the above? I think that's clearly a bug that needs to be fixed. |
…WordPress#70442) * style: rotate submenu indicator icon on submenu expansion * docs: add inline docs * refactor: select svg instead of button * refactor: use existing selectors --------- Unlinked contributors: shreyashrivastava@192.168.1.12. Co-authored-by: shrivastavanolo <shreya0shrivastava@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org> Co-authored-by: karmatosed <karmatosed@git.wordpress.org> Co-authored-by: jacobcassidy <jacobcassidy@git.wordpress.org>
What?
Closes #35636
Follow up to #70307 #70334 #70427
Adds visual feedback to the Navigation block submenu toggle by rotating the nested submenu indicator icon when it is expanded and makes sure that the submenu label does not get inverted along with the icon.
Why?
Currently, opening a submenu does not change the downward arrow icon. Ideally, the icon should flip in the opposite direction to indicate the submenu is expanded.
How?
transform: rotate(180deg)whenaria-expanded="true"is set on the toggle.rotate()to correctly support horizontally and vertically expanding nested submenus.aria-expandedis on the button and the icon is it's next sibling while with "Open on click" disabled:aria-expandedis on the icon itself. This PR takes care of both structures while adding css rulesets.Testing Instructions
Screenshots or screencast
Before
Screen.Recording.2025-06-16.at.5.07.22.PM.mov
After
Screen.Recording.2025-06-16.at.5.09.25.PM.mov
*note: The padding issue seen above in the nested submenu block item ("Open on click" enabled) is not caused by this PR. I'll create an issue for that shortly.