diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index b1489167f2dc75..64f49574b6b03b 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -102,12 +102,16 @@ function ScreenBlock( { name, variation } ) { } ); const [ userSettings ] = useGlobalSetting( '', name, 'user' ); const [ rawSettings, setSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); + const settingsForBlockElement = useSettingsForBlockElement( + rawSettings, + name + ); const blockType = getBlockType( name ); // Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied. + let disableBlockGap = false; if ( - settings?.spacing?.blockGap && + settingsForBlockElement?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && ( blockType?.supports?.spacing?.__experimentalSkipSerialization === true || @@ -115,7 +119,7 @@ function ScreenBlock( { name, variation } ) { ( spacingType ) => spacingType === 'blockGap' ) ) ) { - settings.spacing.blockGap = false; + disableBlockGap = true; } // Only allow `aspectRatio` support if the block is not the grouping block. @@ -124,10 +128,25 @@ function ScreenBlock( { name, variation } ) { // for all three at once. Until there is the ability to set a different aspect // ratio for each variation, we disable the aspect ratio controls for the // grouping block in global styles. - if ( settings?.dimensions?.aspectRatio && name === 'core/group' ) { - settings.dimensions.aspectRatio = false; + let disableAspectRatio = false; + if ( + settingsForBlockElement?.dimensions?.aspectRatio && + name === 'core/group' + ) { + disableAspectRatio = true; } + const settings = useMemo( () => { + const updatedSettings = structuredClone( settingsForBlockElement ); + if ( disableBlockGap ) { + updatedSettings.spacing.blockGap = false; + } + if ( disableAspectRatio ) { + updatedSettings.dimensions.aspectRatio = false; + } + return updatedSettings; + }, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] ); + const blockVariations = useBlockVariations( name ); const hasBackgroundPanel = useHasBackgroundPanel( settings ); const hasTypographyPanel = useHasTypographyPanel( settings );