revert additional shadow styling for column and columns blocks

WordPress · Feb 5, 2024 · e333d9f · e333d9f
1 parent 804ed07
commit e333d9f
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 91 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -97,7 +97,7 @@ A single column within a columns block. ([Source](https://github.com/WordPress/g
 -	**Name:** core/column
 -	**Category:** design
 -	**Parent:** core/columns
--	**Supports:** anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** allowedBlocks, templateLock, verticalAlignment, width
 
 ## Columns
@@ -106,7 +106,7 @@ Display content in multiple columns, with blocks added to each column. ([Source]
 
 -	**Name:** core/columns
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** isStackedOnMobile, templateLock, verticalAlignment
 
 ## Comment Author Avatar (deprecated)
@@ -341,7 +341,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** allowedBlocks, tagName, templateLock
 
 ## Heading
@@ -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
+-	**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/column/edit.js b/packages/block-library/src/column/edit.js
@@ -15,7 +15,6 @@ import {
 	useSettings,
 	useInnerBlocksProps,
 	store as blockEditorStore,
-	__experimentalUseShadowProps as useShadowProps,
 } from '@wordpress/block-editor';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -25,9 +24,11 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
-function ColumnEdit( { attributes, setAttributes, clientId } ) {
-	const { verticalAlignment, width, templateLock, allowedBlocks } =
-		attributes;
+function ColumnEdit( {
+	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
+	setAttributes,
+	clientId,
+} ) {
 	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
@@ -65,16 +66,9 @@ function ColumnEdit( { attributes, setAttributes, clientId } ) {
 	};
 
 	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
-	const shadowProps = useShadowProps( attributes );
-	const flexBasisStyle = widthWithUnit
-		? { flexBasis: widthWithUnit }
-		: undefined;
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: {
-			...shadowProps.style,
-			...flexBasisStyle,
-		},
+		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
 	} );
 
 	const columnsCount = columnsIds.length;

diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js
@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	useInnerBlocksProps,
-	useBlockProps,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
-} from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
@@ -19,7 +15,7 @@ export default function save( { attributes } ) {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	let widthStyle;
+	let style;
 
 	if ( width && /\d/.test( width ) ) {
 		// Numbers are handled for backward compatibility as they can be still provided with templates.
@@ -33,14 +29,9 @@ export default function save( { attributes } ) {
 					multiplier +
 				'%';
 		}
-		widthStyle = { flexBasis };
+		style = { flexBasis };
 	}
 
-	const style = {
-		...getShadowClassesAndStyles( attributes ).style,
-		...widthStyle,
-	};
-
 	const blockProps = useBlockProps.save( {
 		className: wrapperClasses,
 		style,

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -20,7 +20,6 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
-	__experimentalUseShadowProps as useShadowProps,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -89,10 +88,8 @@ function ColumnsEditContainer( {
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
-	const shadowProps = useShadowProps( attributes );
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: shadowProps.style,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		orientation: 'horizontal',
@@ -253,7 +250,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 	} )
 )( ColumnsEditContainer );
 
-function Placeholder( { attributes, clientId, name, setAttributes } ) {
+function Placeholder( { clientId, name, setAttributes } ) {
 	const { blockType, defaultVariation, variations } = useSelect(
 		( select ) => {
 			const {
@@ -271,10 +268,7 @@ function Placeholder( { attributes, clientId, name, setAttributes } ) {
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const shadowProps = useShadowProps( attributes );
-	const blockProps = useBlockProps( {
-		style: shadowProps.style,
-	} );
+	const blockProps = useBlockProps();
 
 	return (
 		<div { ...blockProps }>

diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
@@ -6,25 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	useInnerBlocksProps,
-	useBlockProps,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
-} from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const shadowProps = getShadowClassesAndStyles( attributes );
 	const className = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
-	const blockProps = useBlockProps.save( {
-		className,
-		style: shadowProps.style,
-	} );
+	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
 	return <div { ...innerBlocksProps } />;

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -135,8 +135,7 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
-		},
-		"shadow": true
+		}
 	},
 	"editorStyle": "wp-block-cover-editor",
 	"style": "wp-block-cover"

diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
@@ -17,7 +17,6 @@ import {
 	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
-	__experimentalUseShadowProps as useShadowProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -290,9 +289,7 @@ 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,7 +10,6 @@ import {
 	useInnerBlocksProps,
 	getColorClassName,
 	__experimentalGetGradientClass,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockProps,
 } from '@wordpress/block-editor';
 
@@ -62,9 +61,7 @@ export default function save( { attributes } ) {
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 
-	const shadowProps = getShadowClassesAndStyles( attributes );
 	const style = {
-		...shadowProps.style,
 		minHeight: minHeight || undefined,
 	};
 
@@ -127,48 +124,42 @@ export default function save( { attributes } ) {
 				style={ bgStyle }
 			/>
 
-			{ /* @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
+			{ ! useFeaturedImage &&
+				isImageBackground &&
+				url &&
+				( isImgElement ? (
+					<img
+						className={ imgClasses }
+						alt={ alt }
 						src={ url }
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
 					/>
-				) }
-			</div>
+				) : (
+					<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
 				{ ...useInnerBlocksProps.save( {
 					className: 'wp-block-cover__inner-container',