-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Grid Layout Improvements #57478
Comments
Quick sketch showing what a next iteration of grid might look like. Keeping in mind we still want to push layout forward in general including generic width/height options via #53455. Children fill width/height of column/row by default. I'm showing width/height controls just to illustrate they are different to span and can be included in the separate layout work. We can start with inspector controls and work our way towards on canvas manipulation, including start/end of grid items which can lead to overlapping blocks. |
Some free flowing thoughts.... I say this as the "Change Content Position" inside the Cover block can use a nice upgrade. Having one grid system used between the various blocks would be very helpful. In relation to grid. It would also be helpful to have an icon to turn on/off helper lines. Somewhat like InDesign/Photoshop one can turn on the grid lines to see how things line up. |
Thinking through what's needed here in light of #58539:
I played around with this a bit and it doesn’t seem possible to match the current behaviour of content and wide layouts with grid. In any case there’s no real gain in replacing the content sizing and alignment logic with a grid-based implementation. |
👋 I'm going to try and build a prototype of this stuff. |
@tellthemachines, @SaxonF and I are actively working on this. I updated the issue to be an overview issue and added a few tasks that we've discussed. #59052 added a new Grid interactivity experiment which you can enable in Gutenberg → Experiments. Currently you can visualise where the grid cells are when you select a Grid block and use a resize handle to set the span of a block within the Grid. I'm looking into drag and drop now. |
Update: A lot of this feature has involved synchronous back-and-forth chat so in an effort to make those conversations more transparent I've create a channel in the w.org slack called I've been experimenting lots with drag and drop in #59490 and in #61025. There's some good progress but still a lot of discovery to do and questions to answer. @tellthemachines and I both have a few commitments coming up, and @SaxonF is now on parental leave, so we're running out of time to get things polished for WP 6.6. With that in mind @tellthemachines and I are going to focus on shipping:
Tasks to do:
|
Nice progress on this @tellthemachines and @noisysocks! I'm not sure if it's related to #60986 or the site editor resize bug, but while testing in 2024-05-13.16.22.32.mp4Grid markup<!-- wp:group {"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null,"rowCount":"3"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"layout":{"columnSpan":1,"rowSpan":1}},"backgroundColor":"accent-4"} -->
<p class="has-accent-4-background-color has-background">A paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"accent-4"} -->
<p class="has-accent-4-background-color has-background">Another paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"accent-4"} -->
<p class="has-accent-4-background-color has-background">Another one</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"layout":{"columnSpan":1,"rowSpan":1}},"backgroundColor":"accent-4"} -->
<p class="has-accent-4-background-color has-background">A paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"backgroundColor":"accent-4"} -->
<p class="has-accent-4-background-color has-background">Yet another</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --> Let me know if you'd prefer I open an issue, and I can put one up tomorrow. |
@andrewserong I can't reproduce that in the post editor, only in the site editor, so it seems like it's the site editor bug (I'm not sure where it was reported, maybe in one of the PRs? but pretty sure that's the bug). Were you able to reproduce it in the post editor too? I haven't managed to do so on the latest trunk. Edit: even in the site editor, the behaviour changes depending on whether the block was newly-added, or if the page has been reloaded after adding the block (it's still buggy after reload, just not as buggy) |
Yes, I can reproduce in the post editor, but only when it's iframed. I.e. if I set Custom Fields to be visible it's fine, but not if they're not. I also ran into an issue where after interacting with the resizer for a while the post editor freezes (this is while not iframed): Specifically the freezing appears to happen when I go to resize the last block and drop it back to very near the edge of the block: 2024-05-14.09.04.40.mp4Could there be an infinite loop or memory leak somewhere? I've opened up a separate issue over in #61633 in case that helps keep the conversation contained 🙂 |
Quick update for anyone following along this tracking issue: with the outstanding interactivity issues now addressed, the grid visualiser and resizers have been stabilised for Gutenberg 18.4, which means folks will be able to try out dragging Grid child blocks to set column and row span, without having to activate the interactivity experiment in the plugin. There are still some pending visual enhancements to explore, but I believe it looks like the feature should now be in the overall shape that it’s intended to be for WP 6.6. |
Update on grid workIn the past few weeks, most of the functionality intended to ship in 6.7 has been put in place behind the "grid interactivity" experiment flag:
Next stepsTesting of these new features is highly appreciated! There are a few small bugs and enhancements outstanding (see list in issue description), and once they are fixed, the new Manual grid should be in a good place to stabilize in the plugin. There's also the alignments feature which would be nice to have in 6.7, but needs some design work first: #62895 |
Did a bit of housekeeping here 🧹 I've:
My hope is that it's now much clearer how other contributors can help with development. @tellthemachines is away until October, so any help is much appreciated 🙂 |
Very unlikely this will make it into 6.7 – I've punted it in the project board. |
Moves the backport changelog file for WordPress/wordpress-develop#6910 from the WordPress 6.7 directory to the WordPress 6.8 directory. These changes are now targeted for a future release and do not need to be merged in to WordPress 6.7 as part of the package update. See #57478. Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org> Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Could anyone provide additional feedback on #64995, which solves one problem in RTL languages? |
Part of Design Tools overview and Layout improvements.
The Grid layout type shipped in WP 6.3 and in WP 6.6 a new Grid variation for the Group block was stabilised, along with support for grid children spanning multiple columns and rows, and on-canvas resize handles.
What's this currently look like?
Under Gutenberg > Experiements, enable "Grid interactivity".
When a Grid block is set to Manual mode (in the block sidebar under Layout), it's now possible to drag and drop blocks into specific grid cells, as well as moving them up, down, left and right with the movers:
moving-blocks-around.mp4
Tasks
Needed before we remove experimental flag
manualPlacement
attribute to set manual grid mode and allow responsive behaviour in both modes. #62777Needed for 6.7
max
to 'Row span' and 'Column span' controls #63967Nice to have
The text was updated successfully, but these errors were encountered: