@wordpress/edit-post 6.0.1 → 6.0.2

package/src/components/header/fullscreen-mode-close/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -59,9 +60,8 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 
 	const effect = {
 		expand: {
-			scale: 1.7,
-			borderRadius: 0,
-			transition: { type: 'tween', duration: '0.2' },
+			scale: 1.25,
+			transition: { type: 'tween', duration: '0.3' },
 		},
 	};
 
@@ -85,10 +85,15 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
+	const classes = classnames( {
+		'edit-post-fullscreen-mode-close': true,
+		'has-icon': siteIconUrl,
+	} );
+
 	return (
 		<motion.div whileHover="expand">
 			<Button
-				className="edit-post-fullscreen-mode-close has-icon"
+				className={ classes }
 				href={
 					href ??
 					addQueryArgs( 'edit.php', {

package/src/components/header/fullscreen-mode-close/style.scss

@@ -1,7 +1,7 @@
 // Developer notes: these rules are duplicated for the site editor.
 // They need to be updated in both places.
 
-.edit-post-fullscreen-mode-close.has-icon {
+.edit-post-fullscreen-mode-close.components-button {
 	// Do not show the toolbar icon on small screens,
 	// when Fullscreen Mode is not an option in the "More" menu.
 	display: none;
@@ -46,6 +46,10 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
 		}
 
+		&.has-icon:hover::before {
+			box-shadow: none;
+		}
+
 		// Lightened spot color focus.
 		&:focus::before {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

package/src/components/header/index.js

@@ -56,7 +56,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 	return (
 		<div className={ classes }>
 			<MainDashboardButton.Slot>
-				<FullscreenModeClose />
+				<FullscreenModeClose showTooltip />
 			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar />

package/src/components/header/template-title/delete-template.js

@@ -7,11 +7,16 @@ import { pickBy } from 'lodash';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { MenuGroup, MenuItem } from '@wordpress/components';
+import {
+	MenuGroup,
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -33,6 +38,7 @@ export default function DeleteTemplate() {
 			template: _isEditing ? getEditedPostTemplate() : null,
 		};
 	}, [] );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( ! template || ! template.wp_id ) {
 		return null;
@@ -42,53 +48,58 @@ export default function DeleteTemplate() {
 		templateTitle = template.title;
 	}
 
+	const onDelete = () => {
+		clearSelectedBlock();
+		setIsEditingTemplate( false );
+		setShowConfirmDialog( false );
+
+		editPost( {
+			template: '',
+		} );
+		const settings = getEditorSettings();
+		const newAvailableTemplates = pickBy(
+			settings.availableTemplates,
+			( _title, id ) => {
+				return id !== template.slug;
+			}
+		);
+		updateEditorSettings( {
+			...settings,
+			availableTemplates: newAvailableTemplates,
+		} );
+		deleteEntityRecord( 'postType', 'wp_template', template.id );
+	};
+
 	return (
 		<MenuGroup className="edit-post-template-top-area__second-menu-group">
-			<MenuItem
-				className="edit-post-template-top-area__delete-template-button"
-				isDestructive
-				variant="secondary"
-				aria-label={ __( 'Delete template' ) }
-				onClick={ () => {
-					if (
-						// eslint-disable-next-line no-alert
-						window.confirm(
-							sprintf(
-								/* translators: %s: template name */
-								__(
-									'Are you sure you want to delete the %s template? It may be used by other pages or posts.'
-								),
-								templateTitle
-							)
-						)
-					) {
-						clearSelectedBlock();
-						setIsEditingTemplate( false );
-
-						editPost( {
-							template: '',
-						} );
-						const settings = getEditorSettings();
-						const newAvailableTemplates = pickBy(
-							settings.availableTemplates,
-							( _title, id ) => {
-								return id !== template.slug;
-							}
-						);
-						updateEditorSettings( {
-							...settings,
-							availableTemplates: newAvailableTemplates,
-						} );
-						deleteEntityRecord(
-							'postType',
-							'wp_template',
-							template.id
-						);
-					}
-				} }
-			>
-				{ __( 'Delete template' ) }
-			</MenuItem>
+			<>
+				<MenuItem
+					className="edit-post-template-top-area__delete-template-button"
+					isDestructive
+					variant="secondary"
+					aria-label={ __( 'Delete template' ) }
+					onClick={ () => {
+						setShowConfirmDialog( true );
+					} }
+				>
+					{ __( 'Delete template' ) }
+				</MenuItem>
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ onDelete }
+					onCancel={ () => {
+						setShowConfirmDialog( false );
+					} }
+				>
+					{ sprintf(
+						/* translators: %s: template name */
+						__(
+							'Are you sure you want to delete the %s template? It may be used by other pages or posts.'
+						),
+						templateTitle
+					) }
+				</ConfirmDialog>
+			</>
 		</MenuGroup>
 	);
 }

package/src/components/preferences-modal/index.js

@@ -9,7 +9,8 @@ import { get } from 'lodash';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
@@ -18,7 +19,6 @@ import {
 	FlexItem,
 	Modal,
 	TabPanel,
-	Button,
 	Card,
 	CardHeader,
 	CardBody,
@@ -55,34 +55,6 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( { as: Tag = Button, path, ...props } ) {
-	const { goTo } = useNavigator();
-
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const tagProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<Tag
-			onClick={ () =>
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...tagProps }
-		/>
-	);
-}
-
-function NavigationBackButton( { as: Tag = Button, ...props } ) {
-	const { goBack } = useNavigator();
-	return <Tag onClick={ goBack } { ...props } />;
-}
-
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -347,7 +319,7 @@ export default function PreferencesModal() {
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
-										<NavigationButton
+										<NavigatorButton
 											key={ tab.name }
 											path={ tab.name }
 											as={ Item }
@@ -369,7 +341,7 @@ export default function PreferencesModal() {
 													/>
 												</FlexItem>
 											</HStack>
-										</NavigationButton>
+										</NavigatorButton>
 									);
 								} ) }
 							</ItemGroup>
@@ -389,7 +361,7 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationBackButton
+									<NavigatorBackButton
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -52,7 +52,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
       >
         <CardBody>
           <ItemGroup>
-            <NavigationButton
+            <NavigatorButton
               as={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
@@ -90,8 +90,8 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                   />
                 </FlexItem>
               </HStack>
-            </NavigationButton>
-            <NavigationButton
+            </NavigatorButton>
+            <NavigatorButton
               as={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
@@ -129,8 +129,8 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                   />
                 </FlexItem>
               </HStack>
-            </NavigationButton>
-            <NavigationButton
+            </NavigatorButton>
+            <NavigatorButton
               as={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
@@ -168,7 +168,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                   />
                 </FlexItem>
               </HStack>
-            </NavigationButton>
+            </NavigatorButton>
           </ItemGroup>
         </CardBody>
       </Card>
@@ -187,7 +187,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationBackButton
+          <NavigatorBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -254,7 +254,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationBackButton
+          <NavigatorBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -312,7 +312,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationBackButton
+          <NavigatorBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -25,12 +22,6 @@ import { store as editPostStore } from '../../store';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 
-	const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
-	async function selectEditorBlock( clientId ) {
-		await clearSelectedBlock();
-		selectBlock( clientId, -1 );
-	}
-
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
@@ -70,7 +61,6 @@ export default function ListViewSidebar() {
 				] ) }
 			>
 				<ListView
-					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalFeatures
 					__experimentalPersistentListViewFeatures