@wordpress/edit-site 5.8.0 → 5.9.0

package/src/components/add-new-template/new-template.js

@@ -24,6 +24,7 @@ import {
 	post,
 	postAuthor,
 	postDate,
+	postList,
 	search,
 	tag,
 	layout as customGenericTemplateIcon,
@@ -51,6 +52,7 @@ import { unlock } from '../../private-apis';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
+	'home',
 	'single',
 	'page',
 	'index',
@@ -66,6 +68,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 
 const TEMPLATE_ICONS = {
 	'front-page': home,
+	home: postList,
 	single: post,
 	page,
 	archive,

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

@@ -36,8 +36,8 @@ import { store as editSiteStore } from '../../store';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
-import StyleBook from '../style-book';
 import { unlock } from '../../private-apis';
+import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -165,19 +165,19 @@ export default function BlockEditor() {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			{ /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ }
-			<StyleBook.Slot>
-				{ ( [ styleBook ] ) =>
-					styleBook ? (
+			<EditorCanvasContainer.Slot>
+				{ ( [ editorCanvasView ] ) =>
+					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
 							<ResizableEditor enableResizing>
-								{ styleBook }
+								{ editorCanvasView }
 							</ResizableEditor>
 						</div>
 					) : (
 						<BlockTools
 							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode': isTemplatePart || !! styleBook,
+								'is-focus-mode':
+									isTemplatePart || !! editorCanvasView,
 								'is-view-mode': isViewMode,
 							} ) }
 							__unstableContentRef={ contentRef }
@@ -211,7 +211,7 @@ export default function BlockEditor() {
 						</BlockTools>
 					)
 				}
-			</StyleBook.Slot>
+			</EditorCanvasContainer.Slot>
 			<ReusableBlocksMenuItems />
 		</ExperimentalBlockEditorProvider>
 	);

package/src/components/editor-canvas-container/index.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Returns a translated string for the title of the editor canvas container.
+ *
+ * @param {string} view Editor canvas container view.
+ *
+ * @return {string} Translated string corresponding to value of view. Default is ''.
+ */
+export function getEditorCanvasContainerTitle( view ) {
+	switch ( view ) {
+		case 'style-book':
+			return __( 'Style Book' );
+		default:
+			return '';
+	}
+}
+
+// Creates a private slot fill.
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot';
+const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } =
+	createPrivateSlotFill( SLOT_FILL_NAME );
+
+function EditorCanvasContainer( {
+	children,
+	closeButtonLabel,
+	onClose = () => {},
+} ) {
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+	const title = useMemo(
+		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
+		[ editorCanvasContainerView ]
+	);
+	function onCloseContainer() {
+		onClose();
+		setEditorCanvasContainerView( undefined );
+		setIsClosed( true );
+	}
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onCloseContainer();
+		}
+	}
+
+	const childrenWithProps = Array.isArray( children )
+		? Children.map( children, ( child, index ) =>
+				index === 0
+					? cloneElement( child, {
+							ref: sectionFocusReturnRef,
+					  } )
+					: child
+		  )
+		: cloneElement( children, {
+				ref: sectionFocusReturnRef,
+		  } );
+
+	if ( isClosed ) {
+		return null;
+	}
+
+	return (
+		<EditorCanvasContainerFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+			<section
+				className="edit-site-editor-canvas-container"
+				ref={ focusOnMountRef }
+				onKeyDown={ closeOnEscape }
+				aria-label={ title }
+			>
+				<Button
+					className="edit-site-editor-canvas-container__close-button"
+					icon={ closeSmall }
+					label={ closeButtonLabel || __( 'Close' ) }
+					onClick={ onCloseContainer }
+					showTooltip={ false }
+				/>
+				{ childrenWithProps }
+			</section>
+		</EditorCanvasContainerFill>
+	);
+}
+
+EditorCanvasContainer.Slot = EditorCanvasContainerSlot;
+export default EditorCanvasContainer;

package/src/components/editor-canvas-container/style.scss

@@ -0,0 +1,19 @@
+.edit-site-editor-canvas-container {
+	background: $white; // Fallback color, overridden by JavaScript.
+	border-radius: $radius-block-ui;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+}
+
+.edit-site-editor-canvas-container__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+	z-index: 1;
+	background: $white;
+}

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

