diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 2fec413e834a74..38ad3e2e11bd13 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) @@ -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/block.json b/packages/block-library/src/column/block.json index 40444d04b93e7c..0857abb47ffdc0 100644 --- 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/columns/block.json b/packages/block-library/src/columns/block.json index 22db5b1b4ac239..6d49a27e82eb03 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -82,7 +82,8 @@ }, "interactivity": { "clientNavigation": true - } + }, + "shadow": true }, "editorStyle": "wp-block-columns-editor", "style": "wp-block-columns" diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index d60bcadf0eec74..7a46a34db591f0 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -117,10 +117,14 @@ "radius": true, "width": true } + }, + "shadow": { + "__experimentalSkipSerialization": true } }, "selectors": { "border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder", + "shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder", "filter": { "duotone": ".wp-block-image img, .wp-block-image .components-placeholder" } diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index bef3b1198a25f9..63b99460b386af 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -15,6 +15,7 @@ import { useBlockProps, store as blockEditorStore, __experimentalUseBorderProps as useBorderProps, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, useBlockEditingMode, } from '@wordpress/block-editor'; import { useEffect, useRef, useState } from '@wordpress/element'; @@ -316,6 +317,7 @@ export function ImageEdit( { ); const borderProps = useBorderProps( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const classes = classnames( className, { 'is-transient': temporaryURL, @@ -377,6 +379,7 @@ export function ImageEdit( { height: width && aspectRatio ? '100%' : height, objectFit: scale, ...borderProps.style, + ...shadowProps.style, } } > { lockUrlControls ? ( diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 67dbf529d90389..ceaab16d7fdb17 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -25,6 +25,7 @@ import { useSettings, __experimentalImageEditor as ImageEditor, __experimentalUseBorderProps as useBorderProps, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useEffect, useMemo, useState, useRef } from '@wordpress/element'; @@ -594,6 +595,7 @@ export default function Image( { } const borderProps = useBorderProps( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const isRounded = attributes.className?.includes( 'is-style-rounded' ); let img = ( @@ -620,6 +622,7 @@ export default function Image( { ( width && height ) || aspectRatio ? '100%' : undefined, objectFit: scale, ...borderProps.style, + ...shadowProps.style, } } /> { temporaryURL && } diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index 0b750068e9a874..60fca74fc76438 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -11,6 +11,7 @@ import { useBlockProps, __experimentalGetElementClassName, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, } from '@wordpress/block-editor'; export default function save( { attributes } ) { @@ -34,6 +35,7 @@ export default function save( { attributes } ) { const newRel = ! rel ? undefined : rel; const borderProps = getBorderClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const classes = classnames( { // All other align classes are handled by block supports. @@ -58,6 +60,7 @@ export default function save( { attributes } ) { className={ imageClasses || undefined } style={ { ...borderProps.style, + ...shadowProps.style, aspectRatio, objectFit: scale, width,