@wordpress/block-editor 8.0.7 → 8.0.11

package/build-module/utils/transform-styles/index.js

@@ -27,12 +27,11 @@ const transformStyles = function (styles) {
   return map(styles, _ref => {
     let {
       css,
-      baseURL,
-      __experimentalNoWrapper = false
+      baseURL
     } = _ref;
     const transforms = [];
 
-    if (wrapperClassName && !__experimentalNoWrapper) {
+    if (wrapperClassName) {
       transforms.push(wrap(wrapperClassName));
     }
 

package/build-module/utils/transform-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"names":["map","compose","traverse","urlRewrite","wrap","transformStyles","styles","wrapperClassName","css","baseURL","__experimentalNoWrapper","transforms","push","length"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,QAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,OAAOC,IAAP,MAAiB,mBAAjB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,eAAe,GAAG,UAAEC,MAAF,EAAqC;AAAA,MAA3BC,gBAA2B,uEAAR,EAAQ;AAC5D,SAAOP,GAAG,CACTM,MADS,EAET,QAAyD;AAAA,QAAvD;AAAEE,MAAAA,GAAF;AAAOC,MAAAA,OAAP;AAAgBC,MAAAA,uBAAuB,GAAG;AAA1C,KAAuD;AACxD,UAAMC,UAAU,GAAG,EAAnB;;AACA,QAAKJ,gBAAgB,IAAI,CAAEG,uBAA3B,EAAqD;AACpDC,MAAAA,UAAU,CAACC,IAAX,CAAiBR,IAAI,CAAEG,gBAAF,CAArB;AACA;;AACD,QAAKE,OAAL,EAAe;AACdE,MAAAA,UAAU,CAACC,IAAX,CAAiBT,UAAU,CAAEM,OAAF,CAA3B;AACA;;AACD,QAAKE,UAAU,CAACE,MAAhB,EAAyB;AACxB,aAAOX,QAAQ,CAAEM,GAAF,EAAOP,OAAO,CAAEU,UAAF,CAAd,CAAf;AACA;;AAED,WAAOH,GAAP;AACA,GAfQ,CAAV;AAiBA,CAlBD;;AAoBA,eAAeH,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { compose } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport traverse from './traverse';\nimport urlRewrite from './transforms/url-rewrite';\nimport wrap from './transforms/wrap';\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @param {Array}  styles           CSS rules.\n * @param {string} wrapperClassName Wrapper Class Name.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperClassName = '' ) => {\n\treturn map(\n\t\tstyles,\n\t\t( { css, baseURL, __experimentalNoWrapper = false } ) => {\n\t\t\tconst transforms = [];\n\t\t\tif ( wrapperClassName && ! __experimentalNoWrapper ) {\n\t\t\t\ttransforms.push( wrap( wrapperClassName ) );\n\t\t\t}\n\t\t\tif ( baseURL ) {\n\t\t\t\ttransforms.push( urlRewrite( baseURL ) );\n\t\t\t}\n\t\t\tif ( transforms.length ) {\n\t\t\t\treturn traverse( css, compose( transforms ) );\n\t\t\t}\n\n\t\t\treturn css;\n\t\t}\n\t);\n};\n\nexport default transformStyles;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"names":["map","compose","traverse","urlRewrite","wrap","transformStyles","styles","wrapperClassName","css","baseURL","transforms","push","length"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,QAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,OAAOC,IAAP,MAAiB,mBAAjB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,eAAe,GAAG,UAAEC,MAAF,EAAqC;AAAA,MAA3BC,gBAA2B,uEAAR,EAAQ;AAC5D,SAAOP,GAAG,CAAEM,MAAF,EAAU,QAAwB;AAAA,QAAtB;AAAEE,MAAAA,GAAF;AAAOC,MAAAA;AAAP,KAAsB;AAC3C,UAAMC,UAAU,GAAG,EAAnB;;AACA,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,UAAU,CAACC,IAAX,CAAiBP,IAAI,CAAEG,gBAAF,CAArB;AACA;;AACD,QAAKE,OAAL,EAAe;AACdC,MAAAA,UAAU,CAACC,IAAX,CAAiBR,UAAU,CAAEM,OAAF,CAA3B;AACA;;AACD,QAAKC,UAAU,CAACE,MAAhB,EAAyB;AACxB,aAAOV,QAAQ,CAAEM,GAAF,EAAOP,OAAO,CAAES,UAAF,CAAd,CAAf;AACA;;AAED,WAAOF,GAAP;AACA,GAbS,CAAV;AAcA,CAfD;;AAiBA,eAAeH,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { compose } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport traverse from './traverse';\nimport urlRewrite from './transforms/url-rewrite';\nimport wrap from './transforms/wrap';\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @param {Array}  styles           CSS rules.\n * @param {string} wrapperClassName Wrapper Class Name.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperClassName = '' ) => {\n\treturn map( styles, ( { css, baseURL } ) => {\n\t\tconst transforms = [];\n\t\tif ( wrapperClassName ) {\n\t\t\ttransforms.push( wrap( wrapperClassName ) );\n\t\t}\n\t\tif ( baseURL ) {\n\t\t\ttransforms.push( urlRewrite( baseURL ) );\n\t\t}\n\t\tif ( transforms.length ) {\n\t\t\treturn traverse( css, compose( transforms ) );\n\t\t}\n\n\t\treturn css;\n\t} );\n};\n\nexport default transformStyles;\n"]}

package/build-style/style-rtl.css

@@ -1698,8 +1698,9 @@
 }
 
 .components-border-style-control legend {
-  line-height: 1.2;
-  padding-bottom: 4px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+  padding: 0;
 }
 .components-border-style-control .components-border-style-control__buttons {
   display: inline-flex;
@@ -2110,7 +2111,10 @@
   align-items: flex-start;
   margin-left: 8px;
   white-space: pre-wrap;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info {
+  word-break: break-all;
 }
 .block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header {
   display: flex;

package/build-style/style.css

@@ -1698,8 +1698,9 @@
 }
 
 .components-border-style-control legend {
-  line-height: 1.2;
-  padding-bottom: 4px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+  padding: 0;
 }
 .components-border-style-control .components-border-style-control__buttons {
   display: inline-flex;
@@ -2110,7 +2111,10 @@
   align-items: flex-start;
   margin-right: 8px;
   white-space: pre-wrap;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info {
+  word-break: break-all;
 }
 .block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.0.7",
+	"version": "8.0.11",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/blob": "^3.2.2",
 		"@wordpress/block-serialization-default-parser": "^4.2.3",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.1",
+		"@wordpress/components": "^19.1.5",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/data": "^6.1.4",
 		"@wordpress/deprecated": "^3.2.3",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "49c7be0ff5dc493fc9e5a861e18273dd1f3fce8c"
+	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
 }

package/src/components/border-style-control/style.scss

@@ -1,7 +1,8 @@
 .components-border-style-control {
 	legend {
-		line-height: 1.2;
-		padding-bottom: $grid-unit-05;
+		line-height: 1.4;
+		margin-bottom: $grid-unit-10;
+		padding: 0;
 	}
 
 	.components-border-style-control__buttons {

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -105,6 +105,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               style={
                 Object {
                   "background": "#f00",
+                  "color": "#000",
                 }
               }
             >

package/src/components/colors/with-colors.js

@@ -45,14 +45,19 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			const { palette: colorPerOrigin } = useSetting( 'color' ) || {};
+			// Some color settings have a special handling for deprecated flags in `useSetting`,
+			// so we can't unwrap them by doing const { ... } = useSetting('color')
+			// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
+			const userPalette = useSetting( 'color.palette.custom' );
+			const themePalette = useSetting( 'color.palette.theme' );
+			const defaultPalette = useSetting( 'color.palette.default' );
 			const allColors = useMemo(
 				() => [
-					...( colorPerOrigin?.custom || [] ),
-					...( colorPerOrigin?.theme || [] ),
-					...( colorPerOrigin?.default || [] ),
+					...( userPalette || [] ),
+					...( themePalette || [] ),
+					...( defaultPalette || [] ),
 				],
-				[ colorPerOrigin ]
+				[ userPalette, themePalette, defaultPalette ]
 			);
 			return <WrappedComponent { ...props } colors={ allColors } />;
 		},

package/src/components/colors-gradients/control.js

@@ -36,6 +36,7 @@ function ColorGradientControlInner( {
 	disableCustomColors,
 	disableCustomGradients,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	className,
 	label,
 	onColorChange,
@@ -109,6 +110,9 @@ function ColorGradientControlInner( {
 							__experimentalHasMultipleOrigins={
 								__experimentalHasMultipleOrigins
 							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							clearable={ clearable }
 							enableAlpha={ enableAlpha }
 						/>
@@ -128,6 +132,9 @@ function ColorGradientControlInner( {
 							__experimentalHasMultipleOrigins={
 								__experimentalHasMultipleOrigins
 							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							clearable={ clearable }
 						/>
 					) }

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -93,6 +93,7 @@ export const PanelColorGradientSettingsInner = ( {
 	title,
 	showTitle = true,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 	...props
 } ) => {
@@ -145,6 +146,7 @@ export const PanelColorGradientSettingsInner = ( {
 						disableCustomColors,
 						disableCustomGradients,
 						__experimentalHasMultipleOrigins,
+						__experimentalIsRenderedInSidebar,
 						enableAlpha,
 						...setting,
 					} }

package/src/components/gradients/use-gradient.js

@@ -59,13 +59,15 @@ export function getGradientSlugByValue( gradients, value ) {
 	return gradient && gradient.slug;
 }
 
+const EMPTY_OBJECT = {};
+
 export function __experimentalUseGradient( {
 	gradientAttribute = 'gradient',
 	customGradientAttribute = 'customGradient',
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const { gradients: gradientsPerOrigin } = useSetting( 'color' ) || {};
+	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const allGradients = useMemo(
 		() => [
 			...( gradientsPerOrigin?.custom || [] ),

package/src/components/link-control/style.scss

@@ -197,12 +197,16 @@ $preview-image-height: 140px;
 		// of text, particular those with no spaces.
 		// See: https://github.com/WordPress/gutenberg/issues/33586#issuecomment-888921188
 		white-space: pre-wrap;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
+
+		.block-editor-link-control__search-item-info {
+			word-break: break-all;
+		}
 	}
 
 	&.is-preview .block-editor-link-control__search-item-header {
 		display: flex;
-		flex: 1; // fill available space.
+		flex: 1; // Fill available space.
 	}
 
 	&.is-error .block-editor-link-control__search-item-header {

package/src/hooks/border-color.js

@@ -92,6 +92,7 @@ export function BorderColorEdit( props ) {
 			onColorChange={ onChangeColor }
 			clearable={ false }
 			__experimentalHasMultipleOrigins
+			__experimentalIsRenderedInSidebar
 			{ ...colorGradientSettings }
 		/>
 	);

package/src/hooks/color-panel.js

@@ -61,6 +61,7 @@ export default function ColorPanel( {
 				settings={ settings }
 				showTitle={ showTitle }
 				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

package/src/hooks/color.js

@@ -32,6 +32,8 @@ import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
+const EMPTY_OBJECT = {};
+
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 	return (
@@ -216,35 +218,35 @@ function immutableSet( object, path, value ) {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const {
-		palette: solidsPerOrigin,
-		gradients: gradientsPerOrigin,
-		customGradient: areCustomGradientsEnabled,
-		custom: areCustomSolidsEnabled,
-		text: isTextEnabled,
-		background: isBackgroundEnabled,
-		link: isLinkEnabled,
-	} = useSetting( 'color' ) || {};
+	// Some color settings have a special handling for deprecated flags in `useSetting`,
+	// so we can't unwrap them by doing const { ... } = useSetting('color')
+	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
+	const userPalette = useSetting( 'color.palette.custom' );
+	const themePalette = useSetting( 'color.palette.theme' );
+	const defaultPalette = useSetting( 'color.palette.default' );
+	const allSolids = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
+	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const areCustomSolidsEnabled = useSetting( 'color.custom' );
+	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
+	const isBackgroundEnabled = useSetting( 'color.background' );
+	const isLinkEnabled = useSetting( 'color.link' );
+	const isTextEnabled = useSetting( 'color.text' );
 
 	const solidsEnabled =
-		areCustomSolidsEnabled ||
-		! solidsPerOrigin?.theme ||
-		solidsPerOrigin?.theme?.length > 0;
+		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
 
 	const gradientsEnabled =
 		areCustomGradientsEnabled ||
 		! gradientsPerOrigin?.theme ||
 		gradientsPerOrigin?.theme?.length > 0;
 
-	const allSolids = useMemo(
-		() => [
-			...( solidsPerOrigin?.custom || [] ),
-			...( solidsPerOrigin?.theme || [] ),
-			...( solidsPerOrigin?.default || [] ),
-		],
-		[ solidsPerOrigin ]
-	);
-
 	const allGradients = useMemo(
 		() => [
 			...( gradientsPerOrigin?.custom || [] ),
@@ -441,28 +443,34 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const { palette: solidsPerOrigin } = useSetting( 'color' ) || {};
+		const userPalette = useSetting( 'color.palette.custom' ) || [];
+		const themePalette = useSetting( 'color.palette.theme' ) || [];
+		const defaultPalette = useSetting( 'color.palette.default' ) || [];
 		const colors = useMemo(
 			() => [
-				...( solidsPerOrigin?.custom || [] ),
-				...( solidsPerOrigin?.theme || [] ),
-				...( solidsPerOrigin?.default || [] ),
+				...( userPalette || [] ),
+				...( themePalette || [] ),
+				...( defaultPalette || [] ),
 			],
-			[ solidsPerOrigin ]
+			[ userPalette, themePalette, defaultPalette ]
 		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}
+		const extraStyles = {};
 
-		const extraStyles = {
-			color: textColor
-				? getColorObjectByAttributeValues( colors, textColor )?.color
-				: undefined,
-			backgroundColor: backgroundColor
-				? getColorObjectByAttributeValues( colors, backgroundColor )
-						?.color
-				: undefined,
-		};
+		if ( textColor ) {
+			extraStyles.color = getColorObjectByAttributeValues(
+				colors,
+				textColor
+			)?.color;
+		}
+		if ( backgroundColor ) {
+			extraStyles.backgroundColor = getColorObjectByAttributeValues(
+				colors,
+				backgroundColor
+			)?.color;
+		}
 
 		let wrapperProps = props.wrapperProps;
 		wrapperProps = {

package/src/hooks/test/color.js

@@ -1,7 +1,19 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
+import BlockEditorProvider from '../../components/provider';
 import { cleanEmptyObject } from '../utils';
+import { withColorPaletteStyles } from '../color';
 
 describe( 'cleanEmptyObject', () => {
 	it( 'should remove nested keys', () => {
@@ -10,3 +22,100 @@ describe( 'cleanEmptyObject', () => {
 		);
 	} );
 } );
+
+describe( 'withColorPaletteStyles', () => {
+	const settings = {
+		__experimentalFeatures: {
+			color: {
+				palette: {
+					default: [
+						{
+							name: 'Pale pink',
+							slug: 'pale-pink',
+							color: '#f78da7',
+						},
+						{
+							name: 'Vivid green cyan',
+							slug: 'vivid-green-cyan',
+							color: '#00d084',
+						},
+					],
+				},
+			},
+		},
+	};
+
+	const EnhancedComponent = withColorPaletteStyles(
+		( { getStyleObj, wrapperProps } ) => (
+			<div>{ getStyleObj( wrapperProps.style ) }</div>
+		)
+	);
+
+	beforeAll( () => {
+		registerBlockType( 'core/test-block', {
+			save: () => undefined,
+			edit: () => undefined,
+			category: 'text',
+			title: 'test block',
+			supports: {
+				color: {
+					text: true,
+					background: true,
+				},
+			},
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/test-block' );
+	} );
+
+	it( 'should add color styles from attributes', () => {
+		const getStyleObj = jest.fn();
+
+		render(
+			<BlockEditorProvider settings={ settings } value={ [] }>
+				<EnhancedComponent
+					attributes={ {
+						backgroundColor: 'vivid-green-cyan',
+						textColor: 'pale-pink',
+					} }
+					name="core/test-block"
+					getStyleObj={ getStyleObj }
+				/>
+			</BlockEditorProvider>
+		);
+
+		expect( getStyleObj ).toHaveBeenLastCalledWith( {
+			color: '#f78da7',
+			backgroundColor: '#00d084',
+		} );
+	} );
+
+	it( 'should not add undefined style values', () => {
+		// This test ensures that undefined `color` and `backgroundColor` styles
+		// are not added to the styles object. An undefined `backgroundColor`
+		// style causes a React warning when gradients are used, as the gradient
+		// style currently uses the `background` shorthand syntax.
+		// See: https://github.com/WordPress/gutenberg/issues/36899.
+		const getStyleObj = jest.fn();
+
+		render(
+			<BlockEditorProvider settings={ settings } value={ [] }>
+				<EnhancedComponent
+					attributes={ {
+						backgroundColor: undefined,
+						textColor: undefined,
+					} }
+					name="core/test-block"
+					getStyleObj={ getStyleObj }
+				/>
+			</BlockEditorProvider>
+		);
+		// Check explictly for the object used in the call, because
+		// `toHaveBeenCalledWith` does not check for empty keys.
+		expect(
+			getStyleObj.mock.calls[ getStyleObj.mock.calls.length - 1 ][ 0 ]
+		).toStrictEqual( {} );
+	} );
+} );

package/src/hooks/use-color-props.js

@@ -73,6 +73,8 @@ export function getColorClassesAndStyles( attributes ) {
 	};
 }
 
+const EMPTY_OBJECT = {};
+
 /**
  * Determines the color related props for a block derived from its color block
  * support attributes.
@@ -87,15 +89,20 @@ export function getColorClassesAndStyles( attributes ) {
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	const { palette: solidsPerOrigin, gradients: gradientsPerOrigin } =
-		useSetting( 'color' ) || {};
+	// Some color settings have a special handling for deprecated flags in `useSetting`,
+	// so we can't unwrap them by doing const { ... } = useSetting('color')
+	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
+	const userPalette = useSetting( 'color.palette.custom' ) || [];
+	const themePalette = useSetting( 'color.palette.theme' ) || [];
+	const defaultPalette = useSetting( 'color.palette.default' ) || [];
+	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const colors = useMemo(
 		() => [
-			...( solidsPerOrigin?.custom || [] ),
-			...( solidsPerOrigin?.theme || [] ),
-			...( solidsPerOrigin?.default || [] ),
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
 		],
-		[ solidsPerOrigin ]
+		[ userPalette, themePalette, defaultPalette ]
 	);
 	const gradients = useMemo(
 		() => [

package/src/store/reducer.js

@@ -14,7 +14,6 @@ import {
 	isEmpty,
 	identity,
 	omitBy,
-	pickBy,
 } from 'lodash';
 
 /**
@@ -122,48 +121,6 @@ function getFlattenedBlockAttributes( blocks ) {
 	return flattenBlocks( blocks, ( block ) => block.attributes );
 }
 
-/**
- * Given a block order map object, returns *all* of the block client IDs that are
- * a descendant of the given root client ID.
- *
- * Calling this with `rootClientId` set to `''` results in a list of client IDs
- * that are in the post. That is, it excludes blocks like fetched reusable
- * blocks which are stored into state but not visible. It also excludes
- * InnerBlocks controllers, like template parts.
- *
- * It is important to exclude the full inner block controller and not just the
- * inner blocks because in many cases, we need to persist the previous value of
- * an inner block controller. To do so, it must be excluded from the list of
- * client IDs which are considered to be part of the top-level entity.
- *
- * @param {Object}  blocksOrder           Object that maps block client IDs to a list of
- *                                        nested block client IDs.
- * @param {?string} rootClientId          The root client ID to search. Defaults to ''.
- * @param {?Object} controlledInnerBlocks The InnerBlocks controller state.
- *
- * @return {Array} List of descendant client IDs.
- */
-function getNestedBlockClientIds(
-	blocksOrder,
-	rootClientId = '',
-	controlledInnerBlocks = {}
-) {
-	return reduce(
-		blocksOrder[ rootClientId ],
-		( result, clientId ) => {
-			if ( !! controlledInnerBlocks[ clientId ] ) {
-				return result;
-			}
-			return [
-				...result,
-				clientId,
-				...getNestedBlockClientIds( blocksOrder, clientId ),
-			];
-		},
-		[]
-	);
-}
-
 /**
  * Returns an object against which it is safe to perform mutating operations,
  * given the original object and its current working copy.
@@ -369,9 +326,14 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...omit(
 						newState.tree,
 						action.replacedClientIds.concat(
-							action.replacedClientIds.map(
-								( clientId ) => 'controlled||' + clientId
-							)
+							// Controlled inner blocks are only removed
+							// if the block doesn't move to another position
+							// otherwise their content will be lost.
+							action.replacedClientIds
+								.filter( ( clientId ) => ! subTree[ clientId ] )
+								.map(
+									( clientId ) => 'controlled||' + clientId
+								)
 						)
 					),
 					...subTree,
@@ -637,70 +599,17 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
  */
 const withBlockReset = ( reducer ) => ( state, action ) => {
 	if ( action.type === 'RESET_BLOCKS' ) {
-		/**
-		 * A list of client IDs associated with the top level entity (like a
-		 * post or template). It excludes the client IDs of blocks associated
-		 * with other entities, like inner block controllers or reusable blocks.
-		 */
-		const visibleClientIds = getNestedBlockClientIds(
-			state?.order ?? {},
-			'',
-			state?.controlledInnerBlocks ?? {}
-		);
-
-		// pickBy returns only the truthy values from controlledInnerBlocks
-		const controlledInnerBlocks = Object.keys(
-			pickBy( state?.controlledInnerBlocks ?? {} )
-		);
-
-		/**
-		 * Each update operation consists of a few parts:
-		 * 1. First, the client IDs associated with the top level entity are
-		 *    removed from the existing state key, leaving in place controlled
-		 *    blocks (like reusable blocks and inner block controllers).
-		 * 2. Second, the blocks from the reset action are used to calculate the
-		 *    individual state keys. This will re-populate the clientIDs which
-		 *    were removed in step 1.
-		 * 3. In some cases, we remove the recalculated inner block controllers,
-		 *    letting their old values persist. We need to do this because the
-		 *    reset block action from a top-level entity is not aware of any
-		 *    inner blocks inside InnerBlock controllers. So if the new values
-		 *    were used, it would not take into account the existing InnerBlocks
-		 *    which already exist in the state for inner block controllers. For
-		 *    example, `attributes` uses the newly computed value for controllers
-		 *    since attributes are stored in the top-level entity. But `order`
-		 *    uses the previous value for the controllers since the new value
-		 *    does not include the order of controlled inner blocks. So if the
-		 *    new value was used, template parts would disappear from the editor
-		 *    whenever you try to undo a change in the top level entity.
-		 */
 		const newState = {
 			...state,
-			byClientId: {
-				...omit( state?.byClientId, visibleClientIds ),
-				...getFlattenedBlocksWithoutAttributes( action.blocks ),
-			},
-			attributes: {
-				...omit( state?.attributes, visibleClientIds ),
-				...getFlattenedBlockAttributes( action.blocks ),
-			},
-			order: {
-				...omit( state?.order, visibleClientIds ),
-				...omit(
-					mapBlockOrder( action.blocks ),
-					controlledInnerBlocks
-				),
-			},
-			parents: {
-				...omit( state?.parents, visibleClientIds ),
-				...mapBlockParents( action.blocks ),
-			},
-			controlledInnerBlocks: state?.controlledInnerBlocks || {},
+			byClientId: getFlattenedBlocksWithoutAttributes( action.blocks ),
+			attributes: getFlattenedBlockAttributes( action.blocks ),
+			order: mapBlockOrder( action.blocks ),
+			parents: mapBlockParents( action.blocks ),
+			controlledInnerBlocks: {},
 		};
 
 		const subTree = buildBlockTree( newState, action.blocks );
 		newState.tree = {
-			...omit( state?.tree, visibleClientIds ),
 			...subTree,
 			// Root
 			'': {