Second layout prototype #53455
Draft
Second layout prototype #53455
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
|
Size Change: +1.92 kB (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
tellthemachines
force-pushed
the
try/second-layout-prototype
branch
from
d3dd030
to
d480a06
Compare
|
Flaky tests detected in c1e9334. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7839845513
|
tellthemachines
force-pushed
the
try/second-layout-prototype
branch
from
20102e6
to
c84fe66
Compare
andrewserong
reviewed
Sep 6, 2023
There was a problem hiding this comment.
Very cool exploration so far! I like how it reduces the differences in the UI between each of the layout types. It does change quite a lot of the UI, and moving Dimensions to a different tab could be a fairly big change for folks, so very curious to hear what folks think about the design direction, but overall it's looking like a lot of promising work to me:
| Group | Row |
|---|---|
 |
 |
I haven't had a close look at the code since it's still in progress, but I had a couple of quick questions from a first play through:
- Is the plan still to switch the Layout panel over to use the ToolsPanel? The designs have the ellipsis at the top right of the Layout panel, so I wasn't sure if the goal was to do that at this stage.
- Will it still be possible for folks to set content + wide size as before? I could see where to add width: fixed under Dimensions, but wasn't sure how this would work with existing Group or other blocks that have custom content/wide size that differs from an overall theme's values.
- What does "boxed" mean under Content Width?
- You can now set Fixed height and Min Height at the same time for the Group block. What's the difference between these?
I think probably the main concerns I'd have personally about the changes are about how it's going to feel for folks used to the existing controls transitioning to the new ones and the impact of the paradigm shift in how layout works. I imagine shifting the paradigm somewhat is the goal here, so some friction is likely to be expected, but still curious about how it'll feel for folks reaching for these tools to build out some designs. Great work, though, keen to see how this progresses!
|
Thanks for the feedback @andrewserong !
Yes I think so, though I'm not 100% sure all those options will be resettable.
Yes! @SaxonF is finalising the design for the custom width inputs. I think we mostly agree that they shouldn't be as prominent as they currently are, but not sure what they'll end up looking like.
It means the there is a max content width (as opposed to content taking up full width as in flow layout), whether it's the theme one or a custom one.
Ah yes! Fixed height should use |
tellthemachines
force-pushed
the
try/second-layout-prototype
branch
2 times, most recently
from
c4ecb8c
to
a3da8c6
Compare
tellthemachines
force-pushed
the
try/second-layout-prototype
branch
3 times, most recently
from
2c5b6be
to
7f3039c
Compare
tellthemachines
force-pushed
the
try/second-layout-prototype
branch
from
c771151
to
4b9b395
Compare
|
This is quite a big changeset, and it's hard to keep the PR in sync with a continually changing codebase, so I'm thinking of splitting this out into several pieces. We can reasonably easily split out the following:
|
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 roughly what it's supposed to look like for a Group block:
Though we still need the direction control for other flex layout blocks, so for now it's staying at the top of the layout panel, with wrap next to it:
The segmented controls are still the ones we have currently, so don't look exactly like the design.
Padding is still in the dimensions panel, but for now the focus should be on testing the layout controls and then we can work out if/how to move the other dimensions controls into the layout panel.
Testing Instructions
Test all blocks with layout and check that controls work and their positioning makes sense.
Testing Instructions for Keyboard
Screenshots or screencast