Start getting the variation styles generated in the editor

WordPress · Feb 20, 2024 · 21dea51 · 21dea51
1 parent 4265034
commit 21dea51
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 193 deletions.
diff --git a/packages/block-editor/src/components/block-styles/use-styles-for-block.js b/packages/block-editor/src/components/block-styles/use-styles-for-block.js
@@ -15,6 +15,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { getActiveStyle, getRenderedStyles, replaceActiveStyle } from './utils';
 import { store as blockEditorStore } from '../../store';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 /**
  *
@@ -67,11 +68,13 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 			blockType,
 			styles: getBlockStyles( block.name ),
 			className: block.attributes.className || '',
+			attributes: block.attributes,
 		};
 	};
-	const { styles, block, blockType, className } = useSelect( selector, [
-		clientId,
-	] );
+	const { styles, block, blockType, className, attributes } = useSelect(
+		selector,
+		[ clientId ]
+	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const stylesToRender = getRenderedStyles( styles );
 	const activeStyle = getActiveStyle( stylesToRender, className );
@@ -83,8 +86,15 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 			activeStyle,
 			style
 		);
+
+		const newStyleAttribute = cleanEmptyObject( {
+			...attributes.style,
+			variation: style.name !== 'default' ? style.name : undefined,
+		} );
+
 		updateBlockAttributes( clientId, {
 			className: styleClassName,
+			style: newStyleAttribute,
 		} );
 		onSwitch();
 	};

diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
@@ -7,6 +7,8 @@ export {
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {
 	getLayoutStyles,
+	getBlockSelectors,
+	toStyles,
 	useGlobalStylesOutput,
 	useGlobalStylesOutputWithConfig,
 } from './use-global-styles-output';