@@ -16,6 +16,41 @@ const {
 	BorderPanel: StylesBorderPanel,
 } = unlock( blockEditorPrivateApis );
 
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
 export default function BorderPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -31,6 +66,11 @@ export default function BorderPanel( { name, variation = '' } ) {
 	const settings = useSettingsForBlockElement( rawSettings, name );
 
 	const onChange = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
 		// As Global Styles can't conditionally generate styles based on if
 		// other style properties have been set, we need to force split
 		// border definitions for user set global border styles. Border
@@ -42,7 +82,8 @@ export default function BorderPanel( { name, variation = '' } ) {
 		// the `border` style property. This means if the theme.json defined
 		// split borders and the user condenses them into a flat border or
 		// vice-versa we'd get both sets of styles which would conflict.
-		const { border } = newStyle;
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
 		const updatedBorder = ! hasSplitBorders( border )
 			? {
 					top: border,
@@ -57,7 +98,7 @@ export default function BorderPanel( { name, variation = '' } ) {
 					...border,
 			  };
 
-		setStyle( { ...newStyle, border: updatedBorder } );
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
 	};
 
 	return (

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

@@ -27,7 +27,13 @@ export default function FiltersPanel( { name } ) {
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
-			settings={ settings }
+			settings={ {
+				...settings,
+				color: {
+					...settings.color,
+					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+				},
+			} }
 		/>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, isEmpty } from 'lodash';
+import { mergeWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,9 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, cleanEmptyObject } = unlock(
+	blockEditorPrivateApis
+);
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -32,22 +34,6 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
-const cleanEmptyObject = ( object ) => {
-	if (
-		object === null ||
-		typeof object !== 'object' ||
-		Array.isArray( object )
-	) {
-		return object;
-	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( object )
-			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => Boolean( value ) )
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
-
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles } = useSelect(
 		( select ) => {

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

@@ -42,6 +42,7 @@ import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
 import ScreenEffects from './screen-effects';
+import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -239,7 +240,7 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 	);
 }
 
-function GlobalStylesStyleBook( { onClose } ) {
+function GlobalStylesStyleBook() {
 	const navigator = useNavigator();
 	const { path } = navigator.location;
 	return (
@@ -257,7 +258,6 @@ function GlobalStylesStyleBook( { onClose } ) {
 				// Now go to the selected block.
 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
 			} }
-			onClose={ onClose }
 		/>
 	);
 }
@@ -296,9 +296,13 @@ function GlobalStylesBlockLink() {
 	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
 
-function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
+function GlobalStylesUI() {
 	const blocks = getBlockTypes();
-
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -343,8 +347,8 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 					/>
 				);
 			} ) }
-			{ isStyleBookOpened && (
-				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
+			{ 'style-book' === editorCanvasContainerView && (
+				<GlobalStylesStyleBook />
 			) }
 
 			<GlobalStylesActionMenu />

package/src/components/header-edit-mode/index.js

@@ -38,7 +38,8 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import { store as editSiteStore } from '../../store';
-import { useHasStyleBook } from '../style-book';
+import { getEditorCanvasContainerTitle } from '../editor-canvas-container';
+import { unlock } from '../../private-apis';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -56,6 +57,7 @@ export default function HeaderEditMode() {
 		blockEditorMode,
 		homeUrl,
 		showIconLabels,
+		editorCanvasView,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -88,6 +90,9 @@ export default function HeaderEditMode() {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			editorCanvasView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
 		};
 	}, [] );
 
@@ -117,7 +122,7 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const hasStyleBook = useHasStyleBook();
+	const hasDefaultEditorCanvasView = ! editorCanvasView;
 
 	const isFocusMode = templateType === 'wp_template_part';
 
@@ -138,7 +143,7 @@ export default function HeaderEditMode() {
 				'show-icon-labels': showIconLabels,
 			} ) }
 		>
