@wordpress/edit-site 5.30.0 → 5.31.0

package/src/components/sidebar-dataviews/index.js

@@ -25,6 +25,7 @@ export default function DataViewsSidebarContent() {
 	if ( ! path || ! PATH_TO_TYPE[ path ] ) {
 		return null;
 	}
+	const isCustomBoolean = isCustom === 'true';
 	const type = PATH_TO_TYPE[ path ];
 
 	return (
@@ -39,10 +40,10 @@ export default function DataViewsSidebarContent() {
 							icon={ dataview.icon }
 							type={ dataview.view.type }
 							isActive={
-								isCustom === 'false' &&
+								! isCustomBoolean &&
 								dataview.slug === activeView
 							}
-							isCustom="false"
+							isCustom={ false }
 						/>
 					);
 				} ) }
@@ -51,7 +52,7 @@ export default function DataViewsSidebarContent() {
 				<CustomDataViewsList
 					activeView={ activeView }
 					type={ type }
-					isCustom="true"
+					isCustom
 				/>
 			) }
 		</>

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

@@ -14,9 +14,9 @@ import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	PageAttributesPanel,
+	PluginDocumentSettingPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -97,6 +97,7 @@ export default function PagePanels() {
 					postType={ type }
 				/>
 			</PanelBody>
+			<PluginDocumentSettingPanel.Slot />
 			{ renderingMode !== 'post-only' && (
 				<PanelBody title={ __( 'Content' ) }>
 					<PageContent />
@@ -104,7 +105,6 @@ export default function PagePanels() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />

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

@@ -7,6 +7,7 @@ import {
 	PostURLPanel,
 	PostSchedulePanel,
 	PostTemplatePanel,
+	PostFeaturedImagePanel,
 } from '@wordpress/editor';
 
 /**
@@ -23,6 +24,7 @@ export default function PageSummary( {
 } ) {
 	return (
 		<VStack spacing={ 0 }>
+			<PostFeaturedImagePanel withPanelBody={ false } />
 			<PageStatus
 				status={ status }
 				date={ date }

package/src/components/sidebar-edit-mode/sidebar-card/index.js

@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import {
+	Icon,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 export default function SidebarCard( {
 	className,
@@ -18,17 +23,31 @@ export default function SidebarCard( {
 } ) {
 	return (
 		<div className={ classnames( 'edit-site-sidebar-card', className ) }>
-			<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
-			<div className="edit-site-sidebar-card__content">
-				<div className="edit-site-sidebar-card__header">
-					<h2 className="edit-site-sidebar-card__title">{ title }</h2>
-					{ actions }
-				</div>
-				<div className="edit-site-sidebar-card__description">
-					{ description }
-				</div>
+			<HStack
+				spacing={ 2 }
+				className="edit-site-sidebar-card__header"
+				align="flex-start"
+			>
+				<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="edit-site-sidebar-card__title"
+					weight={ 500 }
+					as="h2"
+				>
+					{ title }
+				</Text>
+				{ actions }
+			</HStack>
+			<VStack className="edit-site-sidebar-card__content">
+				{ description && (
+					<div className="edit-site-sidebar-card__description">
+						{ description }
+					</div>
+				) }
 				{ children }
-			</div>
+			</VStack>
 		</div>
 	);
 }

package/src/components/sidebar-edit-mode/sidebar-card/style.scss

@@ -1,30 +1,25 @@
 .edit-site-sidebar-card {
-	display: flex;
-	align-items: flex-start;
-
 	&__content {
 		flex-grow: 1;
-		margin-bottom: $grid-unit-05;
 	}
 
 	&__title {
-		font-weight: 500;
-		line-height: $icon-size;
+		width: 100%;
+
 		&.edit-site-sidebar-card__title {
-			font-size: $default-font-size;
-			line-height: $default-line-height;
+			font-size: 16px;
+			line-height: $icon-size;
 			margin: 0;
-			padding: 3px 0; // This makes the title as high as the icon.
 		}
 	}
 
 	&__description {
 		font-size: $default-font-size;
+		color: $gray-700;
 	}
 
 	&__icon {
 		flex: 0 0 $icon-size;
-		margin-right: $grid-unit-15;
 		width: $icon-size;
 		height: $icon-size;
 	}
@@ -32,6 +27,10 @@
 	&__header {
 		display: flex;
 		justify-content: space-between;
-		margin: 0 0 $grid-unit-05;
+		margin: 0 0 $grid-unit-15;
+	}
+
+	.edit-site-template-card__actions {
+		flex-shrink: 0;
 	}
 }

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

@@ -7,7 +7,6 @@ import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -19,16 +18,20 @@ 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 TemplateActions from '../../template-actions';
 import TemplateAreas from './template-areas';
 import SidebarCard from '../sidebar-card';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
+import { unlock } from '../../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const CARD_ICONS = {
 	wp_block: symbol,
@@ -52,6 +55,11 @@ 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(
 		( select ) => {
@@ -77,7 +85,7 @@ export default function TemplatePanel() {
 		},
 		[]
 	);
-
+	const history = useHistory();
 	const availablePatterns = useAvailablePatterns( record );
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -100,7 +108,19 @@ export default function TemplatePanel() {
 					title={ decodeEntities( title ) }
 					icon={ CARD_ICONS[ record?.type ] ?? icon }
 					description={ decodeEntities( description ) }
-					actions={ <TemplateActions template={ record } /> }
+					actions={
+						<TemplateActions
+							postType={ postType }
+							postId={ postId }
+							className="edit-site-template-card__actions"
+							toggleProps={ { size: 'small' } }
+							onRemove={ () => {
+								history.push( {
+									path: POST_TYPE_PATH[ postType ],
+								} );
+							} }
+						/>
+					}
 				>
 					<TemplateAreas />
 				</SidebarCard>
@@ -126,7 +146,6 @@ export default function TemplatePanel() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostFeaturedImagePanel />
 			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />

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,7 +90,16 @@
 		// 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-style-variations-container {
 	.edit-site-global-styles-variations_item-preview {
 		box-shadow: 0 0 0 $border-width $gray-900;
 	}

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,9 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
+	const colorVariations = useColorVariations();
+	const typographyVariations = useTypographyVariations();
+
 	// 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 +92,28 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<StyleVariationsContainer />
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer />
+				{ colorVariations?.length && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Colors' ) }
+						</h3>
+						<ColorVariations />
+					</div>
+				) }
+				{ typographyVariations?.length && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Typography' ) }
+						</h3>
+						<TypographyVariations />
+					</div>
+				) }
+			</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-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/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -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 === '/pages' ||
+				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>
+		</>
 	);
 }