@wordpress/edit-site 5.17.1 → 5.18.0

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

@@ -45,6 +45,7 @@ import {
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
@@ -156,8 +157,7 @@ export default function HeaderEditMode() {
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
-	const isFocusMode =
-		templateType === 'wp_template_part' || templateType === 'wp_navigation';
+	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -216,6 +216,7 @@ export default function HeaderEditMode() {
 									showIconLabels ? shortLabel : longLabel
 								}
 								showTooltip={ ! showIconLabels }
+								aria-expanded={ isInserterOpen }
 							/>
 						) }
 						{ isLargeViewport && (
@@ -265,6 +266,7 @@ export default function HeaderEditMode() {
 												? 'tertiary'
 												: undefined
 										}
+										aria-expanded={ isListViewOpen }
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
@@ -311,39 +313,40 @@ export default function HeaderEditMode() {
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					{ ! isFocusMode && hasDefaultEditorCanvasView && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
+					<div
+						className={ classnames(
+							'edit-site-header-edit-mode__preview-options',
+							{ 'is-zoomed-out': isZoomedOutView }
+						) }
+					>
+						<PreviewOptions
+							deviceType={ deviceType }
+							setDeviceType={ setPreviewDeviceType }
+							label={ __( 'View' ) }
+							isEnabled={
+								! isFocusMode && hasDefaultEditorCanvasView
+							}
 						>
-							<PreviewOptions
-								deviceType={ deviceType }
-								setDeviceType={ setPreviewDeviceType }
-								label={ __( 'View' ) }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										<MenuItem
-											href={ homeUrl }
-											target="_blank"
-											icon={ external }
-											onClick={ onClose }
-										>
-											{ __( 'View site' ) }
-											<VisuallyHidden as="span">
-												{
-													/* translators: accessibility text */
-													__( '(opens in a new tab)' )
-												}
-											</VisuallyHidden>
-										</MenuItem>
-									</MenuGroup>
-								) }
-							</PreviewOptions>
-						</div>
-					) }
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<MenuItem
+										href={ homeUrl }
+										target="_blank"
+										icon={ external }
+										onClick={ onClose }
+									>
+										{ __( 'View site' ) }
+										<VisuallyHidden as="span">
+											{
+												/* translators: accessibility text */
+												__( '(opens in a new tab)' )
+											}
+										</VisuallyHidden>
+									</MenuItem>
+								</MenuGroup>
+							) }
+						</PreviewOptions>
+					</div>
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

package/src/components/header-edit-mode/more-menu/copy-content-menu-item.js

@@ -16,28 +16,27 @@ import { store as editSiteStore } from '../../../store';
 
 export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
