Basic functionality to create a new variation

lib/class-wp-theme-json-gutenberg.php

@@ -2165,9 +2165,16 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 			$variation_selectors = array();
 			if ( isset( $node['variations'] ) ) {
 				foreach ( $node['variations'] as $variation => $node ) {
+					// There might not be a selector if this is a newly created variation, so we need to provide one.
+					$variation_selector = '';
+					if ( isset( $selectors[ $name ]['styleVariations'][ $variation ] ) ) {
+						$variation_selector = $selectors[ $name ]['styleVariations'][ $variation ];
+					} elseif ( isset( $selectors[ $name ]['selector'] ) ) {
+						$variation_selector = '.is-style-' . $variation . '.is-style-' . $variation . $selectors[ $name ]['selector'];
+					}
 					$variation_selectors[] = array(
 						'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
-						'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
+						'selector' => $variation_selector,
 					);
 				}
 			}

packages/edit-site/src/components/global-styles/ui.js

@@ -46,6 +46,32 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
+function BlockStyleVariationsScreens( { name } ) {
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	if ( ! blockStyleVariations?.length ) {
+		return null;
+	}
+
+	return blockStyleVariations.map( ( variation ) => (
+		<ContextScreens
+			key={ variation.name + name }
+			name={ name }
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( name ) +
+				'/variations/' +
+				encodeURIComponent( variation.name )
+			}
+		/>
+	) );
+}
+
 function ContextScreens( { name, parentMenu = '' } ) {
 	const hasVariationPath = parentMenu.search( 'variations' );
 	const variationPath =
@@ -212,9 +238,7 @@ function GlobalStylesStyleBook( { onClose } ) {
 
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
-	const getBlockStyles = useSelect( ( select ) => {
-		return select( blocksStore ).getBlockStyles;
-	}, [] );
+
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -251,23 +275,13 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 				/>
 			) ) }
 
-			{ blocks.map( ( block ) => {
-				const blockStyleVariations = getBlockStyles( block.name );
-				if ( ! blockStyleVariations?.length ) {
-					return null;
-				}
-				return blockStyleVariations.map( ( variation ) => (
-					<ContextScreens
-						key={ variation.name + block.name }
+			{ blocks.map( ( block, index ) => {
+				return (
+					<BlockStyleVariationsScreens
+						key={ 'screens-block-styles-' + block.name + index }
 						name={ block.name }
-						parentMenu={
-							'/blocks/' +
-							encodeURIComponent( block.name ) +
-							'/variations/' +
-							encodeURIComponent( variation.name )
-						}
 					/>
-				) );
+				);
 			} ) }
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />

packages/edit-site/src/components/global-styles/variations-panel.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore, registerBlockStyle } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,6 +16,10 @@ function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );
 }
 
+function getUserBlockStyles( blockStyles ) {
+	return blockStyles?.filter( ( style ) => style.source === 'user' );
+}
+
 export function useHasVariationsPanel( name, parentMenu = '' ) {
 	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
 	const blockStyles = useSelect(
@@ -25,7 +30,11 @@ export function useHasVariationsPanel( name, parentMenu = '' ) {
 		[ name ]
 	);
 	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+	const userBlockStyles = getUserBlockStyles( blockStyles );
+	return (
+		( !! coreBlockStyles?.length || !! userBlockStyles?.length ) &&
+		! isInsideVariationsPanel
+	);
 }
 
 export function VariationsPanel( { name } ) {
@@ -36,11 +45,29 @@ export function VariationsPanel( { name } ) {
 		},
 		[ name ]
 	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
 
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	const userBlockStyles = getUserBlockStyles( blockStyles );
+	const allBlockStyles = [ ...coreBlockStyles, ...userBlockStyles ];
 	return (
 		<>
-			{ coreBlockStyles.map( ( style, index ) => (
+			<p>
+				Manage and create style variations, saved block appearance
+				presets
+			</p>
+			<Button
+				variant="primary"
+				onClick={ () => {
+					registerBlockStyle( name, {
+						name: `custom-style-${ userBlockStyles?.length + 1 }`,
+						label: `Custom Style ${ userBlockStyles?.length + 1 }`,
+						source: 'user',
+					} );
+				} }
+			>
+				Create new style variation
+			</Button>
+			{ allBlockStyles.map( ( style, index ) => (
 				<NavigationButtonAsItem
 					key={ index }
 					icon={ '+' }