Add Grid interactivity #59052
Add Grid interactivity #59052
Conversation
noisysocks
added
[Type] Technical Prototype
|
Size Change: +1.02 kB (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in df65b36. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7981552144
|
| } | ||
|
|
||
| .block-editor-grid-visualizer__item { | ||
| border: 1px dashed $gray-300; |
There was a problem hiding this comment.
This will not be visible when the theme background is greyish. I'd go with a color-mix(in srgb, var(--wp-admin-theme-color) 20%, transparent); or so.
|
This'll need a rebase now the column span refactor is merged. I'm playing around with a grid of images and the duplicated handles are a bit confusing: Would it make sense to hide the Image block resize drag handles when inside a grid? |
There was a problem hiding this comment.
This is a very cool experiment!
One thing we should probably consider is updating the grid visualisation when parent or child values are changed via the sidebar controls. It might not be a huge deal for the children but for the grid itself I think folks might want to tweak column number etc. as they're manipulating the contents:
1140d39b-70b3-4bcd-9fce-49947ab52693.mp4
packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
Show resolved
Hide resolved
packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js
Show resolved
Hide resolved
|
Great feedback, thanks @tellthemachines! |
|
Still working on this. When ready I'll put the changes behind an experimental flag and mark the PR as ready for review. |
noisysocks
force-pushed
the
try/interactive-grid-child-spans
branch
from
439dda7 to
a036614
Compare
|
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/experimental/editor-settings.php ❔ lib/experiments-page.php |
noisysocks
added
[Type] Feature
noisysocks
force-pushed
the
update/remove-__unstableRefreshSize
branch
from
4e50848 to
82a8713
Compare
noisysocks
force-pushed
the
update/remove-__unstableRefreshSize
branch
from
82a8713 to
943c53f
Compare
|
Just playing around with this and noticed that multiple resize actions on the same block only create one undo level: b324f483-0dff-4391-b735-027a2d0d5cd8.mp4I'm thinking it might be better for each resize to be separately undoable if possible? Apart from that it's working very smoothly! Only being able to drag right and bottom can be annoying depending on the position of the block being dragged (if it's the bottom right block we have to sort of move it around until it's draggable? Or use the sidebar controls) but this is a pretty great start for an experimental feature! |
| right: true, | ||
| top: false, | ||
| topLeft: false, | ||
| topRight: false, |
There was a problem hiding this comment.
So what happens if we enable "left" and "top"? I'm guessing it breaks somehow? 😄
There was a problem hiding this comment.
I think there's a bug in ResizableBox or something because it just goes crazy 🤪 We can look at adding it later if it feels like we need it.
| @@ -0,0 +1,5 @@ | |||
| export function getComputedCSS( element, property ) { | |||
There was a problem hiding this comment.
This is the third instance of this function in the block-editor package, might be worth consolidating (as a separate task)
There was a problem hiding this comment.
The refactor in #59227 brings it down to 2! Getting close... 😂
There was a problem hiding this comment.
Very cool, this is really fun to play with, too. Not a blocker for this PR I don't think, but something I noticed while playing around is that if the column span on a block is larger than the number of columns available, the manual column number of the parent Grid block doesn't force the blocks down to that number of columns. It's a little hard to describe, so I'll see if a video works:
At the beginning of the video we're adjusting number of column span, which is working nicely. At the end of the video, I go up to the Grid block to reduce the number of columns, but it won't let us go down to, say, 2 columns:
2024-02-23.14.01.23.mp4
Again, not a blocker for landing this experiment, though!
|
Thanks everyone! Merging this (behind an experimental flag) and will look into those bugs y'all found next week. |
|
List of follow up work for clarity:
|
This is just how grids work: if a grid child specifies a number of columns greater than what's defined in |
The case I had in mind is a bit more subtle: I'm thinking of if someone goes to update a pattern or template that already uses a Grid that has some children that are spanning multiple columns, and then they decide to reduce the Grid down to 2 columns. In this case, they mightn't know that there are some children that have spans already set on them, so it'll look like the control isn't doing anything, and they might not know they have to go in to update those children. Definitely not a blocker for now, but I wondered if it's maybe something that could be smoothed over when the manual column count is updated? I was very much thinking of that as an idea for polish, though, not anything that needs to be fixed up immediately 🙂 |
A good way to provide visual feedback in that case would be to always show I can't think of a good way to actually force the child items to span less columns: we'd have to iterate through all the block's inner blocks in search of blocks with spans greater than the column number, and perform updates on them. It's not solvable with a container query because the total width of the grid is always the same regardless of column count. Because the scenario is a bit of an edge case, it might be better to wait and see if anyone actually runs into it before preemptively fixing it 😅 |
|
This looks very cool and will become a very powerful layout tool! In a sense what is being created here will replace the Table block or in another sense bring in a very nice update to the Table block. What would be nice is an overview video of the whole experiment. Some of the motivation behind it, what the goals are, if this could also relate to device specific break points. There are so many aspect this touches upon. Having an overview video would very much help and also can be shared giving the opportunity to broaden the feedback. |
|
Hey @paaljoachim. I turned #57478 into a an overview issue for this focus though it's probably lacking the exact detail you're after. Maybe @SaxonF could elaborate—he has a way with words—but the gist of it is that we want to empower users to be able to create more advanced layouts and more advanced block themes in a more intuitive way than they can currently using Group, Row, Stack, Columns, etc. Grid tools exist in other proprietary site builders and ultimately the goal is for WordPress to take market share from proprietary CMS tools. There are some parallels between Grid and the Table block, just as there are parallels between |
What?
Adds a new "Grid interactivity" experiment and adds new functionally behind this feature flag that lets the user:
GridVisualizer)GridItemResizer)Why?
#57478
How?
GridVisualizerMarginVisualizerandPaddingVisualizer.getComputedStyleto determine the computedgrid-templateand uses this to lay out boxes containing a dotted border.GridItemResizerResizableBoxon top of the grid item.Testing Instructions
Screenshots or screencast
Kapture.2024-02-15.at.10.00.24.mp4