Media & Text: Always show image first when "Stack on mobile" is toggled

[melchoyce]

Showing an image on the left or right is often an art decision made on desktop, but on mobile, I always want the image to be on top and content below. I've seen other people complain about this elsewhere as well. We should considering always showing the image on top when the block is stacked on mobile.

[kjellr]

I agree on this, but I'm unable to reproduce in my testing... do you know when exactly this occurs?

[kjellr]

(We can totally include a order: 1; css rule for the image to enforce this, but I'm just not 100% sure how to test if it's working, since the image seems to be on top for me here. 😄)

[melchoyce]

Other way around — happens when the content is on the left and image is on the right:

[kjellr]

Aaaaaah, I see. I 100% forgot about that option. 😄 I'm not totally sure I agree in that case then... in that case, the user has specifically chosen to show the image after the text (for LTR languages at least). I think it probably makes sense to preserve that once it's stacked vertically too.

[melchoyce]

I don't think folks are considering content order when toggling between left/right as much as they're thinking visually — I'm not, at least. When I choose to alternate the layouts, it's because I think the alternating layout looks better on the page.

[kjellr]

Yeah, I can see how that'd make sense in a layout that's alternating these. Maybe as an option?

[kinapersson]

This is almost a dealbreaker for me using media-text-blocks. I can't find a simple way to work around it. As @melchoyce says, alternate between left and right on desktop is mostly because it looks good, so in mobile you would want every block to stack with the image first.

[cecoates]

I had a case of this as well. I ended up giving the user some custom CSS:

/* Make sure media & text blocks always stack image, then text */
@media (max-width: 600px) {
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
grid-template-areas: "media-text-media" "media-text-content";
}
}

12527506-hc

[cecoates]

If the above CSS doesn't work for you, try this:

/* Make sure media & text blocks always stack image, then text */ @media screen and (max-width: 600px) { .has-media-on-the-right { display: flex; flex-direction: column; } }

(Apologies to the creator, I can't remember who authored that particular trick.

[eduardozulian]

+1 to this, either as a toggle as soon as you check Stack on Mobile or by default.

[koke]

Re-posting #17716 as a comment here.

I don't know if this is wrong in all cases, but a common page layout that comes to mind when using media-text is an alternating left and right when showcasing a series of features, blog posts,... One example I could find is https://apps.wordpress.com/mobile/, but I'm sure there are many others:

When a layout like that gets displayed in a smaller screen, what usually happens is that it turns into a vertical stack of image, then text:

However, if you try to reproduced the same layout in Gutenberg, media-text assumes that right-to-left implies bottom-to-top and orders things producing some funny looking results:

I think this is also somewhat related to #16698 where @melchoyce was proposing a top-down layout option for media-text also on larger screens, but I didn't want to hijack that conversation.

Also related to the efforts in #16790. I feel like defaulting to media on top when stacking is a better option that make it dependent on direction when not stacking, but I'm sure there will be use cases for the contrary, and I think we might need better ways to express how to stack things responsively.

cc @iamthomasbishop

[iamthomasbishop]

This is an interesting issue, especially considering the alternating display scenario that @koke mentioned. I hope y'all don't mind me dropping my two "mobile-first" cents into the mix :)

The way I see it, it's impossible for us to foresee every potential use case (as surely are many more), so maybe there should be a toggle (or "ordering" mechanism) of sorts to "override" the default stacking behavior. So by default the columns would simply stack left on top of right, but you should be able to "swap" or "order" the columns individually on mobile.

Obviously this gets much more complex when considering 3+, but is fairly straight-forward for any two-column block like Media & Text. Anyhow, my two cents – take with a grain of salt 😄

[iamtakashi]

I don't think folks are considering content order when toggling between left/right as much as they're thinking visually

I agree 100%. However, as @iamthomasbishop said, it's difficult to assume that they always want the media at the top for small screens either. I can see some users wanting the text at the top, especially, the block is used as a CTA at the top of the page.

