Add vertical alignment to Media & Text block

[melchoyce]

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.

[paaljoachim]

Hey Mel

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

[melchoyce]

I don't think so.

[marekhrabe]

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 😀

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.

[kjellr]

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.

[melchoyce]

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

[marekhrabe]

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.

[phpbits]

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 💯

[paaljoachim]

Hello everyone.

@retrofox Damien is working on this PR:
Full Height Alignment Toolbar: Init - Add to Media&Text and Cover
#26615
It is associated with this issue.

[ajtruckle]

I would appreciate ability to align the text to the top. At the moment it is always central compared to the image. In my case the image is on the left and the text on the right. It would be nice to optionally choose the placement of all text to top, middle or bottom of the space.

[poof86]

Anybody who wants to create a media-text block style for an easy card effect use this sass:

.wp-block-media-text {

	// Block Card Style
	&.is-style-card {

		// Permanently stacked
		grid-template-columns: 100% !important;

		.wp-block-media-text__media {
			// Permanently stacked
			grid-column: 1;
			grid-row: 1;
		}

		.wp-block-media-text__content {
			// Permanently stacked
			grid-column: 1;
			grid-row: 2;
		}

	}
}

[carolinan]

Is this still needed, or is the stack group block variation enough?

[ajtruckle]

I am merely putting my suggestions format for the text /media block and options for text alignment. I don't use it now because of this. I use 2 column block and drop in the image on left or right and text on other side.

[paaljoachim]

I believe it would still be helpful to add in the vertical alignment to the Media & Text block as it gives additional options for people who do use the block. Having multiple ways to reach an end result is very helpful.

[spacedragn]

+1 for vertical stacking, both top and bottom orientations. Clients have a much easier time updating Media & Text blocks than drilling through nested grouped blocks.

[fabianwohlfart]

Is it now possible to stack vertically and horizontally? I think it would be a great and super easy feature!

[mot-K]

I would also like this feature!

[paaljoachim]

This is an old and an interesting issue!
@t-hamano @Mamaduka @jameskoster @retrofox
Any thoughts?

[jameskoster]

My (likely controversial) thought is that Media & Text is a bit outdated, and that the use case would probably be better served by a Pattern.

[Mamaduka]

I think we can close this. The exact layout can be achieved with the Group blocks and saved as a pattern.

The Media & Text predate many new tools for block layouts and reusability, which was the main reason for introducing it. I think @jasmussen might remember more background details about it.

[ajtruckle]

I do not use patterns anywhere on my website. My request was simple - ability to align all content on the right to top / middle / bottom independent of the image on the left.

…

