@wordpress/edit-site 6.10.0 → 6.12.0

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

@@ -86,16 +86,9 @@ 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/' + encodeURIComponent( block.name ) }
-			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />

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

@@ -33,6 +33,7 @@ function ScreenCSS() {
 				description={
 					<>
 						{ description }
+						<br />
 						<ExternalLink
 							href={ __(
 								'https://developer.wordpress.org/advanced-administration/wordpress/css/'

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -1,18 +1,13 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Composite } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
+import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -71,7 +66,7 @@ function getRevisionLabel(
 
 	return areStylesEqual
 		? sprintf(
-				// translators: %1$s: author display name, %2$s: revision creation date.
+				// translators: 1: author display name. 2: revision creation date.
 				__(
 					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
 				),
@@ -79,7 +74,7 @@ function getRevisionLabel(
 				formattedModifiedDate
 		  )
 		: sprintf(
-				// translators: %1$s: author display name, %2$s: revision creation date.
+				// translators: 1: author display name. 2: revision creation date.
 				__( 'Changes saved by %1$s on %2$s' ),
 				authorDisplayName,
 				formattedModifiedDate
@@ -117,10 +112,11 @@ function RevisionsButtons( {
 	const { datetimeAbbreviated } = getSettings().formats;
 
 	return (
-		<ol
+		<Composite
+			orientation="vertical"
 			className="edit-site-global-styles-screen-revisions__revisions-list"
 			aria-label={ __( 'Global styles revisions list' ) }
-			role="group"
+			role="listbox"
 		>
 			{ userRevisions.map( ( revision, index ) => {
 				const { id, author, modified } = revision;
@@ -149,28 +145,26 @@ function RevisionsButtons( {
 				);
 
 				return (
-					<li
-						className={ clsx(
-							'edit-site-global-styles-screen-revisions__revision-item',
-							{
-								'is-selected': isSelected,
-								'is-active': areStylesEqual,
-								'is-reset': isReset,
-							}
-						) }
+					<Composite.Item
 						key={ id }
+						className="edit-site-global-styles-screen-revisions__revision-item"
 						aria-current={ isSelected }
-					>
-						<Button
-							__next40pxDefaultSize
-							className="edit-site-global-styles-screen-revisions__revision-button"
-							accessibleWhenDisabled
-							disabled={ isSelected }
-							onClick={ () => {
+						role="option"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
 								onChange( revision );
-							} }
-							aria-label={ revisionLabel }
-						>
+							}
+						} }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onChange( revision );
+						} }
+						aria-selected={ isSelected }
+						aria-label={ revisionLabel }
+						render={ <div /> }
+					>
+						<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
 									{ __( 'Default styles' ) }
@@ -211,7 +205,7 @@ function RevisionsButtons( {
 									) }
 								</span>
 							) }
-						</Button>
+						</span>
 						{ isSelected &&
 							( areStylesEqual ? (
 								<p className="edit-site-global-styles-screen-revisions__applied-text">
@@ -225,16 +219,19 @@ function RevisionsButtons( {
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
 									onClick={ onApplyRevision }
+									aria-label={ __(
+										'Apply the selected revision to your site.'
+									) }
 								>
 									{ isReset
 										? __( 'Reset to defaults' )
 										: __( 'Apply' ) }
 								</Button>
 							) ) }
-					</li>
+					</Composite.Item>
 				);
 			} ) }
-		</ol>
+		</Composite>
 	);
 }
 

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

@@ -14,6 +14,11 @@
 	display: flex;
 	flex-direction: column;
 
+	&[role="option"]:active,
+	&[role="option"]:focus {
+		@include button-style__focus();
+	}
+
 	&:hover {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		.edit-site-global-styles-screen-revisions__date {
@@ -42,7 +47,7 @@
 		border: 4px solid transparent;
 	}
 
-	&.is-selected {
+	&[aria-selected="true"] {
 		border-radius: $radius-small;
 
 		// Only visible in Windows High Contrast mode.
@@ -52,10 +57,6 @@
 		color: var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-		.edit-site-global-styles-screen-revisions__revision-button {
-			opacity: 1;
-		}
-
 		.edit-site-global-styles-screen-revisions__date {
 			color: var(--wp-admin-theme-color);
 		}
@@ -86,23 +87,16 @@
 	&:last-child::after {
 		height: $grid-unit-20 + 2;
 	}
-
-	// Nested to override specificity of .components-button.
-	.edit-site-global-styles-screen-revisions__revision-button {
-		width: 100%;
-		height: auto;
-		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
-		z-index: 1;
-		position: relative;
-		outline-offset: -2px;
-	}
+}
+.edit-site-global-styles-screen-revisions__revision-item-wrapper {
+	display: block;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
 }
 
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
-	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
+	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
 	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 

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

@@ -67,10 +67,7 @@ function ScreenRoot() {
 					</Card>
 					{ hasVariations && (
 						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/variations"
-								aria-label={ __( 'Browse styles' ) }
-							>
+							<NavigationButtonAsItem path="/variations">
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Browse styles' ) }
@@ -107,10 +104,7 @@ function ScreenRoot() {
 					) }
 				</Spacer>
 				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/blocks"
-						aria-label={ __( 'Blocks styles' ) }
-					>
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
@@ -136,10 +130,7 @@ function ScreenRoot() {
 							) }
 						</Spacer>
 						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/css"
-								aria-label={ __( 'Additional CSS' ) }
-							>
+							<NavigationButtonAsItem path="/css">
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Additional CSS' ) }

package/src/components/global-styles/screen-style-variations.js

@@ -3,7 +3,7 @@
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useZoomOut } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 
@@ -12,6 +12,9 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import ScreenHeader from './header';
 import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
+import { unlock } from '../../lock-unlock';
+
+const { useZoomOut } = unlock( blockEditorPrivateApis );
 
 function ScreenStyleVariations() {
 	// Style Variations should only be previewed in with

package/src/components/global-styles/shadows-edit-panel.js

@@ -51,7 +51,7 @@ import {
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 const customShadowMenuItems = [
 	{
@@ -163,7 +163,7 @@ export default function ShadowsEditPanel() {
 				<ScreenHeader title={ selectedShadow.name } />
 				<FlexItem>
 					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
-						<DropdownMenuV2
+						<Menu
 							trigger={
 								<Button
 									size="small"
@@ -176,7 +176,7 @@ export default function ShadowsEditPanel() {
 								? customShadowMenuItems
 								: presetShadowMenuItems
 							).map( ( item ) => (
-								<DropdownMenuV2.Item
+								<Menu.Item
 									key={ item.action }
 									onClick={ () => onMenuClick( item.action ) }
 									disabled={
@@ -185,12 +185,12 @@ export default function ShadowsEditPanel() {
 											baseSelectedShadow.shadow
 									}
 								>
-									<DropdownMenuV2.ItemLabel>
+									<Menu.ItemLabel>
 										{ item.label }
-									</DropdownMenuV2.ItemLabel>
-								</DropdownMenuV2.Item>
+									</Menu.ItemLabel>
+								</Menu.Item>
 							) ) }
-						</DropdownMenuV2>
+						</Menu>
 					</Spacer>
 				</FlexItem>
 			</HStack>
@@ -215,8 +215,10 @@ export default function ShadowsEditPanel() {
 					size="medium"
 				>
 					{ sprintf(
-						// translators: %s: name of the shadow
-						'Are you sure you want to delete "%s"?',
+						/* translators: %s: Name of the shadow preset. */
+						__(
+							'Are you sure you want to delete "%s" shadow preset?'
+						),
 						selectedShadow.name
 					) }
 				</ConfirmDialog>
@@ -301,18 +303,17 @@ function ShadowEditor( { shadow, onChange } ) {
 	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
 
 	const onChangeShadowPart = ( index, part ) => {
-		shadowParts[ index ] = part;
-		onChange( shadowParts.join( ', ' ) );
+		const newShadowParts = [ ...shadowParts ];
+		newShadowParts[ index ] = part;
+		onChange( newShadowParts.join( ', ' ) );
 	};
 
 	const onAddShadowPart = () => {
-		shadowParts.push( defaultShadow );
-		onChange( shadowParts.join( ', ' ) );
+		onChange( [ ...shadowParts, defaultShadow ].join( ', ' ) );
 	};
 
 	const onRemoveShadowPart = ( index ) => {
-		shadowParts.splice( index, 1 );
-		onChange( shadowParts.join( ', ' ) );
+		onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );
 	};
 
 	return (

package/src/components/global-styles/shadows-panel.js

@@ -135,10 +135,6 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			aria-label={
-				// translators: %s: name of the shadow
-				sprintf( 'Edit shadow %s', shadow.name )
-			}
 			icon={ shadowIcon }
 		>
 			{ shadow.name }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
@@ -36,17 +36,8 @@ function ElementItem( { parentMenu, element, label } ) {
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
-	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 }
-			aria-label={ navigationButtonLabel }
-		>
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -61,6 +52,7 @@ function ElementItem( { parentMenu, element, label } ) {
 						fontWeight,
 						...extraStyles,
 					} }
+					aria-hidden="true"
 				>
 					{ __( 'Aa' ) }
 				</FlexItem>

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

@@ -19,7 +19,8 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Fragment } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -45,6 +46,7 @@ import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
@@ -191,6 +193,21 @@ function GlobalStylesStyleBook() {
 				)
 			}
 			onSelect={ ( blockName ) => {
+				if (
+					STYLE_BOOK_COLOR_GROUPS.find(
+						( group ) => group.slug === blockName
+					)
+				) {
+					// Go to color palettes Global Styles.
+					navigator.goTo( '/colors/palette' );
+					return;
+				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					navigator.goTo( '/typography' );
+					return;
+				}
+
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }
@@ -280,18 +297,52 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
 
-function GlobalStylesUI() {
+function useNavigatorSync( parentPath, onPathChange ) {
+	const navigator = useNavigator();
+	const { path: childPath } = navigator.location;
+	const previousParentPath = usePrevious( parentPath );
+	const previousChildPath = usePrevious( childPath );
+	useEffect( () => {
+		if ( parentPath !== childPath ) {
+			if ( parentPath !== previousParentPath ) {
+				navigator.goTo( parentPath );
+			} else if ( childPath !== previousChildPath ) {
+				onPathChange( childPath );
+			}
+		}
+	}, [
+		onPathChange,
+		parentPath,
+		previousChildPath,
+		previousParentPath,
+		childPath,
+		navigator,
+	] );
+}
+
+// This component is used to wrap the hook in order to conditionally execute it
+// when the parent component is used on controlled mode.
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+	useNavigatorSync( parentPath, onPathChange );
+	return children;
+}
+
+function GlobalStylesUI( { path, onPathChange } ) {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+
 	return (
 		<Navigator
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
+			{ path && onPathChange && (
+				<NavigationSync path={ path } onPathChange={ onPathChange } />
+			) }
 			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
 			</GlobalStylesNavigationScreen>

package/src/components/global-styles/variations/variation.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { Tooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -64,8 +64,8 @@ export default function Variation( {
 	let label = variation?.title;
 	if ( variation?.description ) {
 		label = sprintf(
-			/* translators: %1$s: variation title. %2$s variation description. */
-			__( '%1$s (%2$s)' ),
+			/* translators: 1: variation title. 2: variation description. */
+			_x( '%1$s (%2$s)', 'variation label' ),
 			variation?.title,
 			variation?.description
 		);

package/src/components/global-styles/variations/variations-panel.js

@@ -55,7 +55,6 @@ export function VariationsPanel( { name } ) {
 							'/variations/' +
 							encodeURIComponent( style.name )
 						}
-						aria-label={ style.label }
 					>
 						{ style.label }
 					</NavigationButtonAsItem>

package/src/components/global-styles-renderer/index.js

@@ -10,17 +10,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
-function useGlobalStylesRenderer() {
-	const postType = useSelect( ( select ) => {
-		return select( editSiteStore ).getEditedPostType();
-	} );
-	const [ styles, settings ] = useGlobalStylesOutput(
-		postType !== TEMPLATE_POST_TYPE
-	);
+function useGlobalStylesRenderer( disableRootPadding ) {
+	const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -41,8 +35,8 @@ function useGlobalStylesRenderer() {
 	}, [ styles, settings, updateSettings, getSettings ] );
 }
 
-export function GlobalStylesRenderer() {
-	useGlobalStylesRenderer();
+export function GlobalStylesRenderer( { disableRootPadding } ) {
+	useGlobalStylesRenderer( disableRootPadding );
 
 	return null;
 }

package/src/components/global-styles-sidebar/default-sidebar.js

@@ -30,7 +30,6 @@ export default function DefaultSidebar( {
 				scope="core"
 				identifier={ identifier }
 				title={ title }
-				smallScreenTitle={ title }
 				icon={ icon }
 				closeLabel={ closeLabel }
 				header={ header }