Columns: Try adding a columnsOnTablet attribute to control tablet breakpoint #41295
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
andrewserong
added
[Type] Enhancement
|
Size Change: +508 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
|
Just closing out this PR as it was an experiment / exploration rather than a proposal to be completed. |
scruffian
deleted the
try/adding-a-columns-on-tablet-attribute-to-columns-block
branch
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?
🚧 🚧 🚧 Note: This is an exploratory PR / idea — it very well may not even be a good idea to pursue! 🚧 🚧 🚧
Explore adding in a
columnsOnTabletattribute to theColumnsblock, and a slider to control how many columns to collapse down to at tablet viewport sizes.Why?
As discussed / raised in #41123 (comment) there are competing use cases for the "Stack on mobile" feature of the Columns block. On the one hand, some layouts (e.g. those involving a sidebar) should collapse down to a single column. On the other, some layouts (e.g. columns with images) might appear far too large at tablet viewports if they collapse down to a single column.
While the ideal solution is probably more in the direction of being able to set min / max widths on individual columns and have that logically collapse down based on intrinsic content sizes, I thought I'd at least explore what it'd look like if we had a Columns at tablet screen sizes control in the Columns UI.
How?
Note: the gaps / widths aren't yet being calculated correctly. If the approach in this PR winds up being viable, we'd likely want to copy over the server-side implementation from #41123
Testing Instructions
Screenshots or screencast