add shadow support to cover block

WordPress · Jan 24, 2024 · 163bda5 · 163bda5
1 parent 86c036f
commit 163bda5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
@@ -17,6 +17,7 @@ import {
 	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
+	__experimentalUseShadowProps as useShadowProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -289,7 +290,9 @@ function CoverEdit( {
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 
+	const shadowProps = useShadowProps( attributes );
 	const style = {
+		...shadowProps.style,
 		minHeight: minHeightWithUnit || undefined,
 	};
 

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -10,6 +10,7 @@ import {
 	useInnerBlocksProps,
 	getColorClassName,
 	__experimentalGetGradientClass,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
@@ -61,7 +62,9 @@ export default function save( { attributes } ) {
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const style = {
+		...shadowProps.style,
 		minHeight: minHeight || undefined,
 	};
 
@@ -124,42 +127,48 @@ export default function save( { attributes } ) {
 				style={ bgStyle }
 			/>
 
-			{ ! useFeaturedImage &&
-				isImageBackground &&
-				url &&
-				( isImgElement ? (
-					<img
-						className={ imgClasses }
-						alt={ alt }
+			{ /* @todo: added background wrapper in order to avoid repeating shared props between background types, test compatibility */ }
+			<div
+				className="wp-block-cover__background-wrapper"
+				style={ shadowProps.style }
+			>
+				{ ! 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={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
 						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={ classnames(
-						'wp-block-cover__video-background',
-						'intrinsic-ignore'
-					) }
-					autoPlay
-					muted
-					loop
-					playsInline
-					src={ url }
-					style={ { objectPosition } }
-					data-object-fit="cover"
-					data-object-position={ objectPosition }
-				/>
-			) }
+				) }
+			</div>
 			<div
 				{ ...useInnerBlocksProps.save( {
 					className: 'wp-block-cover__inner-container',