________________________________ From: James Koster ***@***.***> Sent: 21 November 2024 16:17 To: WordPress/gutenberg ***@***.***> Cc: ajtruckle ***@***.***>; Comment ***@***.***> Subject: Re: [WordPress/gutenberg] Add vertical alignment to Media & Text block (#16698) My (likely controversial) thought is that Media & Text is a bit outdated, and that the use case would probably be better served by a Pattern. — Reply to this email directly, view it on GitHub<#16698 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB45RM2CNI3WGGD6UQKYWMT2BYBRJAVCNFSM6AAAAABSFOAHNSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOJRGY4DAMBYG4>. You are receiving this because you commented.Message ID: ***@***.***>

[mot-K]

Above all, I see the advantage for clients here because it is easier for them to handle than using blocks nested in groups. And I don't imagine this feature to be too complicated.

[paaljoachim]

Today one can switch between right or left. Adding the top or bottom will also benefit the Media & Text block making it a lot easier for users to create the layout they want. It makes the feature more discoverable.

Yes. One can create the layout through the Group block but it is not as easy as just using the toolbar icons in the Media & Text block.
This is a one click feature compared to creating a Group block.

Advantages:

• Feature becomes discoverable.
• Feature makes it very easy to switch position of text and media right - left or top - bottom.
• It also creates a consistency in repositioning of media and text in all different directions.

Disadvantage:

• Someone has to create a PR and work on getting it into Gutenberg.

[jasmussen]

I see vertical alignment to media & text:

Am I missing nuance?

[paaljoachim]

Hey Joen @jasmussen

In your screenshot the Hey (content) is on the right and image on the left.
It would be helpful to add the option to have content on the bottom or top and media on the top or bottom.
Notice the first image that Mel added. Image is on the top and content is on the bottom.

Currently we can have.
Left or right:
Content - Media
Media - Content

This issue is about:
Top or bottom:
Content - Media
Media - Content

It would be helpful to have Top or bottom: Content and Media.

[t-hamano]

I think we can close this. The exact layout can be achieved with the Group blocks and saved as a pattern.

I agree with this opinion.

This option may have made sense when the Stack variation of the Group block didn’t exist, but now the same layout can be recreated with the Stack variation.

Users can define such layouts as patterns, or lock the blocks to prevent accidental manipulation.

I think users who need this layout for the Media & Text block can achieve it via block styles.

[paaljoachim]

Users have different paths to accomplish something.
Having multiple paths to create a layout will very much help.
If one is comfortable in using Media & Content block then we should also give the user the chance to adjust the layout including the top and bottom feature. Think of this for the beginner to intermediate user. They see the Media & Text block and believes that is the block to use for this kind of content. They might not even use the Group block.

For more intermediate users they can add a variation of the Group block. This though can seem a bit more tricky to use compared to the Media & Text block.

I am here thinking of different kinds of users and the different paths one might use to accomplish a design.
Basic: Media & Text block in it's name gives the users a hint of how it is to be used.
Intermediate: The Group block requires a higher level of understanding. Of blocks within blocks and of different levels that can be adjusted. That one needs to be on the correct level to make an adjustment. Example. That adding wide width to an inner block might not have any impact if the top level Group block does not already have a wide alignment.

A user can add a Media & Text block with no Group block to relate to and add the design that is needed. Without needing to relate to different levels as is within a Group block.

So let's think back to basic here. No Group block. No patterns. No styles. Just adding the Media & Text block to give the user a simple way to add content and media in different design types.

[jameskoster]

Layout is pretty complex, and we can streamline concepts by offering fewer blocks for orchestrating it. As others have said, Media & Text is pretty much just a Row. It doesn’t make a huge amount of sense to maintain two blocks that are doing the same job, especially where one has less utility than the other.

A consequence is slippage between functionality. It's a bit confusing that Media & Text is not consistent with other containers like Group/Row/Stack in terms of style options and settings. For example; in TT5 group blocks support style variations, but Media & Text does not which is a big loss.

Previously I’ve seen it argued that blocks like Media & Text simplify the edit experience by flattening the block structure, and that is fair to say. But maybe new tools like Write mode do a better job of this, in a more holistic way.

I do acknowledge patterns are a bit less discoverable, but I would suggest that’s an issue in the design of the Inserter. Maybe patterns should be given greater prominence there.

[spacedragn]

I’m still for expanded Media & Text alignment, even as Group/Row/Stack/Grid continues to evolve. This feature request seems fairly low-lift given the UI already exists for left & right placement.

If M&T block needed to “prove” its place in the block ecosystem: you can easily attach a link. You can’t do this with Group blocks.

The link is only applied to the graphic right now. But adding a CSS pseudo element makes the entire M&T block clickable, as you’d expect of a standard Card component.

I’d like to see the option to wrap the entire block in the link someday. But given this issue was opened in 2019 and some are still debating this block’s existence, it feels pointless to ask for yet another feature to make this block shine.

[jasmussen]

The goal of Media & Text was and is to make a very simple block to show side by side an image or video, and some content. I understand there is a desire to add more features. Then the discussion becomes: does a design exist which adds those features, but keeps the design as simple as is the reason for the block existing in the first place? If yes, then a PR can land. If no elegant solution is found, across the other layout blocks, and contentOnly locked patterns, there are alternatives.

[paaljoachim]

Hi Joen.

Then the discussion becomes: does a design exist which adds those features, but keeps the design as simple as is the reason for the block existing in the first place?

Looking at the current design. One clicks an icon to show media on left and next to it an icon to show media on the right.

There are different paths to walk here as I see it. One can add a drop down similar to the alignment drop down.
Which could have layout icons: top - right - bottom - left

Or one can add additional icons beside the two layout icons there today. (I would start with top-right-bottom-left.)

[paaljoachim]

Another thought that comes to mind is that I wonder if adding top and bottom features directly into the Media & Text block instead of having to add a Group block, add a pattern or something else to create the same effect would make it easier accessible.
@joedolson @afercia