@wordpress/edit-site 5.0.0 → 5.2.0

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

@@ -8,14 +8,19 @@ import { __ } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function ScreenBorder( { name } ) {
+function ScreenBorder( { name, variationPath = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasBorderPanel && (
+				<BorderPanel name={ name } variationPath={ variationPath } />
+			) }
 		</>
 	);
 }

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

@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenButtonColor( { name } ) {
+function ScreenButtonColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -30,7 +30,7 @@ function ScreenButtonColor( { name } ) {
 		( solids.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
+		variationPath + 'elements.button.color.text',
 		name
 	);
 	const [ userButtonTextColor ] = useStyle(
@@ -70,7 +70,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
@@ -87,7 +86,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar

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

@@ -20,14 +20,30 @@ import { NavigationButtonAsItem } from './navigation-button';
 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;
@@ -35,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">
@@ -53,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;
@@ -64,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">
@@ -82,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;
@@ -94,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">
@@ -114,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;
@@ -126,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">
@@ -144,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 }>
@@ -173,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 (
 		<>
@@ -186,6 +243,8 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
@@ -196,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'
 	);
@@ -132,7 +132,7 @@ function ScreenHeadingColor( { name } ) {
 				>
 					<ToggleGroupControlOption
 						value="heading"
-						/* translators: 'All' refers to selecting all heading levels 
+						/* translators: 'All' refers to selecting all heading levels
 						and applying the same style to h1-h6. */
 						label={ __( 'All' ) }
 					/>
@@ -159,7 +159,6 @@ function ScreenHeadingColor( { name } ) {
 						className="edit-site-screen-heading-text-color__control"
 						colors={ colorsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
@@ -186,7 +185,6 @@ function ScreenHeadingColor( { name } ) {
 						gradients={ gradientsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						disableCustomGradients={ ! areCustomGradientsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar

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

@@ -8,14 +8,22 @@ 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' ) } />
-			{ 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 ],
@@ -90,7 +102,6 @@ function ScreenLinkColor( { name } ) {
 								className="edit-site-screen-link-color__control"
 								colors={ colorsPerOrigin }
 								disableCustomColors={ ! areCustomSolidsEnabled }
-								__experimentalHasMultipleOrigins
 								showTitle={ false }
 								enableAlpha
 								__experimentalIsRenderedInSidebar

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

@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }

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;
@@ -47,7 +51,6 @@ function ScreenTextColor( { name } ) {
 				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar

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

@@ -17,6 +17,8 @@ import { NavigationButtonAsItem } from './navigation-button';
 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;
@@ -75,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
@@ -87,6 +89,8 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>
@@ -121,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;
+	}
+}