Add Box Shadow support for featured image (WordPress#59616)

carstingaxion · Mar 27, 2024 · eba5886 · eba5886
1 parent 953cf72
commit eba5886
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -642,7 +642,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/post-featured-image
 -	**Category:** theme
--	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~html~~
+-	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
 -	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
 
 ## Post Navigation Link

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -77,6 +77,9 @@
 				"width": true
 			}
 		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
@@ -86,6 +89,9 @@
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder"
+	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"
 }
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -24,6 +24,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
@@ -144,6 +145,7 @@ export default function PostFeaturedImageEdit( {
 		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const blockEditingMode = useBlockEditingMode();
 
 	const placeholder = ( content ) => {
@@ -158,6 +160,7 @@ export default function PostFeaturedImageEdit( {
 					height: !! aspectRatio && '100%',
 					width: !! aspectRatio && '100%',
 					...borderProps.style,
+					...shadowProps.style,
 				} }
 			>
 				{ content }
@@ -267,6 +270,7 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
+		...shadowProps.style,
 		height: aspectRatio ? '100%' : height,
 		width: !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -50,6 +50,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! empty( $attributes['scale'] ) ) {
 		$extra_styles .= "object-fit:{$attributes['scale']};";
 	}
+	if ( ! empty( $attributes['style']['shadow'] ) ) {
+		$shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
+
+		if ( ! empty( $shadow_styles['css'] ) ) {
+			$extra_styles .= $shadow_styles['css'];
+		}
+	}
 
 	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;