Migrate buttons & navigation to flex layout

[oandregal]

I've noticed that the buttons block and the navigation block both use the same "justification" options in the toolbar that are serialized to the post using the justification-content property.

Via the layout support we've developed a flex layout that already takes care of this for blocks.

This is to track that we need to migrate those blocks to the new layout support.

• buttons
• navigation

[oandregal]

There's also some interest to get this in other blocks, such as #32680

[oandregal]

JFYI @aaronrobertshaw @ramonjd @ntsekouras @youknowriad

[youknowriad]

Hi @oandregal It makes sense to have this automatically applied but I don't think it's a separate or new block support. In a recent refactor to the social icons block @ntsekouras did, this control has been added to the "Flex Layout", in other words, any block that declares itself as a "flex layout container" will get this automatically. Do you think this address these use-cases?

[ntsekouras]

👋 - fun fact I was planning to start today the QueryPagination to use flex layout and will have the justification controls from the layout. Also thanks for pointing the issue!

For me the justification controls should be handled by layout and I have in plans to explore that for such blocks like Buttons. In my mind we should deprecate the orientation prop in these blocks.

[oandregal]

Ah, lovely. So, does that mean that buttons and navigation should be migrated to use the block supports instead ( __experimentalLayout.default.type.flex)? I see they manage this themselves in the edit function.

[ntsekouras]

So, does that mean that buttons and navigation should be migrated to use the block supports instead

No, I don't think so.. I think we should make them work with layout

I see they manage this themselves in the edit function.

What do you mean? They now use orientation for this, no?

[oandregal]

This is what I see:

• The buttons block declare its own attributes (contentJustification + orientation), serialize the classes itself, and add the UI control.
• Same for the navigation block, which declares its own attributes (orientation and itemsJustification ), serialize the classes, and add the UI controls.

Those are the typical things a block supports does automatically. As far as I understand, that's how social links do it: by using the existing __experimentalLayout.default.type.flex block support. Is that correct? It seems intuitive to me that buttons and navigation would do the same.

Another question I have is: how this can be exposed in the theme.json for theme authors and what options do theme authors need? This is in the context of this other #34784 (comment) in which @getdave wanted to control justification options from the theme.json.

[youknowriad]

Yes ideally, all of Buttons, Navigation and Columns maybe as well should be refactored to use the "flex" layout and they'll inherit the controls automatically.

Another question I have is: how this can be exposed in the theme.json for theme authors and what options do theme authors need? This is in the context of this other #34784 (comment) in which @getdave wanted to control justification options from the theme.json.

I think allowing layout changes in theme.json is probably something we need to work on at some point but it's not straightforward, it's a bit more complex that the current simple styles we have. (Also, how to reflect these default values automatically in the UI without the block having the said attribute)

[oandregal]

OK. Updated title and description to better reflect the conversation.