@wordpress/edit-site 4.8.0 → 4.11.0

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

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
+import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -29,40 +29,82 @@ function ScreenLinkColor( { name } ) {
 		isLinkEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
-	const [ linkColor, setLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name
-	);
-	const [ userLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name,
-		'user'
-	);
+	const pseudoStates = {
+		default: {
+			label: __( 'Default' ),
+			value: useStyle( 'elements.link.color.text', name )[ 0 ],
+			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
+			userValue: useStyle(
+				'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 ],
+			userValue: useStyle(
+				'elements.link.:hover.color.text',
+				name,
+				'user'
+			)[ 0 ],
+		},
+	};
 
 	if ( ! hasLinkColor ) {
 		return null;
 	}
 
+	const tabs = Object.entries( pseudoStates ).map(
+		( [ selector, config ] ) => {
+			return {
+				name: selector,
+				title: config.label,
+				className: `color-text-${ selector }`,
+			};
+		}
+	);
+
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Links' ) }
 				description={ __(
-					'Set the default color used for links across the site.'
+					'Set the colors used for links across the site.'
 				) }
 			/>
-			<ColorGradientControl
-				className="edit-site-screen-link-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ linkColor }
-				onColorChange={ setLinkColor }
-				clearable={ linkColor === userLinkColor }
-			/>
+
+			<TabPanel tabs={ tabs }>
+				{ ( tab ) => {
+					const pseudoSelectorConfig =
+						pseudoStates[ tab.name ] ?? null;
+
+					if ( ! pseudoSelectorConfig ) {
+						return null;
+					}
+
+					return (
+						<>
+							<ColorGradientControl
+								className="edit-site-screen-link-color__control"
+								colors={ colorsPerOrigin }
+								disableCustomColors={ ! areCustomSolidsEnabled }
+								__experimentalHasMultipleOrigins
+								showTitle={ false }
+								enableAlpha
+								__experimentalIsRenderedInSidebar
+								colorValue={ pseudoSelectorConfig.value }
+								onColorChange={ pseudoSelectorConfig.handler }
+								clearable={
+									pseudoSelectorConfig.value ===
+									pseudoSelectorConfig.userValue
+								}
+							/>
+						</>
+					);
+				} }
+			</TabPanel>
 		</>
 	);
 }

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

@@ -46,7 +46,10 @@ function ScreenRoot() {
 					</Card>
 					{ !! variations?.length && (
 						<ItemGroup>
-							<NavigationButtonAsItem path="/variations">
+							<NavigationButtonAsItem
+								path="/variations"
+								aria-label={ __( 'Browse styles' ) }
+							>
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Browse styles' ) }
@@ -82,7 +85,10 @@ function ScreenRoot() {
 					) }
 				</Spacer>
 				<ItemGroup>
-					<NavigationButtonAsItem path="/blocks">
+					<NavigationButtonAsItem
+						path="/blocks"
+						aria-label={ __( 'Blocks styles' ) }
+					>
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor

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' ),
 	},
+	button: {
+		description: __( 'Manage the fonts and typography used on buttons.' ),
+		title: __( 'Buttons' ),
+	},
 };
 
 function ScreenTypographyElement( { name, element } ) {

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
@@ -43,8 +43,17 @@ function Item( { name, parentMenu, element, label } ) {
 		return null;
 	}
 
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+		__( 'Typography %s styles' ),
+		label
+	);
+
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/typography/' + element }
+			aria-label={ navigationButtonLabel }
+		>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -95,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="button"
+								label={ __( 'Buttons' ) }
+							/>
 						</ItemGroup>
 					</VStack>
 				</div>

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

@@ -57,21 +57,27 @@
 	font-size: 11px !important;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-	margin-right: $grid-unit-20;
-	margin-left: $grid-unit-20;
-	width: unset;
-	.components-toggle-group-control {
-		min-height: $grid-unit-40;
-	}
+.edit-site-global-styles-section-title {
+	color: $gray-800;
+	font-weight: 600;
+	line-height: 1.2;
+	padding: $grid-unit-20;
+	padding-bottom: 0;
+	margin: 0;
 }
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
 	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;
 

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

@@ -7,8 +7,10 @@ import { __EXPERIMENTAL_ELEMENTS as ELEMENTS } from '@wordpress/blocks';
  * Internal dependencies
  */
 import {
+	getLayoutStyles,
 	getNodesWithSettings,
 	getNodesWithStyles,
+	getBlockSelectors,
 	toCustomProperties,
 	toStyles,
 } from '../use-global-styles-output';
@@ -40,6 +42,25 @@ describe( 'global styles renderer', () => {
 										fontSize: '23px',
 									},
 								},
+								link: {
+									':hover': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+									':focus': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+								},
+							},
+						},
+						'core/image': {
+							border: {
+								radius: '9999px',
 							},
 						},
 					},
@@ -49,6 +70,18 @@ describe( 'global styles renderer', () => {
 								background: 'yellow',
 								text: 'yellow',
 							},
+							':hover': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
+							':focus': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
 						},
 					},
 				},
@@ -57,7 +90,12 @@ 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( [
 				{
 					styles: {
@@ -74,6 +112,18 @@ describe( 'global styles renderer', () => {
 							background: 'yellow',
 							text: 'yellow',
 						},
+						':hover': {
+							color: {
+								background: 'hotpink',
+								text: 'black',
+							},
+						},
+						':focus': {
+							color: {
+								background: 'hotpink',
+								text: 'black',
+							},
+						},
 					},
 					selector: ELEMENTS.link,
 				},
@@ -102,6 +152,32 @@ describe( 'global styles renderer', () => {
 					},
 					selector: '.my-heading1 h2, .my-heading2 h2',
 				},
+				{
+					styles: {
+						':hover': {
+							color: {
+								background: 'green',
+								text: 'yellow',
+							},
+						},
+						':focus': {
+							color: {
+								background: 'green',
+								text: 'yellow',
+							},
+						},
+					},
+					selector: '.my-heading1 a, .my-heading2 a',
+				},
+				{
+					styles: {
+						border: {
+							radius: '9999px',
+						},
+					},
+					selector: '.my-image',
+					featureSelectors: '.my-image img, .my-image .crop-area',
+				},
 			] );
 		} );
 	} );
