@wordpress/editor 13.28.5 → 13.30.0

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-outline/check.js

@@ -1,21 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function DocumentOutlineCheck( { blocks, children } ) {
-	const headings = blocks.filter(
-		( block ) => block.name === 'core/heading'
-	);
+export default function DocumentOutlineCheck( { children } ) {
+	const hasHeadings = useSelect( ( select ) => {
+		const { getGlobalBlockCount } = select( blockEditorStore );
 
-	if ( headings.length < 1 ) {
+		return getGlobalBlockCount( 'core/heading' ) > 0;
+	} );
+
+	if ( hasHeadings ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default withSelect( ( select ) => ( {
-	blocks: select( blockEditorStore ).getBlocks(),
-} ) )( DocumentOutlineCheck );

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

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect, useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -98,15 +97,26 @@ const computeOutlineHeadings = ( blocks = [] ) => {
 const isEmptyHeading = ( heading ) =>
 	! heading.attributes.content || heading.attributes.content.length === 0;
 
-export const DocumentOutline = ( {
-	blocks = [],
-	title,
+export default function DocumentOutline( {
 	onSelect,
 	isTitleSupported,
 	hasOutlineItemsDisabled,
-} ) => {
-	const headings = computeOutlineHeadings( blocks );
+} ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const { blocks, title } = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+			blocks: getBlocks(),
+			isTitleSupported: postType?.supports?.title ?? false,
+		};
+	} );
+
+	const headings = computeOutlineHeadings( blocks );
 	if ( headings.length < 1 ) {
 		return (
 			<div className="editor-document-outline has-no-headings">
@@ -194,19 +204,4 @@ export const DocumentOutline = ( {
 			</ul>
 		</div>
 	);
-};
-
-export default compose(
-	withSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
-			isTitleSupported: postType?.supports?.title ?? false,
-		};
-	} )
-)( DocumentOutline );
+}

package/src/components/document-outline/test/index.js

@@ -11,15 +11,27 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { DocumentOutline } from '../';
+import DocumentOutline from '../';
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	BlockTitle: () => 'Block Title',
 } ) );
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupMockSelect( blocks ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getBlocks: () => blocks,
+			getEditedPostAttribute: () => null,
+			getPostType: () => null,
+		} ) );
+	} );
+}
 
 describe( 'DocumentOutline', () => {
 	let paragraph, headingH1, headingH2, headingH3, nestedHeading;
@@ -77,6 +89,7 @@ describe( 'DocumentOutline', () => {
 
 	describe( 'no header blocks present', () => {
 		it( 'should not render when no blocks provided', () => {
+			setupMockSelect( [] );
 			render( <DocumentOutline /> );
 
 			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
@@ -87,7 +100,8 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
@@ -99,14 +113,16 @@ describe( 'DocumentOutline', () => {
 				// Set client IDs to a predictable value.
 				return { ...block, clientId: `clientId_${ index }` };
 			} );
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
 
 		it( 'should render an item when only one heading provided', () => {
 			const blocks = [ headingH2 ];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			const tableOfContentItem = within(
 				screen.getByRole( 'list' )
@@ -123,7 +139,8 @@ describe( 'DocumentOutline', () => {
 				headingH3,
 				paragraph,
 			];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect(
 				within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
@@ -137,7 +154,8 @@ describe( 'DocumentOutline', () => {
 					return { ...block, clientId: `clientId_${ index }` };
 				}
 			);
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
 		} );
@@ -146,7 +164,8 @@ describe( 'DocumentOutline', () => {
 	describe( 'nested headings', () => {
 		it( 'should render even if the heading is nested', () => {
 			const blocks = [ headingH2, nestedHeading ];
-			render( <DocumentOutline blocks={ blocks } /> );
+			setupMockSelect( blocks );
+			render( <DocumentOutline /> );
 
 			// Unnested heading and nested heading should appear as items.
 			const tableOfContentItems = within(

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

@@ -29,7 +29,7 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -76,7 +76,7 @@ function DocumentTools( {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
+	const { showFixedToolbar } = useShowBlockTools();
 
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
@@ -117,7 +117,7 @@ function DocumentTools( {
 				className
 			) }
 			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">

package/src/components/editor-help/intro-to-blocks.native.js

@@ -51,7 +51,7 @@ const IntroToBlocks = () => {
 					) }
 				/>
 				<HelpDetailImage
-					accessible={ true }
+					accessible
 					accessibilityLabel={ __(
 						'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'
 					) }

package/src/components/entities-saved-states/entity-type-list.js

@@ -94,7 +94,7 @@ export default function EntityTypeList( {
 	}
 
 	return (
-		<PanelBody title={ entityLabel } initialOpen={ true }>
+		<PanelBody title={ entityLabel } initialOpen>
 			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (

package/src/components/global-keyboard-shortcuts/index.js

@@ -10,10 +10,41 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '../../store';
 
 export default function EditorKeyboardShortcuts() {
-	const { redo, undo, savePost, setIsListViewOpened } =
-		useDispatch( editorStore );
-	const { isEditedPostDirty, isPostSavingLocked, isListViewOpened } =
-		useSelect( editorStore );
+	const isModeToggleDisabled = useSelect( ( select ) => {
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
+		return ! richEditingEnabled || ! codeEditingEnabled;
+	}, [] );
+	const {
+		redo,
+		undo,
+		savePost,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const {
+		isEditedPostDirty,
+		isPostSavingLocked,
+		isListViewOpened,
+		getEditorMode,
+	} = useSelect( editorStore );
+
+	useShortcut(
+		'core/editor/toggle-mode',
+		() => {
+			switchEditorMode(
+				getEditorMode() === 'visual' ? 'text' : 'visual'
+			);
+		},
+		{
+			isDisabled: isModeToggleDisabled,
+		}
+	);
+
+	useShortcut( 'core/editor/toggle-distraction-free', () => {
+		toggleDistractionFree();
+	} );
 
 	useShortcut( 'core/editor/undo', ( event ) => {
 		undo();

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -12,6 +12,16 @@ function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/editor/save',
 			category: 'global',
@@ -63,6 +73,16 @@ function EditorKeyboardShortcutsRegister() {
 				character: 'o',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

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

@@ -127,7 +127,7 @@ export default function ListViewSidebar() {
 				// render where no tab is selected. This ensures that the
 				// tabpanel height is correct so the relevant scroll container
 				// can be rendered internally.
-				initialTabId="list-view"
+				defaultTabId="list-view"
 			>
 				<div className="edit-post-editor__document-overview-panel__header">
 					<Button

package/src/components/mode-switcher/index.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+const MODES = [
+	{
+		value: 'visual',
+		label: __( 'Visual editor' ),
+	},
+	{
+		value: 'text',
+		label: __( 'Code editor' ),
+	},
+];
+
+function ModeSwitcher() {
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+		useSelect(
+			( select ) => ( {
+				shortcut: select(
+					keyboardShortcutsStore
+				).getShortcutRepresentation( 'core/editor/toggle-mode' ),
+				isRichEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.richEditingEnabled,
+				isCodeEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.codeEditingEnabled,
+				mode: select( editorStore ).getEditorMode(),
+			} ),
+			[]
+		);
+	const { switchEditorMode } = useDispatch( editorStore );
+
+	let selectedMode = mode;
+	if ( ! isRichEditingEnabled && mode === 'visual' ) {
+		selectedMode = 'text';
+	}
+	if ( ! isCodeEditingEnabled && mode === 'text' ) {
+		selectedMode = 'visual';
+	}
+
+	const choices = MODES.map( ( choice ) => {
+		if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
+			choice = {
+				...choice,
+				disabled: true,
+			};
+		}
+		if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
+			choice = {
+				...choice,
+				disabled: true,
+				info: __(
+					'You can enable the visual editor in your profile settings.'
+				),
+			};
+		}
+		if ( choice.value !== selectedMode && ! choice.disabled ) {
+			return { ...choice, shortcut };
+		}
+		return choice;
+	} );
+
+	return (
+		<MenuGroup label={ __( 'Editor' ) }>
+			<MenuItemsChoice
+				choices={ choices }
+				value={ selectedMode }
+				onSelect={ switchEditorMode }
+			/>
+		</MenuGroup>
+	);
+}
+
+export default ModeSwitcher;

package/src/components/post-locked-modal/index.js

@@ -168,7 +168,7 @@ export default function PostLockedModal() {
 					? __( 'Someone else has taken over this post' )
 					: __( 'This post is already being edited' )
 			}
-			focusOnMount={ true }
+			focusOnMount
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }

package/src/components/post-preview-button/index.js

@@ -171,6 +171,7 @@ export default function PostPreviewButton( {
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }
+			size="compact"
 		>
 			{ textContent || (
 				<>

package/src/components/post-publish-button/index.js

@@ -203,6 +203,7 @@ export class PostPublishButton extends Component {
 							'has-changes-dot': hasNonPostEntityChanges,
 						}
 					) }
+					size="compact"
 				>
 					{ componentChildren }
 				</Button>

package/src/components/post-publish-panel/index.js

@@ -110,7 +110,7 @@ export class PostPublishPanel extends Component {
 						</PostPublishPanelPrepublish>
 					) }
 					{ isPostPublish && (
-						<PostPublishPanelPostpublish focusOnMount={ true }>
+						<PostPublishPanelPostpublish focusOnMount>
 							{ PostPublishExtension && <PostPublishExtension /> }
 						</PostPublishPanelPostpublish>
 					) }

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -131,7 +131,7 @@ export default function PostFormatPanel() {
 	}
 
 	return (
-		<PanelBody initialOpen={ true } title={ panelBodyTitle }>
+		<PanelBody initialOpen title={ panelBodyTitle }>
 			<p>
 				{ __(
 					'Upload external images to the Media Library. Images from different domains may load slowly, display incorrectly, or be removed unexpectedly.'

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -353,7 +353,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -476,7 +476,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review
@@ -643,7 +643,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       >
         <button
           aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
           Submit for Review

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -439,6 +439,7 @@ export function HierarchicalTermSelector( { slug } ) {
 				<form onSubmit={ onAddTerm }>
 					<Flex direction="column" gap="4">
 						<TextControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
 							className="editor-post-taxonomies__hierarchical-terms-input"
 							label={ newTermLabel }
@@ -448,6 +449,7 @@ export function HierarchicalTermSelector( { slug } ) {
 						/>
 						{ !! availableTerms.length && (
 							<TreeSelect
+								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ parentSelectLabel }
 								noOptionLabel={ noParentOption }
@@ -458,6 +460,7 @@ export function HierarchicalTermSelector( { slug } ) {
 						) }
 						<FlexItem>
 							<Button
+								__next40pxDefaultSize
 								variant="secondary"
 								type="submit"
 								className="editor-post-taxonomies__hierarchical-terms-submit"

package/src/components/post-title/index.js

@@ -25,7 +25,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
 import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
@@ -33,13 +32,11 @@ import PostTypeSupportCheck from '../post-type-support-check';
 
 function PostTitle( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
 		const { getSettings } = select( blockEditorStore );
 		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
 			getSettings();
 
 		return {
-			title: getEditedPostAttribute( 'title' ),
 			placeholder: titlePlaceholder,
 			hasFixedToolbar: _hasFixedToolbar,
 		};

package/src/components/post-title/index.native.js

@@ -175,7 +175,7 @@ class PostTitle extends Component {
 					fontSize={ 24 }
 					lineHeight={ 1 }
 					fontWeight={ 'bold' }
-					deleteEnter={ true }
+					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );
 					} }
@@ -184,7 +184,7 @@ class PostTitle extends Component {
 					value={ title }
 					onSelectionChange={ () => {} }
 					onEnter={ this.props.onEnterPress }
-					disableEditingMenu={ true }
+					disableEditingMenu
 					__unstableIsSelected={ this.props.isSelected }
 					__unstableOnCreateUndoLevel={ () => {} }
 				/>

package/src/components/post-title/post-title-raw.js

@@ -70,7 +70,7 @@ function PostTitleRaw( _, forwardedRef ) {
 			label={ placeholder }
 			className={ className }
 			placeholder={ decodedPlaceholder }
-			hideLabelFromVision={ true }
+			hideLabelFromVision
 			autoComplete="off"
 			dir="auto"
 			rows={ 1 }

package/src/components/post-view-link/index.js

@@ -42,6 +42,7 @@ export default function PostViewLink() {
 			href={ permalink }
 			target="_blank"
 			showTooltip={ ! showIconLabels }
+			size="compact"
 		/>
 	);
 }

package/src/components/provider/index.js

@@ -23,6 +23,9 @@ import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import NavigationBlockEditingMode from './navigation-block-editing-mode';
+import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
+import useCommands from '../commands';
+import BlockRemovalWarnings from '../block-removal-warnings';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -229,6 +232,11 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
 		}, [ settings.defaultRenderingMode, setRenderingMode ] );
 
+		useHideBlocksFromInserter( post.type );
+
+		// Register the editor commands.
+		useCommands();
+
 		if ( ! isReady ) {
 			return null;
 		}
@@ -257,6 +265,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ type === 'wp_navigation' && (
 								<NavigationBlockEditingMode />
 							) }
+							<BlockRemovalWarnings />
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>