@wordpress/edit-post 7.29.0 → 7.31.0

package/src/components/editor-initialization/test/listener-hooks.js

@@ -88,14 +88,14 @@ describe( 'listener hook tests', () => {
 	} );
 	describe( 'useBlockSelectionListener', () => {
 		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useBlockSelectionListener( postId );
+		const TestComponent = () => {
+			useBlockSelectionListener();
 			return null;
 		};
 		const TestedOutput = () => {
 			return (
 				<RegistryProvider value={ registry }>
-					<TestComponent postId={ 10 } />
+					<TestComponent />
 				</RegistryProvider>
 			);
 		};
@@ -177,14 +177,14 @@ describe( 'listener hook tests', () => {
 
 	describe( 'useUpdatePostLinkListener', () => {
 		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useUpdatePostLinkListener( postId );
+		const TestComponent = () => {
+			useUpdatePostLinkListener();
 			return null;
 		};
-		const TestedOutput = ( { postId = 10 } ) => {
+		const TestedOutput = () => {
 			return (
 				<RegistryProvider value={ registry }>
-					<TestComponent postId={ postId } />
+					<TestComponent />
 				</RegistryProvider>
 			);
 		};
@@ -222,7 +222,7 @@ describe( 'listener hook tests', () => {
 			} );
 			const { rerender } = render( <TestedOutput /> );
 
-			rerender( <TestedOutput id={ 20 } /> );
+			rerender( <TestedOutput /> );
 
 			expect( mockSelector ).toHaveBeenCalledTimes( 1 );
 			act( () => {

package/src/components/header/header-toolbar/index.native.js

@@ -181,7 +181,7 @@ function HeaderToolbar( {
 			<ScrollView
 				ref={ scrollViewRef }
 				onContentSizeChange={ scrollToStart }
-				horizontal={ true }
+				horizontal
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }

package/src/components/header/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	BlockToolbar,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -40,6 +41,7 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 const { DocumentTools, PostViewLink, PreviewDropdown } =
 	unlock( editorPrivateApis );
 
@@ -61,9 +63,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const blockToolbarRef = useRef();
 	const {
 		isTextEditor,
-		hasBlockSelection,
+		blockSelectionStart,
 		hasActiveMetaboxes,
-		hasFixedToolbar,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
@@ -73,28 +74,31 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasHistory:
 				!! select( editorStore ).getEditorSettings()
 					.onNavigateToPreviousEntityRecord,
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
+	const { showFixedToolbar } = useShowBlockTools();
+	const showTopToolbar = isLargeViewport && showFixedToolbar;
+
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
+	const hasBlockSelection = !! blockSelectionStart;
 
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
-		if ( hasBlockSelection ) {
+		if ( blockSelectionStart ) {
 			setIsBlockToolsCollapsed( false );
 		}
-	}, [ hasBlockSelection ] );
+	}, [ blockSelectionStart ] );
 
 	return (
 		<div className="edit-post-header">
@@ -115,13 +119,15 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				className="edit-post-header__toolbar"
 			>
 				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ hasFixedToolbar && isLargeViewport && (
+				{ showTopToolbar && (
 					<>
 						<div
 							className={ classnames(
 								'selected-block-tools-wrapper',
 								{
-									'is-collapsed': isBlockToolsCollapsed,
+									'is-collapsed':
+										isBlockToolsCollapsed ||
+										! hasBlockSelection,
 								}
 							) }
 						>
@@ -131,32 +137,29 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 							ref={ blockToolbarRef }
 							name="block-toolbar"
 						/>
-						{ hasBlockSelection && (
-							<Button
-								className="edit-post-header__block-tools-toggle"
-								icon={ isBlockToolsCollapsed ? next : previous }
-								onClick={ () => {
-									setIsBlockToolsCollapsed(
-										( collapsed ) => ! collapsed
-									);
-								} }
-								label={
-									isBlockToolsCollapsed
-										? __( 'Show block tools' )
-										: __( 'Hide block tools' )
-								}
-							/>
-						) }
+						<Button
+							className="edit-post-header__block-tools-toggle"
+							icon={ isBlockToolsCollapsed ? next : previous }
+							onClick={ () => {
+								setIsBlockToolsCollapsed(
+									( collapsed ) => ! collapsed
+								);
+							} }
+							label={
+								isBlockToolsCollapsed
+									? __( 'Show block tools' )
+									: __( 'Hide block tools' )
+							}
+							size="compact"
+						/>
 					</>
 				) }
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
 							hasHistory &&
-							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
-							hasFixedToolbar &&
-							isLargeViewport,
+							showTopToolbar,
 					} ) }
 				>
 					{ hasHistory && <DocumentBar /> }

package/src/components/header/more-menu/index.js

@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuGroup } from '@wordpress/components';
-import {
-	ActionItem,
-	MoreMenuDropdown,
-	PinnedItems,
-} from '@wordpress/interface';
+import { MenuGroup, DropdownMenu } from '@wordpress/components';
+import { ActionItem, PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,10 +22,17 @@ const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<MoreMenuDropdown
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			popoverProps={ {
+				placement: 'bottom-end',
+				className: 'more-menu-dropdown__content',
+			} }
 			toggleProps={ {
-				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				tooltipPosition: 'bottom',
+				showTooltip: ! showIconLabels,
 				size: 'compact',
 			} }
 		>
@@ -54,7 +58,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 					</MenuGroup>
 				</>
 			) }
-		</MoreMenuDropdown>
+		</DropdownMenu>
 	);
 };
 

package/src/components/header/style.scss

@@ -322,3 +322,7 @@
 		z-index: 35;
 	}
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/header/test/index.js

@@ -10,19 +10,14 @@ import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
 
 describe( 'PostPublishButtonOrToggle should render a', () => {
 	it( 'button when the post is published (1)', () => {
-		render( <PostPublishButtonOrToggle isPublished={ true } /> );
+		render( <PostPublishButtonOrToggle isPublished /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
 	} );
 
 	it( 'button when the post is scheduled (2)', () => {
-		render(
-			<PostPublishButtonOrToggle
-				isScheduled={ true }
-				isBeingScheduled={ true }
-			/>
-		);
+		render( <PostPublishButtonOrToggle isScheduled isBeingScheduled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
@@ -30,10 +25,7 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 
 	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
 		render(
-			<PostPublishButtonOrToggle
-				isPending={ true }
-				hasPublishAction={ false }
-			/>
+			<PostPublishButtonOrToggle isPending hasPublishAction={ false } />
 		);
 
 		expect(
@@ -42,9 +34,7 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 	} );
 
 	it( 'toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled', () => {
-		render(
-			<PostPublishButtonOrToggle isPublishSidebarEnabled={ true } />
-		);
+		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Publish' } )
 		).toBeVisible();

package/src/components/init-pattern-modal/index.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+	TextControl,
+} from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../lock-unlock';
+
+const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis );
+
+export default function InitPatternModal() {
+	const { editPost } = useDispatch( editorStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ syncType, setSyncType ] = useState( undefined );
+	const [ title, setTitle ] = useState( '' );
+
+	const { postType, isNewPost } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isCleanNewPost } =
+			select( editorStore );
+		return {
+			postType: getEditedPostAttribute( 'type' ),
+			isNewPost: isCleanNewPost(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( isNewPost && postType === 'wp_block' ) {
+			setIsModalOpen( true );
+		}
+		// We only want the modal to open when the page is first loaded.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	if ( postType !== 'wp_block' || ! isNewPost ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Create pattern' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							editPost( {
+								title,
+								meta: {
+									wp_pattern_sync_status: syncType,
+								},
+							} );
+						} }
+					>
+						<VStack spacing="5">
+							<TextControl
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								placeholder={ __( 'My pattern' ) }
+								className="patterns-create-modal__name-input"
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+							/>
+							<ReusableBlocksRenameHint />
+							<ToggleControl
+								label={ _x(
+									'Synced',
+									'Option that makes an individual pattern synchronized'
+								) }
+								help={ __(
+									'Sync this pattern across multiple locations.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button
+									variant="primary"
+									type="submit"
+									disabled={ ! title }
+									__experimentalIsFocusable
+								>
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -46,4 +46,8 @@ export const textFormattingShortcuts = [
 			'Convert the current paragraph or heading to a heading of level 1 to 6.'
 		),
 	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: '\u00a0' },
+		description: __( 'Add non breaking space.' ),
+	},
 ];

package/src/components/layout/index.js

@@ -14,7 +14,6 @@ import {
 	EditorKeyboardShortcutsRegister,
 	EditorKeyboardShortcuts,
 	EditorSnackbars,
-	PostSyncStatusModal,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
@@ -50,6 +49,7 @@ import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import EditPostPreferencesModal from '../preferences-modal';
+import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
 import SettingsSidebar from '../sidebar/settings-sidebar';
@@ -381,7 +381,7 @@ function Layout( { initialPost } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
-			<PostSyncStatusModal />
+			<InitPatternModal />
 			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }

package/src/components/sidebar/plugin-post-publish-panel/test/index.js

@@ -20,7 +20,7 @@ describe( 'PluginPostPublishPanel', () => {
 				<PluginPostPublishPanel
 					className="my-plugin-post-publish-panel"
 					title="My panel title"
-					initialOpen={ true }
+					initialOpen
 				>
 					My panel content
 				</PluginPostPublishPanel>

package/src/components/sidebar/post-status/index.js

@@ -14,6 +14,7 @@ import {
 	PostSyncStatus,
 	PostURLPanel,
 	PostTemplatePanel,
+	PostFeaturedImagePanel,
 	store as editorStore,
 } from '@wordpress/editor';
 
@@ -60,6 +61,7 @@ export default function PostStatus() {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
+						<PostFeaturedImagePanel withPanelBody={ false } />
 						<PostVisibility />
 						<PostSchedulePanel />
 						<PostTemplatePanel />

package/src/components/sidebar/settings-sidebar/index.js

@@ -20,9 +20,9 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
 	PageAttributesPanel,
+	PluginDocumentSettingPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
-	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 } from '@wordpress/editor';
@@ -33,7 +33,6 @@ import {
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
 import MetaBoxes from '../../meta-boxes';
-import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
 import TemplateSummary from '../template-summary';
 import { store as editPostStore } from '../../../store';
@@ -117,7 +116,6 @@ const SidebarContent = ( {
 							<PluginDocumentSettingPanel.Slot />
 							<PostLastRevisionPanel />
 							<PostTaxonomiesPanel />
-							<PostFeaturedImagePanel />
 							<PostExcerptPanel />
 							<PostDiscussionPanel />
 							<PageAttributesPanel />

package/src/editor.js

@@ -12,8 +12,6 @@ import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { CommandMenu } from '@wordpress/commands';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,14 +23,6 @@ import { unlock } from './lock-unlock';
 import useNavigateToEntityRecord from './hooks/use-navigate-to-entity-record';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
-// Prevent accidental removal of certain blocks, asking the user for
-// confirmation.
-const blockRemovalRules = {
-	'bindings/core/pattern-overrides': __(
-		'Blocks from synced patterns that can have overriden content.'
-	),
-};
 
 function Editor( {
 	postId: initialPostId,
@@ -106,9 +96,8 @@ function Editor( {
 			>
 				<ErrorBoundary>
 					<CommandMenu />
-					<EditorInitialization postId={ currentPost.postId } />
+					<EditorInitialization />
 					<Layout initialPost={ initialPost } />
-					<BlockRemovalWarningModal rules={ blockRemovalRules } />
 				</ErrorBoundary>
 				<PostLockedModal />
 			</ExperimentalEditorProvider>

package/src/editor.native.js

@@ -9,7 +9,11 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider, store as editorStore } from '@wordpress/editor';
+import {
+	EditorProvider,
+	ErrorBoundary,
+	store as editorStore,
+} from '@wordpress/editor';
 import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -143,7 +147,9 @@ class Editor extends Component {
 						useSubRegistry={ false }
 						{ ...props }
 					>
-						<Layout setTitleRef={ this.setTitleRef } />
+						<ErrorBoundary>
+							<Layout setTitleRef={ this.setTitleRef } />
+						</ErrorBoundary>
 					</EditorProvider>
 				</SlotFillProvider>
 			</GestureHandlerRootView>

package/src/index.js

@@ -15,6 +15,7 @@ import {
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
 import {
+	PluginDocumentSettingPanel,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -161,7 +162,7 @@ export function reinitializeEditor() {
 }
 
 export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
-export { default as PluginDocumentSettingPanel } from './components/sidebar/plugin-document-setting-panel';
+export { PluginDocumentSettingPanel };
 export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
 export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
 export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';

package/src/store/selectors.js

@@ -538,7 +538,7 @@ export const isEditingTemplate = createRegistrySelector( ( select ) => () => {
 		since: '6.5',
 		alternative: `select( 'core/editor' ).getRenderingMode`,
 	} );
-	return select( editorStore ).getCurrentPostType() !== 'post-only';
+	return select( editorStore ).getCurrentPostType() === 'wp_template';
 } );
 
 /**