Add a layout config to the group and theme.json and make alignments declarative #29335
Conversation
|
Size Change: +3.13 kB (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
|
This is what I see:
This is cool. I imagine:
I'm sure there will be implementation headaches, but the principles here all seem like they solve profoundly more problems than they introduce. As for supporting old and new themes, could the trigger be is it a block-based theme? Or could it involve the Nice work! Edit: Oh, and "full wide" should also have a configurable content width. While it's mean to imply edge to edge, you could imagine it being "edge to edge minus a padding". |
youknowriad
added
[Feature] Full Site Editing
[Type] Experimental
What do you mean by this? Can different blocks in the post content have a wide/full width and be left/right floated? |
I mean, inside a single container, you can say the available alignments for the children are
but not wide, full, left, right, center. |
I'm not sure yet :) I do believe block-based theme should only have that behavior yes, and that the But for classic themes, we could potentially have a way to opt-in into this as well somehow. |
So we wouldn't have all those options for an image block? |
yes, unless you add an intermediary group block. If you think about it, it makes sense, it's that "alignment wrapper" we used to add statically in block markup for some blocks but not others. |
This would also be the way to enable floats inside CSS grid based contexts. Potentially a multi select to pattern transform could help make this feel more natural. |
|
Why not allow floats/alignments in any of these cases and separate alignment from layout (break outs)? Floating works regardless of the context you're in. |
oh we definitely can, but for me it's more a user expectation (not a technical blocker): in a context where the "content area" is centered by default, you don't expect "align left" (users don't understand float) to break out of the content area while adding a group block, setting it to "wide" and adding a left aligned thing inside it seems more natural to me. |
|
Awesome to see this! I agree alignments are one of the most painful parts to support on a new theme and removign all that handling would be excellent.
Yes, I think current post-content should be emulated as:
I think this should be the actual padding control that the Group block has.
Left / Right / Center are valuable in containers like "Cover", where we use the matrix alignments. With grid it can also mimic layouts that now require columns to be used. However, I wouldn't couple Left / Right with floats, which are a very particular and quirky subclass. I think we need to support left / right as the default position of the inner content (which is what Cover does with Matrix control). Matrix should also be available for Group, for example.
This makes sense structurally, but it should be surfaced more transparently to users in the toolbar. For example, clicking on "float left" would transform to group, or allow you to say how many elements you want to include in the group. The UX could be tricky since floating requires other blocks to float around so it's more like a multi-block transform. |
|
I like this a lot!! It was one of the major pain points for blocks styling & FSE...
What is the problem with cascading? Having them cascade makes perfect sense to me... If I set something on a group I expect it to apply to all inner group blocks by default - unless I override it in one of the children. If it doesn't cascade I'll have to make the same tweaks for all inner groups 🤔 |
No, what we want is to apply the "widths" to the inner blocks of the current container but not the grand children blocks of another container which means we'd have to "reset" these variables somehow regardless of whether a layout has been defined in the inner container block. This makes the CSS variables less compelling to me here. |
|
This is really interesting Riad! 👏
I played around with this and in a I know that this is a POC now so I'm asking about what it should show. |
yes, it should show left/right and not wide/full, make sure that intermediary group block doesn't have any "content size" or "wide size" attributes. (empty) |
kjellr
added
the
[Feature] Themes
Excellent point. |
|
I updated the PR description and added a todo list of items that needs to happen in order to ship this. It's a lot and I'd love to find ways to ship this iteratively but can't think of what pieces I can extract from this. Also some of these items are actually design work, so I'd love some help there. |
youknowriad
force-pushed
the
update/rethink-fse-alignments
branch
from
9aa8d22
to
1fa6f6e
Compare
|
I gave this a test this morning, and I really like the direction it's headed in. It works nicely out of the box, which is exactly what I've been looking for in terms of Gutenberg's alignment rules. 😄
Just wanted to chime in to say that this would be great — I imagine quite a few existing classic themes could decide to rely on this and jettison quite a bit of complicated CSS in the process. |
| 1 | ||
| ); | ||
|
|
||
| return $content . '<style>' . $style . '</style>'; |
There was a problem hiding this comment.
@youknowriad Is there currently any API in PHP that we can use to combine all these styles at the start or end of the content?
There was a problem hiding this comment.
we can potentially use wp_enqueue_style but I believe we do inline style tags already (lazy loading of styles), so it's not the only place we do that.
youknowriad
removed
the
Needs Dev Note
The way alignments work in Gutenberg right now is very optimized for traditional themes that provide their own alignment styles and it's also built to be backward compatible with themes that can or can't support wide alignments. This approach while it served us well in phase1, it can't scale properly to FSE because it's not really WYSWYG since the themes has to provide all the custom styles for all the alignments to work properly and it's also not possible to define different kind of alignments/widths in different contexts/templates/sidebars....
The current PR is a proof of concept of how we could make alignments (and layout in general) more declarative. It's based on the following principles:
Notes
Testing the PR
Current themes (both block based and traditional) provide styles for different alignments... which means there will be conflicts, for this reason, I'm attaching an "empty" theme which almost nothing in its stylesheet for you to play with.
emptytheme.zip
Install the theme above
Use the site editor (I didn't update the post editor to remove the opinionated styles for alignments/widths yet)
Try modifying the templates by adding different group blocks, changing their widths, and aligning their inner blocks and see how things behave, if it feels natural and simple.
Todo list