@wordpress/edit-site 3.0.2 → 3.0.3

package/src/components/editor/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	SlotFillProvider,
 	Popover,
@@ -26,6 +26,7 @@ import {
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -168,17 +169,13 @@ function Editor( { initialSettings, onError } ) {
 			return <InserterSidebar />;
 		}
 		if ( isListViewOpen ) {
-			return (
-				<AsyncModeProvider value="true">
-					<ListViewSidebar />
-				</AsyncModeProvider>
-			);
+			return <ListViewSidebar />;
 		}
 		return null;
 	};
 
 	return (
-		<>
+		<ShortcutProvider>
 			<URLQueryController />
 			<SlotFillProvider>
 				<EntityProvider kind="root" type="site">
@@ -289,7 +286,7 @@ function Editor( { initialSettings, onError } ) {
 					</EntityProvider>
 				</EntityProvider>
 			</SlotFillProvider>
-		</>
+		</ShortcutProvider>
 	);
 }
 export default Editor;

package/src/components/editor/utils.js

@@ -27,6 +27,7 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'lineHeight',
 	'textDecoration',
 	'textTransform',
+	'padding',
 ];
 
 export const PRESET_METADATA = [

package/src/components/{sidebar → global-styles}/color-palette-panel.js

@@ -63,16 +63,18 @@ export default function ColorPalettePanel( {
 		[ contextName ]
 	);
 	return (
-		<ColorEdit
-			immutableColorSlugs={ immutableColorSlugs }
-			colors={ colors }
-			onChange={ ( newColors ) => {
-				setSetting( contextName, 'color.palette', newColors );
-			} }
-			emptyUI={ __(
-				'Colors are empty! Add some colors to create your own color palette.'
-			) }
-			canReset={ colors === userColors }
-		/>
+		<div className="edit-site-global-styles-color-palette-panel">
+			<ColorEdit
+				immutableColorSlugs={ immutableColorSlugs }
+				colors={ colors }
+				onChange={ ( newColors ) => {
+					setSetting( contextName, 'color.palette', newColors );
+				} }
+				emptyUI={ __(
+					'Colors are empty! Add some colors to create your own color palette.'
+				) }
+				canReset={ colors === userColors }
+			/>
+		</div>
 	);
 }

package/src/components/{sidebar → global-styles}/color-panel.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { useSetting } from '../editor/utils';
-import ColorPalettePanel from './color-palette-panel';
+import Palette from './palette';
 
 export function useHasColorPanel( { supports } ) {
 	return (
@@ -24,8 +24,6 @@ export default function ColorPanel( {
 	context: { supports, name },
 	getStyle,
 	setStyle,
-	getSetting,
-	setSetting,
 } ) {
 	const solids = useSetting( 'color.palette', name );
 	const gradients = useSetting( 'color.gradients', name );
@@ -116,20 +114,17 @@ export default function ColorPanel( {
 	}
 
 	return (
-		<PanelColorGradientSettings
-			title={ __( 'Color' ) }
-			settings={ settings }
-			colors={ solids }
-			gradients={ gradients }
-			disableCustomColors={ ! areCustomSolidsEnabled }
-			disableCustomGradients={ ! areCustomGradientsEnabled }
-		>
-			<ColorPalettePanel
-				key={ 'color-palette-panel-' + name }
-				contextName={ name }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
+		<>
+			<Palette contextName={ name } />
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				gradients={ gradients }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				disableCustomGradients={ ! areCustomGradientsEnabled }
+				showTitle={ false }
 			/>
-		</PanelColorGradientSettings>
+		</>
 	);
 }

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { typography, color, layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useHasBorderPanel } from './border-panel';
+import { useHasColorPanel } from './color-panel';
+import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasTypographyPanel } from './typography-panel';
+import NavigationButton from './navigation-button';
+
+function ContextMenu( { context, parentMenu = '' } ) {
+	const hasTypographyPanel = useHasTypographyPanel( context );
+	const hasColorPanel = useHasColorPanel( context );
+	const hasBorderPanel = useHasBorderPanel( context );
+	const hasDimensionsPanel = useHasDimensionsPanel( context );
+	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+
+	return (
+		<ItemGroup>
+			{ hasTypographyPanel && (
+				<NavigationButton
+					icon={ typography }
+					path={ parentMenu + '/typography' }
+				>
+					{ __( 'Typography' ) }
+				</NavigationButton>
+			) }
+			{ hasColorPanel && (
+				<NavigationButton
+					icon={ color }
+					path={ parentMenu + '/colors' }
+				>
+					{ __( 'Colors' ) }
+				</NavigationButton>
+			) }
+			{ hasLayoutPanel && (
+				<NavigationButton
+					icon={ layout }
+					path={ parentMenu + '/layout' }
+				>
+					{ __( 'Layout' ) }
+				</NavigationButton>
+			) }
+		</ItemGroup>
+	);
+}
+
+export default ContextMenu;

package/src/components/{sidebar → global-styles}/dimensions-panel.js

@@ -109,7 +109,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
 	const hasPaddingValue = () =>
-		paddingValues && Object.keys( paddingValues ).length;
+		!! paddingValues && Object.keys( paddingValues ).length;
 
 	const marginValues = splitStyleValue( getStyle( name, 'margin' ) );
 	const marginSides = useCustomSides( name, 'margin' );
@@ -123,7 +123,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 	const resetMarginValue = () => setMarginValues( {} );
 	const hasMarginValue = () =>
-		marginValues && Object.keys( marginValues ).length;
+		!! marginValues && Object.keys( marginValues ).length;
 
 	const gapValue = getStyle( name, '--wp--style--block-gap' );
 
@@ -140,11 +140,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 
 	return (
-		<ToolsPanel
-			label={ __( 'Dimensions options' ) }
-			header={ __( 'Dimensions' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }
@@ -183,14 +179,14 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 			) }
 			{ showGapControl && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ hasGapValue }
-					label={ __( 'Block gap' ) }
+					label={ __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
 				>
 					<UnitControl
-						label={ __( 'Block gap' ) }
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
 						min={ 0 }
 						onChange={ setGapValue }
 						units={ units }

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import NavigationButton from './navigation-button';
+
+function ScreenHeader( { back, title, description } ) {
+	return (
+		<VStack spacing={ 2 }>
+			<HStack spacing={ 2 }>
+				<View>
+					<NavigationButton
+						path={ back }
+						icon={
+							<Icon
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								variant="muted"
+							/>
+						}
+						size="small"
+						isBack
+						aria-label={ __( 'Navigate to the previous view' ) }
+					/>
+				</View>
+				<Spacer>
+					<Heading level={ 5 }>{ title }</Heading>
+				</Spacer>
+			</HStack>
+			{ description && (
+				<p className="edit-site-global-styles-header__description">
+					{ description }
+				</p>
+			) }
+		</VStack>
+	);
+}
+
+export default ScreenHeader;

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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import ScreenRoot from './screen-root';
+import ScreenBlockList from './screen-block-list';
+import ScreenBlock from './screen-block';
+import ScreenTypography from './screen-typography';
+import ScreenColors from './screen-colors';
+import ScreenColorPalette from './screen-color-palette';
+import ScreenLayout from './screen-layout';
+
+function ContextScreens( { name } ) {
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+
+	return (
+		<>
+			<NavigatorScreen path={ parentMenu + '/typography' }>
+				<ScreenTypography name={ name } />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/colors' }>
+				<ScreenColors name={ name } />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+				<ScreenColorPalette name={ name } />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/layout' }>
+				<ScreenLayout name={ name } />
+			</NavigatorScreen>
+		</>
+	);
+}
+
+function GlobalStyles() {
+	const { blocks } = useGlobalStylesContext();
+
+	return (
+		<NavigatorProvider initialPath="/">
+			<NavigatorScreen path="/">
+				<ScreenRoot />
+			</NavigatorScreen>
+
+			<NavigatorScreen path="/blocks">
+				<ScreenBlockList />
+			</NavigatorScreen>
+
+			{ map( blocks, ( block, name ) => (
+				<NavigatorScreen
+					key={ 'menu-block-' + name }
+					path={ '/blocks/' + name }
+				>
+					<ScreenBlock name={ name } />
+				</NavigatorScreen>
+			) ) }
+
+			<ContextScreens />
+
+			{ map( blocks, ( _, name ) => (
+				<ContextScreens key={ 'screens-block-' + name } name={ name } />
+			) ) }
+		</NavigatorProvider>
+	);
+}
+
+export default GlobalStyles;

package/src/components/global-styles/navigation-button.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItem as Item,
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+
+function NavigationButton( {
+	path,
+	icon,
+	children,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+			{ icon && (
+				<HStack justify="flex-start">
+					<FlexItem>
+						<Icon icon={ icon } size={ 24 } />
+					</FlexItem>
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
+
+export default NavigationButton;

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

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalVStack as VStack,
+	FlexBlock,
+	ColorIndicator,
+} from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Subtitle from './subtitle';
+import { useSetting } from '../editor/utils';
+import NavigationButton from './navigation-button';
+
+function Palette( { contextName } ) {
+	const colors = useSetting( 'color.palette', contextName );
+	const screenPath =
+		contextName === 'root'
+			? '/colors/palette'
+			: '/blocks/' + contextName + '/colors/palette';
+
+	return (
+		<div className="edit-site-global-style-palette">
+			<VStack spacing={ 1 }>
+				<Subtitle>{ __( 'Palette' ) }</Subtitle>
+				<ItemGroup isBordered isSeparated>
+					<NavigationButton path={ screenPath }>
+						<HStack>
+							<FlexBlock>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color } ) => (
+											<ColorIndicator
+												key={ color }
+												colorValue={ color }
+											/>
+										) ) }
+								</ZStack>
+							</FlexBlock>
+							<FlexItem>
+								{ sprintf(
+									// Translators: %d: Number of palette colors.
+									_n(
+										'%d color',
+										'%d colors',
+										colors.length
+									),
+									colors.length
+								) }
+							</FlexItem>
+						</HStack>
+					</NavigationButton>
+				</ItemGroup>
+			</VStack>
+		</div>
+	);
+}
+
+export default Palette;

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Card,
+	ColorIndicator,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */ import { useGlobalStylesContext } from '../editor/global-styles-provider';
+
+const StylesPreview = () => {
+	const { getStyle } = useGlobalStylesContext();
+	const fontFamily = getStyle( 'root', 'fontFamily' ) ?? 'serif';
+	const textColor = getStyle( 'root', 'color' ) ?? 'black';
+	const linkColor = getStyle( 'root', 'linkColor' ) ?? 'blue';
+	const backgroundColor = getStyle( 'root', 'backgroundColor' ) ?? 'white';
+
+	return (
+		<Card
+			className="edit-site-global-styles-preview"
+			style={ { background: backgroundColor } }
+		>
+			<HStack spacing={ 5 }>
+				<div>
+					<span style={ { fontFamily, fontSize: '80px' } }>A</span>
+					<span style={ { fontFamily, fontSize: '80px' } }>a</span>
+				</div>
+				<VStack spacing={ 2 }>
+					<ColorIndicator colorValue={ textColor } />
+					<ColorIndicator colorValue={ linkColor } />
+				</VStack>
+			</HStack>
+		</Card>
+	);
+};
+
+export default StylesPreview;

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import { useHasBorderPanel } from './border-panel';
+import { useHasColorPanel } from './color-panel';
+import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasTypographyPanel } from './typography-panel';
+import ScreenHeader from './header';
+import NavigationButton from './navigation-button';
+
+function BlockMenuItem( { block } ) {
+	const { blocks } = useGlobalStylesContext();
+	const context = blocks[ block.name ];
+	const hasTypographyPanel = useHasTypographyPanel( context );
+	const hasColorPanel = useHasColorPanel( context );
+	const hasBorderPanel = useHasBorderPanel( context );
+	const hasDimensionsPanel = useHasDimensionsPanel( context );
+	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasBlockMenuItem =
+		hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+
+	if ( ! hasBlockMenuItem ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ '/blocks/' + block.name }>
+			{ block.title }
+		</NavigationButton>
+	);
+}
+
+function ScreenBlockList() {
+	const { blocks } = useGlobalStylesContext();
+	const visibleBlocks = Object.keys( blocks )
+		.map( ( name ) => getBlockType( name ) )
+		.filter( ( blockType ) => !! blockType );
+
+	return (
+		<>
+			<ScreenHeader back="/" title={ __( 'Blocks' ) } />
+			{ visibleBlocks.map( ( block ) => (
+				<BlockMenuItem
+					block={ block }
+					key={ 'menu-itemblock-' + block.name }
+				/>
+			) ) }
+		</>
+	);
+}
+
+export default ScreenBlockList;

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

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import ContextMenu from './context-menu';
+import ScreenHeader from './header';
+
+function ScreenBlock( { name } ) {
+	const blockType = getBlockType( name );
+	const { blocks } = useGlobalStylesContext();
+
+	return (
+		<>
+			<ScreenHeader back="/blocks" title={ blockType.title } />
+			<ContextMenu
+				parentMenu={ '/blocks/' + name }
+				context={ blocks[ name ] }
+			/>
+		</>
+	);
+}
+
+export default ScreenBlock;

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import ColorPalettePanel from './color-palette-panel';
+import ScreenHeader from './header';
+
+function ScreenColorPalette( { name } ) {
+	const { getSetting, setSetting } = useGlobalStylesContext();
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu + '/colors' }
+				title={ __( 'Color Palette' ) }
+				description={ __( 'Edit the color palette.' ) }
+			/>
+			<ColorPalettePanel
+				contextName={ name }
+				getSetting={ getSetting }
+				setSetting={ setSetting }
+			/>
+		</>
+	);
+}
+
+export default ScreenColorPalette;

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import ColorPanel from './color-panel';
+import ScreenHeader from './header';
+
+function ScreenColors( { name } ) {
+	const { root, blocks, getStyle, setStyle } = useGlobalStylesContext();
+	const context = name === undefined ? root : blocks[ name ];
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu ? parentMenu : '/' }
+				title={ __( 'Colors' ) }
+				description={ __(
+					'Manage color palettes and how they affect the different elements of the site.'
+				) }
+			/>
+			<ColorPanel
+				context={ context }
+				getStyle={ getStyle }
+				setStyle={ setStyle }
+			/>
+		</>
+	);
+}
+
+export default ScreenColors;