Cover Block: Add Image Resolution options (#62926)

* Add attribute for resolution of image in cover block

* Add resolutionTool into cover block for background images

* Relocate the resolution control in inspector control

* Add image size class to image on save

* Retain previous value of sizeSlug attribute on image change

* Update url based on selected image size

* Update setting panel using ToolsPanel component

* Remove clear media button from setting panel

* Remove Resolution Tool component from dimension panel

* Update role of setting panel in unit test

* Remove unneccessory code

* Remove typecasting for boolean variable and update default value

* Set default value to full size for media size slug attribute

* clear whitespace and typos

* Set default value for image resolution

* Fix empty image sizes condition

Unlinked contributors: Bladed3d.

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: codebymikey <codebymikey@git.wordpress.org>

Author: 7 people

docs/reference-guides/core-blocks.md

@@ -246,7 +246,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
 -	**Name:** core/cover
 -	**Category:** media
 -	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage
 
 ## Details
 

packages/block-library/src/cover/block.json

@@ -78,6 +78,9 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"sizeSlug": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

packages/block-library/src/cover/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';

packages/block-library/src/cover/edit/index.js

@@ -47,6 +47,7 @@ import {
 	DEFAULT_BACKGROUND_COLOR,
 	DEFAULT_OVERLAY_COLOR,
 } from './color-utils';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -100,6 +101,7 @@ function CoverEdit( {
 		templateLock,
 		tagName: TagName = 'div',
 		isUserOverlayColor,
+		sizeSlug,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -108,6 +110,7 @@ function CoverEdit( {
 		'featured_media',
 		postId
 	);
+	const { getSettings } = useSelect( blockEditorStore );
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -199,6 +202,22 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) {
+			const { imageDefaultSize } = getSettings();
+
+			// Try to use the previous selected image size if it's available
+			// otherwise try the default image size or fallback to full size.
+			if ( sizeSlug && newMedia?.sizes?.[ sizeSlug ] ) {
+				mediaAttributes.sizeSlug = sizeSlug;
+				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
+			} else if ( newMedia?.sizes?.[ imageDefaultSize ] ) {
+				mediaAttributes.sizeSlug = imageDefaultSize;
+				mediaAttributes.url = newMedia?.sizes?.[ sizeSlug ]?.url;
+			} else {
+				mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
+			}
+		}
+
 		setAttributes( {
 			...mediaAttributes,
 			focalPoint: undefined,

packages/block-library/src/cover/edit/inspector-controls.js

@@ -19,21 +19,25 @@ import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSettings,
+	store as blockEditorStore,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
-const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
 
 function CoverHeightInput( {
 	onChange,
@@ -95,6 +99,7 @@ export default function CoverInspectorControls( {
 } ) {
 	const {
 		useFeaturedImage,
+		id,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -112,7 +117,38 @@ export default function CoverInspectorControls( {
 		overlayColor,
 	} = currentSettings;
 
+	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+
 	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { getSettings } = useSelect( blockEditorStore );
+
+	const imageSizes = getSettings()?.imageSizes;
+
+	const image = useSelect(
+		( select ) =>
+			id && isImageBackground
+				? select( coreStore ).getMedia( id, { context: 'view' } )
+				: null,
+		[ id, isImageBackground ]
+	);
+
+	function updateImage( newSizeSlug ) {
+		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
+		if ( ! newUrl ) {
+			return null;
+		}
+
+		setAttributes( {
+			url: newUrl,
+			sizeSlug: newSizeSlug,
+		} );
+	}
+
+	const imageSizeOptions = imageSizes
+		?.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		?.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	const toggleParallax = () => {
 		setAttributes( {
@@ -175,6 +211,7 @@ export default function CoverInspectorControls( {
 								focalPoint: undefined,
 								isRepeated: false,
 								alt: '',
+								sizeSlug: undefined,
 							} );
 						} }
 						dropdownMenuProps={ dropdownMenuProps }
@@ -284,6 +321,14 @@ export default function CoverInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
+						{ ! useFeaturedImage && !! imageSizeOptions?.length && (
+							<ResolutionTool
+								value={ sizeSlug }
+								onChange={ updateImage }
+								options={ imageSizeOptions }
+								defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+							/>
+						) }
 					</ToolsPanel>
 				) }
 			</InspectorControls>

packages/block-library/src/cover/save.js

@@ -45,6 +45,7 @@ export default function save( { attributes } ) {
 		minHeight: minHeightProp,
 		minHeightUnit,
 		tagName: Tag,
+		sizeSlug,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -95,6 +96,7 @@ export default function save( { attributes } ) {
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
+			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 		}