@wordpress/editor 13.28.2 → 13.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.28.2",
+	"version": "13.29.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/block-editor": "^12.19.2",
-		"@wordpress/blocks": "^12.28.2",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-data": "^6.28.2",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/media-utils": "^4.42.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.2",
-		"@wordpress/preferences": "^3.28.2",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.2",
-		"@wordpress/rich-text": "^6.28.2",
-		"@wordpress/server-side-render": "^4.28.2",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.52.0",
+		"@wordpress/api-fetch": "^6.49.0",
+		"@wordpress/blob": "^3.52.0",
+		"@wordpress/block-editor": "^12.20.0",
+		"@wordpress/blocks": "^12.29.0",
+		"@wordpress/commands": "^0.23.0",
+		"@wordpress/components": "^27.0.0",
+		"@wordpress/compose": "^6.29.0",
+		"@wordpress/core-data": "^6.29.0",
+		"@wordpress/data": "^9.22.0",
+		"@wordpress/date": "^4.52.0",
+		"@wordpress/deprecated": "^3.52.0",
+		"@wordpress/dom": "^3.52.0",
+		"@wordpress/element": "^5.29.0",
+		"@wordpress/hooks": "^3.52.0",
+		"@wordpress/html-entities": "^3.52.0",
+		"@wordpress/i18n": "^4.52.0",
+		"@wordpress/icons": "^9.43.0",
+		"@wordpress/keyboard-shortcuts": "^4.29.0",
+		"@wordpress/keycodes": "^3.52.0",
+		"@wordpress/media-utils": "^4.43.0",
+		"@wordpress/notices": "^4.20.0",
+		"@wordpress/patterns": "^1.13.0",
+		"@wordpress/preferences": "^3.29.0",
+		"@wordpress/private-apis": "^0.34.0",
+		"@wordpress/reusable-blocks": "^4.29.0",
+		"@wordpress/rich-text": "^6.29.0",
+		"@wordpress/server-side-render": "^4.29.0",
+		"@wordpress/url": "^3.53.0",
+		"@wordpress/wordcount": "^3.52.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
 }

package/src/components/commands/index.js

