Edit Site: Fix settings mutation in ScreenBlock (#67085)

Co-authored-by: tyxla <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

packages/edit-site/src/components/global-styles/screen-block.js

@@ -102,20 +102,24 @@ 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 ||
 			blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
 				( 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 );