Navigation Block: Flip submenu indicator icon on submenu expansion #70307
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. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @shrivastavanolo! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
| @@ -312,6 +312,11 @@ button.wp-block-navigation-item__content { | |||
| cursor: pointer; | |||
| } | |||
|
|
|||
| // Flip submenu arrow icon when expanded. | |||
| .wp-block-navigation-submenu__toggle[aria-expanded="true"] { | |||
| transform: scaleY(-1); | |||
There was a problem hiding this comment.
@shrivastavanolo I'm curious, is there any reason you are using scaleY instead of ´rotate´?
I agree that this is a better experience and that we should include this in the plugin but I'd love to know why you went with scaleY :)
There was a problem hiding this comment.
Hey @fabiankaegy
I used scaleY(-1) instead of rotate(180deg) or rotateX(180deg) because it just 2D flips the arrow vertically without messing with the layout. rotate(180deg) also flips it horizontally, which we don't need here, and rotateX(180deg) is a 3D transform which isn't needed here.
Since the arrow svg is symmetrical horizontally, all of them look the same visually but scaleY(-1) is the simpler and more reliable way to do it in my opinion.
Thanks for the review. Please let me know if I'm missing something here!
refs: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY
There was a problem hiding this comment.
Thanks so much :) Approved from my end!
|
Unfortunately, this PR introduces at least two visual issues. Let’s fix this issue before this PR is released as a Gutenberg plugin.
aa21199aab8b1ceee38a53972bd20834.mp4 |
Unlinked contributors: shreyashrivastava@192.168.1.12. Co-authored-by: shrivastavanolo <shreya0shrivastava@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: karmatosed <karmatosed@git.wordpress.org> Co-authored-by: jacobcassidy <jacobcassidy@git.wordpress.org>
…0307)" (WordPress#70427) This reverts commit 78b3108. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
What?
Closes #35636
Why?
Currently, opening a submenu does not change the downward arrow icon. Ideally, the icon should flip upward to indicate the submenu is expanded.
How?
When a submenu is expanded (aria-expanded="true"), the downward arrow icon now flips upward using a transform: scaleY(-1) CSS rule.
This change was added to packages/block-library/src/navigation/style.scss and enhances the user experience by providing a clearer visual cue of the submenu's open state.
Testing Instructions
Screenshots or screencast
Before
https://github.com/user-attachments/assets/a19abfbe-0145-4bd7-87c8-b6e12549b351
After
https://github.com/user-attachments/assets/e39ba6d5-780b-413a-994e-393f051e3a11