Gutenberg: Add vertical alignment to Media & Text block

Created on 21 Jul 2019  Â·  8Comments  Â·  Source: WordPress/gutenberg

image

I've been wanting a "Card" block for a while, which would allow for easy grouping of media, headings, and text, with an optional background color... and while I think that would still be valuable, if only for the styles we could provide (borders, drop shadows, etc.) adding a vertical option to the Media & Text block would go a long way.

[Block] Media & Text [Type] Enhancement

Most helpful comment

I think Card sounds like a nice block to have. Especially excited about themes being able to style it as it is such a common design pattern these days.

Considering it has such close similarities to Media & Text, we can probably make very seamless block transforms between those M&T and Card.

All 8 comments

Hey Mel

Is this something similar to?
"Full Screen alignment/display option on several blocks"
https://github.com/WordPress/gutenberg/issues/16385 / https://github.com/WordPress/gutenberg/pull/16738

I don't _think_ so.

Is this something similar to?
"Full Screen alignment/display option on several blocks"

I also don't think it is related.

I like this suggested feature. I see a bit problematic that we already have a "vertical alignment" in Media & Text - it just means something completely different that what you mean 😀

Screenshot 2019-07-31 at 16 54 53

We would need to come up with a different name here. We also have the hidden "Stack on mobile" feature which already does this a bit, just under very specific circumstances.

I do think this would be beneficial, and could also be offered as a block pattern to offer in the placeholder state. As @marekhrabe points out, vertical alignment and the stack on mobile controls would probably need to be conditionally available only when the left/right variations are available.

Part of me does wonder if these new options should actually be a different option though — a more straightforward "Card" block.

If we do want to go in that direction, I can make a new issue with my existing Card block mockups.

I think Card sounds like a nice block to have. Especially excited about themes being able to style it as it is such a common design pattern these days.

Considering it has such close similarities to Media & Text, we can probably make very seamless block transforms between those M&T and Card.

I've recently added this feature on EditorsKit Plugin : https://wordpress.org/plugins/block-options/ . Here's my implementation so far. I've added new Toolbar besides the existing layout option. Works really well on core Gutenberg version and Gutenberg plugin 💯

Screen Capture on 2019-09-19 at 15-33-24

Hello everyone.

@retrofox Damien is working on this PR:
Full Height Alignment Toolbar: Init - Add to Media&Text and Cover
https://github.com/WordPress/gutenberg/pull/26615
It is associated with this issue.

Was this page helpful?
0 / 5 - 0 ratings