diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3ca3ffddaa9c7..5ee5253db309d 100644 --- 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 index 75f5bec3ff451..05c2fb1f28b13 100644 --- 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 index 5e3843fcedbae..a37322467d1f5 100644 --- 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 index 9a1fd315bb952..39b94f6307c5f 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -48,6 +48,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;