@wordpress/edit-site 4.1.1 → 4.3.1

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

@@ -5,65 +5,222 @@ import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import {
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { useSetting, useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( { height = 150 } ) => {
+const firstFrame = {
+	start: {
+		opacity: 1,
+		display: 'block',
+	},
+	hover: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const secondFrame = {
+	hover: {
+		opacity: 1,
+		display: 'block',
+	},
+	start: {
+		opacity: 0,
+		display: 'none',
+	},
+};
+
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+
+const normalizedColorSwatchSize = 32;
+
+const StylesPreview = ( { label, isFocused } ) => {
+	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useStyle(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useStyle(
+		'elements.h1.typography.fontWeight'
+	);
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
+	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
+	const disableMotion = useReducedMotion();
+	const [ coreColors ] = useSetting( 'color.palette.core' );
+	const [ themeColors ] = useSetting( 'color.palette.theme' );
+	const [ customColors ] = useSetting( 'color.palette.custom' );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ containerResizeListener, { width } ] = useResizeObserver();
+	const ratio = width ? width / normalizedWidth : 1;
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
 
 	return (
 		<Iframe
 			className="edit-site-global-styles-preview__iframe"
 			head={ <EditorStyles styles={ styles } /> }
-			style={ { height } }
+			style={ {
+				height: normalizedHeight * ratio,
+				visibility: ! width ? 'hidden' : 'visible',
+			} }
+			onMouseEnter={ () => setIsHovered( true ) }
+			onMouseLeave={ () => setIsHovered( false ) }
+			tabIndex={ -1 }
 		>
-			<div
+			{ containerResizeListener }
+			<motion.div
 				style={ {
-					display: 'flex',
-					gap: 20,
-					alignItems: 'center',
-					justifyContent: 'center',
-					height: '100%',
-					transform: `scale(${ height / 150 })`,
+					height: normalizedHeight * ratio,
+					width: '100%',
 					background: gradientValue ?? backgroundColor,
 					cursor: 'pointer',
 				} }
+				initial="start"
+				animate={
+					( isHovered || isFocused ) && ! disableMotion
+						? 'hover'
+						: 'start'
+				}
 			>
-				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
-				<div
+				<motion.div
+					variants={ firstFrame }
 					style={ {
-						display: 'flex',
-						gap: 20,
-						flexDirection: 'column',
+						height: '100%',
+						overflow: 'hidden',
 					} }
 				>
-					<div
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: textColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
 						} }
-					/>{ ' ' }
-					<div
+					>
+						<div
+							style={ {
+								fontFamily: headingFontFamily,
+								fontSize: 65 * ratio,
+								color: headingColor,
+								fontWeight: headingFontWeight,
+							} }
+						>
+							Aa
+						</div>
+						<VStack spacing={ 4 * ratio }>
+							{ highlightedColors.map( ( { slug, color } ) => (
+								<div
+									key={ slug }
+									style={ {
+										height:
+											normalizedColorSwatchSize * ratio,
+										width:
+											normalizedColorSwatchSize * ratio,
+										background: color,
+										borderRadius:
+											( normalizedColorSwatchSize *
+												ratio ) /
+											2,
+									} }
+								/>
+							) ) }
+						</VStack>
+					</HStack>
+				</motion.div>
+				<motion.div
+					variants={ secondFrame }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
 						style={ {
-							height: 40,
-							width: 40,
-							background: linkColor,
-							borderRadius: 20,
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
 						} }
-					/>
-				</div>
-			</div>
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 35 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+						<HStack spacing={ 2 * ratio } justify="flex-start">
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: textColor,
+								} }
+							>
+								Aa
+							</div>
+							<div
+								style={ {
+									fontFamily,
+									fontSize: 24 * ratio,
+									color: linkColor,
+								} }
+							>
+								Aa
+							</div>
+						</HStack>
+						{ paletteColors && (
+							<HStack spacing={ 0 }>
+								{ paletteColors
+									.slice( 0, 4 )
+									.map( ( { color }, index ) => (
+										<div
+											key={ index }
+											style={ {
+												height: 10 * ratio,
+												width: 30 * ratio,
+												background: color,
+												flexGrow: 1,
+											} }
+										/>
+									) ) }
+							</HStack>
+						) }
+					</VStack>
+				</motion.div>
+			</motion.div>
 		</Iframe>
 	);
 };

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

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import {
 	FlexItem,
+	SearchControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 import { BlockIcon } from '@wordpress/block-editor';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -59,9 +63,7 @@ function BlockMenuItem( { block } ) {
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<BlockIcon icon={ block.icon } />
-				</FlexItem>
+				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -70,6 +72,45 @@ function BlockMenuItem( { block } ) {
 
 function ScreenBlockList() {
 	const sortedBlockTypes = useSortedBlockTypes();
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const isMatchingSearchTerm = useSelect(
+		( select ) => select( blocksStore ).isMatchingSearchTerm,
+		[]
+	);
+	const filteredBlockTypes = useMemo( () => {
+		if ( ! filterValue ) {
+			return sortedBlockTypes;
+		}
+		return sortedBlockTypes.filter( ( blockType ) =>
+			isMatchingSearchTerm( blockType, filterValue )
+		);
+	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+
+	const blockTypesListRef = useRef();
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		// We extract the results from the wrapper div's `ref` because
+		// filtered items can contain items that will eventually not
+		// render and there is no reliable way to detect when a child
+		// will return `null`.
+		// TODO: We should find a better way of handling this as it's
+		// fragile and depends on the number of rendered elements of `BlockMenuItem`,
+		// which is now one.
+		// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
+		const count = blockTypesListRef.current.childElementCount;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage, count );
+	}, [ filterValue, debouncedSpeak ] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -78,12 +119,24 @@ function ScreenBlockList() {
 					'Customize the appearance of specific blocks and for the whole site.'
 				) }
 			/>
-			{ sortedBlockTypes.map( ( block ) => (
-				<BlockMenuItem
-					block={ block }
-					key={ 'menu-itemblock-' + block.name }
-				/>
-			) ) }
+			<SearchControl
+				className="edit-site-block-types-search"
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for blocks' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+			<div
+				ref={ blockTypesListRef }
+				className="edit-site-block-types-item-list"
+			>
+				{ filteredBlockTypes.map( ( block ) => (
+					<BlockMenuItem
+						block={ block }
+						key={ 'menu-itemblock-' + block.name }
+					/>
+				) ) }
+			</div>
 		</>
 	);
 }

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

@@ -18,6 +18,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,11 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
 					/>
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -57,9 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,9 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>

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

@@ -10,15 +10,17 @@ import {
 	CardBody,
 	Card,
 	CardDivider,
+	CardMedia,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
@@ -37,19 +39,19 @@ function ScreenRoot() {
 			<CardBody>
 				<VStack spacing={ 2 }>
 					<Card>
-						<StylesPreview />
+						<CardMedia>
+							<StylesPreview />
+						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
-								<FlexItem>{ __( 'Other styles' ) }</FlexItem>
-								<FlexItem>
-									<Icon
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</FlexItem>
+								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
 							</HStack>
 						</NavigationButton>
 					) }
@@ -72,13 +74,9 @@ function ScreenRoot() {
 					<NavigationButton path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<FlexItem>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
 						</HStack>
 					</NavigationButton>
 				</ItemGroup>

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
@@ -31,6 +31,7 @@ function compareVariations( a, b ) {
 }
 
 function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
@@ -77,8 +78,16 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
+				aria-label={ variation?.title }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
 			>
-				<StylesPreview height={ 100 } />
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.title }
+						isFocused={ isFocused }
+					/>
+				</div>
 			</div>
 		</GlobalStylesContext.Provider>
 	);
