@wordpress/edit-site 5.29.0 → 5.30.0

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

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import {
 	BlockToolbar,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -42,6 +43,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
 
 export default function HeaderEditMode() {
@@ -52,8 +54,6 @@ export default function HeaderEditMode() {
 		blockSelectionStart,
 		showIconLabels,
 		editorCanvasView,
-		hasFixedToolbar,
-		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const { getEditedPostType } = select( editSiteStore );
 		const { getBlockSelectionStart, __unstableGetEditorMode } =
@@ -70,14 +70,13 @@ export default function HeaderEditMode() {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			isDistractionFree: getPreference( 'core', 'distractionFree' ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
+	const { showFixedToolbar } = useShowBlockTools();
+	const showTopToolbar = isLargeViewport && showFixedToolbar;
 	const blockToolbarRef = useRef();
 	const disableMotion = useReducedMotion();
 
@@ -90,8 +89,6 @@ export default function HeaderEditMode() {
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	const hasBlockSelected = !! blockSelectionStart;
-
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
 		if ( blockSelectionStart ) {
@@ -128,7 +125,7 @@ export default function HeaderEditMode() {
 						blockEditorMode={ blockEditorMode }
 						isDistractionFree={ isDistractionFree }
 					/>
-					{ isTopToolbar && (
+					{ showTopToolbar && (
 						<>
 							<div
 								className={ classnames(
@@ -144,24 +141,20 @@ export default function HeaderEditMode() {
 								ref={ blockToolbarRef }
 								name="block-toolbar"
 							/>
-							{ hasBlockSelected && (
-								<Button
-									className="edit-site-header-edit-mode__block-tools-toggle"
-									icon={
-										isBlockToolsCollapsed ? next : previous
-									}
-									onClick={ () => {
-										setIsBlockToolsCollapsed(
-											( collapsed ) => ! collapsed
-										);
-									} }
-									label={
-										isBlockToolsCollapsed
-											? __( 'Show block tools' )
-											: __( 'Hide block tools' )
-									}
-								/>
-							) }
+							<Button
+								className="edit-site-header-edit-mode__block-tools-toggle"
+								icon={ isBlockToolsCollapsed ? next : previous }
+								onClick={ () => {
+									setIsBlockToolsCollapsed(
+										( collapsed ) => ! collapsed
+									);
+								} }
+								label={
+									isBlockToolsCollapsed
+										? __( 'Show block tools' )
+										: __( 'Hide block tools' )
+								}
+							/>
 						</>
 					) }
 				</motion.div>
@@ -173,7 +166,7 @@ export default function HeaderEditMode() {
 						'edit-site-header-edit-mode__center',
 						{
 							'is-collapsed':
-								! isBlockToolsCollapsed && isLargeViewport,
+								! isBlockToolsCollapsed && showTopToolbar,
 						}
 					) }
 				>

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

@@ -4,13 +4,14 @@
 import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external } from '@wordpress/icons';
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { external, moreVertical } from '@wordpress/icons';
 import {
-	ActionItem,
-	MoreMenuDropdown,
-	store as interfaceStore,
-} from '@wordpress/interface';
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -55,10 +56,18 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	return (
 		<>
-			<MoreMenuDropdown
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
 				toggleProps={ {
 					showTooltip: ! showIconLabels,
 					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
 				} }
 			>
 				{ ( { onClose } ) => (
@@ -162,7 +171,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal />
 			<EditSitePreferencesModal />
 		</>

package/src/components/header-edit-mode/style.scss

@@ -256,3 +256,7 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__block-tools-toggle {
 	margin-left: 2px; // Allow focus ring to be fully visible
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/layout/index.js

@@ -70,6 +70,7 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
+		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -96,6 +97,9 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -172,6 +176,7 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
+						'is-zoom-out': isZoomOutMode,
 					}
 				) }
 			>

package/src/components/page-patterns/index.js

@@ -210,6 +210,26 @@ function Title( { item, categoryId } ) {
 	}
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="left"
+				className="edit-site-patterns__pattern-title"
+			>
+				{ item.type === PATTERN_TYPES.theme ? (
+					item.title
+				) : (
+					<Button
+						variant="link"
+						onClick={ onClick }
+						// Required for the grid's roving tab index system.
+						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+						tabIndex="-1"
+					>
+						{ item.title || item.name }
+					</Button>
+				) }
+			</Flex>
 			{ itemIcon && ! isNonUserPattern && (
 				<Tooltip
 					placement="top"
@@ -235,26 +255,6 @@ function Title( { item, categoryId } ) {
 					/>
 				</Tooltip>
 			) }
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="left"
-				className="edit-site-patterns__pattern-title"
-			>
-				{ item.type === PATTERN_TYPES.theme ? (
-					item.title
-				) : (
-					<Button
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ item.title || item.name }
-					</Button>
-				) }
-			</Flex>
 		</HStack>
 	);
 }
@@ -413,7 +413,7 @@ export default function DataviewsPatterns() {
 					isLoading={ isResolving }
 					view={ view }
 					onChangeView={ onChangeView }
-					deferredRendering={ true }
+					deferredRendering
 					supportedLayouts={ [ LAYOUT_GRID ] }
 				/>
 			</Page>

package/src/components/{list/added-by.js → page-templates-template-parts/hooks.js}

@@ -1,28 +1,19 @@
-// @ts-check
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import {
 	commentAuthorAvatar as authorIcon,
 	layout as themeIcon,
 	plugins as pluginIcon,
 	globe as globeIcon,
 } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants';
+import { TEMPLATE_ORIGINS } from '../../utils/constants';
 
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
@@ -107,59 +98,3 @@ export function useAddedBy( postType, postId ) {
 		[ postType, postId ]
 	);
 }
-
-/**
- * @param {Object} props
- * @param {string} props.imageUrl
- */
-export function AvatarImage( { imageUrl } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	return (
-		<div
-			className={ classnames( 'edit-site-list-added-by__avatar', {
-				'is-loaded': isImageLoaded,
-			} ) }
-		>
-			<img
-				onLoad={ () => setIsImageLoaded( true ) }
-				alt=""
-				src={ imageUrl }
-			/>
-		</div>
-	);
-}
-
-/**
- * @param {Object}       props
- * @param {TemplateType} props.postType The template post type.
- * @param {number}       props.postId   The template post id.
- */
-export default function AddedBy( { postType, postId } ) {
-	const { text, icon, imageUrl, isCustomized } = useAddedBy(
-		postType,
-		postId
-	);
-
-	return (
-		<HStack alignment="left">
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>
-				{ text }
-				{ isCustomized && (
-					<span className="edit-site-list-added-by__customized-info">
-						{ postType === TEMPLATE_POST_TYPE
-							? _x( 'Customized', 'template' )
-							: _x( 'Customized', 'template part' ) }
-					</span>
-				) }
-			</span>
-		</HStack>
-	);
-}

package/src/components/page-templates-template-parts/index.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import removeAccents from 'remove-accents';
 
 /**
@@ -34,7 +35,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy, AvatarImage } from '../list/added-by';
+import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
@@ -124,14 +125,30 @@ function Title( { item, viewType } ) {
 }
 
 function AuthorField( { item, viewType } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
 		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && <AvatarImage imageUrl={ imageUrl } /> }
+			{ withIcon && imageUrl && (
+				<div
+					className={ classnames(
+						'page-templates-author-field__avatar',
+						{
+							'is-loaded': isImageLoaded,
+						}
+					) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
 			{ withIcon && ! imageUrl && (
-				<div className="edit-site-list-added-by__icon">
+				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>
 			) }

package/src/components/page-templates-template-parts/style.scss

@@ -64,3 +64,51 @@
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}
 }
+
+
+.page-templates-author-field__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+
+	img {
+		width: 20px;
+		height: 20px;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+		border-radius: 100%;
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.page-templates-author-field__icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.edit-site-list__rename-modal {
+	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
+	z-index: z-index(".edit-site-list__rename-modal");
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}

package/src/components/resizable-frame/index.js

@@ -300,6 +300,7 @@ function ResizableFrame( {
 			className={ classnames( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
+			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
 			<motion.div
 				className="edit-site-resizable-frame__inner-content"

package/src/components/revisions/index.js

@@ -66,7 +66,7 @@ function Revisions( { userConfig, blocks } ) {
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
 			closeButtonLabel={ __( 'Close revisions' ) }
-			enableResizing={ true }
+			enableResizing
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"

package/src/components/save-panel/index.js

@@ -85,18 +85,37 @@ const _EntitiesSavedStates = ( { onClose } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
-		const { isSaveViewOpened, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
+	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const { isSaveViewOpened, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isSaveViewOpen: isSaveViewOpened(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+			// The currently selected entity to display.
+			// Typically template or template part in the site editor.
+			return {
+				isSaveViewOpen: isSaveViewOpened(),
+				canvasMode: getCanvasMode(),
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+			};
+		},
+		[]
+	);
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
 
@@ -114,7 +133,8 @@ export default function SavePanel() {
 			</Modal>
 		) : null;
 	}
-
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
 			className={ classnames( 'edit-site-layout__actions', {
@@ -131,6 +151,8 @@ export default function SavePanel() {
 						className="edit-site-editor__toggle-save-panel-button"
 						onClick={ () => setIsSaveViewOpened( true ) }
 						aria-expanded={ false }
+						disabled={ disabled }
+						__experimentalIsFocusable
 					>
 						{ __( 'Open save panel' ) }
 					</Button>

package/src/components/sidebar/index.js

@@ -74,7 +74,7 @@ function SidebarScreens() {
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/pages">
 				<SidebarNavigationScreen
-					title={ __( 'Pages' ) }
+					title={ __( 'Manage pages' ) }
 					content={ <DataViewsSidebarContent /> }
 					backPath="/page"
 				/>

package/src/components/sidebar-dataviews/default-views.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { trash } from '@wordpress/icons';
+import { trash, pages, drafts } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -51,11 +51,13 @@ export const DEFAULT_VIEWS = {
 		{
 			title: __( 'All pages' ),
 			slug: 'all',
+			icon: pages,
 			view: DEFAULT_PAGE_BASE,
 		},
 		{
 			title: __( 'Drafts' ),
 			slug: 'drafts',
+			icon: drafts,
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -203,7 +203,7 @@ export default function PageStatus( {
 											size="11"
 											lineHeight={ 1.4 }
 											weight={ 500 }
-											upperCase={ true }
+											upperCase
 										>
 											{ __( 'Password' ) }
 										</Text>

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -47,7 +47,7 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 			blockPatterns={ availableTemplates }
 			shownPatterns={ shownTemplates }
 			onClickPattern={ onSelect }
-			showTitlesAsTooltip={ true }
+			showTitlesAsTooltip
 		/>
 	);
 }

package/src/components/sidebar-navigation-screen-main/index.js

@@ -20,7 +20,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -84,7 +83,6 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Patterns' ) }
 						</NavigatorButton>
 					</ItemGroup>
-					<TemplatePartHint />
 				</>
 			}
 		/>

package/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 export default function RenameModal( { onClose, onConfirm } ) {
 	return (
 		<ConfirmDialog
-			isOpen={ true }
+			isOpen
 			onConfirm={ ( e ) => {
 				e.preventDefault();
 				onConfirm();

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -10,7 +10,6 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
 import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
-import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -30,7 +29,6 @@ export default function SingleNavigationMenu( {
 						onSave={ handleSave }
 						onDuplicate={ handleDuplicate }
 					/>
-					<EditButton postId={ navigationMenu?.id } />
 				</>
 			}
 			title={ buildNavigationLabel(

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -22,7 +22,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
 				size="11"
-				upperCase={ true }
+				upperCase
 				weight={ 500 }
 			>
 				{ title || __( 'Navigation' ) }

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js

@@ -23,7 +23,7 @@ export default function TemplatePartNavigationMenus( { menus } ) {
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
 				size="11"
-				upperCase={ true }
+				upperCase
 				weight={ 500 }
 			>
 				{ __( 'Navigation' ) }

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

package/src/components/sidebar-navigation-screen-template/index.js

@@ -18,7 +18,7 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';