WIP: navigation block fluid breakpoint #56781
Closed
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
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php |
|
Size Change: +611 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 377e866. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7286550936
|
scruffian
force-pushed
the
try-flexible-breakpoint
branch
from
377e866
to
cef2e2c
Compare
scruffian
reviewed
Jan 2, 2024
| 'type' => 'overlay', | ||
| 'roleAttribute' => '', | ||
| 'ariaLabel' => __( 'Menu' ), | ||
| 'has_flexible_breakpoint' => $has_flexible_breakpoint, |
There was a problem hiding this comment.
should this be camelCase?
|
Closing in favour of #57587 |
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.
What?
This is a WIP
Addresses #45040
https://codepen.io/Marga-Cabrera/pen/WNPjYYw
This PR intends to introduce a new option for the nav block when the overlay option is set to "Mobile" called flexible breakpoint (I already hate that name, maybe smart breakpoint? Please help). When this option is toggled (this is an opt-in situation), a script will detect if the nav block can fit within its own container. If it detects that it's wrapping, it will toggle the overlay burger automatically, instead of using the fixed breakpoint that we are using these days.
We do two checks here:
flex-wrap. Based on that assumption I look for said parent recursively and apply the same principle to verify if the children inside it are wrapping or not. In my personal opinion, if we are not covering this case, there is very little use in continuing this path, since 90% of the time, this is what's causing the nav block to wrap ahead of time and not the amount of items inside it.To do:
Why?
After the discussion over at #54388 and some first explorations, it becomes really clear that we either allow our users to set a breakpoint manually or we need to use JavaScript to detect when. Given the complexity of the nav block and how many combinations of layouts it can be wrapped in, there is no way CSS can only give a solution that will work for most of the use cases.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast