Add srcset for cover image (#25171)

WordPress · Jan 13, 2021 · c963e4c · c963e4c
1 parent cfe936a
commit c963e4c
Show file tree

Hide file tree

Showing 36 changed files with 361 additions and 91 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -234,6 +234,14 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		'4.17.19',
 		true
 	);
+
+	gutenberg_register_vendor_script(
+		$scripts,
+		'object-fit-polyfill',
+		'https://unpkg.com/objectFitPolyfill@2.3.0/dist/objectFitPolyfill.min.js',
+		array(),
+		'2.3.0'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 
@@ -706,3 +714,29 @@ function gutenberg_extend_block_editor_styles_html() {
 	echo "<script>window.__editorStyles = $editor_styles</script>";
 }
 add_action( 'admin_footer-toplevel_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );
+
+/**
+ * Adds a polyfill for object-fit in environments which do not support it.
+ *
+ * The script registration occurs in `gutenberg_register_vendor_scripts`, which
+ * should be removed in coordination with this function.
+ *
+ * @see gutenberg_register_vendor_scripts
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+ *
+ * @since 9.1.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts object.
+ */
+function gutenberg_add_object_fit_polyfill( $scripts ) {
+	did_action( 'init' ) && $scripts->add_inline_script(
+		'wp-polyfill',
+		wp_get_script_polyfill(
+			$scripts,
+			array(
+				'"objectFit" in document.documentElement.style' => 'object-fit-polyfill',
+			)
+		)
+	);
+}
+add_action( 'wp_default_scripts', 'gutenberg_add_object_fit_polyfill', 20 );
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -32,6 +32,7 @@ $z-layers: (
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
+	".wp-block-cover__image-background": 0, // Image background inside cover block.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
@@ -24,6 +24,8 @@ import {
 	VIDEO_BACKGROUND_TYPE,
 	backgroundImageStyles,
 	dimRatioToClass,
+	getPositionClassName,
+	isContentPositionCenter,
 } from './shared';
 
 const blockAttributes = {
@@ -57,6 +59,134 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+			minHeight: {
+				type: 'number',
+			},
+			gradient: {
+				type: 'string',
+			},
+			customGradient: {
+				type: 'string',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundType,
+				gradient,
+				contentPosition,
+				customGradient,
+				customOverlayColor,
+				dimRatio,
+				focalPoint,
+				hasParallax,
+				overlayColor,
+				url,
+				minHeight: minHeightProp,
+				minHeightUnit,
+			} = attributes;
+			const overlayColorClass = getColorClassName(
+				'background-color',
+				overlayColor
+			);
+			const gradientClass = __experimentalGetGradientClass( gradient );
+			const minHeight = minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+			const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+			const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+			const style = isImageBackground ? backgroundImageStyles( url ) : {};
+			const videoStyle = {};
+
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+
+			if ( customGradient && ! url ) {
+				style.background = customGradient;
+			}
+			style.minHeight = minHeight || undefined;
+
+			let positionValue;
+
+			if ( focalPoint ) {
+				positionValue = `${ Math.round(
+					focalPoint.x * 100
+				) }% ${ Math.round( focalPoint.y * 100 ) }%`;
+
+				if ( isImageBackground && ! hasParallax ) {
+					style.backgroundPosition = positionValue;
+				}
+
+				if ( isVideoBackground ) {
+					videoStyle.objectPosition = positionValue;
+				}
+			}
+
+			const classes = classnames(
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					'has-background-gradient': gradient || customGradient,
+					[ gradientClass ]: ! url && gradientClass,
+					'has-custom-content-position': ! isContentPositionCenter(
+						contentPosition
+					),
+				},
+				getPositionClassName( contentPosition )
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ url &&
+						( gradient || customGradient ) &&
+						dimRatio !== 0 && (
+							<span
+								aria-hidden="true"
+								className={ classnames(
+									'wp-block-cover__gradient-background',
+									gradientClass
+								) }
+								style={
+									customGradient
+										? { background: customGradient }
+										: undefined
+								}
+							/>
+						) }
+					{ isVideoBackground && url && (
+						<video
+							className="wp-block-cover__video-background"
+							autoPlay
+							muted
+							loop
+							playsInline
+							src={ url }
+							style={ videoStyle }
+						/>
+					) }
+					<div className="wp-block-cover__inner-container">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -331,23 +331,21 @@ function CoverEdit( {
 		: minHeight;
 
 	const style = {
-		...( isImageBackground ? backgroundImageStyles( url ) : {} ),
+		...( isImageBackground && hasParallax
+			? backgroundImageStyles( url )
+			: {} ),
 		backgroundColor: overlayColor.color,
+		background: gradientValue && ! url ? gradientValue : undefined,
 		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
 	};
 
-	if ( gradientValue && ! url ) {
-		style.background = gradientValue;
-	}
-
-	let positionValue;
-
-	if ( focalPoint ) {
-		positionValue = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
-		if ( isImageBackground ) {
-			style.backgroundPosition = positionValue;
-		}
-	}
+	const mediaStyle = {
+		objectPosition:
+			// prettier-ignore
+			focalPoint && ! hasParallax
+				? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100) }%`
+				: undefined,
+	};
 
 	const hasBackground = !! ( url || overlayColor.color || gradientValue );
 	const showFocalPointPicker =
@@ -587,18 +585,6 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
-				{ isImageBackground && (
-					// Used only to programmatically check if the image is dark or not
-					<img
-						ref={ isDarkElement }
-						aria-hidden
-						alt=""
-						style={ {
-							display: 'none',
-						} }
-						src={ url }
-					/>
-				) }
 				{ url && gradientValue && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
@@ -609,6 +595,15 @@ function CoverEdit( {
 						style={ { background: gradientValue } }
 					/>
 				) }
+				{ isImageBackground && ! hasParallax && (
+					<img
+						ref={ isDarkElement }
+						className="wp-block-cover__image-background"
+						alt=""
+						src={ url }
+						style={ mediaStyle }
+					/>
+				) }
 				{ isVideoBackground && (
 					<video
 						ref={ isDarkElement }
@@ -617,7 +612,7 @@ function CoverEdit( {
 						muted
 						loop
 						src={ url }
-						style={ { objectPosition: positionValue } }
+						style={ mediaStyle }
 					/>
 				) }
 				{ isBlogUrl && <Spinner /> }

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -43,6 +43,12 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+
+	// Fix object-fit when block is full width in the editor.
+	.wp-block-cover__image-background {
+		width: inherit;
+		height: inherit;
+	}
 }
 
 [data-align="left"] > .wp-block-cover,

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -38,6 +38,7 @@ export default function save( { attributes } ) {
 		isRepeated,
 		overlayColor,
 		url,
+		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
 	} = attributes;
@@ -53,33 +54,20 @@ export default function save( { attributes } ) {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
-	const style = isImageBackground ? backgroundImageStyles( url ) : {};
-	const videoStyle = {};
+	const style = {
+		...( isImageBackground && hasParallax
+			? backgroundImageStyles( url )
+			: {} ),
+		backgroundColor: ! overlayColorClass ? customOverlayColor : undefined,
+		background: customGradient && ! url ? customGradient : undefined,
+		minHeight: minHeight || undefined,
+	};
 
-	if ( ! overlayColorClass ) {
-		style.backgroundColor = customOverlayColor;
-	}
-
-	if ( customGradient && ! url ) {
-		style.background = customGradient;
-	}
-	style.minHeight = minHeight || undefined;
-
-	let positionValue;
-
-	if ( focalPoint ) {
-		positionValue = `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
-			focalPoint.y * 100
-		) }%`;
-
-		if ( isImageBackground && ! hasParallax ) {
-			style.backgroundPosition = positionValue;
-		}
-
-		if ( isVideoBackground ) {
-			videoStyle.objectPosition = positionValue;
-		}
-	}
+	const objectPosition =
+		// prettier-ignore
+		focalPoint && ! hasParallax
+			? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+			: undefined;
 
 	const classes = classnames(
 		dimRatioToClass( dimRatio ),
@@ -113,15 +101,33 @@ export default function save( { attributes } ) {
 					}
 				/>
 			) }
+			{ isImageBackground && url && ! hasParallax && (
+				<img
+					className={ classnames(
+						'wp-block-cover__image-background',
+						id ? `wp-image-${ id }` : null
+					) }
+					alt=""
+					src={ url }
+					style={ { objectPosition } }
+					data-object-fit="cover"
+					data-object-position={ objectPosition }
+				/>
+			) }
 			{ isVideoBackground && url && (
 				<video
-					className="wp-block-cover__video-background"
+					className={ classnames(
+						'wp-block-cover__video-background',
+						'intrinsic-ignore'
+					) }
 					autoPlay
 					muted
 					loop
 					playsInline
 					src={ url }
-					style={ videoStyle }
+					style={ { objectPosition } }
+					data-object-fit="cover"
+					data-object-position={ objectPosition }
 				/>
 			) }
 			<div className="wp-block-cover__inner-container">