Increase pattern modal dimensions when creating a new template #49722
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
jameskoster
added
Needs Design Feedback
|
Size Change: -425 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
This is what I got when testing in Safari with only two templates. The templates are huge. I'm not sure that's expected. |
|
Hm you should not see that. On larger screens there should always be 4 columns, even if some are empty, as noted in the OP. I'm still trying to work out how best to handle that. Edit: A commit was missing :) |
|
Hey James. Great! I believe there are a few older issues which touch upon various aspects of a bigger modal. Which could likely be good to take a closer look at. I will see what I dig up and edit this comment. Edit Added: Add categories to the "New Page" pattern modal -- Template Part: Make it clearer which is currently in use in replace modal Manage Reusable blocks without leaving Gutenberg Display block pattern options in a modal rather than placeholder state Starting out blank or with selecting a template layout. The above are some issues mentioning modals. There are also other Full Site Editing which mentions template modals which one can gain inspiration from. As bigger sized modals become more common place. We need a consistent way of what these look like and work. |
|
Bigger sounds good, no reason not to have room here. Riad described it as a bug but is it possible to maintain 3 columns across the viewports, and the items inside just scale to go with it? |
That's how it works, although 4 columns instead of 3. We can probably switch to three at certain sizes, but on wide screens I think the previews would be too big. I'll try 3 on medium viewports and share a video. |
|
Here we go: patterns.mp4 |
|
Nice, that looks good to me. Thank you for the video. Happy to green check this one if you like? |
|
Looks good! |
|
The only trade-off is the appearance when there are 'empty' columns, e.g.:
I don't think it's a big deal, hopefully this won't happen very often once more patterns are added. As a follow-up we should ensure the pattern modal in the add-page flow matches. They currently use different implementations 😞 |
|
Flaky tests detected in a0cc0a5. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4677162089
|
apeatling
approved these changes
Apr 13, 2023
23 tasks
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?
Increases the size of the pattern modal that appears when creating a template
Why?
A larger modal is more immersive (distractions of the editor are hidden), and the previews themselves are larger.
How?
Adjusts some css.
Testing Instructions
Before
After
The one drawback with this approach is that the modal is a little empty when there are only two options:
We could allow them to scale up to fill the space, but then the previews are enormous when there's only two.
I'm very open to suggestions on how to improve this aspect.