add shadow support for individual column block

WordPress · Jan 24, 2024 · 86c036f · 86c036f
1 parent 92cac66
commit 86c036f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 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), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** anchor, color (background, button, gradients, heading, link, text), layout, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** allowedBlocks, templateLock, verticalAlignment, width
 
 ## Columns

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
@@ -37,6 +37,7 @@
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"blockGap": true,
 			"padding": true,

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -15,6 +15,7 @@ import {
 	useSettings,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	__experimentalUseShadowProps as useShadowProps,
 } from '@wordpress/block-editor';
 import {
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -24,11 +25,9 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
-function ColumnEdit( {
-	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
-	setAttributes,
-	clientId,
-} ) {
+function ColumnEdit( { attributes, setAttributes, clientId } ) {
+	const { verticalAlignment, width, templateLock, allowedBlocks } =
+		attributes;
 	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
@@ -66,9 +65,16 @@ function ColumnEdit( {
 	};
 
 	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
+	const shadowProps = useShadowProps( attributes );
+	const flexBasisStyle = widthWithUnit
+		? { flexBasis: widthWithUnit }
+		: undefined;
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
+		style: {
+			...shadowProps.style,
+			...flexBasisStyle,
+		},
 	} );
 
 	const columnsCount = columnsIds.length;

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