@wordpress/edit-site 5.7.0 → 5.9.0

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -6,10 +6,14 @@ import {
 	store as blockEditorStore,
 	BlockList,
 	BlockTools,
+	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { useCallback } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,17 +21,80 @@ import { useCallback } from '@wordpress/element';
 import { unlock } from '../../private-apis';
 import { NavigationMenuLoader } from './loader';
 
+function CustomLinkAdditionalBlockUI( { block, onClose } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { label, url, opensInNewTab } = block.attributes;
+	const link = {
+		url,
+		opensInNewTab,
+		title: label && stripHTML( label ),
+	};
+	return (
+		<Popover placement="bottom" shift onClose={ onClose }>
+			<LinkControl
+				hasTextControl
+				hasRichPreviews
+				value={ link }
+				onChange={ ( updatedValue ) => {
+					updateBlockAttributes( block.clientId, {
+						label: updatedValue.title,
+						url: updatedValue.url,
+						opensInNewTab: updatedValue.opensInNewTab,
+					} );
+					onClose();
+				} }
+				onCancel={ onClose }
+			/>
+		</Popover>
+	);
+}
+// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
+const MAX_PAGE_COUNT = 100;
+const PAGES_QUERY = [
+	'postType',
+	'page',
+	{
+		per_page: MAX_PAGE_COUNT,
+		_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],
+		// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+		// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+		// sort.
+		orderby: 'menu_order',
+		order: 'asc',
+	},
+];
+
 export default function NavigationMenuContent( { rootClientId, onSelect } ) {
-	const { clientIdsTree, isLoading } = useSelect(
+	const [ isLoading, setIsLoading ] = useState( true );
+	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
 		( select ) => {
-			const { __unstableGetClientIdsTree, areInnerBlocksControlled } =
-				select( blockEditorStore );
-			return {
-				clientIdsTree: __unstableGetClientIdsTree( rootClientId ),
+			const {
+				__unstableGetClientIdsTree,
+				areInnerBlocksControlled,
+				getBlockName,
+			} = select( blockEditorStore );
+			const { isResolving } = select( coreStore );
 
+			const _clientIdsTree = __unstableGetClientIdsTree( rootClientId );
+			const hasOnlyPageListBlock =
+				_clientIdsTree.length === 1 &&
+				getBlockName( _clientIdsTree[ 0 ].clientId ) ===
+					'core/page-list';
+			const isLoadingPages = isResolving(
+				'getEntityRecords',
+				PAGES_QUERY
+			);
+			return {
+				clientIdsTree: _clientIdsTree,
 				// This is a small hack to wait for the navigation block
 				// to actually load its inner blocks.
-				isLoading: ! areInnerBlocksControlled( rootClientId ),
+				shouldKeepLoading:
+					! areInnerBlocksControlled( rootClientId ) ||
+					isLoadingPages,
+				isSinglePageList:
+					hasOnlyPageListBlock &&
+					! isLoadingPages &&
+					_clientIdsTree[ 0 ].innerBlocks.length > 0,
 			};
 		},
 		[ rootClientId ]
@@ -35,6 +102,48 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
+		useState( false );
+
+	const renderAdditionalBlockUICallback = useCallback(
+		( block ) => {
+			if (
+				customLinkEditPopoverOpenId &&
+				block.clientId === customLinkEditPopoverOpenId
+			) {
+				return (
+					<CustomLinkAdditionalBlockUI
+						block={ block }
+						onClose={ () => {
+							setIsCustomLinkEditPopoverOpenId( false );
+						} }
+					/>
+				);
+			}
+			return null;
+		},
+		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
+	);
+
+	// Delay loading stop by 50ms to avoid flickering.
+	useEffect( () => {
+		let timeoutId;
+		if ( shouldKeepLoading && ! isLoading ) {
+			setIsLoading( true );
+		}
+		if ( ! shouldKeepLoading && isLoading ) {
+			timeoutId = setTimeout( () => {
+				setIsLoading( false );
+				timeoutId = undefined;
+			}, 50 );
+		}
+		return () => {
+			if ( timeoutId ) {
+				clearTimeout( timeoutId );
+			}
+		};
+	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
+
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
@@ -48,11 +157,22 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
+			} else if (
+				block.name === 'core/navigation-link' &&
+				block.attributes.kind === 'custom' &&
+				block.attributes.url
+			) {
+				setIsCustomLinkEditPopoverOpenId( block.clientId );
 			} else {
 				onSelect( block );
 			}
 		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+		[
+			onSelect,
+			__unstableMarkNextChangeAsNotPersistent,
+			replaceBlock,
+			setIsCustomLinkEditPopoverOpenId,
+		]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -62,10 +182,15 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
 				<OffCanvasEditor
-					blocks={ clientIdsTree }
+					blocks={
+						isSinglePageList
+							? clientIdsTree[ 0 ].innerBlocks
+							: clientIdsTree
+					}
 					onSelect={ offCanvasOnselect }
 					LeafMoreMenu={ LeafMoreMenu }
 					showAppender={ false }
+					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
 			<div style={ { visibility: 'hidden' } }>

package/src/components/site-hub/index.js

@@ -10,12 +10,14 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -28,8 +30,7 @@ import { unlock } from '../../private-apis';
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
-		select( editSiteStore ).getEditedPostType();
+	const { canvasMode } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
@@ -41,20 +42,15 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const showLabels = canvasMode !== 'edit';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setCanvasMode( 'view' );
-				},
-		  };
+	const siteIconButtonProps = {
+		label: __( 'Open Admin Sidebar' ),
+		onClick: () => {
+			if ( canvasMode === 'edit' ) {
+				clearSelectedBlock();
+				setCanvasMode( 'view' );
+			}
+		},
+	};
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -66,7 +62,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 			ref={ ref }
 			{ ...props }
 			className={ classnames( 'edit-site-site-hub', props.className ) }
-			layout
+			initial={ false }
 			transition={ {
 				type: 'tween',
 				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
@@ -91,15 +87,47 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						{ ...siteIconButtonProps }
 						className="edit-site-layout__view-mode-toggle"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						<motion.div
+							initial={ false }
+							animate={ {
+								scale: canvasMode === 'view' ? 0.5 : 1,
+							} }
+							whileHover={ {
+								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: HUB_ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</motion.div>
 					</Button>
 				</motion.div>
 
-				{ showLabels && (
-					<div className="edit-site-site-hub__site-title">
-						{ siteTitle }
-					</div>
-				) }
+				<AnimatePresence>
+					<motion.div
+						layout={ canvasMode === 'edit' }
+						animate={ {
+							opacity: canvasMode === 'view' ? 1 : 0,
+						} }
+						exit={ {
+							opacity: 0,
+						} }
+						className="edit-site-site-hub__site-title"
+						transition={ {
+							type: 'tween',
+							duration: disableMotion ? 0 : 0.2,
+							ease: 'easeOut',
+							delay: canvasMode === 'view' ? 0.1 : 0,
+						} }
+					>
+						{ decodeEntities( siteTitle ) }
+					</motion.div>
+				</AnimatePresence>
 			</HStack>
 		</motion.div>
 	);

package/src/components/site-icon/index.js

@@ -14,22 +14,17 @@ import { store as coreDataStore } from '@wordpress/core-data';
 
 function SiteIcon( { className } ) {
 	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+		const { getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
+			isRequestingSite: ! siteData,
+			siteIconUrl: siteData?.site_icon_url,
 		};
 	}, [] );
 
 	if ( isRequestingSite && ! siteIconUrl ) {
-		return null;
+		return <div className="edit-site-site-icon__image" />;
 	}
 
 	const icon = siteIconUrl ? (
@@ -41,7 +36,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="32px"
+			size="48px"
 			icon={ wordpress }
 		/>
 	);

package/src/components/site-icon/style.scss

@@ -3,8 +3,13 @@
 }
 
 .edit-site-site-icon__image {
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	border-radius: $radius-block-ui;
+	width: 100%;
+	height: auto;
+	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
+	background: #333;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-radius: 0;
+	}
 }

package/src/components/start-template-options/index.js

@@ -32,7 +32,7 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 				ignore_empty: true,
 			} ),
 		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
