@wordpress/edit-site 5.1.0 → 5.2.0

package/src/components/global-styles/ui.js

@@ -6,7 +6,9 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
-import { getBlockTypes } from '@wordpress/blocks';
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,6 +27,7 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
@@ -43,14 +46,67 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function ContextScreens( { name } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+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 =
+		hasVariationPath !== -1
+			? parentMenu
+					.substring( hasVariationPath )
+					.replace( '/', '.' )
+					.concat( '', '.' )
+			: '';
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+
+	const BlockStylesNavigationScreens = ( { blockStyles, blockName } ) => {
+		return blockStyles.map( ( style, index ) => (
+			<GlobalStylesNavigationScreen
+				key={ index }
+				path={ parentMenu + '/variations/' + style.name }
+			>
+				<ScreenVariation blockName={ blockName } style={ style } />
+			</GlobalStylesNavigationScreen>
+		) );
+	};
 
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } />
+				<ScreenTypography
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -78,7 +134,7 @@ function ContextScreens( { name } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } />
+				<ScreenColors name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -90,36 +146,58 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/background' }
 			>
-				<ScreenBackgroundColor name={ name } />
+				<ScreenBackgroundColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+				<ScreenTextColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } />
+				<ScreenLinkColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/heading' }
 			>
-				<ScreenHeadingColor name={ name } />
+				<ScreenHeadingColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor name={ name } />
+				<ScreenButtonColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } />
+				<ScreenBorder name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } />
+				<ScreenLayout name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
+
+			{ !! blockStyleVariations?.length && (
+				<BlockStylesNavigationScreens
+					blockStyles={ blockStyleVariations }
+					blockName={ name }
+				/>
+			) }
 		</>
 	);
 }
@@ -154,6 +232,7 @@ function GlobalStylesStyleBook( { onClose } ) {
 
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
+
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -186,9 +265,18 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 				<ContextScreens
 					key={ 'screens-block-' + block.name }
 					name={ block.name }
+					parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
 				/>
 			) ) }
 
