Mobile menu: add vertical menu 'style' for navigation block #37
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
miguelpeixe
requested changes
May 25, 2023
There was a problem hiding this comment.
The workaround works well when visualizing the menu in the editor! An issue I had is when I start editing the labels. When editing either the parent menu item or the sub-menu item, the sub-item gets relocated to the side of the parent item.
This also happens if I edit through the sidebar panel.
Gravacao.de.Tela.2023-05-25.as.19.26.37.mov
|
Oh awesome catch! 🙌 I have a pretty big menu that I was testing with, and editing it turned absolutely chaotic! There was some block level styles resetting the width with |
miguelpeixe
approved these changes
May 26, 2023
|
Awesome, thanks @miguelpeixe! 🎉 |
matticbot
pushed a commit
that referenced
this pull request
May 31, 2023
# [1.2.0-alpha.2](v1.2.0-alpha.1...v1.2.0-alpha.2) (2023-05-31) ### Bug Fixes * correct spacer block values ([#42](#42)) ([05980d9](05980d9)) * remove style.css from the theme repo ([#32](#32)) ([51d849f](51d849f)) ### Features * add block style to 'flatten' mobile nav ([#37](#37)) ([7b00671](7b00671)) * building out 404 page ([#43](#43)) ([514111e](514111e))
|
🎉 This PR is included in version 1.2.0-alpha.2 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
matticbot
pushed a commit
that referenced
this pull request
Jun 5, 2023
# [1.2.0](v1.1.0...v1.2.0) (2023-06-05) ### Bug Fixes * correct block formatting error in the mobile header ([#22](#22)) ([96e727b](96e727b)) * correct spacer block values ([#42](#42)) ([05980d9](05980d9)) * remove style that doesn't work from theme.json ([#31](#31)) ([0762bac](0762bac)) * remove style.css from the theme repo ([#32](#32)) ([51d849f](51d849f)) * remove unnecessary spacing from navigation menu ([#20](#20)) ([9e8fbdd](9e8fbdd)) * replace query with HPB in no-results view ([#39](#39)) ([c77aa29](c77aa29)) ### Features * add archive, author archive templates ([#35](#35)) ([927a982](927a982)) * add block style to 'flatten' mobile nav ([#37](#37)) ([7b00671](7b00671)) * add block styles; tweak nav styles ([#21](#21)) ([7e2c22a](7e2c22a)) * add content width and wide width, and apply the wide width to the header/footer ([#15](#15)) ([9d53a26](9d53a26)) * add copyright symbol to footer ([#34](#34)) ([7ce6f74](7ce6f74)) * add front page template ([#23](#23)) ([7f44cfe](7f44cfe)) * add greys from WordPress to custom variables ([#25](#25)) ([08f2d7b](08f2d7b)) * add initial search template ([#36](#36)) ([6c80dba](6c80dba)) * add spacing scale ([#19](#19)) ([8c7ae41](8c7ae41)) * add styles to homepage posts block, post carousel ([#38](#38)) ([6d5f871](6d5f871)) * adding desktop header MVP ([#17](#17)) ([f155af4](f155af4)) * building out 404 page ([#43](#43)) ([514111e](514111e)) * first pass at base fonts, colours ([#11](#11)) ([bf6b91b](bf6b91b)) * first pass at initial footer pattern ([#24](#24)) ([301852d](301852d)) * initial mobile header pattern ([#18](#18)) ([b088c54](b088c54)) * initial pass at comments styles ([#27](#27)) ([f04de4b](f04de4b)) * initial single post layout ([#26](#26)) ([603abb7](603abb7)) * update dropcap height and size, pullquotes, captions ([3d8c3f0](3d8c3f0))
|
🎉 This PR is included in version 1.2.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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.
All Submissions:
Changes proposed in this Pull Request:
This PR is largely a work around to a shortcoming to the navigation block/our work around for the mobile navigation:
By default, the navigation block has its own mobile version baked in. The limitation is that this mobile version only included the one menu -- and if you had multiple menus, each could display as its own hamburger menu on mobile.
As a work around, we're using a template part to act as the mobile menu, so it can be edited independently. This gives us a lot more flexibility with how the header and mobile nav can be structured.
Now the problem: the navigation block doesn't have a nice way to display for mobile when it's not using its own mobile settings. There is a 'click to open' option that I thought would work (it seemed really close!), but it turned each of the parent menu items into a
button, and they no longer linked to the pages, just acted as a toggle for the submenus. This could work, but only with specific menu structures (and the toggle for the setting seemed to disappear randomly -- something I need to dig into!).As something of a work-around, this PR adds a block style to the navigation block that "flattens" it when it's set to a vertical orientation. The result is similar to our mobile menus now: a set of nested lists that displays all the links in the menu without interaction.
At the moment, it's a little inelegant -- the option is available regardless of the menu's orientation -- but we should be able to refine that down the road so it's only available when the menu is vertical. In the meantime, the styles are only applied when the
is-verticalCSS class is present.See 1202263311415249-as-1204678201828709
How to test the changes in this Pull Request:
...menu:...dropdown in the menu panel in the right hand column:Other information: