Output width and height attributes for Image blocks

[kienstra]

Description

Could you use this PR for #6652, which ensures that most Image block <img> elements will have a width and height?

Before, Image blocks usually only had width or height attributes for the <img> if the user edited the <input> elements for those, or clicked a percentage pillbox:

This PR sets the width and height on selecting an image from the Media Library, and on selecting from the 'Image Size' <select> element. Clicking a percentage pillbox, like 25%, still updates the width and height:

The is-resized class
Before, there was an is-resized class that applied only when there were width or height attribute values. These values only existed on editing the Width and Height TextControls directly, or from clicking the percentage pillbox (shown in the first screenshot above).

But now, there are almost always width and height values, as they're added via the Media Library, and updated as shown in the second screenshot above.

So this adds the attribute isResized to apply the class is-resized in the same cases where it was applied before.

How has this been tested?

1. Created a new Image block, and verified that it had width and height attributes, but no is-resized class

2. Changed that image's 'Image Size' to Thumbnail as shown in the second screenshot above.
3. Verified that the width and height are changed to 150, and there is no is-resized class:

4. Clicked the 75% pillbox, as shown in the first two screenshots.
5. Verified that the width and height are correct, and the is-resized class is present:

Tested on Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Screenshots

Before:

After:

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.

[kienstra]

It looks like the Travis build failed, but that might not be caused by this PR's changes. Does someone have permissions to click 'Restart build'?

[Soean]

@kienstra I restarted the test. The test snapshots with image blocks have no height and width attributes like in your code, so they fail.

[kienstra]

Thanks, @Soean! I'll work on that now.

[kienstra]

Thank You
Travis Builds Passing

Hi @Soean,
Thanks for your help in restarting the Travis build, and pointing to the solution to the failed tests.

Would you be able to use this PR for #6652? Sorry for the delay in fixing the tests.

[kienstra]

Question About PR

Hi @joemcgill,
Hope you're doing great!

Could you use this PR for #6652, and if so, would you be available to review it?

Thanks!

[hacknug]

Any plans on merging this any time soon?

[kienstra]

If you would like to merge this, please ping me here and I'll resolve the merge conflicts.

[AdrienPerinot]

@kienstra I see this was closed. It seems to me that it's a rather important enhancement, as most if not all of the lazyload plugins rely on this to avoid jumps. There seem to be no clean workaround at the moment. Why was it closed :( ? Can it be planned for a future update ?

As a side note, inline images should also have these height/width attributes.

[kienstra]

Hi @AdrienPerinot,
Thanks for bringing this up.

I closed it because it wasn't reviewed. But if someone would like to review it, I'd be glad to update it and resolve the merge conflicts.

[AdrienPerinot]

I see - wish it was reviewed as it is a must have in my opinion.

[kienstra]

Thanks! Maybe contacting core Gutenberg contributor(s) would help.