I'm also not sure how intuitive the current setting "Stack on Mobile" is, and I wonder if we can use Button Group for this setting to both providing the default position of the media and letting them override it. What do you think?

[MichaelArestad]

I noticed an issue on the forums that highlighted this today. It got me thinking. I think this is a scenario where, if the user has "stack on mobile" set, it should default to image on top. This doesn't cover every scenario as stated above, but that is how the images are in the DOM (before the text) and is likely the most common scenario.

This can be done in one of two ways:

1. Change the parent from display: grid to display: block at a specific device width.
2. Change the ordering of the content via grid row/column placement.

The former is quite simple. The latter would make it (slightly) easier for someone to change the order of the image and media if they desire.

For now, it feels broken and I would recommend either solution. What do you think?

[iamthomasbishop]

@iamtakashi I like this approach in general, it's very simple. However, I would only use a segmented button/control on the desktop/mobile toggle. UsIng that component for both selectors feels a little odd. Perhaps we could use another component, like a radio selection or list? This is (very roughly) how I would attack it on mobile:

Looking at it again, this is basically an extension of the tools in the block toolbar – so maybe it'd make sense to provide these additional controls (top/bottom in addition to the existing left/right options) in the toolbar?

[MichaelArestad]

@iamthomasbishop That's interesting. One thing is starting to become clear to me is that we don't have a consistent pattern for mobile settings. They are often mixed in or in some one-off UI based on the block creator's needs. I heard some rumors that we might have a candidate for element queries coming in the future. I wonder if it's worth doing some design explorations (in another issue) about a consistent pattern that perhaps could make user of mobile/tablet/desktop previews in conjunction with block settings.

[iamthomasbishop]

@MichaelArestad Most definitely, we'd benefit from a more comprehensive, systemized approach to settings and I think some of that exploration has been on-going, although I'm not sure of the progress there. I think the entire editing experience is very desktop-centric, but I've been a fan of approaches that favor a device/context-aware UI for the whole editor, where the canvas, toolbars, and controls switch based on what "device mode" you're in – it seems to align well to a common mental model. So I think this would be best as a top-level editor thing, which might require a large change in Gutenberg 😄

With all that said, It sounds like that's the same direction you're referring to, in which case, party on! 👍

[autotel]

In case anyone needs yet another workaround, my approach was creating a class swap
then the scss is:

/* 
swap, reverses columnized items so that it is possible to have columns that 
alternate between picture and text, whilst keeping a consistent order on mobile
*/

.wp-block-columns.swap{
    flex-direction: row-reverse !important;
    .wp-block-column{
        &:not(:last-child){
            margin-left:32px;
        }
        &:last-child{
            margin-left:0px;
        }
    }
}

Then you create all the elements with the same order; e.g. keeping all the pictures at the right, but you add a "swap" class every other row.

--Edit---
That workaround might create an undesired margin at the left of that second element. I found a flex css property that let's the object wrap 'the other way around'. It looks like it was created just for this.

The scss now goes like:

.wp-block-columns.swap{
    flex-wrap: wrap-reverse;
}

you just make the columns how you want them to look in the full size version, but add a swap class every second one. When the client is stretched, the positions should swap.
(I used it at https://cafesagrado.com, within the two-columns element, the second is "swap")

[tijosh]

Just want to +1 this since it's been an open issue for a while. I see it come up in my work with folks every once in a while and a CSS workaround is needed.

[kahlos]

If the above CSS doesn't work for you, try this:

/* Make sure media & text blocks always stack image, then text */ @media screen and (max-width: 600px) { .has-media-on-the-right { display: flex; flex-direction: column; } }

(Apologies to the creator, I can't remember who authored that particular trick.

Adding this in Themes -> Customise -> Additional CSS worked for me!

[dgracey]

I've been using this code for a while and it works beautifully. This will allow you to choose how the objects stack by adding a custom class to the row and columns. You could probably write something global for this, but it works great for me. Add .custom_row to the row that you want to re-order, and the class to the columns you want to re-order. Hope this helps!

@media only screen and (max-width: 980px) {

/*** CHANGE STACKING ORDER ON MOBILE ***/
.custom_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
    -webkit-order: 1;
    order: 1;
}

.second-on-mobile {
    -webkit-order: 2;
    order: 2;
}

.third-on-mobile {
    -webkit-order: 3;
    order: 3;
}

.fourth-on-mobile {
    -webkit-order: 4;
    order: 4;
}

/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
    margin-bottom: 30px;
}
/*** END--CHANGE STACKING ORDER ON MOBILE ***/
}

