From e333d9f03f008fbca86fa3443ec808f13f1098dd Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 5 Feb 2024 14:47:56 +0530 Subject: [PATCH] revert additional shadow styling for column and columns blocks --- docs/reference-guides/core-blocks.md | 8 +-- packages/block-library/src/column/edit.js | 18 ++--- packages/block-library/src/column/save.js | 15 +--- packages/block-library/src/columns/edit.js | 10 +-- packages/block-library/src/columns/save.js | 12 +--- packages/block-library/src/cover/block.json | 3 +- .../block-library/src/cover/edit/index.js | 3 - packages/block-library/src/cover/save.js | 71 ++++++++----------- 8 files changed, 49 insertions(+), 91 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 2fec413e834a74..5d6e443d4145ae 100644 --- 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 index 1b23429a3f9e55..ce9d971e956574 100644 --- 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 index 9e389036ea20b0..9d52ff19d08236 100644 --- 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 index 13d4a685f753b2..19b2274929c535 100644 --- 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 (
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index e072dc6e86e5b9..0dde5595308536 100644 --- 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
; diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 5dd498118756f1..eb55a8dbabec1c 100644 --- 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 index 92dd284b7563f4..098a3fe6f5d773 100644 --- 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 index 4c4a300c91ed41..680e92a5f9177b 100644 --- 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 */ } -
- { ! useFeaturedImage && - isImageBackground && - url && - ( isImgElement ? ( - { - ) : ( -
- ) ) } - { isVideoBackground && url && ( -
+ ) : ( +
+ ) ) } + { isVideoBackground && url && ( +