Skip to content
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

Media & Text Block: Add image fill option #14445

Merged

Conversation

@frontdevde
Copy link
Contributor

commented Mar 14, 2019

Description

This PR aims to add an image fill option as an enhancement to the Media & Text block.

In the Media & Text block it would be nice to have the option to make the image fill the full height of its column. In addition to providing a new creative option, this would allow for a more consistent look of the block across different viewports.

The corresponding issue is #14226

Screenshots

image-fill

Todo

  • Copy review Let image fill the entire column

How has this been tested?

  • Manually verify ability to set image fill option
  • Manually verify ability to select focal point
  • Manually test how image fill behaves in Responsive (ie: non-desktop) context
  • Manually verify can preview image fill via block editor in editor mode
  • Manually verify save output on website aligns correctly in various permutations of image fill
  • Manually verify blocks created with older version of the block still work

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@@ -0,0 +1,193 @@
/**

This comment has been minimized.

Copy link
@frontdevde

frontdevde Mar 14, 2019

Author Contributor

Moved the deprecated part to its own file to declutter index.js.

@michelleweber

This comment has been minimized.

Copy link

commented Mar 14, 2019

Looks fine!

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Mar 19, 2019

This seems pretty solid in my testing, and I think it's a welcome addition to the block. I do wonder if we should rephrase the label though.

Let image fill the entire column

This can be a little confusing because if there isn't much text in the "Text" column (or if the image is very tall), the image will already be filling the entire column. I wonder if mentioning "cropping" in some way would be more clear:

  • Automatically crop image and fill available space
  • Crop image to fill entire column

@frontdevde frontdevde force-pushed the frontdevde:update/media-text-block-image-fill branch from ce109ac to f24e634 Mar 21, 2019

@frontdevde

This comment has been minimized.

Copy link
Contributor Author

commented Mar 21, 2019

Thanks for the feedback, @kjellr. As per your suggestion, I updated the copy to "Crop image to fill entire column".

Screen Shot 2019-03-20 at 23 46 13

@frontdevde frontdevde referenced this pull request Mar 21, 2019

Merged

Media & Text Block: Add vertical alignment options #13989

8 of 11 tasks complete
@getdave
Copy link
Contributor

left a comment

Great work here. Tested and it seems to work really well.

One a11y point which I think we should consider...

@jorgefilipecosta
Copy link
Member

left a comment

Thank you for working on @frontdevde, it is looking good 👍

@frontdevde frontdevde force-pushed the frontdevde:update/media-text-block-image-fill branch from 13ddb6d to 153fe18 Mar 28, 2019

@frontdevde frontdevde force-pushed the frontdevde:update/media-text-block-image-fill branch from 6286e4a to 4aea210 Apr 3, 2019

@frontdevde

This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2019

Please note that with the merge of #13989 into master, I had to resolve a couple of conflicts and force push the rebased branch. In addition, I also updated the changelog to reflect the changes in this PR.

@frontdevde

This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2019

@mapk Thank you for your input!

In light of those three points, it seems reasonable to move forward without object-fit for now.

Personally, I agree.

Can we stay consistent here for now and present the object-fit in another PR that can address this situation in the other blocks as well?

@jorgefilipecosta @m-e-h Does this work for you?

@getdave

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2019

Using the background-image isn't ideal, but consistent with current code in the Cover block

A key point.

it seems reasonable to move forward without object-fit for now.

I'd agree with this too. I concur with many folk here that object-fit is the preferable solution but it would Block this PR and would require cover to be updated as well. Why not ship this nice enhancement to our users and then look to add the object-fit upgrade in a separate PR. This fits nicely with Matt's approach to such dilemas 😄

One question: I'm not clear why the background-image version wouldn't work in IE11.

Also, an Issue should be raised regarding object fit for both media-text and cover so that this isn't lost.

@m-e-h

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2019

One question: I'm not clear why the background-image version wouldn't work in IE11.

initial used as the default position value isn't supported in IE.
https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility

Probably best to not insert background-position inline at all if it's not specified.

I'm sure IE would just ignore initial and use the initial value anyway. Just saying, with you guys being all IE this and IE that. 😄

@frontdevde

This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2019

I've changed the default value for the background position from initial to 50% 50% now, which is supported by all browsers in our compatibility matrix and the intended result we want to see.

@jorgefilipecosta
Copy link
Member

left a comment

Things looked good on my tests, thank you for iterating on this 👍

@frontdevde frontdevde merged commit b3961d0 into WordPress:master Apr 3, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@frontdevde frontdevde deleted the frontdevde:update/media-text-block-image-fill branch Apr 3, 2019

@youknowriad youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.