Add: Stack on mobile option on Media & Text block. #10969
Conversation
jorgefilipecosta
force-pushed
the
add/stack-on-mobile-option-media-text-block
branch
from
e46c308
to
4ad725c
Compare
|
|
||
| .wp-block-media-text > figure > img, | ||
| .wp-block-media-text > figure > video { | ||
| max-width: unset; | ||
| width: 100%; | ||
| margin-bottom: -6px; | ||
| } | ||
|
|
||
| @media (max-width: #{ ($break-small) }) { |
There was a problem hiding this comment.
In general, we do the opposite. Build for mobile first and use break-small or break-medium to add the desktop styles. Isn't this possible here?
There was a problem hiding this comment.
No, in this case, we can't follow that approach because custom widths are set using an inline style, and on mobile, we need to overwrite this inline style so we need to use "!important". After having an important set on mobile styles it would be impossible than on the desktop sizes to make it use the inline styles again.
I should have added a comment with this explanation I will add them now.
There was a problem hiding this comment.
This is a good answer, but it's also a good question. Can you add an inline comment to explain basically the same?
There was a problem hiding this comment.
Hi @jasmussen I already added a CSS comment there specifying the reason for this, let me know if you find it hard to understand or you would prefer some improvement.
There was a problem hiding this comment.
Argh sorry, I missed that. No worries then, you're many steps ahead of me as usual.
jorgefilipecosta
force-pushed
the
add/stack-on-mobile-option-media-text-block
branch
from
4ad725c
to
d927e28
Compare
|
Lovely. Based on the GIF, this is shippable behavior. 👍 👍 |
jorgefilipecosta
deleted the
add/stack-on-mobile-option-media-text-block
branch
|
Did we decide to take this back out? I noticed stacking on text blocks stopped working. |
|
Hi there,
Site: https://aesthetic-kiwi.jurassic.ninja/media-text-test/ Forget what I said. Missed to enable the "Stack on mobile" option 🤦♂️ 😬 . Now it is looking great! |
|
How do I change the order of the columns after stacking on mobile? |
I tried using the flex-direction on blocks that have the image aligned on the right but it doesn't work. Is it possible to reverse the columns when stacking for images that are floated to the right? |
|
This is great, but I had to google to get to this git page, so I think it would be better if Stack On Mobile was the default setting when a new Media & Text block is created. |
This! Please make it default. |
|
Could you please create new issues for requests for new functionality such as the suggestion to make the stack on mobile behavior the default? Also, it's helpful to include a note about why this is important to you or how you use this feature in your work. Thank you! |
Description
Closes: #10798
This PR adds a "Stack on mobile" option on media & text block.
If this option is enabled, on mobile instead of the Media & content area appearing side by side they appear stacked up.
How has this been tested?
I checked media & text block continues to work as before.
I checked that of "Stack on mobile" options is true contents appear stacked up on mobile but on large screens continue to appear side by side.
Screenshots