@wordpress/block-library 9.10.0 → 9.12.0

package/src/cover/deprecated.js

@@ -164,7 +164,7 @@ const v8ToV11BlockAttributes = {
 	},
 };
 
-const v12BlockAttributes = {
+const v12toV13BlockAttributes = {
 	...v8ToV11BlockAttributes,
 	useFeaturedImage: {
 		type: 'boolean',
@@ -176,6 +176,20 @@ const v12BlockAttributes = {
 	},
 };
 
+const v14BlockAttributes = {
+	...v12toV13BlockAttributes,
+	isUserOverlayColor: {
+		type: 'boolean',
+	},
+	sizeSlug: {
+		type: 'string',
+	},
+	alt: {
+		type: 'string',
+		default: '',
+	},
+};
+
 const v7toV11BlockSupports = {
 	anchor: true,
 	align: true,
@@ -244,9 +258,173 @@ const v12BlockSupports = {
 	},
 };
 
+const v14BlockSupports = {
+	...v12BlockSupports,
+	shadow: true,
+	dimensions: {
+		aspectRatio: true,
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+// Deprecation for blocks that have z-index.
+const v14 = {
+	attributes: v14BlockAttributes,
+	supports: v14BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+			sizeSlug,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				  ? mediaPosition(focalPoint)
+				  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
 // Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
 const v13 = {
-	attributes: v12BlockAttributes,
+	attributes: v12toV13BlockAttributes,
 	supports: v12BlockSupports,
 	save( { attributes } ) {
 		const {
@@ -396,7 +574,7 @@ const v13 = {
 
 // Deprecation for blocks to prevent auto overlay color from overriding previously set values.
 const v12 = {
-	attributes: v12BlockAttributes,
+	attributes: v12toV13BlockAttributes,
 	supports: v12BlockSupports,
 	isEligible( attributes ) {
 		return (
@@ -1824,4 +2002,4 @@ const v1 = {
 	},
 };
 
-export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit/block-controls.js

@@ -101,7 +101,7 @@ export default function CoverBlockControls( {
 					onSelect={ onSelectMedia }
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
-					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					name={ ! url ? __( 'Add media' ) : __( 'Replace' ) }
 					onReset={ onClearMedia }
 				/>
 			</BlockControls>

package/src/cover/edit/cover-placeholder.js

@@ -23,9 +23,6 @@ export default function CoverPlaceholder( {
 			icon={ <BlockIcon icon={ icon } /> }
 			labels={ {
 				title: __( 'Cover' ),
-				instructions: __(
-					'Drag and drop onto this block, upload, or select existing media from your library.'
-				),
 			} }
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"

package/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 );
@@ -149,8 +152,7 @@ function CoverEdit( {
 				isUserOverlayColor: isUserOverlayColor || false,
 			} );
 		} )();
-		// Disable reason: Update the block only when the featured image changes.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Update the block only when the featured image changes.
 	}, [ mediaUrl ] );
 
 	// instead of destructuring the attributes
@@ -199,6 +201,34 @@ 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 ] ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ] )
+			) {
+				mediaAttributes.sizeSlug = sizeSlug;
+				mediaAttributes.url =
+					newMedia?.sizes?.[ sizeSlug ]?.url ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ]?.source_url;
+			} else if (
+				newMedia?.sizes?.[ imageDefaultSize ] ||
+				newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+			) {
+				mediaAttributes.sizeSlug = imageDefaultSize;
+				mediaAttributes.url =
+					newMedia?.sizes?.[ imageDefaultSize ]?.url ||
+					newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+						?.source_url;
+			} else {
+				mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
+			}
+		}
+
 		setAttributes( {
 			...mediaAttributes,
 			focalPoint: undefined,
@@ -441,7 +471,7 @@ function CoverEdit( {
 			setAttributes( { minHeight: newMinHeight } );
 		},
 		// Hide the resize handle if an aspect ratio is set, as the aspect ratio takes precedence.
-		showHandle: ! attributes.style?.dimensions?.aspectRatio ? true : false,
+		showHandle: ! attributes.style?.dimensions?.aspectRatio,
 		size: resizableBoxDimensions,
 		width,
 	};
@@ -509,27 +539,6 @@ function CoverEdit( {
 				data-url={ url }
 			>
 				{ resizeListener }
-				{ showOverlay && (
-					<span
-						aria-hidden="true"
-						className={ clsx(
-							'wp-block-cover__background',
-							dimRatioToClass( dimRatio ),
-							{
-								[ overlayColor.class ]: overlayColor.class,
-								'has-background-dim': dimRatio !== undefined,
-								// For backwards compatibility. Former versions of the Cover Block applied
-								// `.wp-block-cover__gradient-background` in the presence of
-								// media, a gradient and a dim.
-								'wp-block-cover__gradient-background':
-									url && gradientValue && dimRatio !== 0,
-								'has-background-gradient': gradientValue,
-								[ gradientClass ]: gradientClass,
-							}
-						) }
-						style={ { backgroundImage: gradientValue, ...bgStyle } }
-					/>
-				) }
 
 				{ ! url && useFeaturedImage && (
 					<Placeholder
@@ -571,7 +580,31 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
+
+				{ showOverlay && (
+					<span
+						aria-hidden="true"
+						className={ clsx(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
+
 				{ isUploadingMedia && <Spinner /> }
+
 				<CoverPlaceholder
 					disableMediaButtons
 					onSelectMedia={ onSelectMedia }

package/src/cover/edit/inspector-controls.js

@@ -19,12 +19,15 @@ 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
@@ -32,8 +35,9 @@ import { __ } from '@wordpress/i18n';
 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>

package/src/cover/editor.scss

@@ -37,12 +37,15 @@
 			width: 100%;
 			z-index: 1;
 		}
+
+		.wp-block-cover__inner-container {
+			z-index: 2;
+		}
 	}
 
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
-		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions
@@ -104,10 +107,6 @@
 	}
 }
 
-// When uploading background images, show a transparent overlay.
-.wp-block-cover > .components-drop-zone .components-drop-zone__content {
-	opacity: 0.8 !important;
-}
 
 // Remove the parallax fixed background when in the patterns preview panel as it
 // doesn't work with the transforms that are applied to resize the block in that context.

package/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,
 		}
@@ -104,26 +106,6 @@ export default function save( { attributes } ) {
 
 	return (
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
-			<span
-				aria-hidden="true"
-				className={ clsx(
-					'wp-block-cover__background',
-					overlayColorClass,
-					dimRatioToClass( dimRatio ),
-					{
-						'has-background-dim': dimRatio !== undefined,
-						// For backwards compatibility. Former versions of the Cover Block applied
-						// `.wp-block-cover__gradient-background` in the presence of
-						// media, a gradient and a dim.
-						'wp-block-cover__gradient-background':
-							url && gradientValue && dimRatio !== 0,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ bgStyle }
-			/>
-
 			{ ! useFeaturedImage &&
 				isImageBackground &&
 				url &&
@@ -160,6 +142,33 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
+
+			{ /* The `wp-block-cover__background` needs to be immediately before
+			the `wp-block-cover__inner-container`, so the exclusion CSS selector
+			`.wp-block-cover__background + .wp-block-cover__inner-container`
+			works properly. If it needs to be changed in the future, the
+			selector for the backward compatibility for v14 deprecation also
+			needs change. */ }
+			<span
+				aria-hidden="true"
+				className={ clsx(
+					'wp-block-cover__background',
+					overlayColorClass,
+					dimRatioToClass( dimRatio ),
+					{
+						'has-background-dim': dimRatio !== undefined,
+						// For backwards compatibility. Former versions of the Cover Block applied
+						// `.wp-block-cover__gradient-background` in the presence of
+						// media, a gradient and a dim.
+						'wp-block-cover__gradient-background':
+							url && gradientValue && dimRatio !== 0,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
+					}
+				) }
+				style={ bgStyle }
+			/>
+
 			<div
 				{ ...useInnerBlocksProps.save( {
 					className: 'wp-block-cover__inner-container',

package/src/cover/style.scss

@@ -54,7 +54,6 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		z-index: z-index(".wp-block-cover.has-background-dim::before");
 		opacity: 0.5;
 	}
 
@@ -95,8 +94,8 @@
 	}
 
 	.wp-block-cover__inner-container {
+		position: relative; // Needed for the inner container to be positioned above other elements with absolute positioning.
 		width: 100%;
-		z-index: z-index(".wp-block-cover__inner-container");
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
@@ -209,14 +208,6 @@ video.wp-block-cover__video-background {
 	}
 }
 
-.wp-block-cover__video-background {
-	z-index: z-index(".wp-block-cover__video-background");
-}
-
-.wp-block-cover__image-background {
-	z-index: z-index(".wp-block-cover__image-background");
-}
-
 // Styles below only exist to support older versions of the block.
 // Versions that not had inner blocks and used an h2 heading had a section (and not a div) with a class wp-block-cover-image (and not a wp-block-cover).
 // We are using the previous referred differences to target old versions.
@@ -296,3 +287,42 @@ section.wp-block-cover-image > h2,
 		color: inherit;
 	}
 }
+
+// Backward compatibility for v14 deprecation. Only applied to the frontend.
+// Regarding the `.wp-block-cover__background + .wp-block-cover__inner-container`
+// selector: When the `.wp-block-cover__inner-container` comes right after the
+// `.wp-block-cover__background` , it means that it's using the new HTML
+// structure or that it's using the color background or gradient (even in
+// the deprecated version). In the color background or gradient option we don't
+// need the z-index because the elements are in the expected order.
+body:not(.editor-styles-wrapper) .wp-block-cover:not(
+.wp-block-cover:has(
+	.wp-block-cover__background + .wp-block-cover__inner-container
+)
+) {
+	.wp-block-cover__video-background {
+		z-index: z-index(".wp-block-cover__video-background");
+	}
+
+	.wp-block-cover__image-background {
+		z-index: z-index(".wp-block-cover__image-background");
+	}
+
+	// The first selector is required for old Cover markup/
+	// Keep .wp-block-cover__gradient-background for v8 deprecation.
+	&.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
+	.wp-block-cover__gradient-background {
+		z-index: z-index(".wp-block-cover.has-background-dim::before");
+	}
+
+	.wp-block-cover__inner-container {
+		z-index: z-index(".wp-block-cover__inner-container");
+
+		// Reset the z-index to auto when the body has a modal open. So when the
+		// modal is inside the cover, it doesn't create a stacking context.
+		@at-root .has-modal-open & {
+			z-index: auto;
+		}
+	}
+}