@wordpress/edit-site 4.8.0 → 4.9.0

package/src/components/add-new-template/utils.js

@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useMemo } from '@wordpress/element';
+
+export const usePostTypes = () => {
+	const postTypes = useSelect(
+		( select ) => select( coreStore ).getPostTypes( { per_page: -1 } ),
+		[]
+	);
+	return useMemo( () => {
+		const excludedPostTypes = [ 'attachment', 'page' ];
+		return postTypes?.filter(
+			( { viewable, slug } ) =>
+				viewable && ! excludedPostTypes.includes( slug )
+		);
+	}, [ postTypes ] );
+};
+
+/**
+ * @typedef {Object} PostTypeEntitiesInfo
+ * @property {boolean}  hasEntities   If a postType has available entities.
+ * @property {number[]} existingPosts An array of the existing entities ids.
+ */
+
+/**
+ * Helper hook that returns information about a post type having
+ * posts that we can create a specific template for.
+ *
+ * First we need to find the existing posts with an associated template,
+ * to query afterwards for any remaing post, by excluding them.
+ *
+ * @param {string[]} existingTemplates The existing templates.
+ * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.
+ */
+export const usePostTypesEntitiesInfo = ( existingTemplates ) => {
+	const postTypes = usePostTypes();
+	const slugsToExcludePerEntity = useMemo( () => {
+		return postTypes?.reduce( ( accumulator, _postType ) => {
+			const slugsWithTemplates = ( existingTemplates || [] ).reduce(
+				( _accumulator, existingTemplate ) => {
+					const prefix = `single-${ _postType.slug }-`;
+					if ( existingTemplate.slug.startsWith( prefix ) ) {
+						_accumulator.push(
+							existingTemplate.slug.substring( prefix.length )
+						);
+					}
+					return _accumulator;
+				},
+				[]
+			);
+			if ( slugsWithTemplates.length ) {
+				accumulator[ _postType.slug ] = slugsWithTemplates;
+			}
+			return accumulator;
+		}, {} );
+	}, [ postTypes, existingTemplates ] );
+	const postsToExcludePerEntity = useSelect(
+		( select ) => {
+			if ( ! slugsToExcludePerEntity ) {
+				return;
+			}
+			const postsToExclude = Object.entries(
+				slugsToExcludePerEntity
+			).reduce( ( accumulator, [ slug, slugsWithTemplates ] ) => {
+				const postsWithTemplates = select( coreStore ).getEntityRecords(
+					'postType',
+					slug,
+					{
+						_fields: 'id',
+						context: 'view',
+						slug: slugsWithTemplates,
+					}
+				);
+				if ( postsWithTemplates?.length ) {
+					accumulator[ slug ] = postsWithTemplates;
+				}
+				return accumulator;
+			}, {} );
+			return postsToExclude;
+		},
+		[ slugsToExcludePerEntity ]
+	);
+	const entitiesInfo = useSelect(
+		( select ) => {
+			return postTypes?.reduce( ( accumulator, { slug } ) => {
+				const existingPosts =
+					postsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: !! select( coreStore ).getEntityRecords(
+						'postType',
+						slug,
+						{
+							per_page: 1,
+							_fields: 'id',
+							context: 'view',
+							exclude: existingPosts,
+						}
+					)?.length,
+					existingPosts,
+				};
+				return accumulator;
+			}, {} );
+		},
+		[ postTypes, postsToExcludePerEntity ]
+	);
+	return entitiesInfo;
+};
+
+export const mapToIHasNameAndId = ( entities, path ) => {
+	return ( entities || [] ).map( ( entity ) => ( {
+		...entity,
+		name: decodeEntities( get( entity, path ) ),
+	} ) );
+};

package/src/components/global-styles/context-menu.js

@@ -27,6 +27,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
+					aria-label={ __( 'Typography styles' ) }
 				>
 					{ __( 'Typography' ) }
 				</NavigationButtonAsItem>
@@ -35,6 +36,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
+					aria-label={ __( 'Colors styles' ) }
 				>
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
@@ -43,6 +45,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
+					aria-label={ __( 'Layout styles' ) }
 				>
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>

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

@@ -159,6 +159,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',

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

@@ -58,7 +58,10 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem path={ screenPath }>
+				<NavigationButtonAsItem
+					path={ screenPath }
+					aria-label={ __( 'Color palettes' ) }
+				>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'

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