@@ -0,0 +1,202 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { code, listView, external } from '@wordpress/icons';
+import { useCommandLoader } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+function useEditorCommandLoader() {
+	const {
+		editorMode,
+		isListViewOpen,
+		showBlockBreadcrumbs,
+		isDistractionFree,
+		isTopToolbar,
+		isFocusMode,
+		isPreviewMode,
+		isViewable,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { isListViewOpened, getCurrentPostType } = select( editorStore );
+		const { getSettings } = select( blockEditorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			editorMode: get( 'core', 'editorMode' ) ?? 'visual',
+			isListViewOpen: isListViewOpened(),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			isFocusMode: get( 'core', 'focusMode' ),
+			isTopToolbar: get( 'core', 'fixedToolbar' ),
+			isPreviewMode: getSettings().__unstableIsPreviewMode,
+			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
+		};
+	}, [] );
+	const { toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const {
+		__unstableSaveForPreview,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const { getCurrentPostId } = useSelect( editorStore );
+
+	if ( isPreviewMode ) {
+		return { commands: [], isLoading: false };
+	}
+
+	const commands = [];
+
+	commands.push( {
+		name: 'core/toggle-distraction-free',
+		label: isDistractionFree
+			? __( 'Exit Distraction Free' )
+			: __( 'Enter Distraction Free ' ),
+		callback: ( { close } ) => {
+			toggleDistractionFree();
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight' ),
+		callback: ( { close } ) => {
+			toggle( 'core', 'focusMode' );
+			close();
+			createInfoNotice(
+				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
+				{
+					id: 'core/editor/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-list-view',
+		label: isListViewOpen
+			? __( 'Close List View' )
+			: __( 'Open List View' ),
+		icon: listView,
+		callback: ( { close } ) => {
+			setIsListViewOpened( ! isListViewOpen );
+			close();
+			createInfoNotice(
+				isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
+				{
+					id: 'core/editor/toggle-list-view/notice',
+					type: 'snackbar',
+				}
+			);
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		callback: ( { close } ) => {
+			toggle( 'core', 'fixedToolbar' );
+			if ( isDistractionFree ) {
+				toggleDistractionFree();
+			}
+			close();
+			createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar off.' )
+					: __( 'Top toolbar on.' ),
+				{
+					id: 'core/editor/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-code-editor',
+		label:
+			editorMode === 'visual'
+				? __( 'Open code editor' )
+				: __( 'Exit code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-breadcrumbs',
+		label: showBlockBreadcrumbs
+			? __( 'Hide block breadcrumbs' )
+			: __( 'Show block breadcrumbs' ),
+		callback: ( { close } ) => {
+			toggle( 'core', 'showBlockBreadcrumbs' );
+			close();
+			createInfoNotice(
+				showBlockBreadcrumbs
+					? __( 'Breadcrumbs hidden.' )
+					: __( 'Breadcrumbs visible.' ),
+				{
+					id: 'core/editor/toggle-breadcrumbs/notice',
+					type: 'snackbar',
+				}
+			);
+		},
+	} );
+
+	if ( isViewable ) {
+		commands.push( {
+			name: 'core/preview-link',
+			label: __( 'Preview in a new tab' ),
+			icon: external,
+			callback: async ( { close } ) => {
+				close();
+				const postId = getCurrentPostId();
+				const link = await __unstableSaveForPreview();
+				window.open( link, `wp-preview-${ postId }` );
+			},
+		} );
+	}
+
+	return {
+		commands,
+		isLoading: false,
+	};
+}
+
+export default function useCommands() {
+	useCommandLoader( {
+		name: 'core/editor/edit-ui',
+		hook: useEditorCommandLoader,
+	} );
+}

package/src/components/commands/index.native.js

@@ -0,0 +1,2 @@
+// Commands are disabled in the mobile native version.
+export default function useCommands() {}

package/src/components/document-bar/index.js

@@ -11,7 +11,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import {
@@ -22,16 +23,17 @@ import {
 	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
-import { useEntityRecord } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-const typeLabels = {
+const TYPE_LABELS = {
 	// translators: 1: Pattern title.
 	wp_pattern: __( 'Editing pattern: %s' ),
 	// translators: 1: Navigation menu title.
@@ -42,133 +44,152 @@ const typeLabels = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const icons = {
+const ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigationIcon,
 };
 
-export default function DocumentBar() {
-	const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect(
-		( select ) => {
-			const {
-				getCurrentPostId,
-				getCurrentPostType,
-				getEditorSettings: getSettings,
-			} = select( editorStore );
-			return {
-				postType: getCurrentPostType(),
-				postId: getCurrentPostId(),
-				onNavigateToPreviousEntityRecord:
-					getSettings().onNavigateToPreviousEntityRecord,
-				getEditorSettings: getSettings,
-			};
-		},
-		[]
-	);
+const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
 
-	const handleOnBack = () => {
-		if ( onNavigateToPreviousEntityRecord ) {
-			onNavigateToPreviousEntityRecord();
-		}
-	};
+const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];
 
-	return (
-		<BaseDocumentActions
-			postType={ postType }
-			postId={ postId }
-			onBack={
-				onNavigateToPreviousEntityRecord ? handleOnBack : undefined
-			}
-		/>
-	);
-}
+const MotionButton = motion( Button );
 
-function BaseDocumentActions( { postType, postId, onBack } ) {
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-	const { editedRecord: doc, isResolving } = useEntityRecord(
-		'postType',
+export default function DocumentBar() {
+	const {
 		postType,
-		postId
-	);
-	const { templateIcon, templateTitle } = useSelect( ( select ) => {
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
-		const templateInfo = getTemplateInfo( doc );
+		document,
+		isResolving,
+		templateIcon,
+		templateTitle,
+		onNavigateToPreviousEntityRecord,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+			__experimentalGetTemplateInfo: getTemplateInfo,
+		} = select( editorStore );
+		const { getEditedEntityRecord, getIsResolving } = select( coreStore );
+		const _postType = getCurrentPostType();
+		const _postId = getCurrentPostId();
+		const _document = getEditedEntityRecord(
+			'postType',
+			_postType,
+			_postId
+		);
+		const _templateInfo = getTemplateInfo( _document );
 		return {
-			templateIcon: templateInfo.icon,
-			templateTitle: templateInfo.title,
+			postType: _postType,
+			document: _document,
+			isResolving: getIsResolving(
+				'getEditedEntityRecord',
+				'postType',
+				_postType,
+				_postId
+			),
+			templateIcon: _templateInfo.icon,
+			templateTitle: _templateInfo.title,
+			onNavigateToPreviousEntityRecord:
+				getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
-	} );
-	const isNotFound = ! doc && ! isResolving;
-	const icon = icons[ postType ] ?? pageIcon;
-	const [ isAnimated, setIsAnimated ] = useState( false );
-	const isMounting = useRef( true );
-	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
-		postType
-	);
-	const isGlobalEntity = [
-		'wp_template',
-		'wp_navigation',
-		'wp_template_part',
-		'wp_block',
-	].includes( postType );
+	}, [] );
 
-	useEffect( () => {
-		if ( ! isMounting.current ) {
-			setIsAnimated( true );
-		}
-		isMounting.current = false;
-	}, [ postType, postId ] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const isReducedMotion = useReducedMotion();
+
+	const isNotFound = ! document && ! isResolving;
+	const icon = ICONS[ postType ] ?? pageIcon;
+	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
+	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
+	const hasBackButton = !! onNavigateToPreviousEntityRecord;
+	const title = isTemplate ? templateTitle : document.title;
 
-	const title = isTemplate ? templateTitle : doc.title;
+	const mounted = useRef( false );
+	useEffect( () => {
+		mounted.current = true;
+	}, [] );
 
 	return (
 		<div
 			className={ classnames( 'editor-document-bar', {
-				'has-back-button': !! onBack,
-				'is-animated': isAnimated,
+				'has-back-button': hasBackButton,
 				'is-global': isGlobalEntity,
 			} ) }
 		>
-			{ onBack && (
-				<Button
-					className="editor-document-bar__back"
-					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-					onClick={ ( event ) => {
-						event.stopPropagation();
-						onBack();
-					} }
-					size="compact"
-				>
-					{ __( 'Back' ) }
-				</Button>
-			) }
-			{ isNotFound && <Text>{ __( 'Document not found' ) }</Text> }
-			{ ! isNotFound && (
+			<AnimatePresence>
+				{ hasBackButton && (
+					<MotionButton
+						className="editor-document-bar__back"
+						icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+						onClick={ ( event ) => {
+							event.stopPropagation();
+							onNavigateToPreviousEntityRecord();
+						} }
+						size="compact"
+						initial={
+							mounted.current
+								? { opacity: 0, transform: 'translateX(15%)' }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ { opacity: 1, transform: 'translateX(0%)' } }
+						exit={ { opacity: 0, transform: 'translateX(15%)' } }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
+					>
+						{ __( 'Back' ) }
+					</MotionButton>
+				) }
+			</AnimatePresence>
+			{ isNotFound ? (
+				<Text>{ __( 'Document not found' ) }</Text>
+			) : (
 				<Button
 					className="editor-document-bar__command"
 					onClick={ () => openCommandCenter() }
 					size="compact"
 				>
-					<HStack
+					<motion.div
 						className="editor-document-bar__title"
-						spacing={ 1 }
-						justify="center"
+						// Force entry animation when the back button is added or removed.
+						key={ hasBackButton }
+						initial={
+							mounted.current
+								? {
+										opacity: 0,
+										transform: hasBackButton
+											? 'translateX(15%)'
+											: 'translateX(-15%)',
+								  }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ {
+							opacity: 1,
+							transform: 'translateX(0%)',
+						} }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
 					>
 						<BlockIcon icon={ isTemplate ? templateIcon : icon } />
 						<Text
 							size="body"
 							as="h1"
 							aria-label={
-								typeLabels[ postType ]
+								TYPE_LABELS[ postType ]
 									? // eslint-disable-next-line @wordpress/valid-sprintf
-									  sprintf( typeLabels[ postType ], title )
+									  sprintf( TYPE_LABELS[ postType ], title )
 									: undefined
 							}
 						>
 							{ title }
 						</Text>
-					</HStack>
+					</motion.div>
 					<span className="editor-document-bar__shortcut">
 						{ displayShortcut.primary( 'k' ) }
 					</span>

package/src/components/document-bar/style.scss

@@ -40,6 +40,10 @@
 	flex-grow: 1;
 	overflow: hidden;
 	color: $gray-800;
+	gap: $grid-unit-05;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-small() {
@@ -66,16 +70,6 @@
 		max-width: 50%;
 		color: currentColor;
 	}
-
-	.editor-document-bar.is-animated.has-back-button & {
-		animation: editor-document-bar__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-
-	.editor-document-bar.is-animated & {
-		animation: editor-document-bar__slide-in-right 0.3s;
-		@include reduce-motion("animation");
-	}
 }
 
 .editor-document-bar__shortcut {
@@ -100,31 +94,4 @@
 		color: var(--wp-block-synced-color);
 		background-color: transparent;
 	}
-
-	.editor-document-bar.is-animated & {
-		animation: editor-document-bar__slide-in-left 0.3s;
-		@include reduce-motion("animation");
-	}
-}
-
-@keyframes editor-document-bar__slide-in-right {
-	from {
-		transform: translateX(-15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
-}
-
-@keyframes editor-document-bar__slide-in-left {
-	from {
-		transform: translateX(15%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(0);
-		opacity: 1;
-	}
 }

package/src/components/document-tools/index.js

@@ -46,6 +46,7 @@ function DocumentTools( {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
+		isDistractionFree,
 		isInserterOpened,
 		isListViewOpen,
 		listViewShortcut,
@@ -69,6 +70,7 @@ function DocumentTools( {
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
 		};
 	}, [] );
 
@@ -158,22 +160,26 @@ function DocumentTools( {
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
 						/>
-						<ToolbarItem
-							as={ Button }
-							className="editor-document-tools__document-overview-toggle"
-							icon={ listView }
-							disabled={ disableBlockTools }
-							isPressed={ isListViewOpen }
-							/* translators: button label text should, if possible, be under 16 characters. */
-							label={ listViewLabel }
-							onClick={ toggleListView }
-							shortcut={ listViewShortcut }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							aria-expanded={ isListViewOpen }
-							ref={ listViewToggleRef }
-							size="compact"
-						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								as={ Button }
+								className="editor-document-tools__document-overview-toggle"
+								icon={ listView }
+								disabled={ disableBlockTools }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ listViewLabel }
+								onClick={ toggleListView }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								aria-expanded={ isListViewOpen }
+								ref={ listViewToggleRef }
+								size="compact"
+							/>
+						) }
 					</>
 				) }
 				{ children }