From f8d647d07d88ecb3952610394e8fefde656a29c3 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Mon, 8 Jan 2024 19:13:27 -0300 Subject: [PATCH 01/18] wip --- packages/block-editor/src/components/block-inspector/index.js | 4 ++++ .../src/components/inspector-controls-tabs/styles-tab.js | 1 + .../block-editor/src/components/inspector-controls/groups.js | 2 ++ .../src/slot-fill/bubbles-virtually/use-slot-fills.ts | 2 +- 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 9cb3b89a7bc252..ed7754d505cb4c 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -140,6 +140,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { group="border" label={ __( 'Border' ) } /> + ) } diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js index d42b3bffce4ebc..6f24051ea2cfcb 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js @@ -46,6 +46,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => { label={ __( 'Dimensions' ) } /> + ); diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js index b4eada4b6b4be6..9ca1a72b9918a6 100644 --- a/packages/block-editor/src/components/inspector-controls/groups.js +++ b/packages/block-editor/src/components/inspector-controls/groups.js @@ -20,6 +20,7 @@ const InspectorControlsTypography = createSlotFill( ); const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' ); const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' ); +const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' ); const groups = { default: InspectorControlsDefault, @@ -28,6 +29,7 @@ const groups = { border: InspectorControlsBorder, color: InspectorControlsColor, dimensions: InspectorControlsDimensions, + effects: InspectorControlsEffects, filter: InspectorControlsFilter, list: InspectorControlsListView, position: InspectorControlsPosition, diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts index 599f0bc5667711..0131bbfc434e59 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts +++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts @@ -19,6 +19,6 @@ export default function useSlotFills( name: SlotKey ) { const fills = useSnapshot( registry.fills, { sync: true } ); // The important bit here is that this call ensures that the hook // only causes a re-render if the "fills" of a given slot name - // change change, not any fills. + // change, not any fills. return fills.get( name ); } From a03f03881e068f70d833d4422debcd6657b95c4d Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Tue, 9 Jan 2024 12:57:38 -0300 Subject: [PATCH 02/18] wip --- .../src/components/block-inspector/index.js | 4 ++ .../use-inspector-controls-tabs.js | 2 + packages/block-editor/src/hooks/effects.js | 53 +++++++++++++++++++ packages/block-editor/src/hooks/style.js | 3 ++ packages/block-editor/src/hooks/supports.js | 5 ++ .../block-editor/src/hooks/test/effects.js | 39 ++++++++++++++ schemas/json/block.json | 5 ++ 7 files changed, 111 insertions(+) create mode 100644 packages/block-editor/src/hooks/effects.js create mode 100644 packages/block-editor/src/hooks/test/effects.js diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index ed7754d505cb4c..18b800b7874ad4 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -311,6 +311,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => { label={ __( 'Background' ) } /> +
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js index 2a47ae5267ca4e..ff68be82a829f1 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js @@ -40,6 +40,7 @@ export default function useInspectorControlsTabs( blockName ) { position: positionGroup, styles: stylesGroup, typography: typographyGroup, + effects: effectsGroup, } = InspectorControlsGroups; // List View Tab: If there are any fills for the list group add that tab. @@ -55,6 +56,7 @@ export default function useInspectorControlsTabs( blockName ) { ...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ), ...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ), ...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ), + ...( useSlotFills( effectsGroup.Slot.__unstableName ) || [] ), ]; const hasStyleFills = styleFills.length; diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js new file mode 100644 index 00000000000000..1fdc12dff52507 --- /dev/null +++ b/packages/block-editor/src/hooks/effects.js @@ -0,0 +1,53 @@ +/** + * WordPress dependencies + */ +import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; +/** + * Internal dependencies + */ +import StylesEffectsPanel, { + useHasEffectsPanel, +} from '../components/global-styles/effects-panel'; +import { InspectorControls } from '../components'; + +export const EFFECTS_SUPPORT_KEYS = [ 'shadow' ]; + +export function hasEffectsSupport( blockName ) { + return EFFECTS_SUPPORT_KEYS.some( ( key ) => + hasBlockSupport( blockName, key ) + ); +} + +function EffectsInspectorControl( { children } ) { + return { children }; +} + +export function EffectsPanel( { clientId, name, setAttributes, settings } ) { + const isEnabled = useHasEffectsPanel( settings ); + + const onChange = ( newShadow ) => { + setAttributes( { + shadow: newShadow, + } ); + }; + + if ( ! isEnabled ) { + return null; + } + + const defaultControls = getBlockSupport( name, [ + 'shadow', + '__experimentalDefaultControls', + ] ); + + return ( + + ); +} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 7221de63456cd5..484f44d2173c62 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -27,6 +27,7 @@ import { SPACING_SUPPORT_KEY, DimensionsPanel, } from './dimensions'; +import { EFFECTS_SUPPORT_KEYS, EffectsPanel } from './effects'; import { shouldSkipSerialization, useStyleOverride, @@ -37,6 +38,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, + ...EFFECTS_SUPPORT_KEYS, BORDER_SUPPORT_KEY, COLOR_SUPPORT_KEY, DIMENSIONS_SUPPORT_KEY, @@ -336,6 +338,7 @@ function BlockStyleControls( { + ); } diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 2cf08d46fa8fe2..21dceafe3bb484 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -3,6 +3,10 @@ */ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { EFFECTS_SUPPORT_KEYS } from './effects'; const ALIGN_SUPPORT_KEY = 'align'; const ALIGN_WIDE_SUPPORT_KEY = 'alignWide'; @@ -61,6 +65,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [ ]; const SPACING_SUPPORT_KEY = 'spacing'; const styleSupportKeys = [ + ...EFFECTS_SUPPORT_KEYS, ...TYPOGRAPHY_SUPPORT_KEYS, BORDER_SUPPORT_KEY, COLOR_SUPPORT_KEY, diff --git a/packages/block-editor/src/hooks/test/effects.js b/packages/block-editor/src/hooks/test/effects.js new file mode 100644 index 00000000000000..b4fe61745744b1 --- /dev/null +++ b/packages/block-editor/src/hooks/test/effects.js @@ -0,0 +1,39 @@ +/** + * Internal dependencies + */ +import { hasEffectsSupport } from '../effects'; + +describe( 'effects', () => { + describe( 'hasEffectsSupport', () => { + it( 'should return false if the block does not support effects', () => { + const settings = { + supports: { + shadow: false, + }, + }; + + expect( hasEffectsSupport( settings ) ).toBe( false ); + } ); + + it( 'should return true if the block supports effects', () => { + const settings = { + supports: { + shadow: true, + }, + }; + + expect( hasEffectsSupport( settings ) ).toBe( true ); + } ); + + it( 'should return true if the block supports effects and other features', () => { + const settings = { + supports: { + shadow: true, + align: true, + }, + }; + + expect( hasEffectsSupport( settings ) ).toBe( true ); + } ); + } ); +} ); diff --git a/schemas/json/block.json b/schemas/json/block.json index fd69ea1badb339..9cc7a83c2304dd 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -543,6 +543,11 @@ } } }, + "shadow": { + "type": "boolean", + "description": "Allow blocks to define a box shadow.", + "default": false + }, "typography": { "type": "object", "description": "This value signals that a block supports some of the CSS style properties related to typography. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific typography property, its attributes definition is extended to include the style attribute.", From 9b5917b77dbc0dd6975f686f264a9f9fa0aed632 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Tue, 9 Jan 2024 17:45:54 -0300 Subject: [PATCH 03/18] Add effects panel to block inspector @todo: for some reason, the Effects Panel is rendering, but the Shadow controls are not. --- packages/block-editor/src/hooks/effects.js | 30 +++++++++++++--------- packages/block-editor/src/hooks/utils.js | 6 ++++- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index 1fdc12dff52507..c5be645dea77b4 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -1,7 +1,9 @@ /** * WordPress dependencies */ -import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; +import { hasBlockSupport } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ @@ -9,6 +11,7 @@ import StylesEffectsPanel, { useHasEffectsPanel, } from '../components/global-styles/effects-panel'; import { InspectorControls } from '../components'; +import { store as blockEditorStore } from '../store'; export const EFFECTS_SUPPORT_KEYS = [ 'shadow' ]; @@ -18,36 +21,39 @@ export function hasEffectsSupport( blockName ) { ); } -function EffectsInspectorControl( { children } ) { - return { children }; +function EffectsInspectorControl( { children, resetAllFilter } ) { + return ( + + { children } + + ); } -export function EffectsPanel( { clientId, name, setAttributes, settings } ) { +export function EffectsPanel( { clientId, setAttributes, settings } ) { const isEnabled = useHasEffectsPanel( settings ); - const onChange = ( newShadow ) => { setAttributes( { shadow: newShadow, } ); }; + const blockAttributes = useSelect( + ( select ) => select( blockEditorStore ).getBlockAttributes( clientId ), + [ clientId ] + ); + const shadow = blockAttributes?.shadow; + const value = useMemo( () => ( { shadow } ), [ shadow ] ); if ( ! isEnabled ) { return null; } - const defaultControls = getBlockSupport( name, [ - 'shadow', - '__experimentalDefaultControls', - ] ); - return ( ); } diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index e63029e4e34e81..ea31a516ac6343 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -221,6 +221,7 @@ export function useBlockSettings( name, parentLayout ) { isTextEnabled, isHeadingEnabled, isButtonEnabled, + shadow, ] = useSettings( 'background.backgroundImage', 'background.backgroundSize', @@ -268,7 +269,8 @@ export function useBlockSettings( name, parentLayout ) { 'color.link', 'color.text', 'color.heading', - 'color.button' + 'color.button', + 'shadow' ); const rawSettings = useMemo( () => { @@ -345,6 +347,7 @@ export function useBlockSettings( name, parentLayout ) { }, layout, parentLayout, + shadow, }; }, [ backgroundImage, @@ -395,6 +398,7 @@ export function useBlockSettings( name, parentLayout ) { isTextEnabled, isHeadingEnabled, isButtonEnabled, + shadow, ] ); return useSettingsForBlockElement( rawSettings, name ); From 68438bd30e0ae330584aaad79ab732f7be65cf61 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Thu, 11 Jan 2024 12:11:55 +0530 Subject: [PATCH 04/18] add shadow classes for block settings in the editor --- lib/block-supports/shadow.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 4 +++- packages/style-engine/class-wp-style-engine.php | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/shadow.php b/lib/block-supports/shadow.php index 4a28c98b79325d..01ef1136cbe717 100644 --- a/lib/block-supports/shadow.php +++ b/lib/block-supports/shadow.php @@ -58,7 +58,7 @@ function gutenberg_apply_shadow_support( $block_type, $block_attributes ) { $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow; $attributes = array(); - $styles = gutenberg_style_engine_get_styles( $shadow_block_styles ); + $styles = gutenberg_style_engine_get_styles( $shadow_block_styles, array( 'convert_vars_to_classnames' => true ) ); if ( ! empty( $styles['css'] ) ) { $attributes['style'] = $styles['css']; diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f4266a7ef66dd5..9e16444e557a47 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -186,7 +186,9 @@ class WP_Theme_JSON_Gutenberg { 'use_default_names' => false, 'value_key' => 'shadow', 'css_vars' => '--wp--preset--shadow--$slug', - 'classes' => array(), + 'classes' => array( + '.has-$slug-shadow' => 'box-shadow', + ), 'properties' => array( 'box-shadow' ), ), ); diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index f0ecb9f9038065..7a26a7634d9c8b 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -182,6 +182,10 @@ final class WP_Style_Engine { 'css_vars' => array( 'shadow' => '--wp--preset--shadow--$slug', ), + 'classnames' => array( + 'has-shadow' => true, + 'has-$slug-shadow' => 'shadow', + ), ), ), 'dimensions' => array( From abd3452d6eeb027386d2c88cc8efafac045ef149 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Thu, 11 Jan 2024 17:57:01 +0530 Subject: [PATCH 05/18] add shadow attribute to template from the UI --- .../components/global-styles/effects-panel.js | 17 +++++++++++- packages/block-editor/src/hooks/effects.js | 26 ++++++++++++++++--- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/effects-panel.js b/packages/block-editor/src/components/global-styles/effects-panel.js index 9a9fd8d1258edd..20cf479fac1850 100644 --- a/packages/block-editor/src/components/global-styles/effects-panel.js +++ b/packages/block-editor/src/components/global-styles/effects-panel.js @@ -26,6 +26,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons'; /** * Internal dependencies */ +import { mergeOrigins } from '../use-settings'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; import { setImmutably } from '../../utils/object'; @@ -81,8 +82,22 @@ export default function EffectsPanel( { // Shadow const hasShadowEnabled = useHasShadowControl( settings ); const shadow = decodeValue( inheritedValue?.shadow ); + const shadowPresets = settings?.shadow?.presets; + const mergedShadowPresets = shadowPresets + ? mergeOrigins( shadowPresets ) + : []; const setShadow = ( newValue ) => { - onChange( setImmutably( value, [ 'shadow' ], newValue ) ); + const slug = mergedShadowPresets?.find( + ( { shadow: s } ) => s === newValue + )?.slug; + + onChange( + setImmutably( + value, + [ 'shadow' ], + slug ? `var:preset|shadow|${ slug }` : newValue || undefined + ) + ); }; const hasShadow = () => !! value?.shadow; const resetShadow = () => setShadow( undefined ); diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index c5be645dea77b4..c10f3e1fe802f6 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -32,16 +32,14 @@ function EffectsInspectorControl( { children, resetAllFilter } ) { export function EffectsPanel( { clientId, setAttributes, settings } ) { const isEnabled = useHasEffectsPanel( settings ); const onChange = ( newShadow ) => { - setAttributes( { - shadow: newShadow, - } ); + setAttributes( styleToAttributes( newShadow ) ); }; const blockAttributes = useSelect( ( select ) => select( blockEditorStore ).getBlockAttributes( clientId ), [ clientId ] ); const shadow = blockAttributes?.shadow; - const value = useMemo( () => ( { shadow } ), [ shadow ] ); + const value = useMemo( () => attributesToStyle( { shadow } ), [ shadow ] ); if ( ! isEnabled ) { return null; @@ -57,3 +55,23 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { /> ); } + +function styleToAttributes( style ) { + const shadowValue = style?.shadow; + const shadowSlug = shadowValue?.startsWith( 'var:preset|shadow|' ) + ? shadowValue.substring( 'var:preset|shadow|'.length ) + : undefined; + + return { + style: undefined, // TODO: check for style prop, and return it if it exists + shadow: shadowSlug, + }; +} + +function attributesToStyle( attributes ) { + return { + shadow: attributes.shadow + ? 'var:preset|shadow|' + attributes.shadow + : undefined, + }; +} From bdeca70b1f9b8519962142f3e214e057b11e77e1 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 11 Jan 2024 17:46:44 -0300 Subject: [PATCH 06/18] fix typo --- packages/block-editor/src/hooks/effects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index c10f3e1fe802f6..c45b4bb439a81a 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -48,7 +48,7 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { return ( Date: Thu, 11 Jan 2024 18:47:19 -0300 Subject: [PATCH 07/18] define support key in the supports hook --- packages/block-editor/src/hooks/supports.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 21dceafe3bb484..ce0119ca8d8849 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -6,8 +6,6 @@ import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import { EFFECTS_SUPPORT_KEYS } from './effects'; - const ALIGN_SUPPORT_KEY = 'align'; const ALIGN_WIDE_SUPPORT_KEY = 'alignWide'; const BORDER_SUPPORT_KEY = '__experimentalBorder'; @@ -63,6 +61,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [ WRITING_MODE_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY, ]; +const EFFECTS_SUPPORT_KEYS = [ 'shadow' ]; const SPACING_SUPPORT_KEY = 'spacing'; const styleSupportKeys = [ ...EFFECTS_SUPPORT_KEYS, From 67367d67e332792c1c50ff7b9648a3c243fc1d70 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 11 Jan 2024 18:48:43 -0300 Subject: [PATCH 08/18] remove internal dependencies block --- packages/block-editor/src/hooks/supports.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index ce0119ca8d8849..4e116494029bf1 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -3,9 +3,7 @@ */ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { Platform } from '@wordpress/element'; -/** - * Internal dependencies - */ + const ALIGN_SUPPORT_KEY = 'align'; const ALIGN_WIDE_SUPPORT_KEY = 'alignWide'; const BORDER_SUPPORT_KEY = '__experimentalBorder'; From 98538388babe789f5e1462d7e6bfb55b93c0e670 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 18 Jan 2024 11:59:58 -0300 Subject: [PATCH 09/18] remove effects panel from multi-selection inspector --- packages/block-editor/src/components/block-inspector/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 18b800b7874ad4..afdda89b6739ac 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -140,10 +140,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { group="border" label={ __( 'Border' ) } /> - ) } From 6109148b47b4a71a6f48c30e2f663f4ed0a235e4 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 18 Jan 2024 12:56:08 -0300 Subject: [PATCH 10/18] read/write shadow from style attribute --- packages/block-editor/src/hooks/effects.js | 27 +++++++++++----------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index c45b4bb439a81a..5b80859a4ef9f5 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -31,15 +31,16 @@ function EffectsInspectorControl( { children, resetAllFilter } ) { export function EffectsPanel( { clientId, setAttributes, settings } ) { const isEnabled = useHasEffectsPanel( settings ); - const onChange = ( newShadow ) => { - setAttributes( styleToAttributes( newShadow ) ); - }; const blockAttributes = useSelect( ( select ) => select( blockEditorStore ).getBlockAttributes( clientId ), [ clientId ] ); - const shadow = blockAttributes?.shadow; - const value = useMemo( () => attributesToStyle( { shadow } ), [ shadow ] ); + const shadow = blockAttributes?.style?.shadow; + const value = useMemo( () => attributesToStyle( shadow ), [ shadow ] ); + + const onChange = ( newShadow ) => { + setAttributes( styleToAttributes( newShadow, blockAttributes.style ) ); + }; if ( ! isEnabled ) { return null; @@ -56,22 +57,22 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { ); } -function styleToAttributes( style ) { - const shadowValue = style?.shadow; +function styleToAttributes( newStyle, oldStyle ) { + const shadowValue = newStyle?.shadow; const shadowSlug = shadowValue?.startsWith( 'var:preset|shadow|' ) ? shadowValue.substring( 'var:preset|shadow|'.length ) : undefined; return { - style: undefined, // TODO: check for style prop, and return it if it exists - shadow: shadowSlug, + style: { + ...oldStyle, + shadow: shadowSlug, + }, }; } -function attributesToStyle( attributes ) { +function attributesToStyle( shadow ) { return { - shadow: attributes.shadow - ? 'var:preset|shadow|' + attributes.shadow - : undefined, + shadow: shadow ? 'var:preset|shadow|' + shadow : undefined, }; } From 6601478519bd5514b30242b467c92df126e046d8 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Thu, 18 Jan 2024 14:35:17 -0300 Subject: [PATCH 11/18] make sure path and value computed correctly --- packages/block-editor/src/hooks/effects.js | 36 +++++++--------------- 1 file changed, 11 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index 5b80859a4ef9f5..3394685d59021f 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -1,9 +1,9 @@ /** * WordPress dependencies */ -import { useMemo } from '@wordpress/element'; import { hasBlockSupport } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ @@ -28,7 +28,6 @@ function EffectsInspectorControl( { children, resetAllFilter } ) { ); } - export function EffectsPanel( { clientId, setAttributes, settings } ) { const isEnabled = useHasEffectsPanel( settings ); const blockAttributes = useSelect( @@ -36,10 +35,17 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { [ clientId ] ); const shadow = blockAttributes?.style?.shadow; - const value = useMemo( () => attributesToStyle( shadow ), [ shadow ] ); + const value = useMemo( + () => ( { + shadow, + } ), + [ shadow ] + ); - const onChange = ( newShadow ) => { - setAttributes( styleToAttributes( newShadow, blockAttributes.style ) ); + const onChange = ( newValue ) => { + setAttributes( { + style: { ...blockAttributes.style, shadow: newValue.shadow }, + } ); }; if ( ! isEnabled ) { @@ -56,23 +62,3 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { /> ); } - -function styleToAttributes( newStyle, oldStyle ) { - const shadowValue = newStyle?.shadow; - const shadowSlug = shadowValue?.startsWith( 'var:preset|shadow|' ) - ? shadowValue.substring( 'var:preset|shadow|'.length ) - : undefined; - - return { - style: { - ...oldStyle, - shadow: shadowSlug, - }, - }; -} - -function attributesToStyle( shadow ) { - return { - shadow: shadow ? 'var:preset|shadow|' + shadow : undefined, - }; -} From 07a120c0ce73b76db5f8c14f76786e7fcbd4847e Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Fri, 19 Jan 2024 15:27:19 +0530 Subject: [PATCH 12/18] fix shadow being applied to block stead of inner element for button --- packages/block-editor/src/hooks/index.js | 1 + .../src/hooks/use-shadow-props.js | 37 +++++++++++++++++++ packages/block-editor/src/index.js | 2 + packages/block-library/src/button/edit.js | 3 ++ packages/block-library/src/button/save.js | 3 ++ 5 files changed, 46 insertions(+) create mode 100644 packages/block-editor/src/hooks/use-shadow-props.js diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index f17c0a22166e4e..cb0ca4e2ff3e58 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -68,6 +68,7 @@ createBlockSaveFilter( [ export { useCustomSides } from './dimensions'; export { useLayoutClasses, useLayoutStyles } from './layout'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; +export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { getTypographyClassesAndStyles } from './use-typography-props'; diff --git a/packages/block-editor/src/hooks/use-shadow-props.js b/packages/block-editor/src/hooks/use-shadow-props.js new file mode 100644 index 00000000000000..fdc601366245c9 --- /dev/null +++ b/packages/block-editor/src/hooks/use-shadow-props.js @@ -0,0 +1,37 @@ +/** + * Internal dependencies + */ +import { getInlineStyles } from './style'; + +// This utility is intended to assist where the serialization of the shadow +// block support is being skipped for a block but the shadow related CSS classes +// & styles still need to be generated so they can be applied to inner elements. + +/** + * Provides the CSS class names and inline styles for a block's shadow support + * attributes. + * + * @param {Object} attributes Block attributes. + * @return {Object} Shadow block support derived CSS classes & styles. + */ +export function getShadowClassesAndStyles( attributes ) { + const shadow = attributes.style?.shadow || ''; + + return { + className: undefined, + style: getInlineStyles( { shadow } ), + }; +} + +/** + * Derives the shadow related props for a block from its shadow block support + * attributes. + * + * @param {Object} attributes Block attributes. + * + * @return {Object} ClassName & style props from shadow block support. + */ +export function useShadowProps( attributes ) { + const shadowProps = getShadowClassesAndStyles( attributes ); + return shadowProps; +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 1dbc4501e92180..83475b9358723e 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -11,6 +11,8 @@ export { useCustomSides as __experimentalUseCustomSides, getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, getGapCSSValue as __experimentalGetGapCSSValue, + getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles, + useShadowProps as __experimentalUseShadowProps, useCachedTruthy, } from './hooks'; export * from './components'; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index b46e145d760ad5..a0994ce3f84b12 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -32,6 +32,7 @@ import { __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, __experimentalGetSpacingClassesAndStyles as useSpacingProps, + __experimentalUseShadowProps as useShadowProps, __experimentalLinkControl as LinkControl, __experimentalGetElementClassName, store as blockEditorStore, @@ -184,6 +185,7 @@ function ButtonEdit( props ) { const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); const spacingProps = useSpacingProps( attributes ); + const shadowProps = useShadowProps( attributes ); const ref = useRef(); const richTextRef = useRef(); const blockProps = useBlockProps( { @@ -266,6 +268,7 @@ function ButtonEdit( props ) { ...borderProps.style, ...colorProps.style, ...spacingProps.style, + ...shadowProps.style, } } onSplit={ ( value ) => createBlock( 'core/button', { diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index e12936e8c92457..ba0fbd45f083c9 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -12,6 +12,7 @@ import { __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, __experimentalGetElementClassName, } from '@wordpress/block-editor'; @@ -40,6 +41,7 @@ export default function save( { attributes, className } ) { const borderProps = getBorderClassesAndStyles( attributes ); const colorProps = getColorClassesAndStyles( attributes ); const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, @@ -56,6 +58,7 @@ export default function save( { attributes, className } ) { ...borderProps.style, ...colorProps.style, ...spacingProps.style, + ...shadowProps.style, }; // The use of a `title` attribute here is soft-deprecated, but still applied From f03dddaf27ab8cf65cdb59aeb32adbf2a7e7c5d8 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 22 Jan 2024 17:49:06 +0530 Subject: [PATCH 13/18] revert generation of class names for shadows --- lib/block-supports/shadow.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 4 +--- .../src/components/global-styles/effects-panel.js | 2 +- packages/style-engine/class-wp-style-engine.php | 4 ---- 4 files changed, 3 insertions(+), 9 deletions(-) diff --git a/lib/block-supports/shadow.php b/lib/block-supports/shadow.php index 01ef1136cbe717..4a28c98b79325d 100644 --- a/lib/block-supports/shadow.php +++ b/lib/block-supports/shadow.php @@ -58,7 +58,7 @@ function gutenberg_apply_shadow_support( $block_type, $block_attributes ) { $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow; $attributes = array(); - $styles = gutenberg_style_engine_get_styles( $shadow_block_styles, array( 'convert_vars_to_classnames' => true ) ); + $styles = gutenberg_style_engine_get_styles( $shadow_block_styles ); if ( ! empty( $styles['css'] ) ) { $attributes['style'] = $styles['css']; diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 9e16444e557a47..f4266a7ef66dd5 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -186,9 +186,7 @@ class WP_Theme_JSON_Gutenberg { 'use_default_names' => false, 'value_key' => 'shadow', 'css_vars' => '--wp--preset--shadow--$slug', - 'classes' => array( - '.has-$slug-shadow' => 'box-shadow', - ), + 'classes' => array(), 'properties' => array( 'box-shadow' ), ), ); diff --git a/packages/block-editor/src/components/global-styles/effects-panel.js b/packages/block-editor/src/components/global-styles/effects-panel.js index 20cf479fac1850..94c1d119c354c9 100644 --- a/packages/block-editor/src/components/global-styles/effects-panel.js +++ b/packages/block-editor/src/components/global-styles/effects-panel.js @@ -88,7 +88,7 @@ export default function EffectsPanel( { : []; const setShadow = ( newValue ) => { const slug = mergedShadowPresets?.find( - ( { shadow: s } ) => s === newValue + ( { shadow: shadowName } ) => shadowName === newValue )?.slug; onChange( diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 7a26a7634d9c8b..f0ecb9f9038065 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -182,10 +182,6 @@ final class WP_Style_Engine { 'css_vars' => array( 'shadow' => '--wp--preset--shadow--$slug', ), - 'classnames' => array( - 'has-shadow' => true, - 'has-$slug-shadow' => 'shadow', - ), ), ), 'dimensions' => array( From f989659f7b0aceac2e7f68c5796cb155dd88ba96 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 22 Jan 2024 18:04:24 +0530 Subject: [PATCH 14/18] revert support for shadow atribute. --- lib/block-supports/shadow.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/shadow.php b/lib/block-supports/shadow.php index 4a28c98b79325d..87258930faf10e 100644 --- a/lib/block-supports/shadow.php +++ b/lib/block-supports/shadow.php @@ -53,9 +53,8 @@ function gutenberg_apply_shadow_support( $block_type, $block_attributes ) { $shadow_block_styles = array(); - $preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null; - $custom_shadow = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null; - $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow; + $custom_shadow = $block_attributes['style']['shadow'] ?? null; + $shadow_block_styles['shadow'] = $custom_shadow; $attributes = array(); $styles = gutenberg_style_engine_get_styles( $shadow_block_styles ); From 1694b853d76248aca1c4fa362bd0b4524ea9b927 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Mon, 22 Jan 2024 11:40:03 -0300 Subject: [PATCH 15/18] don't use useMemo --- packages/block-editor/src/hooks/effects.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index 3394685d59021f..24af533e85415f 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -3,7 +3,6 @@ */ import { hasBlockSupport } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ @@ -35,12 +34,7 @@ export function EffectsPanel( { clientId, setAttributes, settings } ) { [ clientId ] ); const shadow = blockAttributes?.style?.shadow; - const value = useMemo( - () => ( { - shadow, - } ), - [ shadow ] - ); + const value = { shadow }; const onChange = ( newValue ) => { setAttributes( { From 1b77f1d04b3edfd6a1baef40e284e44639e668b4 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 23 Jan 2024 18:02:44 +0530 Subject: [PATCH 16/18] skip serialization for shadow when the support is enabled --- packages/block-editor/src/hooks/effects.js | 3 ++- packages/block-editor/src/hooks/style.js | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/effects.js b/packages/block-editor/src/hooks/effects.js index 24af533e85415f..92d9a2310f1c40 100644 --- a/packages/block-editor/src/hooks/effects.js +++ b/packages/block-editor/src/hooks/effects.js @@ -12,7 +12,8 @@ import StylesEffectsPanel, { import { InspectorControls } from '../components'; import { store as blockEditorStore } from '../store'; -export const EFFECTS_SUPPORT_KEYS = [ 'shadow' ]; +export const SHADOW_SUPPORT_KEY = 'shadow'; +export const EFFECTS_SUPPORT_KEYS = [ SHADOW_SUPPORT_KEY ]; export function hasEffectsSupport( blockName ) { return EFFECTS_SUPPORT_KEYS.some( ( key ) => diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 484f44d2173c62..dec046f888a468 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -27,7 +27,11 @@ import { SPACING_SUPPORT_KEY, DimensionsPanel, } from './dimensions'; -import { EFFECTS_SUPPORT_KEYS, EffectsPanel } from './effects'; +import { + EFFECTS_SUPPORT_KEYS, + SHADOW_SUPPORT_KEY, + EffectsPanel, +} from './effects'; import { shouldSkipSerialization, useStyleOverride, @@ -112,6 +116,7 @@ const skipSerializationPathsEdit = { [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ SPACING_SUPPORT_KEY, ], + [ `${ SHADOW_SUPPORT_KEY }` ]: [ SHADOW_SUPPORT_KEY ], }; /** From 58a05adab129f5ff1315b2dc22cf62502a6a5bb0 Mon Sep 17 00:00:00 2001 From: Vicente Canales Date: Tue, 23 Jan 2024 14:51:16 -0300 Subject: [PATCH 17/18] add entry to components changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 950d902a9502f7..3c5d91a6b68249 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - `PaletteEdit` and `CircularOptionPicker`: improve unit tests ([#57809](https://github.com/WordPress/gutenberg/pull/57809)). - `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)). - `Tooltip` and `Button`: tidy up unit tests ([#57975](https://github.com/WordPress/gutenberg/pull/57975)). +- `SlotFill`: fix typo in use-slot-fills return docs ([#57654](https://github.com/WordPress/gutenberg/pull/57654)) ### Bug Fix From 8519221731cc826bb008bb16e0a97d840ae7ddcf Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Tue, 23 Jan 2024 19:05:59 +0000 Subject: [PATCH 18/18] Add shadow utils to native hooks file --- packages/block-editor/src/hooks/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 55ae7e19df7037..6e4c1c6a17ba54 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -28,6 +28,7 @@ createBlockSaveFilter( [ ] ); export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; +export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { useCachedTruthy } from './use-cached-truthy';