-	const getText = useSelect( ( select ) => {
-		return () => {
-			const { getEditedPostId, getEditedPostType } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const record = getEditedEntityRecord(
-				'postType',
-				getEditedPostType(),
-				getEditedPostId()
-			);
-			if ( record ) {
-				if ( typeof record.content === 'function' ) {
-					return record.content( record );
-				} else if ( record.blocks ) {
-					return __unstableSerializeAndClean( record.blocks );
-				} else if ( record.content ) {
-					return record.content;
-				}
-			}
+	const { getEditedPostId, getEditedPostType } = useSelect( editSiteStore );
+	const { getEditedEntityRecord } = useSelect( coreStore );
+
+	function getText() {
+		const record = getEditedEntityRecord(
+			'postType',
+			getEditedPostType(),
+			getEditedPostId()
+		);
+		if ( ! record ) {
 			return '';
-		};
-	}, [] );
+		}
+
+		if ( typeof record.content === 'function' ) {
+			return record.content( record );
+		} else if ( record.blocks ) {
+			return __unstableSerializeAndClean( record.blocks );
+		} else if ( record.content ) {
+			return record.content;
+		}
+	}
 
 	function onSuccess() {
 		createNotice( 'info', __( 'All content copied.' ), {

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -1,15 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -32,12 +29,8 @@ function KeyboardShortcutsEditMode() {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const {
-		setIsListViewOpened,
-		switchEditorMode,
-		setIsInserterOpened,
-		closeGeneralSidebar,
-	} = useDispatch( editSiteStore );
+	const { setIsListViewOpened, switchEditorMode, toggleDistractionFree } =
+		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 
@@ -45,17 +38,6 @@ function KeyboardShortcutsEditMode() {
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
-	const { get: getPreference } = useSelect( preferencesStore );
-	const { set: setPreference, toggle } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-
-	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-site', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-	};
-
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();
 		const destinationBlockName =
@@ -134,16 +116,6 @@ function KeyboardShortcutsEditMode() {
 
 	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
 		toggleDistractionFree();
-		toggle( 'core/edit-site', 'distractionFree' );
-		createInfoNotice(
-			getPreference( 'core/edit-site', 'distractionFree' )
-				? __( 'Distraction free mode turned on.' )
-				: __( 'Distraction free mode turned off.' ),
-			{
-				id: 'core/edit-site/distraction-free-mode/notice',
-				type: 'snackbar',
-			}
-		);
 	} );
 
 	return null;

package/src/components/page-patterns/grid-item.js

@@ -27,7 +27,7 @@ import {
 	footer,
 	symbolFilled as uncategorized,
 	symbol,
-	moreHorizontal,
+	moreVertical,
 	lockSmall,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -220,13 +220,12 @@ function GridItem( { categoryId, item, ...props } ) {
 					</Flex>
 				</HStack>
 				<DropdownMenu
-					icon={ moreHorizontal }
+					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					className="edit-site-patterns__dropdown"
 					popoverProps={ { placement: 'bottom-end' } }
 					toggleProps={ {
 						className: 'edit-site-patterns__button',
-						isSmall: true,
 						describedBy: sprintf(
 							/* translators: %s: pattern name */
 							__( 'Action menu for %s pattern' ),
@@ -254,6 +253,7 @@ function GridItem( { categoryId, item, ...props } ) {
 							/>
 							{ isCustomPattern && (
 								<MenuItem
+									isDestructive={ ! hasThemeFile }
 									onClick={ () =>
 										setIsDeleteDialogOpen( true )
 									}

package/src/components/page-patterns/style.scss

@@ -163,6 +163,10 @@
 			color: $gray-600;
 		}
 
+		.edit-site-patterns__dropdown {
+			flex-shrink: 0;
+		}
+
 		&.is-placeholder .edit-site-patterns__preview {
 			min-height: $grid-unit-80;
 			color: $gray-600;
@@ -179,7 +183,7 @@
 
 	.edit-site-patterns__preview {
 		flex: 0 1 auto;
-		margin-bottom: $grid-unit-20;
+		margin-bottom: $grid-unit-15;
 	}
 }
 

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

@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	BaseControl,
 	ToggleControl,
 	Dropdown,
 	__experimentalText as Text,
@@ -11,6 +10,7 @@ import {
 	__experimentalVStack as VStack,
 	TextControl,
 	RadioControl,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
@@ -18,6 +18,8 @@ import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -85,6 +87,7 @@ export default function PageStatus( {
 	date,
 } ) {
 	const [ showPassword, setShowPassword ] = useState( !! password );
+	const instanceId = useInstanceId( PageStatus );
 
 	const { editEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -193,10 +196,17 @@ export default function PageStatus( {
 									selected={ status }
 								/>
 								{ status !== 'private' && (
-									<BaseControl
-										id={ `edit-site-change-status__password` }
-										label={ __( 'Password' ) }
-									>
+									<fieldset className="edit-site-change-status__password-fieldset">
+										<Text
+											as="legend"
+											className="edit-site-change-status__password-legend"
+											size="11"
+											lineHeight={ 1.4 }
+											weight={ 500 }
+											upperCase={ true }
+										>
+											{ __( 'Password' ) }
+										</Text>
 										<ToggleControl
 											label={ __(
 												'Hide this page behind a password'
@@ -205,20 +215,29 @@ export default function PageStatus( {
 											onChange={ handleTogglePassword }
 										/>
 										{ showPassword && (
-											<TextControl
-												onChange={ ( value ) =>
-													saveStatus( {
-														password: value,
-													} )
-												}
-												value={ password }
-												placeholder={ __(
-													'Use a secure password'
-												) }
-												type="text"
-											/>
+											<div className="edit-site-change-status__password-input">
+												<VisuallyHidden
+													as="label"
+													htmlFor={ `edit-site-change-status__password-input-${ instanceId }` }
+												>
+													{ __( 'Create password' ) }
+												</VisuallyHidden>
+												<TextControl
+													onChange={ ( value ) =>
+														saveStatus( {
+															password: value,
+														} )
+													}
+													value={ password }
+													placeholder={ __(
+														'Use a secure password'
+													) }
+													type="text"
+													id={ `edit-site-change-status__password-input-${ instanceId }` }
+												/>
+											</div>
 										) }
-									</BaseControl>
+									</fieldset>
 								) }
 							</VStack>
 						</form>

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -14,10 +14,12 @@
 		min-width: 320px;
 		padding: $grid-unit-20;
 	}
+
 	.edit-site-change-status__options {
 		.components-base-control__field > .components-v-stack {
 			gap: $grid-unit-10;
 		}
+
 		label {
 			.components-text {
 				display: block;
@@ -25,15 +27,22 @@
 			}
 		}
 	}
+
+	.edit-site-change-status__password-legend {
+		padding: 0;
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-summary-field {
 	.components-dropdown {
 		flex-grow: 1;
 	}
+
 	.edit-site-summary-field__trigger {
 		width: 100%;
 	}
+
 	.edit-site-summary-field__label {
 		width: 30%;
 	}

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

@@ -15,8 +15,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -35,24 +33,7 @@ const noop = () => {};
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { createNotice } = useDispatch( noticesStore );
-	const { set: setPreference } = useDispatch( preferencesStore );
-	const { get: getPreference } = useSelect( preferencesStore );
 
-	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPreference(
-			editSiteStore.name,
-			'distractionFree'
-		);
-		if ( ! isDistractionFree ) {
-			return;
-		}
-		setPreference( editSiteStore.name, 'distractionFree', false );
-		createNotice( 'info', __( 'Distraction free mode turned off' ), {
-			isDismissible: true,
-			type: 'snackbar',
-		} );
-	}, [ createNotice, setPreference, getPreference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -73,7 +54,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				turnOffDistractionFreeMode();
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.
@@ -150,9 +130,6 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { createNotice } = useDispatch( noticesStore );
-	const { set: setPreference } = useDispatch( preferencesStore );
-	const { get: getPreference } = useSelect( preferencesStore );
 	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
 		( select ) => {
 			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
@@ -176,28 +153,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		[]
 	);
 
-	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPreference(
-			editSiteStore.name,
-			'distractionFree'
-		);
-		if ( ! isDistractionFree ) {
-			return;
-		}
-		setPreference( editSiteStore.name, 'distractionFree', false );
-		createNotice( 'info', __( 'Distraction free mode turned off' ), {
-			isDismissible: true,
-			type: 'snackbar',
-		} );
-	}, [ createNotice, setPreference, getPreference ] );
-
 	const openGlobalStyles = useCallback( async () => {
-		turnOffDistractionFreeMode();
 		return Promise.all( [
 			setCanvasMode( 'edit' ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
-	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
+	}, [ setCanvasMode, openGeneralSidebar ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();

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

@@ -57,9 +57,8 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Duplicate' ) }
 							</MenuItem>
-						</MenuGroup>
-						<MenuGroup>
 							<MenuItem
+								isDestructive
 								onClick={ () => {
 									openDeleteModal();
 

package/src/hooks/commands/use-common-commands.js

@@ -10,7 +10,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -31,16 +30,7 @@ function useGlobalStylesOpenStylesCommands() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
-	const { set } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
-
 	const history = useHistory();
-	const isDistractionFree = useSelect( ( select ) => {
-		return select( preferencesStore ).get(
-			editSiteStore.name,
-			'distractionFree'
-		);
-	}, [] );
 
 	const isBlockBasedTheme = useSelect( ( select ) => {
 		return select( coreStore ).getCurrentTheme().is_block_theme;
@@ -66,15 +56,6 @@ function useGlobalStylesOpenStylesCommands() {
 					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
-					if ( isDistractionFree ) {
-						set( editSiteStore.name, 'distractionFree', false );
-						createInfoNotice(
-							__( 'Distraction free mode turned off.' ),
-							{
-								type: 'snackbar',
-							}
-						);
-					}
 					openGeneralSidebar( 'edit-site/global-styles' );
 				},
 				icon: styles,
@@ -85,11 +66,8 @@ function useGlobalStylesOpenStylesCommands() {
 		openGeneralSidebar,
 		setCanvasMode,
 		isEditorPage,
-		createInfoNotice,
 		getCanvasMode,
-		isDistractionFree,
 		isBlockBasedTheme,
-		set,
 	] );
 
 	return {

package/src/hooks/commands/use-edit-mode-commands.js

@@ -14,6 +14,7 @@ import {
 	blockDefault,
 	code,
 	keyboard,
+	listView,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -194,28 +195,38 @@ function useEditUICommands() {
 	const {
 		openGeneralSidebar,
 		closeGeneralSidebar,
-		setIsInserterOpened,
+		toggleDistractionFree,
 		setIsListViewOpened,
 		switchEditorMode,
 	} = useDispatch( editSiteStore );
-	const { canvasMode, editorMode, activeSidebar, showBlockBreadcrumbs } =
-		useSelect(
-			( select ) => ( {
-				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-				editorMode: select( editSiteStore ).getEditorMode(),
-				activeSidebar: select(
-					interfaceStore
-				).getActiveComplementaryArea( editSiteStore.name ),
-				showBlockBreadcrumbs: select( preferencesStore ).get(
-					'core/edit-site',
-					'showBlockBreadcrumbs'
-				),
-			} ),
-			[]
-		);
+	const {
+		canvasMode,
+		editorMode,
+		activeSidebar,
+		showBlockBreadcrumbs,
+		isListViewOpen,
+		isDistractionFree,
+	} = useSelect( ( select ) => {
+		const { isListViewOpened, getEditorMode } = select( editSiteStore );
+		return {
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			editorMode: getEditorMode(),
+			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			),
+			showBlockBreadcrumbs: select( preferencesStore ).get(
+				'core/edit-site',
+				'showBlockBreadcrumbs'
+			),
+			isListViewOpen: isListViewOpened(),
+			isDistractionFree: select( preferencesStore ).get(
+				editSiteStore.name,
+				'distractionFree'
+			),
+		};
+	}, [] );
 	const { openModal } = useDispatch( interfaceStore );
-	const { get: getPreference } = useSelect( preferencesStore );
-	const { set: setPreference, toggle } = useDispatch( preferencesStore );
+	const { toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
@@ -265,20 +276,7 @@ function useEditUICommands() {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
 		callback: ( { close } ) => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-			toggle( 'core/edit-site', 'distractionFree' );
-			createInfoNotice(
-				getPreference( 'core/edit-site', 'distractionFree' )
-					? __( 'Distraction free on.' )
-					: __( 'Distraction free off.' ),
-				{
-					id: 'core/edit-site/distraction-free-mode/notice',
-					type: 'snackbar',
-				}
-			);
+			toggleDistractionFree();
 			close();
 		},
 	} );
@@ -288,6 +286,9 @@ function useEditUICommands() {
 		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'fixedToolbar' );
+			if ( isDistractionFree ) {
+				toggleDistractionFree();
+			}
 			close();
 		},
 	} );
@@ -341,6 +342,16 @@ function useEditUICommands() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-list-view',
+		label: __( 'Toggle list view' ),
+		icon: listView,
+		callback: ( { close } ) => {
+			setIsListViewOpened( ! isListViewOpen );
+			close();
+		},
+	} );
+
 	return {
 		isLoading: false,
 		commands,

package/src/index.js

@@ -43,7 +43,7 @@ export function initializeEditor( id, settings ) {
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
 
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	const coreBlocks = __experimentalGetCoreBlocks().filter(
 		( { name } ) => name !== 'core/freeform'
 	);