+			{ blocks.map( ( block, index ) => {
+				return (
+					<BlockStyleVariationsScreens
+						key={ 'screens-block-styles-' + block.name + index }
+						name={ block.name }
+					/>
+				);
+			} ) }
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
+import { get, isEmpty, kebabCase, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
@@ -171,6 +172,29 @@ function flattenTree( input = {}, prefix, token ) {
 	return result;
 }
 
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ *
+ */
+function concatFeatureVariationSelectorString(
+	featureSelector,
+	styleVariationSelector
+) {
+	const featureSelectors = featureSelector.split( ',' );
+	const combinedSelectors = [];
+	featureSelectors.forEach( ( selector ) => {
+		combinedSelectors.push(
+			`${ styleVariationSelector.trim() }${ selector.trim() }`
+		);
+	} );
+	return combinedSelectors.join( ', ' );
+}
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -449,17 +473,19 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
-		pickBy( treeToPickFrom, ( value, key ) =>
-			[
-				'border',
-				'color',
-				'dimensions',
-				'spacing',
-				'typography',
-				'filter',
-				'outline',
-				'shadow',
-			].includes( key )
+		Object.fromEntries(
+			Object.entries( treeToPickFrom ?? {} ).filter( ( [ key ] ) =>
+				[
+					'border',
+					'color',
+					'dimensions',
+					'spacing',
+					'typography',
+					'filter',
+					'outline',
+					'shadow',
+				].includes( key )
+			)
 		);
 
 	// Top-level.
@@ -484,6 +510,16 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	Object.entries( tree.styles?.blocks ?? {} ).forEach(
 		( [ blockName, node ] ) => {
 			const blockStyles = pickStyleKeys( node );
+
+			if ( node?.variations ) {
+				const variations = {};
+				Object.keys( node.variations ).forEach( ( variation ) => {
+					variations[ variation ] = pickStyleKeys(
+						node.variations[ variation ]
+					);
+				} );
+				blockStyles.variations = variations;
+			}
 			if (
 				!! blockStyles &&
 				!! blockSelectors?.[ blockName ]?.selector
@@ -499,6 +535,8 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
+					styleVariationSelectors:
+						blockSelectors[ blockName ].styleVariationSelectors,
 				} );
 			}
 
@@ -647,6 +685,7 @@ export const toStyles = (
 			fallbackGapValue,
 			hasLayoutSupport,
 			featureSelectors,
+			styleVariationSelectors,
 		} ) => {
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
@@ -673,6 +712,69 @@ export const toStyles = (
 				);
 			}
 
+			if ( styleVariationSelectors ) {
+				Object.entries( styleVariationSelectors ).forEach(
+					( [ styleVariationName, styleVariationSelector ] ) => {
+						if ( styles?.variations?.[ styleVariationName ] ) {
+							// If the block uses any custom selectors for block support, add those first.
+							if ( featureSelectors ) {
+								Object.entries( featureSelectors ).forEach(
+									( [ featureName, featureSelector ] ) => {
+										if (
+											styles?.variations?.[
+												styleVariationName
+											]?.[ featureName ]
+										) {
+											const featureStyles = {
+												[ featureName ]:
+													styles.variations[
+														styleVariationName
+													][ featureName ],
+											};
+											const featureDeclarations =
+												getStylesDeclarations(
+													featureStyles
+												);
+											delete styles.variations[
+												styleVariationName
+											][ featureName ];
+
+											if (
+												!! featureDeclarations.length
+											) {
+												ruleset =
+													ruleset +
+													`${ concatFeatureVariationSelectorString(
+														featureSelector,
+														styleVariationSelector
+													) }{${ featureDeclarations.join(
+														';'
+													) } }`;
+											}
+										}
+									}
+								);
+							}
+							// Otherwise add regular selectors.
+							const styleVariationDeclarations =
+								getStylesDeclarations(
+									styles?.variations?.[ styleVariationName ],
+									styleVariationSelector,
+									useRootPaddingAlign,
+									tree
+								);
+							if ( !! styleVariationDeclarations.length ) {
+								ruleset =
+									ruleset +
+									`${ styleVariationSelector }{${ styleVariationDeclarations.join(
+										';'
+									) }}`;
+							}
+						}
+					}
+				);
+			}
+
 			const duotoneStyles = {};
 			if ( styles?.filter ) {
 				duotoneStyles.filter = styles.filter;
@@ -802,7 +904,7 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
-export const getBlockSelectors = ( blockTypes ) => {
+export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -815,6 +917,15 @@ export const getBlockSelectors = ( blockTypes ) => {
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 
+		const blockStyleVariations = getBlockStyles( name );
+		const styleVariationSelectors = {};
+		if ( blockStyleVariations?.length ) {
+			blockStyleVariations.forEach( ( variation ) => {
+				const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+				styleVariationSelectors[ variation.name ] =
+					styleVariationSelector;
+			} );
+		}
 		// For each block support feature add any custom selectors.
 		const featureSelectors = {};
 		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
@@ -840,6 +951,10 @@ export const getBlockSelectors = ( blockTypes ) => {
 			hasLayoutSupport,
 			name,
 			selector,
+			styleVariationSelectors: Object.keys( styleVariationSelectors )
+				.length
+				? styleVariationSelectors
+				: undefined,
 		};
 	} );
 
@@ -892,12 +1007,19 @@ export function useGlobalStylesOutput() {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
+	const getBlockStyles = useSelect( ( select ) => {
+		return select( blocksStore ).getBlockStyles;
+	}, [] );
+
 	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
 		mergedConfig = updateConfigWithSeparator( mergedConfig );
-		const blockSelectors = getBlockSelectors( getBlockTypes() );
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles
+		);
 		const customProperties = toCustomProperties(
 			mergedConfig,
 			blockSelectors
@@ -909,6 +1031,7 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		const stylesheets = [
 			{

package/src/components/global-styles/utils.js

@@ -90,11 +90,42 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
-	'elements.button.backgroundColor': 'background-color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',
-	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
 	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -333,3 +364,16 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ *
+ * @param {string} path The variation path in the Global Styles tree.
+ *
+ * @return {string} The variation class name.
+ */
+export function getVariationClassNameFromPath( path ) {
+	if ( ! path ) {
+		return '';
+	}
+	return `is-style-${ path.split( '.' )[ 1 ] }`;
+}

package/src/components/global-styles/variations-panel.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { NavigationButtonAsItem } from './navigation-button';
+import ContextMenu from './context-menu';
+
+function getCoreBlockStyles( blockStyles ) {
+	return blockStyles?.filter( ( style ) => style.source === 'block' );
+}
+
+export function useHasVariationsPanel( name, parentMenu = '' ) {
+	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+}
+
+export function VariationsPanel( { name } ) {
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ coreBlockStyles.map( ( style, index ) => {
+				if ( style?.isDefault ) {
+					return null;
+				}
+				return (
+					<NavigationButtonAsItem
+						key={ index }
+						path={
+							'/blocks/' +
+							encodeURIComponent( name ) +
+							'/variations/' +
+							encodeURIComponent( style.name )
+						}
+						aria-label={ style.label }
+					>
+						{ style.label }
+					</NavigationButtonAsItem>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
+
+export function VariationPanel( { blockName, styleName } ) {
+	return (
+		<ContextMenu
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( blockName ) +
+				'/variations/' +
+				encodeURIComponent( styleName )
+			}
+			name={ blockName }
+		/>
+	);
+}