@@ -96,7 +105,7 @@ function ScreenStyleVariations() {
 	const withEmptyVariation = useMemo( () => {
 		return [
 			{
-				name: __( 'Default' ),
+				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
@@ -108,7 +117,7 @@ function ScreenStyleVariations() {
 		<>
 			<ScreenHeader
 				back="/"
-				title={ __( 'Other styles' ) }
+				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a different style combination for the theme styles'
 				) }

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

@@ -44,7 +44,8 @@
 	}
 }
 
-.edit-site-global-styles-header__description {
+.edit-site-global-styles-header__description,
+.edit-site-block-types-search {
 	padding: 0 $grid-unit-20;
 }
 
@@ -73,19 +74,31 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
-	padding: $border-width * 2;
-	border-radius: $radius-block-ui;
-	border: $gray-200 $border-width solid;
 
-	&.is-active {
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		border: $gray-200 $border-width solid;
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}
 
-	&:hover {
+	&:hover .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 
-	&:focus {
+	&:focus .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
+
+.edit-site-global-styles-icon-with-current-color {
+	fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+}

package/src/components/header/document-actions/index.js

@@ -53,21 +53,23 @@ function useSecondaryText() {
 }
 
 /**
- * @param {Object}   props             Props for the DocumentActions component.
- * @param {string}   props.entityTitle The title to display.
- * @param {string}   props.entityLabel A label to use for entity-related options.
- *                                     E.g. "template" would be used for "edit
- *                                     template" and "show template details".
- * @param {boolean}  props.isLoaded    Whether the data is available.
- * @param {Function} props.children    React component to use for the
- *                                     information dropdown area. Should be a
- *                                     function which accepts dropdown props.
+ * @param {Object}   props                Props for the DocumentActions component.
+ * @param {string}   props.entityTitle    The title to display.
+ * @param {string}   props.entityLabel    A label to use for entity-related options.
+ *                                        E.g. "template" would be used for "edit
+ *                                        template" and "show template details".
+ * @param {boolean}  props.isLoaded       Whether the data is available.
+ * @param {Function} props.children       React component to use for the
+ *                                        information dropdown area. Should be a
+ *                                        function which accepts dropdown props.
+ * @param {boolean}  props.showIconLabels Whether buttons display icons or text labels.
  */
 export default function DocumentActions( {
 	entityTitle,
 	entityLabel,
 	isLoaded,
 	children: dropdownContent,
+	showIconLabels,
 } ) {
 	const { label } = useSecondaryText();
 
@@ -144,7 +146,9 @@ export default function DocumentActions( {
 									__( 'Show %s details' ),
 									entityLabel
 								) }
-							/>
+							>
+								{ showIconLabels && __( 'Details' ) }
+							</Button>
 						) }
 						contentClassName="edit-site-document-actions__info-dropdown"
 						renderContent={ dropdownContent }

package/src/components/header/index.js

@@ -34,6 +34,7 @@ const preventDefault = ( event ) => {
 export default function Header( {
 	openEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
+	showIconLabels,
 } ) {
 	const inserterButton = useRef();
 	const {
@@ -122,7 +123,10 @@ export default function Header( {
 							'Toggle block inserter',
 							'Generic label for block inserter button'
 						) }
-					/>
+					>
+						{ showIconLabels &&
+							( ! isInserterOpen ? __( 'Add' ) : __( 'Close' ) ) }
+					</Button>
 					{ isLargeViewport && (
 						<>
 							<ToolbarItem
@@ -155,6 +159,7 @@ export default function Header( {
 							: 'template'
 					}
 					isLoaded={ isLoaded }
+					showIconLabels={ showIconLabels }
 				>
 					{ ( { onClose } ) => (
 						<TemplateDetails

package/src/components/header/more-menu/index.js

@@ -14,6 +14,7 @@ import { PreferenceToggleMenuItem } from '@wordpress/preferences';
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
+import EditSitePreferencesModal from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
@@ -26,6 +27,11 @@ export default function MoreMenu() {
 		false
 	);
 
+	const [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
 	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 
 	return (
@@ -99,6 +105,11 @@ export default function MoreMenu() {
 								fillProps={ { onClose } }
 							/>
 						</MenuGroup>
+						<MenuGroup>
+							<MenuItem onClick={ togglePreferencesModal }>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
 					</>
 				) }
 			</MoreMenuDropdown>
@@ -106,6 +117,10 @@ export default function MoreMenu() {
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }
 			/>
+			<EditSitePreferencesModal
+				isModalActive={ isPreferencesModalActive }
+				toggleModal={ togglePreferencesModal }
+			/>
 		</>
 	);
 }