Fix editor colors for themes not loading color palettes (#22356)

Co-authored-by: Ella van Durpe <[email protected]>

packages/block-editor/src/components/block-list/block.js

@@ -38,6 +38,30 @@ import { Block } from './block-wrapper';
 
 export const BlockListBlockContext = createContext();
 
+/**
+ * Merges wrapper props with special handling for classNames and styles.
+ *
+ * @param {Object} propsA
+ * @param {Object} propsB
+ *
+ * @return {Object} Merged props.
+ */
+function mergeWrapperProps( propsA, propsB ) {
+	const newProps = {
+		...propsA,
+		...propsB,
+	};
+
+	if ( propsA && propsB && propsA.className && propsB.className ) {
+		newProps.className = classnames( propsA.className, propsB.className );
+	}
+	if ( propsA && propsB && propsA.style && propsB.style ) {
+		newProps.style = { ...propsA.style, ...propsB.style };
+	}
+
+	return newProps;
+}
+
 function BlockListBlock( {
 	mode,
 	isFocusMode,
@@ -97,10 +121,10 @@ function BlockListBlock( {
 
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType.getEditWrapperProps ) {
-		wrapperProps = {
-			...wrapperProps,
-			...blockType.getEditWrapperProps( attributes ),
-		};
+		wrapperProps = mergeWrapperProps(
+			wrapperProps,
+			blockType.getEditWrapperProps( attributes )
+		);
 	}
 
 	const generatedClassName =

packages/block-editor/src/hooks/color.js

@@ -12,6 +12,7 @@ import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useRef, useEffect, Platform } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -334,6 +335,48 @@ export function ColorEdit( props ) {
 	);
 }
 
+/**
+ * This adds inline styles for color palette colors.
+ * Ideally, this is not needed and themes should load their palettes on the editor.
+ *
+ * @param  {Function} BlockListBlock Original component
+ * @return {Function}                Wrapped component
+ */
+export const withColorPaletteStyles = createHigherOrderComponent(
+	( BlockListBlock ) => ( props ) => {
+		const { name, attributes } = props;
+		const { backgroundColor, textColor } = attributes;
+		const colors = useSelect( ( select ) => {
+			return select( 'core/block-editor' ).getSettings().colors;
+		}, [] );
+
+		if ( ! hasColorSupport( name ) ) {
+			return <BlockListBlock { ...props } />;
+		}
+
+		const extraStyles = {
+			color: textColor
+				? getColorObjectByAttributeValues( colors, textColor )?.color
+				: undefined,
+			backgroundColor: backgroundColor
+				? getColorObjectByAttributeValues( colors, backgroundColor )
+						?.color
+				: undefined,
+		};
+
+		let wrapperProps = props.wrapperProps;
+		wrapperProps = {
+			...props.wrapperProps,
+			style: {
+				...extraStyles,
+				...props.wrapperProps?.style,
+			},
+		};
+
+		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	}
+);
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/color/addAttribute',
@@ -351,3 +394,9 @@ addFilter(
 	'core/color/addEditProps',
 	addEditProps
 );
+
+addFilter(
+	'editor.BlockListBlock',
+	'core/color/with-color-palette-styles',
+	withColorPaletteStyles
+);