@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

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

@@ -45,7 +45,9 @@ function BackgroundColorItem( { name, parentMenu } ) {
 						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Background' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Background' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -72,7 +74,9 @@ function TextColorItem( { name, parentMenu } ) {
 						data-testid="text-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Text' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Text' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -102,7 +106,39 @@ function LinkColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ colorHover } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Links' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Links' ) }
+				</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function HeadingColorItem( { name, parentMenu } ) {
+	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 );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/heading' }
+			aria-label={ __( 'Colors heading styles' ) }
+		>
+			<HStack justify="flex-start">
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
+				<FlexItem>{ __( 'Headings' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -129,7 +165,9 @@ function ButtonColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ color } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Buttons' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -166,6 +204,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<HeadingColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }

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

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+	useGradientsPerOrigin,
+} from './hooks';
+
+function ScreenHeadingColor( { name } ) {
+	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(
+		'color.customGradient',
+		name
+	);
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const gradientsPerOrigin = useGradientsPerOrigin( name );
+
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const hasBackgroundColor =
+		supports.includes( 'backgroundColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		supports.includes( 'background' ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
+
+	const [ color, setColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name
+	);
+	const [ userColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name,
+		'user'
+	);
+
+	const [ backgroundColor, setBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name
+	);
+	const [ userBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name,
+		'user'
+	);
+
+	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
+	}
+
+	let backgroundSettings = {};
+	if ( hasBackgroundColor ) {
+		backgroundSettings = {
+			colorValue: backgroundColor,
+			onColorChange: setBackgroundColor,
+		};
+		if ( backgroundColor ) {
+			backgroundSettings.clearable =
+				backgroundColor === userBackgroundColor;
+		}
+	}
+
+	let gradientSettings = {};
+	if ( hasGradientColor ) {
+		gradientSettings = {
+			gradientValue: gradient,
+			onGradientChange: setGradient,
+		};
+		if ( gradient ) {
+			gradientSettings.clearable = gradient === userGradient;
+		}
+	}
+
+	const controlProps = {
+		...backgroundSettings,
+		...gradientSettings,
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Headings' ) }
+				description={ __(
+					'Set the default color used for headings across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-heading-color">
+				<h4>{ __( 'Select heading level' ) }</h4>
+
+				<ToggleGroupControl
+					label={ __( 'Select heading level' ) }
+					hideLabelFromVision={ true }
+					value={ selectedLevel }
+					onChange={ setCurrentTab }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="heading"
+						/* translators: 'All' refers to selecting all heading levels 
+						and applying the same style to h1-h6. */
+						label={ __( 'All' ) }
+					/>
+					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
+					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
+					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
+					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
+					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
+					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
+				</ToggleGroupControl>
+			</div>
+			{ hasTextColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Text color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Text color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-text-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ color }
+						onColorChange={ setColor }
+						clearable={ color === userColor }
+					/>
+				</div>
+			) }
+			{ hasBackgroundColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Background color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Background color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-background-color__control"
+						colors={ colorsPerOrigin }
+						gradients={ gradientsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						disableCustomGradients={ ! areCustomGradientsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						{ ...controlProps }
+					/>
+				</div>
+			) }
+		</>
+	);
+}
+
+export default ScreenHeadingColor;

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

@@ -18,6 +18,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on the links.' ),
 		title: __( 'Links' ),
 	},
+	heading: {
+		description: __( 'Manage the fonts and typography used on headings.' ),
+		title: __( 'Headings' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),

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

@@ -104,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="heading"
+								label={ __( 'Headings' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }

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

@@ -21,6 +21,12 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-typography-panel__full-width-control {
+	grid-column: 1 / -1;
+	max-width: 100%;
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
 }
@@ -41,6 +47,7 @@
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		flex-shrink: 0;
 	}
 }
 
@@ -72,12 +79,6 @@
 	padding: $grid-unit-20;
 }
 
-.edit-site-screen-background-color__control {
-	.block-editor-color-gradient-control__tab-panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 
@@ -107,4 +108,11 @@
 .edit-site-global-styles__color-indicator-wrapper {
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
+	flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

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

@@ -0,0 +1,130 @@
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from '../typography-utils';
+
+describe( 'typography utils', () => {
+	describe( 'getTypographyFontSizeValue', () => {
+		it( 'should return the expected values', () => {
+			[
+				// Default return non-fluid value.
+				{
+					preset: {
+						size: '28px',
+					},
+					typographySettings: undefined,
+					expected: '28px',
+				},
+				// Should return non-fluid value when fluid is `false`.
+				{
+					preset: {
+						size: '28px',
+						fluid: false,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '28px',
+				},
+				// Should return fluid value.
+				{
+					preset: {
+						size: '1.75rem',
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
+				},
+				// Should return default fluid values with empty fluid array.
+				{
+					preset: {
+						size: '28px',
+						fluid: [],
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+
+				// Should return default fluid values with null values.
+				{
+					preset: {
+						size: '28px',
+						fluid: null,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+
+				// Should return size with invalid fluid units.
+				{
+					preset: {
+						size: '10em',
+						fluid: {
+							min: '20vw',
+							max: '50%',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '10em',
+				},
+				// Should return fluid clamp value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							min: '20px',
+							max: '50rem',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+				},
+				// Should return clamp value with default fluid max value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							min: '2.6rem',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+				},
+				// Should return clamp value with default fluid min value.
+				{
+					preset: {
+						size: '28px',
+						fluid: {
+							max: '80px',
+						},
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
+				},
+			].forEach( ( { preset, typographySettings, expected } ) => {
+				expect(
+					getTypographyFontSizeValue( preset, typographySettings )
+				).toBe( expected );
+			} );
+		} );
+	} );
+} );

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

@@ -10,8 +10,10 @@ import {
 	getLayoutStyles,
 	getNodesWithSettings,
 	getNodesWithStyles,
+	getBlockSelectors,
 	toCustomProperties,
 	toStyles,
+	getStylesDeclarations,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -57,6 +59,11 @@ describe( 'global styles renderer', () => {
 								},
 							},
 						},
+						'core/image': {
+							border: {
+								radius: '9999px',
+							},
+						},
 					},
 					elements: {
 						link: {
@@ -84,6 +91,10 @@ describe( 'global styles renderer', () => {
 				'core/heading': {
 					selector: '.my-heading1, .my-heading2',
 				},
+				'core/image': {
+					selector: '.my-image',
+					featureSelectors: '.my-image img, .my-image .crop-area',
+				},
 			};
 
 			expect( getNodesWithStyles( tree, blockSelectors ) ).toEqual( [
@@ -159,6 +170,15 @@ describe( 'global styles renderer', () => {
 					},
 					selector: '.my-heading1 a, .my-heading2 a',
 				},
+				{
+					styles: {
+						border: {
+							radius: '9999px',
+						},
+					},
+					selector: '.my-image',
+					featureSelectors: '.my-image img, .my-image .crop-area',
+				},
 			] );
 		} );
 	} );
@@ -430,6 +450,14 @@ describe( 'global styles renderer', () => {
 								},
 							},
 						},
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							border: {
+								radius: '9999px',
+							},
+						},
 					},
 				},
 			};
@@ -441,15 +469,34 @@ describe( 'global styles renderer', () => {
 				'core/heading': {
 					selector: 'h1,h2,h3,h4,h5,h6',
 				},
+				'core/image': {
+					selector: '.wp-block-image',
+					featureSelectors: {
+						border: '.wp-block-image img, .wp-block-image .wp-crop-area',
+					},
+				},
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
-					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
+		it( 'should output content and wide size variables if values are specified', () => {
+			const tree = {
+				settings: {
+					layout: {
+						contentSize: '840px',
+						wideSize: '1100px',
+					},
+				},
+			};
+			expect( toStyles( tree, 'body' ) ).toEqual(
+				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
 	} );
 
 	describe( 'getLayoutStyles', () => {
@@ -549,7 +596,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flex { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(.is-layout-flex) { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -614,8 +661,100 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flex { gap: 2em; }'
+				':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
 			);
 		} );
 	} );
+
+	describe( 'getBlockSelectors', () => {
+		it( 'should return block selectors data', () => {
+			const imageSupports = {
+				__experimentalBorder: {
+					radius: true,
+					__experimentalSelector: 'img, .crop-area',
+				},
+				color: {
+					__experimentalDuotone: 'img',
+				},
+				__experimentalSelector: '.my-image',
+			};
+			const imageBlock = { name: 'core/image', supports: imageSupports };
+			const blockTypes = [ imageBlock ];
+
+			expect( getBlockSelectors( blockTypes ) ).toEqual( {
+				'core/image': {
+					name: imageBlock.name,
+					selector: imageSupports.__experimentalSelector,
+					duotoneSelector: imageSupports.color.__experimentalDuotone,
+					fallbackGapValue: undefined,
+					featureSelectors: {
+						border: '.my-image img, .my-image .crop-area',
+					},
+					hasLayoutSupport: false,
+				},
+			} );
+		} );
+	} );
+
+	describe( 'getStylesDeclarations', () => {
+		const blockStyles = {
+			spacing: {
+				padding: {
+					top: '33px',
+					right: '33px',
+					bottom: '33px',
+					left: '33px',
+				},
+			},
+			color: {
+				background: 'var:preset|color|light-green-cyan',
+			},
+			typography: {
+				fontFamily: 'sans-serif',
+			},
+		};
+
+		it( 'Should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', true )
+			).toEqual( [
+				'--wp--style--root--padding-top: 33px',
+				'--wp--style--root--padding-right: 33px',
+				'--wp--style--root--padding-bottom: 33px',
+				'--wp--style--root--padding-left: 33px',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'font-family: sans-serif',
+			] );
+		} );
+
+		it( 'Should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', false )
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+			] );
+		} );
+
+		it( 'Should not output padding variables if selector is not root', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-button__link',
+					true
+				)
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+			] );
+		} );
+	} );
 } );