Client side

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { set, get, mapValues, mergeWith } from 'lodash';
+import { set, get, mapValues, mergeWith, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { default as getGlobalStyles } from './global-styles-renderer';
+import { PRESET_CATEGORIES } from './utils';
 
 const EMPTY_CONTENT = '{}';
 
@@ -74,6 +75,30 @@ export default function GlobalStylesProvider( {
 			mergeTreesCustomizer
 		);
 
+		for ( const context in newMergedStyles ) {
+			const userSettings = get( newUserStyles, [ context, 'settings' ] );
+			const baseSettings = get( baseStyles, [ context, 'settings' ] );
+			if ( ! isEmpty( userSettings ) && ! isEmpty( baseSettings ) ) {
+				for ( const presetCategory in PRESET_CATEGORIES ) {
+					const { path } = PRESET_CATEGORIES[ presetCategory ];
+					const userPreset = get( userSettings, path );
+					const basePreset = get( baseSettings, path );
+					if ( ! isEmpty( userPreset ) && ! isEmpty( basePreset ) ) {
+						const inactivePreset = get(
+							newMergedStyles,
+							[ context, 'deactivatedSettings', ...path ],
+							[]
+						);
+						set(
+							newMergedStyles,
+							[ context, 'deactivatedSettings', ...path ],
+							[ ...inactivePreset, ...basePreset ]
+						);
+					}
+				}
+			}
+		}
+
 		return {
 			userStyles: newUserStyles,
 			mergedStyles: newMergedStyles,

packages/edit-site/src/components/editor/global-styles-renderer.js

@@ -69,13 +69,21 @@ export default ( blockData, tree ) => {
 	 *
 	 * @param {string} blockSelector
 	 * @param {Object} blockPresets
+	 * @param {Object} deactivatedPresets
 	 * @return {string} CSS declarations for the preset classes.
 	 */
-	const getBlockPresetClasses = ( blockSelector, blockPresets = {} ) => {
+	const getBlockPresetClasses = (
+		blockSelector,
+		blockPresets = {},
+		deactivatedPresets = {}
+	) => {
 		return reduce(
 			PRESET_CLASSES,
 			( declarations, { path, key, property }, classSuffix ) => {
-				const presets = get( blockPresets, path, [] );
+				const presets = [
+					...get( deactivatedPresets, path, [] ),
+					...get( blockPresets, path, [] ),
+				];
 				presets.forEach( ( preset ) => {
 					const slug = preset.slug;
 					const value = preset[ key ];
@@ -93,14 +101,21 @@ export default ( blockData, tree ) => {
 	 * Transform given preset tree into a set of style declarations.
 	 *
 	 * @param {Object} blockPresets
+	 * @param {Object} deactivatedPresets
 	 *
 	 * @return {Array} An array of style declarations.
 	 */
-	const getBlockPresetsDeclarations = ( blockPresets = {} ) => {
+	const getBlockPresetsDeclarations = (
+		blockPresets = {},
+		deactivatedPresets = {}
+	) => {
 		return reduce(
 			PRESET_CATEGORIES,
 			( declarations, { path, key }, category ) => {
-				const preset = get( blockPresets, path, [] );
+				const preset = [
+					...get( deactivatedPresets, path, [] ),
+					...get( blockPresets, path, [] ),
+				];
 				preset.forEach( ( value ) => {
 					declarations.push(
 						`--wp--preset--${ kebabCase( category ) }--${
@@ -159,7 +174,10 @@ export default ( blockData, tree ) => {
 				blockData[ context ].supports,
 				tree?.[ context ]?.styles
 			),
-			...getBlockPresetsDeclarations( tree?.[ context ]?.settings ),
+			...getBlockPresetsDeclarations(
+				tree?.[ context ]?.settings,
+				tree?.[ context ]?.deactivatedSettings
+			),
 			...getCustomDeclarations( tree?.[ context ]?.settings?.custom ),
 		];
 		if ( blockDeclarations.length > 0 ) {
@@ -170,7 +188,8 @@ export default ( blockData, tree ) => {
 
 		const presetClasses = getBlockPresetClasses(
 			blockSelector,
-			tree?.[ context ]?.settings
+			tree?.[ context ]?.settings,
+			tree?.[ context ]?.deactivatedSettings
 		);
 		if ( presetClasses ) {
 			styles.push( presetClasses );