Image Blocks: Adding an image thumbnail selector

[youknowriad]

closes #1727

This adds an inspector selector to pick the desired thumbnail size.

[codecov]

Codecov Report

Merging #2435 into master will decrease coverage by 0.1%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #2435      +/-   ##
==========================================
- Coverage   26.98%   26.87%   -0.11%     
==========================================
  Files         159      160       +1     
  Lines        4903     4923      +20     
  Branches      817      820       +3     
==========================================
  Hits         1323     1323              
- Misses       3035     3052      +17     
- Partials      545      548       +3

Impacted Files	Coverage Δ
blocks/library/gallery/index.js	33.33% <ø> (ø)	⬆️
blocks/library/image/index.js	60% <ø> (+45%)	⬆️
blocks/library/image/block.js	0% <0%> (ø)
blocks/inspector-controls/select-control/index.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ccf991a...605bf9d. Read the comment docs.

[jasmussen]

Thank you for working on this! This implementation seems right on, though it does sort of present some questions around the idea itself, for which we might need some input by @karmatosed and/or @joemcgill. For example, what size image is inserted by default? Also should you be able to set a thumbnail to be full-wide?

Noticed some issues with selecting the size in the dropdown, btw:

[youknowriad]

Good catch @jasmussen The selected size issue should be fixed now.

[aduth]

This isn't so much a reason as it is stating a fact. The rule exists because onChange and onBlur have accessibility impacts when used in select elements. See also #2227

[aduth]

For example, what size image is inserted by default? Also should you be able to set a thumbnail to be full-wide?

IIRC the current editor remembers this as a preference when making a selection.

[youknowriad]

Still waiting for input for the next steps here: whether we should go this route or not? and if we should do anything about the block alignments when selecting a thumbnail size?

[jasmussen]

Let's do this:

• When you insert an image from the media library, default to "full size"
• In the sidebar, you can choose to use medium or thumbnail instead.

That will let us move forward, and revisit any issues that come up as a result of this. A future enhancement to potentially explore (perhaps with some srcset stuff in mind #869) would be to have some automated smarts in which size was picked. For example for wide and fullwide, pick full size. For resized images, perhaps pick a thumbnail.

[karmatosed]

I do wonder if we should have full at the top though. For example this is how my drop down looks:

Maybe just have it alphabetically sorted for ease?

[youknowriad]

@karmatosed What logical order are you proposing? biggest size to smallest?

Edit: Sorry, just saw the alphabetical order note :)

[karmatosed]

Hmm maybe that works in reverse because we are setting to fullest? Lets go with biggest to smallest.

[youknowriad]

@karmatosed Just pushed the alphabetical order :)

When you insert an image from the media library, default to "full size"

@jasmussen It's already the case for me. we're taking the default url which corresponds to the full size in my testing.

[jasmussen]

@jasmussen It's already the case for me. we're taking the default url which corresponds to the full size in my testing.

That's cool! Unable to test the branch this time, but if you fixed the issue where the choice wasn't sticky (dropdown reverted) then 👍 👍 from me!