@wordpress/edit-site 3.0.14 → 3.0.18-next.33ec3857e2.0

package/src/components/block-editor/back-button.js

@@ -3,26 +3,18 @@
  */
 import { Button } from '@wordpress/components';
 import { arrowLeft } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
 
 function BackButton() {
-	const { isTemplatePart, previousTemplateId } = useSelect( ( select ) => {
-		const { getEditedPostType, getPreviousEditedPostId } = select(
-			editSiteStore
-		);
-
-		return {
-			isTemplatePart: getEditedPostType() === 'wp_template_part',
-			previousTemplateId: getPreviousEditedPostId(),
-		};
-	}, [] );
-	const { goBack } = useDispatch( editSiteStore );
+	const location = useLocation();
+	const history = useHistory();
+	const isTemplatePart = location.params.postType === 'wp_template_part';
+	const previousTemplateId = location.state?.fromTemplateId;
 
 	if ( ! isTemplatePart || ! previousTemplateId ) {
 		return null;
@@ -33,7 +25,7 @@ function BackButton() {
 			className="edit-site-visual-editor__back-button"
 			icon={ arrowLeft }
 			onClick={ () => {
-				goBack();
+				history.back();
 			} }
 		>
 			{ __( 'Back' ) }

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

@@ -124,6 +124,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					<BlockList
 						className="edit-site-block-editor__block-list wp-site-blocks"
 						__experimentalLayout={ LAYOUT }
+						renderAppender={ isTemplatePart ? false : undefined }
 					/>
 				</ResizableEditor>
 

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

@@ -137,6 +137,7 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 						}</style>
 					</>
 				}
+				assets={ settings.__unstableResolvedAssets }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"

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

@@ -19,18 +19,14 @@
 	align-items: center;
 
 	&.is-focus-mode {
-		padding: 48px;
+		padding: $grid-unit-60;
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: 2px;
+			border-radius: $radius-block-ui;
 		}
 	}
 }
 
-.edit-site-visual-editor__editor-canvas {
-	border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
 	position: absolute;
 	top: $grid-unit-10;
@@ -55,30 +51,26 @@
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-10;
+	width: $grid-unit-05;
 	height: $height;
 	appearance: none;
-	cursor: grab;
+	cursor: ew-resize;
 	outline: none;
-	background: $gray-700;
-	border-radius: 4px;
+	background: $gray-600;
+	border-radius: 2px;
 	border: 0;
 
 	&.is-left {
-		left: #{-$grid-unit-30 - $grid-unit-05};
+		left: -$grid-unit-20;
 	}
 
 	&.is-right {
-		right: #{-$grid-unit-30 - $grid-unit-05};
-	}
-
-	&:hover {
-		background: $gray-600;
+		right: -$grid-unit-20;
 	}
 
+	&:hover,
 	&:active {
-		cursor: grabbing;
-		background: $gray-600;
+		background: $gray-400;
 	}
 
 	&:focus {

package/src/components/create-template-part-modal/index.js

@@ -52,8 +52,6 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 					}
 					setIsSubmitting( true );
 					await onCreate( { title, area } );
-					setIsSubmitting( false );
-					closeModal();
 				} }
 			>
 				<TextControl