-			{ ! hasStyleBook && (
+			{ hasDefaultEditorCanvasView && (
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
@@ -223,12 +228,16 @@ export default function HeaderEditMode() {
 			) }
 
 			<div className="edit-site-header-edit-mode__center">
-				{ hasStyleBook ? __( 'Style Book' ) : <DocumentActions /> }
+				{ ! hasDefaultEditorCanvasView ? (
+					getEditorCanvasContainerTitle( editorCanvasView )
+				) : (
+					<DocumentActions />
+				) }
 			</div>
 
 			<div className="edit-site-header-edit-mode__end">
 				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && ! hasStyleBook && (
+					{ ! isFocusMode && hasDefaultEditorCanvasView && (
 						<div
 							className={ classnames(
 								'edit-site-header-edit-mode__preview-options',

package/src/components/layout/index.js

@@ -23,6 +23,7 @@ import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -68,8 +69,8 @@ export default function Layout() {
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
-		( select ) => {
+	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
+		useSelect( ( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
@@ -82,10 +83,10 @@ export default function Layout() {
 				nextShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/next-region'
 				),
+				hasFixedToolbar:
+					select( preferencesStore ).get( 'fixedToolbar' ),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -139,19 +140,11 @@ export default function Layout() {
 					{
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': canvasMode === 'edit',
+						'has-fixed-toolbar': hasFixedToolbar,
 					}
 				) }
 			>
-				<SiteHub
-					ref={ hubRef }
-					className="edit-site-layout__hub"
-					style={ {
-						width:
-							isResizingEnabled && forcedWidth
-								? forcedWidth - 48
-								: undefined,
-					} }
-				/>
+				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
 
 				<AnimatePresence initial={ false }>
 					{ isEditorPage && canvasMode === 'edit' && (
@@ -176,7 +169,7 @@ export default function Layout() {
 								ease: 'easeOut',
 							} }
 						>
-							{ canvasMode === 'edit' && <Header /> }
+							<Header />
 						</NavigableRegion>
 					) }
 				</AnimatePresence>

package/src/components/layout/style.scss

@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
+		width: $header-height;
 		padding-right: 0;
 	}
 
@@ -135,6 +135,7 @@
 
 		& > div {
 			border-radius: 0;
+			box-shadow: none;
 		}
 	}
 }
@@ -148,13 +149,20 @@
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
-	height: 100%;
-	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: 0;
+	height: $header-height;
+	width: $header-height;
+	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	border-bottom: 1px solid transparent;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-bottom-color: $gray-200;
+		transition: border-bottom-color 0.15s 0.4s ease-out;
+	}
 
 	&:hover,
 	&:active {
@@ -189,6 +197,10 @@
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		border-radius: $radius-block-ui;
+		height: $grid-unit-80;
+		width: $grid-unit-80;
+		justify-content: center;
+		align-items: center;
 	}
 }
 
@@ -220,3 +232,18 @@
 		border-left: $border-width solid $gray-300;
 	}
 }
+
+.edit-site-layout.has-fixed-toolbar {
+	// making the header be lower than the content
+	// so the fixed toolbar can be positioned on top of it
+	// but only on desktop
+	@include break-medium() {
+		.edit-site-site-hub {
+			z-index: 4;
+		}
+		.edit-site-layout__header:focus-within {
+			z-index: 3;
+		}
+	}
+
+}

package/src/components/list/table.js

@@ -18,19 +18,33 @@ import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
-	const { records: templates, isResolving: isLoading } = useEntityRecords(
+	const { records: allTemplates } = useEntityRecords(
 		'postType',
 		templateType,
 		{
 			per_page: -1,
 		}
 	);
+
+	const templates = useSelect(
+		( select ) =>
+			allTemplates?.filter(
+				( template ) =>
+					! select( coreStore ).isDeletingEntityRecord(
+						'postType',
+						templateType,
+						template.id
+					)
+			),
+		[ allTemplates ]
+	);
+
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
 	);
 
-	if ( ! templates || isLoading ) {
+	if ( ! templates ) {
 		return null;
 	}
 

package/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-site-editor__inserter-panel,
 .edit-site-editor__list-view-panel {
 	height: 100%;
@@ -6,9 +11,11 @@
 }
 
 .edit-site-editor__list-view-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 }
 
 .edit-site-editor__inserter-panel-header {
@@ -42,6 +49,17 @@
 }
 
 .edit-site-editor__list-view-panel-content {
-	overflow-y: auto;
-	padding: $grid-unit-10;
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

package/src/components/sidebar/style.scss

@@ -3,7 +3,8 @@
 	overflow-y: auto;
 
 	.components-navigator-screen {
-		@include custom-scrollbars-on-hover;
+		@include custom-scrollbars-on-hover(transparent, $gray-700);
+		scrollbar-gutter: stable;
 	}
 }