Add flex layout support to the block editor #33359
Merged
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
youknowriad
added
Needs Design
youknowriad
requested review from
ajitbohra,
ellatrix,
spacedmonkey and
TimothyBJacobs
as code owners
|
Size Change: +469 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
This is cool. Here's what I'm seeing:
We'll definitely need a new name for this... "flex" isn't going to mean much to users. I wonder if to start we just frame this as a default vertical layout versus a horizontal one? |
|
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). |
mtias
reviewed
Jul 13, 2021
|
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) |
7 tasks
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). |
youknowriad
force-pushed
the
add/flex-layout
branch
from
1e44fe1
to
54149f2
Compare
youknowriad
commented
Jul 14, 2021
7 tasks
|
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. |
ntsekouras
approved these changes
Jul 26, 2021
youknowriad
added
[Type] Experimental
|
This is cool. It would pair really well with #33812 ;) |
7 tasks
|
+1 on having some kind of control over the gap to avoid situations like this:
|
|
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. |
3 tasks
7 tasks
1 task
This was referenced Sep 5, 2021
2 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.
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
layoutconfig and the__experimentalLayoutprop 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