-	}, [ slug ] );
+	}, [ isCustom, slug ] );
 	return templateContent;
 }
 
@@ -121,6 +121,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
+			isFullScreen={ true }
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection
@@ -146,28 +147,28 @@ export default function StartTemplateOptions() {
 	const [ modalState, setModalState ] = useState(
 		START_TEMPLATE_MODAL_STATES.INITIAL
 	);
-	const { shouldOpenModel, slug, isCustom, postType } = useSelect(
+	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
 			const _postType = getEditedPostType();
 			const postId = getEditedPostId();
-			const {
-				__experimentalGetDirtyEntityRecords,
-				getEditedEntityRecord,
-			} = select( coreStore );
+			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+				select( coreStore );
 			const templateRecord = getEditedEntityRecord(
 				'postType',
 				_postType,
 				postId
 			);
-
-			const hasDirtyEntityRecords =
-				__experimentalGetDirtyEntityRecords().length > 0;
+			const hasEdits = hasEditsForEntityRecord(
+				'postType',
+				_postType,
+				postId
+			);
 
 			return {
-				shouldOpenModel:
-					! hasDirtyEntityRecords &&
+				shouldOpenModal:
+					! hasEdits &&
 					'' === templateRecord.content &&
 					'wp_template' === _postType &&
 					! select( preferencesStore ).get(
@@ -184,7 +185,7 @@ export default function StartTemplateOptions() {
 
 	if (
 		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModel ) ||
+			! shouldOpenModal ) ||
 		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
 	) {
 		return null;

package/src/components/start-template-options/style.scss

@@ -1,57 +1,31 @@
-.edit-site-start-template-options__modal.components-modal__frame {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus;
+
 	@include break-medium() {
-		width: 50%;
+		column-count: 3;
 	}
-	@include break-large() {
-		height: fit-content;
+
+	@include break-wide() {
+		column-count: 4;
 	}
-}
 
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	display: grid;
-	width: 100%;
-	margin-top: $grid-unit-05;
-	gap: $grid-unit-30;
-	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
-		margin-bottom: 0;
-		width: 100%;
-		aspect-ratio: 3/4;
-
-		.block-editor-block-preview__container {
-			height: 100%;
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-
-		.block-editor-block-preview__content {
-			width: 100%;
-			position: absolute;
-		}
 
 		.block-editor-block-patterns-list__item-title {
 			display: none;
 		}
+	}
 
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-			}
-		}
-
-		&:focus {
-			.block-editor-block-preview__container {
-				box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 2px solid transparent;
-			}
+	.block-editor-block-patterns-list__item {
+		// Avoid to override the BlockPatternList component
+		// default hover and focus styles.
+		&:not(:focus):not(:hover) .block-editor-block-preview__container {
+			box-shadow: 0 0 0 1px $gray-300;
 		}
 	}
 
@@ -61,6 +35,7 @@
 			position: absolute;
 			padding: 0;
 			background: #f0f0f0;
+			min-height: $grid-unit-50 * 4;
 			&::after {
 				width: 100%;
 				top: 50%;

package/src/components/style-book/index.js

@@ -7,14 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	Button,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
-	createSlotFill,
-	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -31,29 +28,19 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
-import {
-	useResizeObserver,
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
+import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
-const SLOT_FILL_NAME = 'EditSiteStyleBook';
-const { Slot: StyleBookSlot, Fill: StyleBookFill } =
-	createSlotFill( SLOT_FILL_NAME );
-
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -174,11 +161,8 @@ function getExamples() {
 	return [ headingsExample, ...otherExamples ];
 }
 
-function StyleBook( { isSelected, onSelect, onClose } ) {
+function StyleBook( { isSelected, onSelect } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const sectionFocusReturnRef = useFocusReturn();
-
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
@@ -207,17 +191,9 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 		[ originalSettings ]
 	);
 
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			onClose();
-		}
-	}
-
 	return (
-		<StyleBookFill>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<section
+		<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>
+			<div
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
 				} ) }
@@ -225,21 +201,8 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					color: textColor,
 					background: backgroundColor,
 				} }
-				aria-label={ __( 'Style Book' ) }
-				onKeyDown={ closeOnEscape }
-				ref={ useMergeRefs( [
-					sectionFocusReturnRef,
-					focusOnMountRef,
-				] ) }
 			>
 				{ resizeObserver }
-				<Button
-					className="edit-site-style-book__close-button"
-					icon={ closeSmall }
-					label={ __( 'Close Style Book' ) }
-					onClick={ onClose }
-					showTooltip={ false }
-				/>
 				<TabPanel
 					className="edit-site-style-book__tab-panel"
 					tabs={ tabs }
@@ -282,8 +245,8 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 						</Iframe>
 					) }
 				</TabPanel>
