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

Toggle responsiveness for embed blocks #10161

Merged
merged 8 commits into from Sep 26, 2018

Conversation

Projects
None yet
6 participants
@notnownikki
Member

notnownikki commented Sep 25, 2018

Description

Added an inspector control to toggle responsive classes on a per block basis.

How has this been tested?

Start a post, embed a youtube video.
Publish the post.
Edit the post, toggle responsiveness to off. Check the responsive classes are removed.
Publish the post. Edit it, and check the classes are still removed.
Toggle the responsiveness back on, publish the post.

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 25, 2018

Contributor

This is SOLID!

GIF:

embed toggle

It's a little hard to see what the difference is based on that GIF, but it works. Here's the front-end without the Responsive toggle:

screen shot 2018-09-25 at 15 32 50

In this case, the TwentySeventeen technically makes the video responsive, it's just not as good as the true aspect ratio sensitive responsiveness we made. And it's also going to be on a per-theme basis, obviously.

SO THIS IS WONDERFUL, I think it's a great solution.


Two things. There appears to be an extra bottom margin on the stock iframe that's beeing output:

screen shot 2018-09-25 at 15 33 40

This pushes the caption down. @kjellr as a theme expert, do you have any insights here on whether this is something Twenty Seventeen adds, or something else? Should we zero it out?

And secondly, we should rephrase the toggle a bit. Right now it says:

Responsive     [on]
Videos are responsive
Responsive     [off]
Toggle to make videos responsive.

This is good, but can be better, especially given the context above where the theme might be providing some tricks. I'm also not sure the casual user knows what "responsive" means. Perhaps we could do:

Scale video to fit     [on]
Videos scale to fit available space
Scale video to fit     [off]
Videos are not scaled to fit available space

Something in that vein?

@michelleweber any insights?

Contributor

jasmussen commented Sep 25, 2018

This is SOLID!

GIF:

embed toggle

It's a little hard to see what the difference is based on that GIF, but it works. Here's the front-end without the Responsive toggle:

screen shot 2018-09-25 at 15 32 50

In this case, the TwentySeventeen technically makes the video responsive, it's just not as good as the true aspect ratio sensitive responsiveness we made. And it's also going to be on a per-theme basis, obviously.

SO THIS IS WONDERFUL, I think it's a great solution.


Two things. There appears to be an extra bottom margin on the stock iframe that's beeing output:

screen shot 2018-09-25 at 15 33 40

This pushes the caption down. @kjellr as a theme expert, do you have any insights here on whether this is something Twenty Seventeen adds, or something else? Should we zero it out?

And secondly, we should rephrase the toggle a bit. Right now it says:

Responsive     [on]
Videos are responsive
Responsive     [off]
Toggle to make videos responsive.

This is good, but can be better, especially given the context above where the theme might be providing some tricks. I'm also not sure the casual user knows what "responsive" means. Perhaps we could do:

Scale video to fit     [on]
Videos scale to fit available space
Scale video to fit     [off]
Videos are not scaled to fit available space

Something in that vein?

@michelleweber any insights?

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 25, 2018

Member

I'm also not sure the casual user knows what "responsive" means.

Ugh yes, I forgot to do my jargon check. My jargon alarm went off when I wrote the help text, but I didn't follow it up :(

All suggestions welcome!

Member

notnownikki commented Sep 25, 2018

I'm also not sure the casual user knows what "responsive" means.

Ugh yes, I forgot to do my jargon check. My jargon alarm went off when I wrote the help text, but I didn't follow it up :(

All suggestions welcome!

@michelleweber

This comment has been minimized.

Show comment
Hide comment
@michelleweber

michelleweber Sep 25, 2018

Yeah, I'd definitely nix responsive. I think "Videos scale" or something even more descriptive like "Videos automatically resize," if that's not too long, is the way to go.

michelleweber commented Sep 25, 2018

Yeah, I'd definitely nix responsive. I think "Videos scale" or something even more descriptive like "Videos automatically resize," if that's not too long, is the way to go.

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 26, 2018

Member

I've updated them to "Videos automatically resize" and "Videos are fixed size". Sound good?

Member

notnownikki commented Sep 26, 2018

I've updated them to "Videos automatically resize" and "Videos are fixed size". Sound good?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 26, 2018

Contributor

Yep, sound good, and we can always revisit if when this goes out it still isn't clear.

Contributor

jasmussen commented Sep 26, 2018

Yep, sound good, and we can always revisit if when this goes out it still isn't clear.

@notnownikki notnownikki added this to the 4.0 milestone Sep 26, 2018

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 26, 2018

Member

Great! Would you be ok approving this? I've added it to the 4.0 milestone, it would be nice to get it out there :)

Member

notnownikki commented Sep 26, 2018

Great! Would you be ok approving this? I've added it to the 4.0 milestone, it would be nice to get it out there :)

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Sep 26, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 26, 2018

Contributor

I agree about the milestone, and because it's there it means it will get code reviews when the time comes. But I expanded the range just to expediate it. Reason being: while I completely trust your code, and the design/experience is 👍 👍 — I don't trust my own skills enough for the code review aspect.

Contributor

jasmussen commented Sep 26, 2018

I agree about the milestone, and because it's there it means it will get code reviews when the time comes. But I expanded the range just to expediate it. Reason being: while I completely trust your code, and the design/experience is 👍 👍 — I don't trust my own skills enough for the code review aspect.

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 26, 2018

Member

Sure, makes sense! Thankfully there wasn't too much code to write because of the set of components that Gutenberg provides to make this type of thing easy :)

Member

notnownikki commented Sep 26, 2018

Sure, makes sense! Thankfully there wasn't too much code to write because of the set of components that Gutenberg provides to make this type of thing easy :)

@tofumatt

This seems good to me, I'm just confused about why we prefix a method with a "maybe" but don't say when the "maybe"'s condition is met.

I also think we should get the attribute to align with the help text. But can embeds be something other than video? Should we be saying Allow content to resize rather than Allow video to resize?

Once those things are clarified though this is good to go. Ping me for another review and we can definitely get this in for 4.0 😄

Show outdated Hide outdated packages/block-library/src/embed/index.js Outdated
Show outdated Hide outdated packages/block-library/src/embed/index.js Outdated
Show resolved Hide resolved packages/block-library/src/embed/index.js
Show resolved Hide resolved packages/block-library/src/embed/index.js

notnownikki added some commits Sep 26, 2018

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 26, 2018

Member

@tofumatt I think I've removed all the uncertainty from those method names now :)

Member

notnownikki commented Sep 26, 2018

@tofumatt I think I've removed all the uncertainty from those method names now :)

@tofumatt tofumatt self-requested a review Sep 26, 2018

@tofumatt

Code looks good to me now, I just have one request for a change of argument name at getAspectRatioClassNames, but I didn't want to make it myself to make sure you're cool with it.

There's also a "Responsive" label still–do we want to change that?

Show outdated Hide outdated packages/block-library/src/embed/index.js Outdated
Show outdated Hide outdated packages/block-library/src/embed/index.js Outdated
Show outdated Hide outdated packages/block-library/src/embed/index.js Outdated
@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 26, 2018

Member

@tofumatt better label, better parameter name :) thank you for being so thorough!

Member

notnownikki commented Sep 26, 2018

@tofumatt better label, better parameter name :) thank you for being so thorough!

@notnownikki notnownikki merged commit 46d0f57 into master Sep 26, 2018

2 checks passed

codecov/project 48.81% (-0.02%) compared to af3153a
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the update/embed-block-optional-responsiveness branch Sep 26, 2018

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