@wordpress/edit-site 5.1.0 → 5.2.0

package/src/components/block-editor/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
 import {
 	useEntityBlockEditor,
 	__experimentalFetchMedia as fetchMedia,
@@ -19,12 +19,10 @@ import {
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
-	__unstableBlockToolbarLastItem,
-	__unstableBlockSettingsMenuFirstItem,
+	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
-	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
 import {
 	useMergeRefs,
@@ -32,9 +30,6 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { listView } from '@wordpress/icons';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -43,7 +38,6 @@ import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
-import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
@@ -55,19 +49,20 @@ const LAYOUT = {
 	alignments: [],
 };
 
-export default function BlockEditor( { setIsInserterOpen } ) {
+export default function BlockEditor() {
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
 				select( editSiteStore );
 
 			return {
-				storedSettings: getSettings( setIsInserterOpen ),
+				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
-		[ setIsInserterOpen ]
+		[ setIsInserterOpened ]
 	);
 
 	const settingsBlockPatterns =
@@ -137,10 +132,13 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-	const { setPage } = useDispatch( editSiteStore );
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
+	const mergedRefs = useMergeRefs( [
+		contentRef,
+		useClipboardHandler(),
+		useTypingObserver(),
+	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const [ resizeObserver, sizes ] = useResizeObserver();
@@ -156,33 +154,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const showBlockAppender =
 		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const { enableComplementaryArea } = useDispatch( 'core/interface' );
-
-	const NavMenuSidebarToggle = () => (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Open navigation list view' ) }
-				onClick={ () =>
-					enableComplementaryArea(
-						'core/edit-site',
-						'edit-site/block-inspector'
-					)
-				}
-				icon={ listView }
-			/>
-		</ToolbarGroup>
-	);
-
-	let MaybeNavMenuSidebarToggle = Fragment;
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
-	if ( isOffCanvasNavigationEditorEnabled ) {
-		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-	}
-
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -249,20 +220,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 									/>
 								</EditorCanvas>
 							</ResizableEditor>
-							<__unstableBlockSettingsMenuFirstItem>
-								{ ( { onClose } ) => (
-									<BlockInspectorButton onClick={ onClose } />
-								) }
-							</__unstableBlockSettingsMenuFirstItem>
-							<__unstableBlockToolbarLastItem>
-								<__unstableBlockNameContext.Consumer>
-									{ ( blockName ) =>
-										blockName === 'core/navigation' && (
-											<MaybeNavMenuSidebarToggle />
-										)
-									}
-								</__unstableBlockNameContext.Consumer>
-							</__unstableBlockToolbarLastItem>
 						</BlockTools>
 					)
 				}

package/src/components/block-editor/resize-handle.js

@@ -7,7 +7,11 @@ import { VisuallyHidden } from '@wordpress/components';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
-export default function ResizeHandle( { direction, resizeWidthBy } ) {
+export default function ResizeHandle( {
+	variation = 'default',
+	direction,
+	resizeWidthBy,
+} ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -27,7 +31,7 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	return (
 		<>
 			<button
-				className={ `resizable-editor__drag-handle is-${ direction }` }
+				className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }

package/src/components/block-editor/style.scss

@@ -78,21 +78,50 @@
 }
 
 .resizable-editor__drag-handle {
-	$height: 100px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-05;
-	height: $height;
+	width: $grid-unit-15;
 	appearance: none;
 	cursor: ew-resize;
 	outline: none;
-	background: $gray-600;
-	border-radius: 2px;
+	background: none;
+	border-radius: $radius-block-ui;
 	border: 0;
 
+	&.is-variation-default {
+		height: 100px;
+	}
+
+	&.is-variation-separator {
+		height: 100%;
+
+		&::after {
+			width: 1px;
+			border-radius: 0;
+			background: $gray-800;
+			left: auto;
+			right: 50%;
+			transition: all ease 0.2s;
+			transition-delay: 0.1s;
+			@include reduce-motion;
+		}
+	}
+
+	&::after {
+		position: absolute;
+		top: 0;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: 0;
+		content: "";
+		width: $grid-unit-05;
+		background: $gray-600;
+		border-radius: $radius-block-ui;
+	}
+
 	&.is-left {
 		left: -$grid-unit-20;
 	}
@@ -103,10 +132,17 @@
 
 	&:hover,
 	&:active {
-		background: $gray-400;
+		opacity: 1;
+		&.is-variation-default::after {
+			background: $gray-400;
+		}
+		&.is-variation-separator::after {
+			width: 2px;
+			background: var(--wp-admin-theme-color);
+		}
 	}
 
-	&:focus {
+	&:focus::after {
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
 }

package/src/components/editor/index.js

@@ -174,7 +174,7 @@ export default function Editor() {
 								content={
 									<>
 										<GlobalStylesRenderer />
-										<EditorNotices />
+										{ isEditMode && <EditorNotices /> }
 										{ showVisualEditor && editedPost && (
 											<BlockEditor />
 										) }

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

@@ -6,13 +6,25 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
-const BlockPreviewPanel = ( { name } ) => {
+const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
 	const blockExample = getBlockType( name )?.example;
-	const blocks = blockExample && getBlockFromExample( name, blockExample );
+	const blockExampleWithVariation = {
+		...blockExample,
+		attributes: {
+			...blockExample?.attributes,
+			className: variation,
+		},
+	};
+	const blocks =
+		blockExample &&
+		getBlockFromExample(
+			name,
+			variation ? blockExampleWithVariation : blockExample
+		);
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 	const minHeight = containerHeight;
 

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

@@ -94,11 +94,15 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name } ) {
+export default function BorderPanel( { name, variationPath = '' } ) {
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const [ border, setBorder ] = useStyle( 'border', name );
+	const [ userBorderStyles ] = useStyle(
+		`${ variationPath }border`,
+		name,
+		'user'
+	);
+	const [ border, setBorder ] = useStyle( `${ variationPath }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -108,7 +112,7 @@ export default function BorderPanel( { name } ) {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
-		'border.radius',
+		`${ variationPath }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {

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

@@ -12,7 +12,9 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
+import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
+import { ScreenVariations } from './screen-variations';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -20,6 +22,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
 
 	return (
 		<ItemGroup>
@@ -59,6 +62,9 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ hasVariationsPanel && (
+				<ScreenVariations name={ name } path={ parentMenu } />
+			) }
 		</ItemGroup>
 	);
 }

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

@@ -197,8 +197,11 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name ) {
-	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
+function usePaddingProps( name, variationPath = '' ) {
+	const [ rawPadding, setRawPadding ] = useStyle(
+		variationPath + 'spacing.padding',
+		name
+	);
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
 	const isAxialPadding =
@@ -210,7 +213,11 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	const [ userSetPaddingValue ] = useStyle(
+		variationPath + 'spacing.padding',
+		name,
+		'user'
+	);
 	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
 	const hasPaddingValue = () => !! userSetPaddingValue;
 
@@ -225,8 +232,11 @@ function usePaddingProps( name ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name ) {
-	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
+function useMarginProps( name, variationPath = '' ) {
+	const [ rawMargin, setRawMargin ] = useStyle(
+		variationPath + 'spacing.margin',
+		name
+	);
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = useCustomSides( name, 'margin' );
 	const isAxialMargin =
@@ -252,14 +262,21 @@ function useMarginProps( name ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name ) {
-	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+function useBlockGapProps( name, variationPath = '' ) {
+	const [ gapValue, setGapValue ] = useStyle(
+		variationPath + 'spacing.blockGap',
+		name
+	);
 	const gapValues = splitGapValue( gapValue );
 	const gapSides = useCustomSides( name, 'blockGap' );
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const [ userSetGapValue ] = useStyle(
+		variationPath + 'spacing.blockGap',
+		name,
+		'user'
+	);
 	const hasGapValue = () => !! userSetGapValue;
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -288,9 +305,9 @@ function useBlockGapProps( name ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name ) {
+function useMinHeightProps( name, variationPath = '' ) {
 	const [ minHeightValue, setMinHeightValue ] = useStyle(
-		'dimensions.minHeight',
+		variationPath + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -303,7 +320,7 @@ function useMinHeightProps( name ) {
 	};
 }
 
-export default function DimensionsPanel( { name } ) {
+export default function DimensionsPanel( { name, variationPath = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -345,7 +362,7 @@ export default function DimensionsPanel( { name } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name );
+	} = usePaddingProps( name, variationPath );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -355,7 +372,7 @@ export default function DimensionsPanel( { name } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name );
+	} = useMarginProps( name, variationPath );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -367,7 +384,7 @@ export default function DimensionsPanel( { name } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name );
+	} = useBlockGapProps( name, variationPath );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
@@ -375,7 +392,7 @@ export default function DimensionsPanel( { name } ) {
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name );
+	} = useMinHeightProps( name, variationPath );
 
 	const resetAll = () => {
 		resetPaddingValue();

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

@@ -16,7 +16,7 @@ import {
 	useStyle,
 } from './hooks';
 
-function ScreenBackgroundColor( { name } ) {
+function ScreenBackgroundColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -39,16 +39,23 @@ function ScreenBackgroundColor( { name } ) {
 		supports.includes( 'background' ) &&
 		( gradients.length > 0 || areCustomGradientsEnabled );
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'color.background',
+		variationPath + 'color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useStyle(
-		'color.background',
+		variationPath + 'color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		variationPath + 'color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		variationPath + 'color.gradient',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
-	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
 
 	if ( ! hasBackgroundColor && ! hasGradientColor ) {
 		return null;

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

@@ -21,6 +21,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
+import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 
@@ -53,8 +54,12 @@ function BlockMenuItem( { block } ) {
 	const hasBorderPanel = useHasBorderPanel( block.name );
 	const hasDimensionsPanel = useHasDimensionsPanel( block.name );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =
-		hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+		hasTypographyPanel ||
+		hasColorPanel ||
+		hasLayoutPanel ||
+		hasVariationsPanel;
 
 	if ( ! hasBlockMenuItem ) {
 		return null;

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

@@ -9,15 +9,18 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function ScreenBorder( { name } ) {
+function ScreenBorder( { name, variationPath = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } />
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasBorderPanel && (
+				<BorderPanel name={ name } variationPath={ variationPath } />
+			) }
 		</>
 	);
 }

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

@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenButtonColor( { name } ) {
+function ScreenButtonColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -30,7 +30,7 @@ function ScreenButtonColor( { name } ) {
 		( solids.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
+		variationPath + 'elements.button.color.text',
 		name
 	);
 	const [ userButtonTextColor ] = useStyle(