[eyesofjeremy]

+1 for defaulting to image first on mobile for Media & Text. I poked around a bit, and it seems like PR #10812 explicitly set the content to be above the image when the image is on the right in desktop.

When I look at the code in packages/block-library/src/media-text/style.scss it seems like removing these mobile styles for .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right would fix this issue.

@media (max-width: #{ ($break-small) }) {
    .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
        .wp-block-media-text__media {
          grid-column: 1;
          grid-row: 1;
        }
        .wp-block-media-text__content {
          grid-column: 1;
          grid-row: 2;
        }
    }

-   .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
-       .wp-block-media-text__media {
-         grid-column: 1;
-         grid-row: 2;
-       }
-       .wp-block-media-text__content {
-         grid-column: 1;
-         grid-row: 1;
-       }
-   }
}

PR 10812 referred to improving the Media & Text block for IE; I don't have access to IE in front of me, but is there an IE-specific reason, or a broader reason, not to do this?

There's clearly a broader discussion going on here, about custom stacking, but it seems like image first is just a very intelligent default.

cc @jorgefilipecosta

[formosattic]

+1 3020940-zen

The CSS in the earlier comment worked, pasting here with better formatting:

/* Make sure media & text blocks always stack image, then text */ 
@media screen and (max-width: 600px) { 
  .has-media-on-the-right { 
    display: flex; 
    flex-direction: column; 
  } 
}

[joweber123]

+1 3085263-zen

[ash1eygrace]

+1 I just experienced this while writing a post and an option to select the stacking order on mobile is a necessity when taking responsive design into consideration. I hope this gets revisited.

[jorgefilipecosta]

It seems like there is a consensus that on mobile the images should be on top. I will propose a PR with that change. Thank you all for sharing insights to this discussion 👍

[RobRukavina]

If the above CSS doesn't work for you, try this:
/* Make sure media & text blocks always stack image, then text */ @media screen and (max-width: 600px) { .has-media-on-the-right { display: flex; flex-direction: column; } }
(Apologies to the creator, I can't remember who authored that particular trick.

Adding this in Themes -> Customise -> Additional CSS worked for me!

This worked for me as well! Thanks OP

[aiolachiara]

Hello,

the wordpress documentation about the media&text block https://wordpress.com/support/wordpress-editor/blocks/media-text-block/ says:

Stack on mobile
You will be given the option to stack the media and text on top of each other for mobile phones. This is useful for people viewing your website on smaller screens.
If the media and text in your block were to stay side-by-side on mobile, they may be too small to view on mobile devices. By enabling stack on mobile, the content on the left will show on top of the content on the right. This provides a better experience for mobile visitors.

I have a block with media on the right, so I expected to see the text on the left on the top on the content on the right.

I made a small fix on my theme adding this css rule:

@media screen and (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
        grid-row: 2;
    }
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
        grid-row: 1;
    }
}

that simply reorder the items based on the class .has-media-on-the-right.

Hope it helps

[mmsaaa1]

@aiolachiara I have been trying this code since yesterday. Finally it works on the Gutenberg block when I choose all the rows to show the media on the left.

Means for all the rows we have to select Show media on the left but when i pasted has-media-on-the-right in an additional CSS column it will come itself on right in editor window as well as on desktops. On Mobile screen it appears on top that's what we need.