Block: fix alignments

[ellatrix]

Description

After #19593, this PR reintroduces a div wrapper element for blocks that support alignment. This wrapper div is necessary to contain the aligned block within the main block column. Maybe in the future, the block itself can add this wrapper div, but for now we have to provide it.

Note that the wrapper div has the is-block-content class. Regardless of how we rewrite alignments, an attribute like this will be necessary so a block can decide where the toolbar should be attached to.

How has this been tested?

Test alignments on blocks.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[youknowriad]

Why not add it in block.js ?

[ellatrix]

I could add it there as well.

[ellatrix]

Done :)

[jasmussen]

I don't believe how fast you fixed this. It appears to work just as it should, even for things like embeds. So just on the experience, 👍 👍! Impressive work.

I noticed you fixed it using a is-block-content class that presumably helps keep it in the "main column" — is this an interim fix?

[ellatrix]

I noticed you fixed it using a is-block-content class that presumably helps keep it in the "main column" — is this an interim fix?

I'm not sure. I think eventually we'll probably see something similar, because, while the block could provide this wrapper in the future, the toolbar will still have to be positioned at this wrapper instead of the parent element (which spreads the whole length). I could see this as something provided by us to the block though. Maybe with a future <Alignment> component that the block could use around the content, and we handle the rest.

[jasmussen]

I'm not sure. I think eventually we'll probably see something similar, because, while the block could provide this wrapper in the future, the toolbar will still have to be positioned at this wrapper instead of the parent element (which spreads the whole length).

Excellent point. Floats are the worst.

I could see this as something provided by us to the block though. Maybe with a future <Alignment> component that the block could use around the content, and we handle the rest.

I was specifically thinking of how the Image block currently receives an extra wrapping div when floated — with a meta goal of getting the editor closer to the frontend in markup, leveraging that could be a piece of the puzzle.

But did not mean to suggest the current solution isn't good — it seems totally fine. You've eliminated so many divs, it's fine to add one back :D

[ellatrix]

Yes, right now, the extra div is needed, but soon we'll be able to remove one more for image (the outer one). worth noting that this adds a div for blocks with alignment but not for the others. :)

[youknowriad]

I'm wondering if this is a good way to check whether a block has alignment. For me a more precise way is to check the wrapper props and see if there's a "data-align" because that's how floating is triggered.

[ellatrix]

Sounds good. I changed it to data-align.