Start getting the variation styles generated in the editor

This still needs to bring in the lowering of selector specificity for block styles on the JS side as well as fix the "root" variation styles not being generated like the frontend

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();
 	};

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';