@wordpress/editor 13.28.5 → 13.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.28.5",
+	"version": "13.30.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.5",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/commands": "^0.22.4",
-		"@wordpress/components": "^26.0.4",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-data": "^6.28.5",
-		"@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.3",
-		"@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.5",
-		"@wordpress/preferences": "^3.28.4",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.5",
-		"@wordpress/rich-text": "^6.28.3",
-		"@wordpress/server-side-render": "^4.28.5",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/block-editor": "^12.21.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/core-data": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/media-utils": "^4.44.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/patterns": "^1.14.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/reusable-blocks": "^4.30.0",
+		"@wordpress/rich-text": "^6.30.0",
+		"@wordpress/server-side-render": "^4.30.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/components/block-removal-warnings/index.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+
+import { _n } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+
+// Prevent accidental removal of certain blocks, asking the user for confirmation first.
+const TEMPLATE_BLOCKS = [
+	'core/post-content',
+	'core/post-template',
+	'core/query',
+];
+const BLOCK_REMOVAL_RULES = [
+	{
+		// Template blocks.
+		// The warning is only shown when a user manipulates templates or template parts.
+		postTypes: [ 'wp_template', 'wp_template_part' ],
+		callback( removedBlocks ) {
+			const removedTemplateBlocks = removedBlocks.filter( ( { name } ) =>
+				TEMPLATE_BLOCKS.includes( name )
+			);
+			if ( removedTemplateBlocks.length ) {
+				return _n(
+					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
+					'Some of the deleted blocks will stop your post or page content from displaying on this template. It is not recommended.',
+					removedBlocks.length
+				);
+			}
+		},
+	},
+	{
+		// Pattern overrides.
+		// The warning is only shown when the user edits a pattern.
+		postTypes: [ 'wp_block' ],
+		callback( removedBlocks ) {
+			const removedBlocksWithOverrides = removedBlocks.filter(
+				( { attributes } ) =>
+					attributes?.metadata?.bindings &&
+					Object.values( attributes.metadata.bindings ).some(
+						( binding ) =>
+							binding.source === 'core/pattern-overrides'
+					)
+			);
+			if ( removedBlocksWithOverrides.length ) {
+				return _n(
+					'The deleted block allows instance overrides. Removing it may result in content not displaying where this pattern is used. Are you sure you want to proceed?',
+					'Some of the deleted blocks allow instance overrides. Removing them may result in content not displaying where this pattern is used. Are you sure you want to proceed?',
+					removedBlocks.length
+				);
+			}
+		},
+	},
+];
+
+export default function BlockRemovalWarnings() {
+	const currentPostType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+
+	const removalRulesForPostType = useMemo(
+		() =>
+			BLOCK_REMOVAL_RULES.filter( ( rule ) =>
+				rule.postTypes.includes( currentPostType )
+			),
+		[ currentPostType ]
+	);
+
+	// `BlockRemovalWarnings` is rendered in the editor provider, a shared component
+	// across react native and web. However, `BlockRemovalWarningModal` is web only.
+	// Check it exists before trying to render it.
+	if ( ! BlockRemovalWarningModal ) {
+		return null;
+	}
+
+	if ( ! removalRulesForPostType ) {
+		return null;
+	}
+
+	return <BlockRemovalWarningModal rules={ removalRulesForPostType } />;
+}

package/src/components/commands/index.js

@@ -0,0 +1,210 @@
+/**
+ * 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,
+		isCodeEditingEnabled,
+		isRichEditingEnabled,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { isListViewOpened, getCurrentPostType, getEditorSettings } =
+			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,
+			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+		};
+	}, [] );
+	const { toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const {
+		__unstableSaveForPreview,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const { getCurrentPostId } = useSelect( editorStore );
+	const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
+
+	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' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+
+	if ( allowSwitchEditorMode ) {
+		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>