@wordpress/edit-site 5.30.0 → 5.32.0

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

@@ -7,33 +7,31 @@ import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
+	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { navigation, symbol } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { serialize } from '@wordpress/blocks';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import TemplateActions from './template-actions';
-import TemplateAreas from './template-areas';
-import SidebarCard from '../sidebar-card';
+import TemplateActions from '../../template-actions';
+import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
 
-const CARD_ICONS = {
-	wp_block: symbol,
-	wp_navigation: navigation,
-};
+const { PostCardPanel } = unlock( editorPrivateApis );
+const { PatternOverridesPanel } = unlock( editorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 function TemplatesList( { availableTemplates, onSelect } ) {
 	const shownTemplates = useAsyncList( availableTemplates );
@@ -52,8 +50,13 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 	);
 }
 
+const POST_TYPE_PATH = {
+	wp_template: '/wp_template',
+	wp_template_part: '/wp_template_part/all',
+};
+
 export default function TemplatePanel() {
-	const { title, description, icon, record, postType, postId } = useSelect(
+	const { title, description, record, postType, postId } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
@@ -77,7 +80,7 @@ export default function TemplatePanel() {
 		},
 		[]
 	);
-
+	const history = useHistory();
 	const availablePatterns = useAvailablePatterns( record );
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -94,17 +97,23 @@ export default function TemplatePanel() {
 
 	return (
 		<>
-			<PanelBody>
-				<SidebarCard
-					className="edit-site-template-card"
-					title={ decodeEntities( title ) }
-					icon={ CARD_ICONS[ record?.type ] ?? icon }
-					description={ decodeEntities( description ) }
-					actions={ <TemplateActions template={ record } /> }
-				>
-					<TemplateAreas />
-				</SidebarCard>
-			</PanelBody>
+			<PostCardPanel
+				className="edit-site-template-card"
+				actions={
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						className="edit-site-template-card__actions"
+						toggleProps={ { size: 'small' } }
+						onRemove={ () => {
+							history.push( {
+								path: POST_TYPE_PATH[ postType ],
+							} );
+						} }
+					/>
+				}
+			/>
+			<PluginTemplateSettingPanel.Slot />
 			{ availablePatterns?.length > 0 && (
 				<PanelBody
 					title={ __( 'Transform into:' ) }
@@ -126,10 +135,10 @@ export default function TemplatePanel() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />
+			<PatternOverridesPanel />
 		</>
 	);
 }

package/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -1,42 +1,14 @@
 .edit-site-template-card {
-	&__template-areas {
-		margin-top: $grid-unit-20;
-	}
-
-	&__template-areas-list {
-		margin: 0;
-
-		> li {
-			margin: 0;
-		}
-	}
-
-	&__template-areas-item {
-		width: 100%;
-
-		// Override the default padding.
-		&.components-button.has-icon {
-			padding: 0;
-		}
-	}
-
 	&__actions {
 		line-height: 0;
 		> .components-button.is-small.has-icon {
 			padding: 0;
 			min-width: auto;
 		}
+		flex-shrink: 0;
 	}
 }
 
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
-
-.edit-site-template-card__templates-list {
-	margin-top: $grid-unit-20;
-}
 
 .edit-site-template-panel .block-editor-block-preview__container {
 	border-radius: 2px;

package/src/components/sidebar-navigation-screen/style.scss

@@ -77,7 +77,7 @@
 	flex-shrink: 0;
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
 	@include break-medium() {
 		// Safari does not currently support `scrollbar-gutter: stable`, so at
 		// particular viewport sizes it's possible for previews to render prior to a
@@ -90,18 +90,30 @@
 		// See: https://github.com/WordPress/gutenberg/issues/55112
 		max-width: 292px;
 	}
+}
 
+.edit-site-global-styles-variation-title {
+	color: $gray-300;
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
 	.edit-site-global-styles-variations_item-preview {
 		box-shadow: 0 0 0 $border-width $gray-900;
 	}
-	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-100;
-	}
-	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+	&:focus .edit-site-global-styles-variations_item-preview,
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
+
+		&::after {
+			box-shadow: inset 0 0 0 1px $gray-900;
+		}
 	}
 }
 

package/src/components/sidebar-navigation-screen-details-footer/index.js

@@ -32,13 +32,17 @@ export default function SidebarNavigationScreenDetailsFooter( {
 	 * the following logic.
 	 */
 	const hrefProps = {};
-	if ( record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ) {
+	const lastRevisionId =
+		record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+	const revisionsCount =
+		record?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+	// Enable the revisions link if there is a last revision and there are more than one revisions.
+	if ( lastRevisionId && revisionsCount > 1 ) {
 		hrefProps.href = addQueryArgs( 'revision.php', {
 			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
 		} );
 		hrefProps.as = 'a';
 	}
-
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
 			<SidebarNavigationItem

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -5,7 +5,10 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import {
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
@@ -24,6 +27,12 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
+import {
+	useColorVariations,
+	useTypographyVariations,
+} from '../global-styles/hooks';
 
 const noop = () => {};
 
@@ -69,6 +78,10 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
+	const colorVariations = useColorVariations();
+	const typographyVariations = useTypographyVariations();
+	const gap = 3;
+
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
 	// the block editor store's `__internalIsInitialized` is true before
@@ -80,7 +93,21 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<StyleVariationsContainer />
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer gap={ gap } />
+				{ colorVariations?.length && (
+					<ColorVariations title={ __( 'Colors' ) } gap={ gap } />
+				) }
+				{ typographyVariations?.length && (
+					<TypographyVariations
+						title={ __( 'Typography' ) }
+						gap={ gap }
+					/>
+				) }
+			</VStack>
 		</BlockEditorProvider>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/{delete-modal.js → delete-confirm-dialog.js}

@@ -4,12 +4,11 @@
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function RenameModal( { onClose, onConfirm } ) {
+export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 	return (
 		<ConfirmDialog
 			isOpen
-			onConfirm={ ( e ) => {
-				e.preventDefault();
+			onConfirm={ () => {
 				onConfirm();
 
 				// Immediate close avoids ability to hit delete multiple times.

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

@@ -10,7 +10,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
-import DeleteModal from './delete-modal';
+import DeleteConfirmDialog from './delete-confirm-dialog';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
@@ -20,14 +20,15 @@ export default function ScreenNavigationMoreMenu( props ) {
 	const { onDelete, onSave, onDuplicate, menuTitle } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
-	const [ deleteModalOpen, setDeleteModalOpen ] = useState( false );
+	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
+		useState( false );
 
 	const closeModals = () => {
 		setRenameModalOpen( false );
-		setDeleteModalOpen( false );
+		setDeleteConfirmDialogOpen( false );
 	};
 	const openRenameModal = () => setRenameModalOpen( true );
-	const openDeleteModal = () => setDeleteModalOpen( true );
+	const openDeleteConfirmDialog = () => setDeleteConfirmDialogOpen( true );
 
 	return (
 		<>
@@ -60,7 +61,7 @@ export default function ScreenNavigationMoreMenu( props ) {
 							<MenuItem
 								isDestructive
 								onClick={ () => {
-									openDeleteModal();
+									openDeleteConfirmDialog();
 
 									// Close the dropdown after opening the modal.
 									onClose();
@@ -72,11 +73,12 @@ export default function ScreenNavigationMoreMenu( props ) {
 					</div>
 				) }
 			</DropdownMenu>
-
-			{ deleteModalOpen && (
-				<DeleteModal onClose={ closeModals } onConfirm={ onDelete } />
+			{ deleteConfirmDialogOpen && (
+				<DeleteConfirmDialog
+					onClose={ closeModals }
+					onConfirm={ onDelete }
+				/>
 			) }
-
 			{ renameModalOpen && (
 				<RenameModal
 					onClose={ closeModals }

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -35,9 +35,12 @@ function useDeleteNavigationMenu() {
 					throwOnError: true,
 				}
 			);
-			createSuccessNotice( __( 'Deleted Navigation menu' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				__( 'Navigation menu successfully deleted.' ),
+				{
+					type: 'snackbar',
+				}
+			);
 			goTo( '/navigation' );
 		} catch ( error ) {
 			createErrorNotice(

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

@@ -115,13 +115,6 @@ export default function SidebarNavigationScreenPatterns() {
 
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
-			<SidebarNavigationItem
-				as="a"
-				href="edit.php?post_type=wp_block"
-				withChevron
-			>
-				{ __( 'Manage all of my patterns' ) }
-			</SidebarNavigationItem>
 			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
 				<SidebarNavigationItem withChevron { ...templatePartsLink }>
 					{ __( 'Manage all template parts' ) }

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

@@ -93,6 +93,11 @@ function useTemplateDetails( postType, postId ) {
 	return { title, description, content, footer };
 }
 
+const POST_TYPE_PATH = {
+	wp_template: '/wp_template',
+	wp_template_part: '/wp_template_part/all',
+};
+
 export default function SidebarNavigationScreenTemplate() {
 	const navigator = useNavigator();
 	const {
@@ -114,7 +119,7 @@ export default function SidebarNavigationScreenTemplate() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( `/${ postType }/all` );
+							navigator.goTo( POST_TYPE_PATH[ postType ] );
 						} }
 					/>
 					<SidebarButton

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -23,7 +23,7 @@ function TemplateDataviewItem( { template, isActive } ) {
 			title={ text }
 			icon={ icon }
 			isActive={ isActive }
-			isCustom="false"
+			isCustom={ false }
 		/>
 	);
 }
@@ -57,7 +57,7 @@ export default function DataviewsTemplatesSidebarContent( {
 				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }
-				isCustom="false"
+				isCustom={ false }
 			/>
 			{ firstItemPerAuthorText.map( ( template ) => {
 				return (

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

@@ -237,9 +237,7 @@ function StyleBook( {
 		<EditorCanvasContainer
 			onClose={ onClose }
 			enableResizing={ enableResizing }
-			closeButtonLabel={
-				showCloseButton ? __( 'Close Style Book' ) : null
-			}
+			closeButtonLabel={ showCloseButton ? __( 'Close' ) : null }
 		>
 			<div
 				className={ classnames( 'edit-site-style-book', {

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

@@ -160,7 +160,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 			}
 
 			// Some URLs in list views are different
-			if ( path === '/pages' && postId ) {
+			if ( path === '/page' && postId ) {
 				return resolveTemplateForPostTypeAndId( 'page', postId );
 			}
 
@@ -196,7 +196,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		}
 
 		// Some URLs in list views are different
-		if ( path === '/pages' && postId ) {
+		if ( path === '/page' && postId ) {
 			return { postType: 'page', postId };
 		}
 
@@ -207,7 +207,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		return {};
 	}, [ homepageId, postType, postId, path ] );
 
-	if ( path === '/wp_template/all' && postId ) {
+	if ( path === '/wp_template' && postId ) {
 		return { isReady: true, postType: 'wp_template', postId, context };
 	}
 

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -101,28 +101,12 @@ export default function useSyncPathWithURL() {
 					canvas: undefined,
 					path: navigatorLocation.path,
 				} );
-			} else if (
-				navigatorLocation.path === '/wp_template/all' &&
-				! window?.__experimentalAdminViews
-			) {
-				// When the experiment is disabled, we only support table layout.
-				// Clear it out from the URL, so layouts other than table cannot be accessed.
-				updateUrlParams( {
-					postType: undefined,
-					categoryType: undefined,
-					categoryId: undefined,
-					path: navigatorLocation.path,
-					layout: undefined,
-				} );
 			} else if (
 				// These sidebar paths are special in the sense that the url in these pages may or may not have a postId and we need to retain it if it has.
 				// The "type" property should be kept as well.
-				( navigatorLocation.path === '/pages' &&
-					window?.__experimentalAdminViews ) ||
-				( navigatorLocation.path === '/wp_template/all' &&
-					window?.__experimentalAdminViews ) ||
-				( navigatorLocation.path === '/wp_template_part/all' &&
-					window?.__experimentalAdminViews )
+				navigatorLocation.path === '/page' ||
+				navigatorLocation.path === '/wp_template' ||
+				navigatorLocation.path === '/wp_template_part/all'
 			) {
 				updateUrlParams( {
 					postType: undefined,

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

@@ -36,10 +36,7 @@ export default function TemplateActions( {
 			select( coreStore ).getEntityRecord( 'postType', postType, postId ),
 		[ postType, postId ]
 	);
-	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
+	const { removeTemplate } = useDispatch( editSiteStore );
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );
 
@@ -47,6 +44,49 @@ export default function TemplateActions( {
 		return null;
 	}
 
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					{ isRemovable && (
+						<>
+							<RenameMenuItem
+								template={ template }
+								onClose={ onClose }
+							/>
+							<DeleteMenuItem
+								onRemove={ () => {
+									removeTemplate( template );
+									onRemove?.();
+									onClose();
+								} }
+								title={ template.title.rendered }
+							/>
+						</>
+					) }
+					{ isRevertable && (
+						<ResetMenuItem
+							template={ template }
+							onClose={ onClose }
+						/>
+					) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function ResetMenuItem( { template, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 	async function revertAndSaveTemplate() {
 		try {
 			await revertTemplate( template, { allowUndo: false } );
@@ -55,7 +95,6 @@ export default function TemplateActions( {
 				template.type,
 				template.id
 			);
-
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
@@ -82,48 +121,26 @@ export default function TemplateActions( {
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
 	}
-
 	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className={ className }
-			toggleProps={ toggleProps }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					{ isRemovable && (
-						<>
-							<RenameMenuItem
-								template={ template }
-								onClose={ onClose }
-							/>
-							<DeleteMenuItem
-								onRemove={ () => {
-									removeTemplate( template );
-									onRemove?.();
-									onClose();
-								} }
-								title={ template.title.rendered }
-							/>
-						</>
-					) }
-					{ isRevertable && (
-						<MenuItem
-							info={ __(
-								'Use the template as supplied by the theme.'
-							) }
-							onClick={ () => {
-								revertAndSaveTemplate();
-								onClose();
-							} }
-						>
-							{ __( 'Clear customizations' ) }
-						</MenuItem>
-					) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+		<>
+			<MenuItem
+				info={ __( 'Use the template as supplied by the theme.' ) }
+				onClick={ () => setIsModalOpen( true ) }
+			>
+				{ __( 'Clear customizations' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ () => {
+					revertAndSaveTemplate();
+					onClose();
+				} }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Clear' ) }
+			>
+				{ __( 'Are you sure you want to clear these customizations?' ) }
+			</ConfirmDialog>
+		</>
 	);
 }
 

package/src/components/welcome-guide/editor.js

@@ -6,6 +6,7 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,16 +16,18 @@ import WelcomeGuideImage from './image';
 export default function WelcomeGuideEditor() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isActive = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
+	const { isActive, isBlockBasedTheme } = useSelect( ( select ) => {
+		return {
+			isActive: !! select( preferencesStore ).get(
 				'core/edit-site',
 				'welcomeGuide'
 			),
-		[]
-	);
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
+		};
+	}, [] );
 
-	if ( ! isActive ) {
+	if ( ! isActive || ! isBlockBasedTheme ) {
 		return null;
 	}
 

package/src/hooks/index.js

@@ -3,4 +3,3 @@
  */
 import './components';
 import './push-changes-to-global-styles';
-import './template-part-edit';