@wordpress/edit-site 5.1.0 → 5.3.0

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

@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,43 +20,52 @@ import {
 	getSupportedGlobalStylesPanels,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
-	useSetting,
-	useStyle,
 } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenBackgroundColor( { name } ) {
+function ScreenBackgroundColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
 		name
 	);
-
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const gradientsPerOrigin = useGradientsPerOrigin( name );
 
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'color.background',
+		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
+	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
 		name
 	);
-	const [ userBackgroundColor ] = useStyle(
-		'color.background',
+	const [ userBackgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useGlobalStyle(
+		prefix + 'color.gradient',
+		name
+	);
+	const [ userGradient ] = useGlobalStyle(
+		prefix + 'color.gradient',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
-	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
 
 	if ( ! hasBackgroundColor && ! hasGradientColor ) {
 		return null;
@@ -91,7 +108,13 @@ function ScreenBackgroundColor( { name } ) {
 				) }
 			/>
 			<ColorGradientControl
-				className="edit-site-screen-background-color__control"
+				className={ classnames(
+					'edit-site-screen-background-color__control',
+					{
+						'has-no-tabs':
+							! hasBackgroundColor || ! hasGradientColor,
+					}
+				) }
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }

package/src/components/global-styles/screen-block-list.js

@@ -21,6 +21,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
+import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 
@@ -53,8 +54,12 @@ function BlockMenuItem( { block } ) {
 	const hasBorderPanel = useHasBorderPanel( block.name );
 	const hasDimensionsPanel = useHasDimensionsPanel( block.name );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =
-		hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+		hasTypographyPanel ||
+		hasColorPanel ||
+		hasLayoutPanel ||
+		hasVariationsPanel;
 
 	if ( ! hasBlockMenuItem ) {
 		return null;

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

@@ -9,15 +9,23 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassName } from './utils';
+import ShadowPanel, { useHasShadowControl } from './shadow-panel';
 
-function ScreenBorder( { name } ) {
+function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-
+	const variationClassName = getVariationClassName( variation );
+	const hasShadowPanel = useHasShadowControl( name );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } />
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
+			<ScreenHeader title={ __( 'Border & Shadow' ) } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasBorderPanel && (
+				<BorderPanel name={ name } variation={ variation } />
+			) }
+			{ hasShadowPanel && (
+				<ShadowPanel name={ name } variation={ variation } />
+			) }
 		</>
 	);
 }

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

