@wordpress/edit-site 5.1.0 → 5.2.0

package/src/components/global-styles/screen-colors.js

@@ -21,14 +21,29 @@ import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function BackgroundColorItem( { name, parentMenu } ) {
+function variationPathToURL( variationPath ) {
+	if ( ! variationPath ) {
+		return '';
+	}
+	// Replace the dots with slashes, add slash at the beginning and remove the last slash.
+	return '/' + variationPath.replace( /\./g, '/' ).slice( 0, -1 );
+}
+
+function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport =
 		supports.includes( 'backgroundColor' ) ||
 		supports.includes( 'background' );
-	const [ backgroundColor ] = useStyle( 'color.background', name );
-	const [ gradientValue ] = useStyle( 'color.gradient', name );
+	const [ backgroundColor ] = useStyle(
+		variationPath + 'color.background',
+		name
+	);
+	const [ gradientValue ] = useStyle(
+		variationPath + 'color.gradient',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -36,7 +51,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/background' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/background'
+			}
 			aria-label={ __( 'Colors background styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -54,10 +73,10 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	);
 }
 
-function TextColorItem( { name, parentMenu } ) {
+function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'color.text', name );
+	const [ color ] = useStyle( variationPath + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -65,7 +84,11 @@ function TextColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/text' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/text'
+			}
 			aria-label={ __( 'Colors text styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -83,11 +106,17 @@ function TextColorItem( { name, parentMenu } ) {
 	);
 }
 
-function LinkColorItem( { name, parentMenu } ) {
+function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useStyle( 'elements.link.color.text', name );
-	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.link.color.text',
+		name
+	);
+	const [ colorHover ] = useStyle(
+		variationPath + 'elements.link.:hover.color.text',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -95,7 +124,11 @@ function LinkColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/link' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/link'
+			}
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -115,11 +148,17 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
-function HeadingColorItem( { name, parentMenu } ) {
+function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'elements.heading.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.heading.color.text',
+		name
+	);
+	const [ bgColor ] = useStyle(
+		variationPath + 'elements.heading.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -127,7 +166,11 @@ function HeadingColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/heading' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/heading'
+			}
 			aria-label={ __( 'Colors heading styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -145,18 +188,30 @@ function HeadingColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ButtonColorItem( { name, parentMenu } ) {
+function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useStyle( 'elements.button.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.button.color.text',
+		name
+	);
+	const [ bgColor ] = useStyle(
+		variationPath + 'elements.button.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+		<NavigationButtonAsItem
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/button'
+			}
+		>
 			<HStack justify="flex-start">
 				<ZStack isLayered={ false } offset={ -8 }>
 					<ColorIndicatorWrapper expanded={ false }>
@@ -174,9 +229,10 @@ function ButtonColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ScreenColors( { name } ) {
+function ScreenColors( { name, variationPath = '' } ) {
 	const parentMenu =
 		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 
 	return (
 		<>
@@ -187,7 +243,7 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
@@ -199,22 +255,27 @@ function ScreenColors( { name } ) {
 							<BackgroundColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<TextColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<LinkColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 						</ItemGroup>
 					</VStack>

package/src/components/global-styles/screen-heading-color.js

@@ -21,7 +21,7 @@ import {
 	useGradientsPerOrigin,
 } from './hooks';
 
-function ScreenHeadingColor( { name } ) {
+function ScreenHeadingColor( { name, variationPath = '' } ) {
 	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -52,30 +52,30 @@ function ScreenHeadingColor( { name } ) {
 		( gradients.length > 0 || areCustomGradientsEnabled );
 
 	const [ color, setColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+		variationPath + 'elements.' + selectedLevel + '.color.text',
 		name
 	);
 	const [ userColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+		variationPath + 'elements.' + selectedLevel + '.color.text',
 		name,
 		'user'
 	);
 
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+		variationPath + 'elements.' + selectedLevel + '.color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+		variationPath + 'elements.' + selectedLevel + '.color.background',
 		name,
 		'user'
 	);
 	const [ gradient, setGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+		variationPath + 'elements.' + selectedLevel + '.color.gradient',
 		name
 	);
 	const [ userGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+		variationPath + 'elements.' + selectedLevel + '.color.gradient',
 		name,
 		'user'
 	);

package/src/components/global-styles/screen-layout.js

@@ -9,15 +9,21 @@ import { __ } from '@wordpress/i18n';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function ScreenLayout( { name } ) {
+function ScreenLayout( { name, variationPath = '' } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel name={ name } />
-			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasDimensionsPanel && (
+				<DimensionsPanel
+					name={ name }
+					variationPath={ variationPath }
+				/>
+			) }
 		</>
 	);
 }

package/src/components/global-styles/screen-link-color.js

@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenLinkColor( { name } ) {
+function ScreenLinkColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -32,20 +32,32 @@ function ScreenLinkColor( { name } ) {
 	const pseudoStates = {
 		default: {
 			label: __( 'Default' ),
-			value: useStyle( 'elements.link.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
+			value: useStyle(
+				variationPath + 'elements.link.color.text',
+				name
+			)[ 0 ],
+			handler: useStyle(
+				variationPath + 'elements.link.color.text',
+				name
+			)[ 1 ],
 			userValue: useStyle(
-				'elements.link.color.text',
+				variationPath + 'elements.link.color.text',
 				name,
 				'user'
 			)[ 0 ],
 		},
 		hover: {
 			label: __( 'Hover' ),
-			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
+			value: useStyle(
+				variationPath + 'elements.link.:hover.color.text',
+				name
+			)[ 0 ],
+			handler: useStyle(
+				variationPath + 'elements.link.:hover.color.text',
+				name
+			)[ 1 ],
 			userValue: useStyle(
-				'elements.link.:hover.color.text',
+				variationPath + 'elements.link.:hover.color.text',
 				name,
 				'user'
 			)[ 0 ],

package/src/components/global-styles/screen-text-color.js

@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenTextColor( { name } ) {
+function ScreenTextColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -28,8 +28,12 @@ function ScreenTextColor( { name } ) {
 		isTextEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
+	const [ color, setColor ] = useStyle( variationPath + 'color.text', name );
+	const [ userColor ] = useStyle(
+		variationPath + 'color.text',
+		name,
+		'user'
+	);
 
 	if ( ! hasTextColor ) {
 		return null;

package/src/components/global-styles/screen-typography.js

@@ -18,6 +18,7 @@ import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -76,9 +77,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name } ) {
+function ScreenTypography( { name, variationPath = '' } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader
@@ -88,7 +89,7 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
@@ -124,7 +125,13 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && <TypographyPanel name={ name } element="text" /> }
+			{ !! name && (
+				<TypographyPanel
+					name={ name }
+					variationPath={ variationPath }
+					element="text"
+				/>
+			) }
 		</>
 	);
 }

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

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import {
+	VariationPanel,
+	VariationsPanel,
+	useHasVariationsPanel,
+} from './variations-panel';
+import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import Subtitle from './subtitle';
+
+export function ScreenVariations( { name, path = '' } ) {
+	const hasVariationsPanel = useHasVariationsPanel( name, path );
+
+	if ( ! hasVariationsPanel ) {
+		return null;
+	}
+	return (
+		<div className="edit-site-global-styles-screen-variations">
+			<VStack spacing={ 3 }>
+				<p>Manage style variations, saved block appearence presets.</p>
+				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+				<VariationsPanel name={ name } />
+			</VStack>
+		</div>
+	);
+}
+
+export function ScreenVariation( { blockName, style } ) {
+	const { name: styleName, label: styleLabel } = style;
+	return (
+		<>
+			<ScreenHeader title={ styleLabel } />
+			<BlockPreviewPanel
+				name={ blockName }
+				variation={ `is-style-${ styleName }` }
+			/>
+			<VariationPanel blockName={ blockName } styleName={ styleName } />
+		</>
+	);
+}

package/src/components/global-styles/style.scss

@@ -146,3 +146,12 @@ $block-preview-height: 150px;
 	max-height: 200px;
 	overflow-y: scroll;
 }
+
+.edit-site-global-styles-screen-variations {
+	margin-top: $grid-unit-20;
+	border-top: 1px solid $gray-300;
+
+	& > * {
+		margin: $grid-unit-30 $grid-unit-20;
+	}
+}

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

@@ -681,7 +681,7 @@ describe( 'global styles renderer', () => {
 			const imageBlock = { name: 'core/image', supports: imageSupports };
 			const blockTypes = [ imageBlock ];
 
-			expect( getBlockSelectors( blockTypes ) ).toEqual( {
+			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSupports.__experimentalSelector,

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

@@ -171,7 +171,12 @@ function useFontAppearance( prefix, name ) {
 	};
 }
 
-export default function TypographyPanel( { name, element, headingLevel } ) {
+export default function TypographyPanel( {
+	name,
+	element,
+	headingLevel,
+	variationPath = '',
+} ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
 	if ( element === 'heading' ) {
@@ -210,9 +215,15 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	}
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset( prefix + 'typography.fontFamily', name );
+		useStyleWithReset(
+			variationPath + prefix + 'typography.fontFamily',
+			name
+		);
 	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset( prefix + 'typography.fontSize', name );
+		useFontSizeWithReset(
+			variationPath + prefix + 'typography.fontSize',
+			name
+		);
 	const {
 		fontStyle,
 		setFontStyle,
@@ -220,27 +231,39 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 		setFontWeight,
 		hasFontAppearance,
 		resetFontAppearance,
-	} = useFontAppearance( prefix, name );
+	} = useFontAppearance( variationPath + prefix, name );
 	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset( prefix + 'typography.lineHeight', name );
+		useStyleWithReset(
+			variationPath + prefix + 'typography.lineHeight',
+			name
+		);
 	const [
 		letterSpacing,
 		setLetterSpacing,
 		hasLetterSpacing,
 		resetLetterSpacing,
-	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.letterSpacing',
+		name
+	);
 	const [
 		textTransform,
 		setTextTransform,
 		hasTextTransform,
 		resetTextTransform,
-	] = useStyleWithReset( prefix + 'typography.textTransform', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.textTransform',
+		name
+	);
 	const [
 		textDecoration,
 		setTextDecoration,
 		hasTextDecoration,
 		resetTextDecoration,
-	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.textDecoration',
+		name
+	);
 
 	const resetAll = () => {
 		resetFontFamily();