@@ -60,8 +60,17 @@ function BlockMenuItem( { block } ) {
 		return null;
 	}
 
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+		__( '%s block styles' ),
+		block.title
+	);
+
 	return (
-		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem
+			path={ '/blocks/' + block.name }
+			aria-label={ navigationButtonLabel }
+		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>

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

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+} from './hooks';
+
+function ScreenButtonColor( { name } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const hasButtonColor =
+		supports.includes( 'buttonColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ buttonTextColor, setButtonTextColor ] = useStyle(
+		'elements.button.color.text',
+		name
+	);
+	const [ userButtonTextColor ] = useStyle(
+		'elements.button.color.text',
+		name,
+		'user'
+	);
+
+	const [ buttonBgColor, setButtonBgColor ] = useStyle(
+		'elements.button.color.background',
+		name
+	);
+	const [ userButtonBgColor ] = useStyle(
+		'elements.button.color.background',
+		name,
+		'user'
+	);
+
+	if ( ! hasButtonColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Buttons' ) }
+				description={ __(
+					'Set the default colors used for buttons across the site.'
+				) }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Text color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonTextColor }
+				onColorChange={ setButtonTextColor }
+				clearable={ buttonTextColor === userButtonTextColor }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Background color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonBgColor }
+				onColorChange={ setButtonBgColor }
+				clearable={ buttonBgColor === userButtonBgColor }
+			/>
+		</>
+	);
+}
+
+export default ScreenButtonColor;

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

@@ -6,6 +6,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalZStack as ZStack,
 	FlexItem,
 	ColorIndicator,
 } from '@wordpress/components';
@@ -33,11 +34,15 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/background' }
+			aria-label={ __( 'Colors background styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
+						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
@@ -56,10 +61,16 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/text' }
+			aria-label={ __( 'Colors text styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
+					<ColorIndicator
+						colorValue={ color }
+						data-testid="text-color-indicator"
+					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
@@ -77,7 +88,10 @@ function LinkColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/link' }
+			aria-label={ __( 'Colors link styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
@@ -88,6 +102,33 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
+function ButtonColorItem( { name, parentMenu } ) {
+	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 );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+			<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>{ __( 'Buttons' ) }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
@@ -119,6 +160,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<ButtonColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 						</ItemGroup>
 					</VStack>
 				</VStack>

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,6 +57,15 @@
 	font-size: 11px !important;
 }
 
+.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-color-palette-toggle.edit-site-screen-color-palette-toggle {
 	margin-right: $grid-unit-20;
 	margin-left: $grid-unit-20;
@@ -68,6 +77,7 @@
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
+.edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }

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

@@ -40,6 +40,20 @@ describe( 'global styles renderer', () => {
 										fontSize: '23px',
 									},
 								},
+								link: {
+									':hover': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+									':focus': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+								},
 							},
 						},
 					},
@@ -49,6 +63,18 @@ describe( 'global styles renderer', () => {
 								background: 'yellow',
 								text: 'yellow',
 							},
+							':hover': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
+							':focus': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
 						},
 					},
 				},
@@ -58,6 +84,7 @@ describe( 'global styles renderer', () => {
 					selector: '.my-heading1, .my-heading2',
 				},
 			};
+
 			expect( getNodesWithStyles( tree, blockSelectors ) ).toEqual( [
 				{
 					styles: {
@@ -74,6 +101,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 +141,23 @@ 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',
+				},
 			] );
 		} );
 	} );
@@ -318,6 +374,21 @@ describe( 'global styles renderer', () => {
 								fontSize: '42px',
 							},
 						},
+						link: {
+							color: {
+								text: 'blue',
+							},
+							':hover': {
+								color: {
+									text: 'orange',
+								},
+							},
+							':focus': {
+								color: {
+									text: 'orange',
+								},
+							},
+						},
 					},
 					blocks: {
 						'core/group': {
@@ -345,6 +416,16 @@ describe( 'global styles renderer', () => {
 									color: {
 										text: 'hotpink',
 									},
+									':hover': {
+										color: {
+											text: 'red',
+										},
+									},
+									':focus': {
+										color: {
+											text: 'red',
+										},
+									},
 								},
 							},
 						},
@@ -358,27 +439,12 @@ 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,
-					},
 				},
 			};
 
 			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;}' +
+					'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; }' +
 					'.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;}'
 			);

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>