@@ -2,48 +2,50 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenButtonColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenButtonColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const supports = getSupportedGlobalStylesPanels( name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 
 	const hasButtonColor =
 		supports.includes( 'buttonColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
-	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
+	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
+		prefix + 'elements.button.color.text',
 		name
 	);
-	const [ userButtonTextColor ] = useStyle(
+	const [ userButtonTextColor ] = useGlobalStyle(
 		'elements.button.color.text',
 		name,
 		'user'
 	);
 
-	const [ buttonBgColor, setButtonBgColor ] = useStyle(
+	const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(
 		'elements.button.color.background',
 		name
 	);
-	const [ userButtonBgColor ] = useStyle(
+	const [ userButtonBgColor ] = useGlobalStyle(
 		'elements.button.color.background',
 		name,
 		'user'

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

@@ -10,6 +10,7 @@ import {
 	FlexItem,
 	ColorIndicator,
 } from '@wordpress/components';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -17,18 +18,27 @@ import {
 import ScreenHeader from './header';
 import Palette from './palette';
 import { NavigationButtonAsItem } from './navigation-button';
-import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassName } from './utils';
+import { unlock } from '../../experiments';
 
-function BackgroundColorItem( { name, parentMenu } ) {
+const { useGlobalStyle } = unlock( blockEditorExperiments );
+
+function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	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 ] = useGlobalStyle(
+		prefix + 'color.background',
+		name
+	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -36,7 +46,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/background' }
+			path={ parentMenu + urlPrefix + '/colors/background' }
 			aria-label={ __( 'Colors background styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -54,10 +64,12 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	);
 }
 
-function TextColorItem( { name, parentMenu } ) {
+function TextColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'color.text', name );
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -65,7 +77,7 @@ function TextColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/text' }
+			path={ parentMenu + urlPrefix + '/colors/text' }
 			aria-label={ __( 'Colors text styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -83,11 +95,19 @@ function TextColorItem( { name, parentMenu } ) {
 	);
 }
 
-function LinkColorItem( { name, parentMenu } ) {
+function LinkColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	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 ] = useGlobalStyle(
+		prefix + 'elements.link.color.text',
+		name
+	);
+	const [ colorHover ] = useGlobalStyle(
+		prefix + 'elements.link.:hover.color.text',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -95,7 +115,7 @@ function LinkColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/link' }
+			path={ parentMenu + urlPrefix + '/colors/link' }
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -115,11 +135,19 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
-function HeadingColorItem( { name, parentMenu } ) {
+function HeadingColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	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 ] = useGlobalStyle(
+		prefix + 'elements.heading.color.text',
+		name
+	);
+	const [ bgColor ] = useGlobalStyle(
+		prefix + 'elements.heading.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -127,7 +155,7 @@ function HeadingColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/heading' }
+			path={ parentMenu + urlPrefix + '/colors/heading' }
 			aria-label={ __( 'Colors heading styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -145,18 +173,28 @@ function HeadingColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ButtonColorItem( { name, parentMenu } ) {
+function ButtonColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	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 ] = useGlobalStyle(
+		prefix + 'elements.button.color.text',
+		name
+	);
+	const [ bgColor ] = useGlobalStyle(
+		prefix + 'elements.button.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + urlPrefix + '/colors/button' }
+		>
 			<HStack justify="flex-start">
 				<ZStack isLayered={ false } offset={ -8 }>
 					<ColorIndicatorWrapper expanded={ false }>
@@ -174,9 +212,10 @@ function ButtonColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ScreenColors( { name } ) {
+function ScreenColors( { name, variation = '' } ) {
 	const parentMenu =
 		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+	const variationClassName = getVariationClassName( variation );
 
 	return (
 		<>
@@ -187,7 +226,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 +238,27 @@ function ScreenColors( { name } ) {
 							<BackgroundColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variation={ variation }
 							/>
 							<TextColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variation={ variation }
 							/>
 							<LinkColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variation={ variation }
 							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variation={ variation }
 							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variation={ variation }
 							/>
 						</ItemGroup>
 					</VStack>

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

@@ -1,30 +1,46 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import Subtitle from './subtitle';
 import CustomCSSControl from './custom-css';
 
-function ScreenCSS() {
+function ScreenCSS( { name } ) {
+	// If name is defined, we are customizing CSS at the block level.
+	// Display the block title in the description.
+	const blockType = getBlockType( name );
+	const title = blockType?.title;
+
+	const description =
+		title !== undefined
+			? sprintf(
+					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+					__(
+						'Add your own CSS to customize the appearance of the %s block.'
+					),
+					title
+			  )
+			: __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+			  );
+
 	return (
 		<>
-			<ScreenHeader
-				title={ __( 'CSS' ) }
-				description={ __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-				) }
-			/>
+			<ScreenHeader title={ __( 'CSS' ) } description={ description } />
+			<ExternalLink
+				href="https://wordpress.org/support/article/css/"
+				className="edit-site-global-styles-screen-css-help-link"
+			>
+				{ __( 'Learn more about CSS' ) }
+			</ExternalLink>
 			<div className="edit-site-global-styles-screen-css">
-				<VStack spacing={ 3 }>
-					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
-					<CustomCSSControl />
-				</VStack>
+				<CustomCSSControl blockName={ name } />
 			</div>
 		</>
 	);

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

@@ -6,7 +6,10 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 
 /**
@@ -15,67 +18,68 @@ import { useState } from '@wordpress/element';
 import ScreenHeader from './header';
 import {
 	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenHeadingColor( { name } ) {
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenHeadingColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
 		name
 	);
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
+	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const gradientsPerOrigin = useGradientsPerOrigin( name );
 
 	const hasTextColor =
 		supports.includes( 'color' ) &&
 		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
+		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
 
-	const [ color, setColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+	const [ color, setColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name
 	);
-	const [ userColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+	const [ userColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name,
 		'user'
 	);
 
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name
 	);
-	const [ userBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+	const [ userBackgroundColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+	const [ gradient, setGradient ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name
 	);
-	const [ userGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+	const [ userGradient ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name,
 		'user'
 	);
@@ -124,6 +128,7 @@ function ScreenHeadingColor( { name } ) {
 				<h4>{ __( 'Select heading level' ) }</h4>
 
 				<ToggleGroupControl
+					__nextHasNoMarginBottom
 					label={ __( 'Select heading level' ) }
 					hideLabelFromVision={ true }
 					value={ selectedLevel }

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

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