-			</section>
-		</StyleBookFill>
+			</div>
+		</EditorCanvasContainer>
 	);
 }
 
@@ -365,11 +328,4 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
 	);
 };
 
-function useHasStyleBook() {
-	const fills = useSlotFills( SLOT_FILL_NAME );
-	return !! fills?.length;
-}
-
-StyleBook.Slot = StyleBookSlot;
 export default StyleBook;
-export { useHasStyleBook };

package/src/components/style-book/style.scss

@@ -1,21 +1,3 @@
-.edit-site-style-book {
-	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-style-book__close-button {
-	position: absolute;
-	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-}
-
 .edit-site-style-book__tab-panel {
 	.components-tab-panel__tabs {
 		background: $white;

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -14,16 +14,17 @@ import { store as editSiteStore } from '../../store';
 export default function useInitEditedEntityFromURL() {
 	const { params: { postId, postType } = {} } = useLocation();
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
-		const { getSite } = select( coreDataStore );
+		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
+		const base = getUnstableBase();
 
 		return {
-			isRequestingSite: ! siteData,
+			isRequestingSite: ! base,
 			homepageId:
 				siteData?.show_on_front === 'page'
 					? siteData.page_on_front
 					: null,
-			url: siteData?.url,
+			url: base?.home,
 		};
 	}, [] );
 

package/src/components/template-details/index.js

@@ -102,6 +102,7 @@ export default function TemplateDetails( { template, onClose } ) {
 			<Button
 				className="edit-site-template-details__show-all-button"
 				{ ...browseAllLinkProps }
+				onClick={ () => onClose() }
 			>
 				{ template?.type === 'wp_template'
 					? __( 'Manage all templates' )