@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

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

@@ -6,6 +6,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
@@ -15,11 +16,14 @@ import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block
  */
 import { useSetting } from '../editor/utils';
 
+const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
+
 export function useHasDimensionsPanel( context ) {
 	const hasPadding = useHasPadding( context );
 	const hasMargin = useHasMargin( context );
+	const hasGap = useHasGap( context );
 
-	return hasPadding || hasMargin;
+	return hasPadding || hasMargin || hasGap;
 }
 
 function useHasPadding( { name, supports } ) {
@@ -34,6 +38,12 @@ function useHasMargin( { name, supports } ) {
 	return settings && supports.includes( 'margin' );
 }
 
+function useHasGap( { name, supports } ) {
+	const settings = useSetting( 'spacing.blockGap', name );
+
+	return settings && supports.includes( '--wp--style--block-gap' );
+}
+
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -42,7 +52,17 @@ function filterValuesBySides( values, sides ) {
 
 	// Only include sides opted into within filtered values.
 	const filteredValues = {};
-	sides.forEach( ( side ) => ( filteredValues[ side ] = values[ side ] ) );
+	sides.forEach( ( side ) => {
+		if ( side === 'vertical' ) {
+			filteredValues.top = values.top;
+			filteredValues.bottom = values.bottom;
+		}
+		if ( side === 'horizontal' ) {
+			filteredValues.left = values.left;
+			filteredValues.right = values.right;
+		}
+		filteredValues[ side ] = values[ side ];
+	} );
 
 	return filteredValues;
 }
@@ -66,6 +86,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	const { name } = context;
 	const showPaddingControl = useHasPadding( context );
 	const showMarginControl = useHasMargin( context );
+	const showGapControl = useHasGap( context );
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name ) || [
 			'%',
@@ -78,6 +99,9 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 
 	const paddingValues = splitStyleValue( getStyle( name, 'padding' ) );
 	const paddingSides = useCustomSides( name, 'padding' );
+	const isAxialPadding =
+		paddingSides &&
+		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
@@ -85,10 +109,13 @@ 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' );
+	const isAxialMargin =
+		marginSides &&
+		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
@@ -96,19 +123,24 @@ 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' );
+
+	const setGapValue = ( newGapValue ) => {
+		setStyle( name, '--wp--style--block-gap', newGapValue );
+	};
+	const resetGapValue = () => setGapValue( undefined );
+	const hasGapValue = () => !! gapValue;
 
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
+		resetGapValue();
 	};
 
 	return (
-		<ToolsPanel
-			label={ __( 'Dimensions options' ) }
-			header={ __( 'Dimensions' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }
@@ -123,6 +155,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 						sides={ paddingSides }
 						units={ units }
 						allowReset={ false }
+						splitOnAxis={ isAxialPadding }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -140,6 +173,24 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 						sides={ marginSides }
 						units={ units }
 						allowReset={ false }
+						splitOnAxis={ isAxialMargin }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showGapControl && (
+				<ToolsPanelItem
+					hasValue={ hasGapValue }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ resetGapValue }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
+						min={ 0 }
+						onChange={ setGapValue }
+						units={ units }
+						value={ gapValue }
 					/>
 				</ToolsPanelItem>
 			) }

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;

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import BorderPanel, { useHasBorderPanel } from './border-panel';
+import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
+import ScreenHeader from './header';
+
+function ScreenLayout( { name } ) {
+	const { root, blocks, getStyle, setStyle } = useGlobalStylesContext();
+	const context = name === undefined ? root : blocks[ name ];
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const hasBorderPanel = useHasBorderPanel( context );
+	const hasDimensionsPanel = useHasDimensionsPanel( context );
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu ? parentMenu : '/' }
+				title={ __( 'Layout' ) }
+			/>
+			{ hasDimensionsPanel && (
+				<DimensionsPanel
+					context={ context }
+					getStyle={ getStyle }
+					setStyle={ setStyle }
+				/>
+			) }
+			{ hasBorderPanel && (
+				<BorderPanel
+					context={ context }
+					getStyle={ getStyle }
+					setStyle={ setStyle }
+				/>
+			) }
+		</>
+	);
+}
+
+export default ScreenLayout;

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreview from './preview';
+import NavigationButton from './navigation-button';
+import { useGlobalStylesContext } from '../editor/global-styles-provider';
+import ContextMenu from './context-menu';
+
+function ScreenRoot() {
+	const { root } = useGlobalStylesContext();
+
+	return (
+		<>
+			<StylesPreview />
+
+			<ContextMenu context={ root } />
+
+			<ItemGroup>
+				<Item>
+					<p>
+						{ __(
+							'Customize the appearance of specific blocks for the whole site.'
+						) }
+					</p>
+				</Item>
+				<NavigationButton path="/blocks">
+					{ __( 'Blocks' ) }
+				</NavigationButton>
+			</ItemGroup>
+		</>
+	);
+}
+
+export default ScreenRoot;