@wordpress/edit-site 4.2.0 → 4.3.0

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

@@ -59,9 +59,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>

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

@@ -73,19 +73,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/sidebar/index.js

@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -57,6 +58,16 @@ export function SidebarComplementaryAreaFills() {
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
+
+	// Conditionally include NavMenu sidebar in Plugin only.
+	// Optimise for dead code elimination.
+	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
+	let MaybeNavigationMenuSidebar = 'Fragment';
+
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
+	}
+
 	return (
 		<>
 			<DefaultSidebar
@@ -77,6 +88,7 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			<GlobalStylesSidebar />
+			<MaybeNavigationMenuSidebar />
 		</>
 	);
 }

package/src/components/sidebar/navigation-menu-sidebar/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, Flex } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { navigation } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DefaultSidebar from '../default-sidebar';
+import NavigationInspector from './navigation-inspector';
+
+export default function NavigationMenuSidebar() {
+	return (
+		<DefaultSidebar
+			className="edit-site-navigation-menu-sidebar"
+			identifier="edit-site/navigation-menu"
+			title={ __( 'Navigation Menus' ) }
+			icon={ navigation }
+			closeLabel={ __( 'Close navigation menu sidebar' ) }
+			panelClassName="edit-site-navigation-menu-sidebar__panel"
+			header={
+				<Flex>
+					<FlexBlock>
+						<strong>{ __( 'Navigation Menus' ) }</strong>
+					</FlexBlock>
+				</Flex>
+			}
+		>
+			<NavigationInspector />
+		</DefaultSidebar>
+	);
+}