-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Add flex layout support to the block editor #33359
Conversation
Size Change: +469 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
Probably worth keeping this UI-less for a bit. Also worth clarifying that position is going to be somewhat orthogonal to layout.
Even for vertical layouts we'd want to use flex in some cases to take advantage of better positioning (Cover comes to mind with its matrix alignment, which can be well suited for flex). |
Nice feature! I wonder if we could use this in the Navigation block instead of having the horizontal/vertical variations. If inner blocks can change their behaviour according to the parent's layout, that would allow us to solve the Spacer block orientation issue in a more general way (currently Spacer inherits its orientation from context, which is only enabled in the Navigation block). Testing the group block with these changes, I'm seeing the align options have been removed from it: I was expecting to be able to set a Group to use wide or full width, and have an internal flex layout. Might be worth adding to the testing notes that this only works on a FSE theme, it wasn't obvious to me 😅 (I'm assuming that's on purpose? It would be neat to have it work globally though) |
This expectation is right, I can do it still but maybe there's some edge case somewhere.
Yeah, I'd love if ultimately all blocks use "layout" instead of adding custom CSS for their children to align them as they should.
Good point, the reason is simple "layout" only works for themes with theme.json file because of unsolvable backward compatibility issues. But that concerns the "default/flow" layout mostly, maybe we could find a way to make these alternative layouts work for these (probably later though). |
1e44fe1
to
54149f2
Compare
I removed the layout switcher from the Group block and I opened this issue to track the follow-up tasks #33687 This PR should be ready to merge now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks Riad! Let's land and start the next iterations 💯
This is cool. It would pair really well with #33812 ;) |
I've noticed that the Gutenberg 11.2 update seems to have broke the ability to set all blocks as full width. I suspect this change might be the culprit for that loss in functionality? |
@paulwilde I'll take a look, what theme are you using? |
I can still see wide and full alignments personally, consider opening an issue with more details. |
It's a custom built theme. I tried using "Twenty Twenty-One" and I do see the options, but that theme doesn't appear to be using theme.json which seems to be where the issue is. If I entirely remove theme.json from my custom theme the options appear again. I'll go ahead and do your suggestion of creating a separate ticket. |
closes #24473
Related #27324
Note This is still in early stages and requires a lot of feedback and iterations.
In the previous WordPress release, we introduced the
layout
config and the__experimentalLayout
prop for inner blocks. The initial reason for these was to make alignments and content widths more declarative for themes. While this was an ambitious goal on its own and a hard one to achieve for the default layout, the goal has always been to absorb and support more kinds of layouts in the editor than the regular vertical list of blocks: think about containers with grid or flex display, absolute positioning...This PR introduces the first "non-default" layout, the flex layout. It's less ambitious than the grid layout but it will allow us to prove the multi-layout support.
In terms of UI: (this deserves a lot of design work, this is very rough on purpose for now, just to get it working)
In terms of DevX and APIs:
__experimentalLayout: { allowSwitching: true }
Notes
Right now, this layout is already used in several blocks in an adhoc way, the buttons, social icons and columns blocks are all blocks that should be using this layout instead of styling it in an adhoc way.
Testing instructions