@@ -318,6 +394,21 @@ describe( 'global styles renderer', () => {
 								fontSize: '42px',
 							},
 						},
+						link: {
+							color: {
+								text: 'blue',
+							},
+							':hover': {
+								color: {
+									text: 'orange',
+								},
+							},
+							':focus': {
+								color: {
+									text: 'orange',
+								},
+							},
+						},
 					},
 					blocks: {
 						'core/group': {
@@ -345,9 +436,27 @@ describe( 'global styles renderer', () => {
 									color: {
 										text: 'hotpink',
 									},
+									':hover': {
+										color: {
+											text: 'red',
+										},
+									},
+									':focus': {
+										color: {
+											text: 'red',
+										},
+									},
 								},
 							},
 						},
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							border: {
+								radius: '9999px',
+							},
+						},
 					},
 				},
 			};
@@ -358,30 +467,218 @@ describe( 'global styles renderer', () => {
 				},
 				'core/heading': {
 					selector: 'h1,h2,h3,h4,h5,h6',
-					elements: {
-						link:
-							'h1 ' +
-							ELEMENTS.link +
-							',h2 ' +
-							ELEMENTS.link +
-							',h3 ' +
-							ELEMENTS.link +
-							',h4 ' +
-							ELEMENTS.link +
-							',h5 ' +
-							ELEMENTS.link +
-							',h6 ' +
-							ELEMENTS.link,
+				},
+				'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;}.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;}' +
-					'.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;}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-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;}'
 			);
 		} );
 	} );
+
+	describe( 'getLayoutStyles', () => {
+		const layoutDefinitionsTree = {
+			settings: {
+				layout: {
+					definitions: {
+						default: {
+							name: 'default',
+							slug: 'flow',
+							className: 'is-layout-flow',
+							baseStyles: [
+								{
+									selector: ' > .alignleft',
+									rules: {
+										float: 'left',
+										'margin-inline-start': '0',
+										'margin-inline-end': '2em',
+									},
+								},
+								{
+									selector: ' > .alignright',
+									rules: {
+										float: 'right',
+										'margin-inline-start': '2em',
+										'margin-inline-end': '0',
+									},
+								},
+								{
+									selector: ' > .aligncenter',
+									rules: {
+										'margin-left': 'auto !important',
+										'margin-right': 'auto !important',
+									},
+								},
+							],
+							spacingStyles: [
+								{
+									selector: ' > *',
+									rules: {
+										'margin-block-start': '0',
+										'margin-block-end': '0',
+									},
+								},
+								{
+									selector: ' > * + *',
+									rules: {
+										'margin-block-start': null,
+										'margin-block-end': '0',
+									},
+								},
+							],
+						},
+						flex: {
+							name: 'flex',
+							slug: 'flex',
+							className: 'is-layout-flex',
+							displayMode: 'flex',
+							baseStyles: [
+								{
+									selector: '',
+									rules: {
+										'flex-wrap': 'wrap',
+										'align-items': 'center',
+									},
+								},
+								{
+									selector: ' > *',
+									rules: {
+										margin: '0',
+									},
+								},
+							],
+							spacingStyles: [
+								{
+									selector: '',
+									rules: {
+										gap: null,
+									},
+								},
+							],
+						},
+					},
+				},
+			},
+		};
+
+		it( 'should return fallback gap flex layout style, and all base styles, if block styles are enabled and blockGap is disabled', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				tree: layoutDefinitionsTree,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: false,
+				hasFallbackGapSupport: true,
+			} );
+
+			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; }'
+			);
+		} );
+
+		it( 'should return fallback gap layout styles, and base styles, if blockGap is enabled, but there is no blockGap value', () => {
+			const style = {};
+
+			const layoutStyles = getLayoutStyles( {
+				tree: layoutDefinitionsTree,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }body .is-layout-flex { gap: 0.5em; }body { --wp--style--block-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; }'
+			);
+		} );
+
+		it( 'should return real gap layout style if blockGap is enabled, and base styles', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				tree: layoutDefinitionsTree,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }body .is-layout-flex { gap: 12px; }body { --wp--style--block-gap: 12px; }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; }'
+			);
+		} );
+
+		it( 'should return real gap layout style if blockGap is enabled', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				tree: layoutDefinitionsTree,
+				style,
+				selector: '.wp-block-group',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
+			);
+		} );
+
+		it( 'should return fallback gap flex layout style for a block if blockGap is disabled, and a fallback value is provided', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				tree: layoutDefinitionsTree,
+				style,
+				selector: '.wp-block-group',
+				hasBlockGapSupport: false, // This means that the fallback value will be used instead of the "real" one.
+				hasFallbackGapSupport: true,
+				fallbackGapValue: '2em',
+			} );
+
+			expect( layoutStyles ).toEqual(
+				'.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,
+				},
+			} );
+		} );
+	} );
 } );

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

@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 
@@ -58,6 +59,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="link" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/button' }
+			>
+				<ScreenTypographyElement name={ name } element="button" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
 			</GlobalStylesNavigationScreen>
@@ -82,6 +89,12 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/button' }
+			>
+				<ScreenButtonColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>