package/src/components/edit-template-part-menu-button/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	BlockSettingsMenuControls,
@@ -14,7 +14,8 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import { useLink } from '../routes/link';
 
 export default function EditTemplatePartMenuButton() {
 	return (
@@ -30,6 +31,7 @@ export default function EditTemplatePartMenuButton() {
 }
 
 function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
+	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock(
@@ -50,7 +52,15 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 		[ selectedClientId ]
 	);
 
-	const { pushTemplatePart } = useDispatch( editSiteStore );
+	const linkProps = useLink(
+		{
+			postId: selectedTemplatePart?.id,
+			postType: selectedTemplatePart?.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
 
 	if ( ! selectedTemplatePart ) {
 		return null;
@@ -58,8 +68,9 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 
 	return (
 		<MenuItem
-			onClick={ () => {
-				pushTemplatePart( selectedTemplatePart.id );
+			{ ...linkProps }
+			onClick={ ( event ) => {
+				linkProps.onClick( event );
 				onClose();
 			} }
 		>

package/src/components/editor/index.js

@@ -3,16 +3,10 @@
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	SlotFillProvider,
-	Popover,
-	Button,
-	Notice,
-} from '@wordpress/components';
+import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
-	FullscreenMode,
 	InterfaceSkeleton,
 	ComplementaryArea,
 	store as interfaceStore,
@@ -21,8 +15,6 @@ import {
 	EditorNotices,
 	EditorSnackbars,
 	EntitiesSavedStates,
-	UnsavedChangesWarning,
-	store as editorStore,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
@@ -47,13 +39,14 @@ import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
 	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { initialSettings, onError } ) {
+function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
@@ -111,26 +104,7 @@ function Editor( { initialSettings, onError } ) {
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 		};
 	}, [] );
-	const { updateEditorSettings } = useDispatch( editorStore );
-	const { setPage, setIsInserterOpened, updateSettings } = useDispatch(
-		editSiteStore
-	);
-
-	useEffect( () => {
-		updateSettings( initialSettings );
-	}, [] );
-
-	// Keep the defaultTemplateTypes in the core/editor settings too,
-	// so that they can be selected with core/editor selectors in any editor.
-	// This is needed because edit-site doesn't initialize with EditorProvider,
-	// which internally uses updateEditorSettings as well.
-	const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
-	useEffect( () => {
-		updateEditorSettings( {
-			defaultTemplateTypes,
-			defaultTemplatePartAreas,
-		} );
-	}, [ defaultTemplateTypes, defaultTemplatePartAreas ] );
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -189,120 +163,120 @@ function Editor( { initialSettings, onError } ) {
 		return null;
 	};
 
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URlQueryController> from double-announcing.
+	useTitle( isReady && __( 'Editor (beta)' ) );
+
 	return (
 		<>
 			<URLQueryController />
 			{ isReady && (
 				<ShortcutProvider>
-					<SlotFillProvider>
-						<EntityProvider kind="root" type="site">
-							<EntityProvider
-								kind="postType"
-								type={ templateType }
-								id={ entityId }
-							>
-								<GlobalStylesProvider>
-									<BlockContextProvider
-										value={ blockContext }
-									>
-										<GlobalStylesRenderer />
-										<ErrorBoundary onError={ onError }>
-											<FullscreenMode isActive />
-											<UnsavedChangesWarning />
-											<KeyboardShortcuts.Register />
-											<SidebarComplementaryAreaFills />
-											<InterfaceSkeleton
-												labels={ interfaceLabels }
-												secondarySidebar={ secondarySidebar() }
-												sidebar={
-													sidebarIsOpened && (
-														<ComplementaryArea.Slot scope="core/edit-site" />
-													)
-												}
-												drawer={ <NavigationSidebar /> }
-												header={
-													<Header
+					<EntityProvider kind="root" type="site">
+						<EntityProvider
+							kind="postType"
+							type={ templateType }
+							id={ entityId }
+						>
+							<GlobalStylesProvider>
+								<BlockContextProvider value={ blockContext }>
+									<GlobalStylesRenderer />
+									<ErrorBoundary onError={ onError }>
+										<KeyboardShortcuts.Register />
+										<SidebarComplementaryAreaFills />
+										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											secondarySidebar={ secondarySidebar() }
+											sidebar={
+												sidebarIsOpened && (
+													<ComplementaryArea.Slot scope="core/edit-site" />
+												)
+											}
+											drawer={
+												<NavigationSidebar.Slot />
+											}
+											header={
+												<Header
+													openEntitiesSavedStates={
+														openEntitiesSavedStates
+													}
+												/>
+											}
+											notices={ <EditorSnackbars /> }
+											content={
+												<>
+													<EditorNotices />
+													{ template && (
+														<BlockEditor
+															setIsInserterOpen={
+																setIsInserterOpened
+															}
+														/>
+													) }
+													{ templateResolved &&
+														! template &&
+														settings?.siteUrl &&
+														entityId && (
+															<Notice
+																status="warning"
+																isDismissible={
+																	false
+																}
+															>
+																{ __(
+																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+																) }
+															</Notice>
+														) }
+													<KeyboardShortcuts
 														openEntitiesSavedStates={
 															openEntitiesSavedStates
 														}
 													/>
-												}
-												notices={ <EditorSnackbars /> }
-												content={
-													<>
-														<EditorNotices />
-														{ template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-														{ templateResolved &&
-															! template &&
-															settings?.siteUrl &&
-															entityId && (
-																<Notice
-																	status="warning"
-																	isDismissible={
-																		false
-																	}
-																>
-																	{ __(
-																		"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																	) }
-																</Notice>
-															) }
-														<KeyboardShortcuts
-															openEntitiesSavedStates={
-																openEntitiesSavedStates
+												</>
+											}
+											actions={
+												<>
+													{ isEntitiesSavedStatesOpen ? (
+														<EntitiesSavedStates
+															close={
+																closeEntitiesSavedStates
 															}
 														/>
-													</>
-												}
-												actions={
-													<>
-														{ isEntitiesSavedStatesOpen ? (
-															<EntitiesSavedStates
-																close={
-																	closeEntitiesSavedStates
+													) : (
+														<div className="edit-site-editor__toggle-save-panel">
+															<Button
+																variant="secondary"
+																className="edit-site-editor__toggle-save-panel-button"
+																onClick={
+																	openEntitiesSavedStates
 																}
-															/>
-														) : (
-															<div className="edit-site-editor__toggle-save-panel">
-																<Button
-																	variant="secondary"
-																	className="edit-site-editor__toggle-save-panel-button"
-																	onClick={
-																		openEntitiesSavedStates
-																	}
-																	aria-expanded={
-																		false
-																	}
-																>
-																	{ __(
-																		'Open save panel'
-																	) }
-																</Button>
-															</div>
-														) }
-													</>
-												}
-												footer={ <BlockBreadcrumb /> }
-												shortcuts={ {
-													previous: previousShortcut,
-													next: nextShortcut,
-												} }
-											/>
-											<WelcomeGuide />
-											<Popover.Slot />
-											<PluginArea />
-										</ErrorBoundary>
-									</BlockContextProvider>
-								</GlobalStylesProvider>
-							</EntityProvider>
+																aria-expanded={
+																	false
+																}
+															>
+																{ __(
+																	'Open save panel'
+																) }
+															</Button>
+														</div>
+													) }
+												</>
+											}
+											footer={ <BlockBreadcrumb /> }
+											shortcuts={ {
+												previous: previousShortcut,
+												next: nextShortcut,
+											} }
+										/>
+										<WelcomeGuide />
+										<Popover.Slot />
+										<PluginArea />
+									</ErrorBoundary>
+								</BlockContextProvider>
+							</GlobalStylesProvider>
 						</EntityProvider>
-					</SlotFillProvider>
+					</EntityProvider>
 				</ShortcutProvider>
 			) }
 		</>

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

@@ -7,7 +7,8 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -68,6 +69,18 @@ function useHasBorderWidthControl( name ) {
 }
 
 export default function BorderPanel( { name } ) {
+	// 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 createHasValueCallback = ( feature ) => () =>
+		!! userBorderStyles?.[ feature ];
+
+	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
+
+	const handleOnChange = ( setStyle ) => ( value ) => {
+		setStyle( value || undefined );
+	};
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
 			'px',
@@ -77,70 +90,121 @@ export default function BorderPanel( { name } ) {
 	} );
 
 	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 	const [ borderWidthValue, setBorderWidth ] = useStyle(
 		'border.width',
 		name
 	);
 
 	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( name );
+	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
 	// Border color.
+	const showBorderColor = useHasBorderColorControl( name );
+	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-	const hasBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 
 	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( name );
+	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
 		'border.radius',
 		name
 	);
+	const hasBorderRadius = () => {
+		const borderValues = userBorderStyles?.radius;
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	};
+
+	const resetAll = () => {
+		setBorderColor( undefined );
+		setBorderRadius( undefined );
+		setBorderStyle( undefined );
+		setBorderWidth( undefined );
+	};
+
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
 
 	return (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
-						<UnitControl
-							value={ borderWidthValue }
-							label={ __( 'Width' ) }
-							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setBorderWidth( value || undefined );
-							} }
-							units={ units }
-						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ setBorderStyle }
-						/>
-					) }
-				</div>
+		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
+			{ showBorderWidth && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'width' ) }
+					label={ __( 'Width' ) }
+					onDeselect={ createResetCallback( setBorderWidth ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						value={ borderWidthValue }
+						label={ __( 'Width' ) }
+						min={ MIN_BORDER_WIDTH }
+						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
+						units={ units }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderStyle && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'style' ) }
+					label={ __( 'Style' ) }
+					onDeselect={ createResetCallback( setBorderStyle ) }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ borderStyle }
+						onChange={ handleOnChange( setBorderStyle ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ToolsPanelItem
+					hasValue={ createHasValueCallback( 'color' ) }
 					label={ __( 'Color' ) }
-					colorValue={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ setBorderColor }
-				/>
+					onDeselect={ createResetCallback( setBorderColor ) }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						colorValue={ borderColor }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ handleOnChangeWithStyle(
+							setBorderColor
+						) }
+						clearable={ false }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ setBorderRadius }
-				/>
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ createResetCallback( setBorderRadius ) }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ handleOnChange( setBorderRadius ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 }