New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add: Stack on mobile option on Media & Text block. #10969

Merged
merged 1 commit into from Nov 2, 2018

Conversation

Projects
None yet
5 participants
@jorgefilipecosta
Member

jorgefilipecosta commented Oct 23, 2018

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

oct-23-2018 20-08-55

@jorgefilipecosta jorgefilipecosta force-pushed the add/stack-on-mobile-option-media-text-block branch from e46c308 to 4ad725c Oct 23, 2018

@jorgefilipecosta jorgefilipecosta requested a review from WordPress/gutenberg-core Oct 29, 2018

.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) }) {

This comment has been minimized.

@youknowriad

youknowriad Oct 29, 2018

Contributor

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?

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta Oct 29, 2018

Member

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.

This comment has been minimized.

@jasmussen

jasmussen Nov 2, 2018

Contributor

This is a good answer, but it's also a good question. Can you add an inline comment to explain basically the same?

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta Nov 2, 2018

Member

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.

This comment has been minimized.

@jasmussen

jasmussen Nov 2, 2018

Contributor

Argh sorry, I missed that. No worries then, you're many steps ahead of me as usual.

@jorgefilipecosta jorgefilipecosta force-pushed the add/stack-on-mobile-option-media-text-block branch from 4ad725c to d927e28 Oct 29, 2018

@jorgefilipecosta jorgefilipecosta requested a review from WordPress/gutenberg-core Nov 1, 2018

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 2, 2018

Lovely. Based on the GIF, this is shippable behavior. 👍 👍

@youknowriad

LGTM 👍

@youknowriad youknowriad added this to the 4.3 milestone Nov 2, 2018

@jorgefilipecosta jorgefilipecosta merged commit cbbf22e into master Nov 2, 2018

2 checks passed

codecov/project 48.67% (-0.01%) compared to 8db2764
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the add/stack-on-mobile-option-media-text-block branch Nov 2, 2018

antpb added a commit to antpb/gutenberg that referenced this pull request Nov 5, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment