fix image block and skip serialization

WordPress · Feb 5, 2024 · 0a3ad51 · 0a3ad51
1 parent e333d9f
commit 0a3ad51
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -378,7 +378,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow ()
 -	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -118,7 +118,9 @@
 				"width": true
 			}
 		},
-		"shadow": true
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		}
 	},
 	"selectors": {
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -15,7 +15,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseShadowProps as useShadowProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
@@ -317,7 +317,7 @@ export function ImageEdit( {
 	);
 
 	const borderProps = useBorderProps( attributes );
-	const shadowProps = useShadowProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -25,7 +25,7 @@ import {
 	useSettings,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseShadowProps as useShadowProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
@@ -595,7 +595,7 @@ export default function Image( {
 	}
 
 	const borderProps = useBorderProps( attributes );
-	const shadowProps = useShadowProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
 	let img = (