Cover Block: Add Image Resolution options

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

@@ -46,6 +46,7 @@ import {
 	DEFAULT_BACKGROUND_COLOR,
 	DEFAULT_OVERLAY_COLOR,
 } from './color-utils';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -99,6 +100,7 @@ function CoverEdit( {
 		templateLock,
 		tagName: TagName = 'div',
 		isUserOverlayColor,
+		sizeSlug,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -107,6 +109,7 @@ function CoverEdit( {
 		'featured_media',
 		postId
 	);
+	const { getSettings } = useSelect( blockEditorStore );
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -198,6 +201,22 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) {
+			const { imageDefaultSize } = getSettings();
+
+			// Try to use the previous selected image size if its available
+			// otherwise try the default image size or fallback 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

@@ -5,12 +5,12 @@ import { useMemo } from '@wordpress/element';
 import {
 	ExternalLink,
 	FocalPointPicker,
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -19,20 +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,
@@ -94,6 +99,7 @@ export default function CoverInspectorControls( {
 } ) {
 	const {
 		useFeaturedImage,
+		id,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -111,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( {
@@ -160,72 +197,139 @@ export default function CoverInspectorControls( {
 		),
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								hasParallax: false,
+								focalPoint: undefined,
+								isRepeated: false,
+								alt: '',
+								sizeSlug: undefined,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isImageBackground && (
 							<>
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+									isShownByDefault
+									hasValue={ () => hasParallax }
+									onDeselect={ () =>
+										setAttributes( {
+											hasParallax: false,
+											focalPoint: undefined,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Fixed background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								</ToolsPanelItem>
 
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Repeated background' ) }
-									checked={ isRepeated }
-									onChange={ toggleIsRepeated }
-								/>
+									isShownByDefault
+									hasValue={ () => isRepeated }
+									onDeselect={ () =>
+										setAttributes( {
+											isRepeated: false,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Repeated background' ) }
+										checked={ isRepeated }
+										onChange={ toggleIsRepeated }
+									/>
+								</ToolsPanelItem>
 							</>
 						) }
+
 						{ showFocalPointPicker && (
-							<FocalPointPicker
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
+								isShownByDefault
+								hasValue={ () => !! focalPoint }
+								onDeselect={ () =>
 									setAttributes( {
-										focalPoint: newFocalPoint,
+										focalPoint: undefined,
 									} )
 								}
-							/>
+							>
+								<FocalPointPicker
+									__nextHasNoMarginBottom
+									label={ __( 'Focal point' ) }
+									url={ url }
+									value={ focalPoint }
+									onDragStart={ imperativeFocalPointPreview }
+									onDrag={ imperativeFocalPointPreview }
+									onChange={ ( newFocalPoint ) =>
+										setAttributes( {
+											focalPoint: newFocalPoint,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
 						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
-							<TextareaControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt }
-								onChange={ ( newAlt ) =>
-									setAttributes( { alt: newAlt } )
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: '' } )
 								}
-								help={
-									<>
-										<ExternalLink
-											href={
-												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-												__(
-													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-												)
-											}
-										>
+							>
+								<TextareaControl
+									__nextHasNoMarginBottom
+									label={ __( 'Alternative text' ) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
+												{ __(
+													'Describe the purpose of the image.'
+												) }
+											</ExternalLink>
+											<br />
 											{ __(
-												'Describe the purpose of the image.'
+												'Leave empty if decorative.'
 											) }
-										</ExternalLink>
-										<br />
-										{ __( 'Leave empty if decorative.' ) }
-									</>
-								}
+										</>
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+						{ ! useFeaturedImage && !! imageSizeOptions.length && (
+							<ResolutionTool
+								value={ sizeSlug }
+								onChange={ updateImage }
+								options={ imageSizeOptions }
 							/>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (

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,
 		}

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

@@ -190,7 +190,7 @@ describe( 'Cover block', () => {
 			test( 'does not display media settings panel if url is not set', async () => {
 				await setup();
 				expect(
-					screen.queryByRole( 'button', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -202,7 +202,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'button', {
+					screen.getByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).toBeInTheDocument();