@wordpress/edit-post 7.32.0 → 7.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.32.0",
+	"version": "7.34.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,39 +27,37 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/api-fetch": "^6.52.0",
-		"@wordpress/block-editor": "^12.23.0",
-		"@wordpress/block-library": "^8.32.0",
-		"@wordpress/blocks": "^12.32.0",
-		"@wordpress/commands": "^0.26.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/core-commands": "^0.24.0",
-		"@wordpress/core-data": "^6.32.0",
-		"@wordpress/data": "^9.25.0",
-		"@wordpress/deprecated": "^3.55.0",
-		"@wordpress/dom": "^3.55.0",
-		"@wordpress/editor": "^13.32.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/hooks": "^3.55.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/interface": "^5.32.0",
-		"@wordpress/keyboard-shortcuts": "^4.32.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/media-utils": "^4.46.0",
-		"@wordpress/notices": "^4.23.0",
-		"@wordpress/plugins": "^6.23.0",
-		"@wordpress/preferences": "^3.32.0",
-		"@wordpress/private-apis": "^0.37.0",
-		"@wordpress/url": "^3.56.0",
-		"@wordpress/viewport": "^5.32.0",
-		"@wordpress/warning": "^2.55.0",
-		"@wordpress/widgets": "^3.32.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/block-library": "^8.34.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-commands": "^0.26.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/editor": "^13.34.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/viewport": "^5.34.0",
+		"@wordpress/warning": "^2.57.0",
+		"@wordpress/widgets": "^3.34.0",
 		"classnames": "^2.3.1",
-		"memize": "^2.1.0",
-		"rememo": "^4.0.2"
+		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -68,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/classic.scss

@@ -2,7 +2,7 @@
 // Specificity is kept at this level as many classic themes output
 // rules like figure { margin: 0; } which would break centering.
 // These rules should also not apply to direct children of flex layout blocks.
-:where(.editor-styles-wrapper) :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block {
+.editor-styles-wrapper :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block {
 	margin-left: auto;
 	margin-right: auto;
 }

package/src/components/editor-initialization/index.js

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	useBlockSelectionListener,
-	useUpdatePostLinkListener,
-} from './listener-hooks';
+import { useUpdatePostLinkListener } from './listener-hooks';
 
 /**
  * Data component used for initializing the editor and re-initializes
@@ -13,7 +10,6 @@ import {
  * @return {null} This is a data component so does not render any ui.
  */
 export default function EditorInitialization() {
-	useBlockSelectionListener();
 	useUpdatePostLinkListener();
 	return null;
 }

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

@@ -1,57 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import {
-	STORE_NAME,
 	VIEW_AS_LINK_SELECTOR,
 	VIEW_AS_PREVIEW_LINK_SELECTOR,
 } from '../../store/constants';
 
-/**
- * This listener hook monitors for block selection and triggers the appropriate
- * sidebar state.
- */
-export const useBlockSelectionListener = () => {
-	const { hasBlockSelection, isEditorSidebarOpened, isDistractionFree } =
-		useSelect( ( select ) => {
-			const { get } = select( preferencesStore );
-			return {
-				hasBlockSelection:
-					!! select( blockEditorStore ).getBlockSelectionStart(),
-				isEditorSidebarOpened:
-					select( STORE_NAME ).isEditorSidebarOpened(),
-				isDistractionFree: get( 'core', 'distractionFree' ),
-			};
-		}, [] );
-
-	const { openGeneralSidebar } = useDispatch( STORE_NAME );
-
-	useEffect( () => {
-		if ( ! isEditorSidebarOpened || isDistractionFree ) {
-			return;
-		}
-		if ( hasBlockSelection ) {
-			openGeneralSidebar( 'edit-post/block' );
-		} else {
-			openGeneralSidebar( 'edit-post/document' );
-		}
-	}, [
-		hasBlockSelection,
-		isDistractionFree,
-		isEditorSidebarOpened,
-		openGeneralSidebar,
-	] );
-};
-
 /**
  * This listener hook monitors any change in permalink and updates the view
  * post link in the admin bar.

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

@@ -11,10 +11,7 @@ import { RegistryProvider, createRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	useBlockSelectionListener,
-	useUpdatePostLinkListener,
-} from '../listener-hooks';
+import { useUpdatePostLinkListener } from '../listener-hooks';
 import { STORE_NAME } from '../../../store/constants';
 
 describe( 'listener hook tests', () => {
@@ -71,10 +68,6 @@ describe( 'listener hook tests', () => {
 	const setMockReturnValue = ( store, functionName, value ) => {
 		mockStores[ store ].selectors[ functionName ].mockReturnValue( value );
 	};
-	const getSpyedFunction = ( store, functionName ) =>
-		mockStores[ store ].selectors[ functionName ];
-	const getSpyedAction = ( store, actionName ) =>
-		mockStores[ store ].actions[ actionName ];
 
 	afterEach( () => {
 		Object.values( mockStores ).forEach( ( storeMocks ) => {
@@ -86,94 +79,6 @@ describe( 'listener hook tests', () => {
 			} );
 		} );
 	} );
-	describe( 'useBlockSelectionListener', () => {
-		const registry = createRegistry( mockStores );
-		const TestComponent = () => {
-			useBlockSelectionListener();
-			return null;
-		};
-		const TestedOutput = () => {
-			return (
-				<RegistryProvider value={ registry }>
-					<TestComponent />
-				</RegistryProvider>
-			);
-		};
-
-		it( 'does nothing when editor sidebar is not open', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', false );
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedFunction( STORE_NAME, 'isEditorSidebarOpened' )
-			).toHaveBeenCalled();
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).not.toHaveBeenCalled();
-		} );
-		it( 'opens block sidebar if block is selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				true
-			);
-			setMockReturnValue( 'core/preferences', 'get', false );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/block' );
-		} );
-		it( 'opens document sidebar if block is not selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				false
-			);
-			setMockReturnValue( 'core/preferences', 'get', false );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/document' );
-		} );
-		it( 'does not open block sidebar if block is selected and distraction free mode is on', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				true
-			);
-			setMockReturnValue( 'core/preferences', 'get', true );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledTimes( 0 );
-		} );
-		it( 'does not open document sidebar if block is not selected and distraction free is on', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				false
-			);
-			setMockReturnValue( 'core/preferences', 'get', true );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledTimes( 0 );
-		} );
-	} );
 
 	describe( 'useUpdatePostLinkListener', () => {
 		const registry = createRegistry( mockStores );

package/src/components/header/index.js

@@ -7,43 +7,36 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	BlockToolbar,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
+	DocumentBar,
 	PostSavedState,
 	PostPreviewButton,
 	store as editorStore,
-	DocumentBar,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__unstableMotion as motion,
-	Popover,
-} from '@wordpress/components';
+import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import FullscreenModeClose from './fullscreen-mode-close';
-import MoreMenu from './more-menu';
-import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
+import PostEditorMoreMenu from './more-menu';
 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 );
+const {
+	CollapsableBlockToolbar,
+	DocumentTools,
+	PostViewLink,
+	PreviewDropdown,
+	PinnedItems,
+	MoreMenu,
+	PostPublishButtonOrToggle,
+} = unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -60,22 +53,19 @@ const slideX = {
 function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const blockToolbarRef = useRef();
 	const {
 		isTextEditor,
-		blockSelectionStart,
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const { getEditorMode } = select( editorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
-			blockSelectionStart:
-				select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasHistory:
 				!! select( editorStore ).getEditorSettings()
@@ -83,22 +73,14 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 			isPublishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 		};
 	}, [] );
 
-	const { showFixedToolbar } = useShowBlockTools();
-	const showTopToolbar = isLargeViewport && showFixedToolbar;
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
-	const hasBlockSelection = !! blockSelectionStart;
-
-	useEffect( () => {
-		// If we have a new block selection, show the block tools
-		if ( blockSelectionStart ) {
-			setIsBlockToolsCollapsed( false );
-		}
-	}, [ blockSelectionStart ] );
 
 	return (
 		<div className="edit-post-header">
@@ -119,47 +101,18 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				className="edit-post-header__toolbar"
 			>
 				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ showTopToolbar && (
-					<>
-						<div
-							className={ classnames(
-								'selected-block-tools-wrapper',
-								{
-									'is-collapsed':
-										isBlockToolsCollapsed ||
-										! hasBlockSelection,
-								}
-							) }
-						>
-							<BlockToolbar hideDragHandle />
-						</div>
-						<Popover.Slot
-							ref={ blockToolbarRef }
-							name="block-toolbar"
-						/>
-						<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"
-						/>
-					</>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
 				) }
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
 							hasHistory &&
 							! isBlockToolsCollapsed &&
-							showTopToolbar,
+							hasTopToolbar,
 					} ) }
 				>
 					{ hasHistory && <DocumentBar /> }
@@ -191,9 +144,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					}
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core/edit-post" />
+					<PinnedItems.Slot scope="core" />
 				) }
-				<MoreMenu showIconLabels={ showIconLabels } />
+				<MoreMenu />
+				<PostEditorMoreMenu />
 			</motion.div>
 		</div>
 	);

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

@@ -7,7 +7,7 @@ import { Keyboard } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import '@wordpress/interface';
+import '@wordpress/editor';
 
 /**
  * Internal dependencies

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

@@ -2,63 +2,47 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-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';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import PreferencesMenuItem from '../preferences-menu-item';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import WritingMenu from '../writing-menu';
 import { unlock } from '../../../lock-unlock';
+import ManagePatternsMenuItem from './manage-patterns-menu-item';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import EditPostPreferencesModal from '../../preferences-modal';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
-const MoreMenu = ( { showIconLabels } ) => {
+const MoreMenu = () => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			popoverProps={ {
-				placement: 'bottom-end',
-				className: 'more-menu-dropdown__content',
-			} }
-			toggleProps={ {
-				...( showIconLabels && { variant: 'tertiary' } ),
-				tooltipPosition: 'bottom',
-				showTooltip: ! showIconLabels,
-				size: 'compact',
-			} }
-		>
-			{ ( { onClose } ) => (
-				<>
-					{ showIconLabels && ! isLargeViewport && (
-						<PinnedItems.Slot
-							className={ showIconLabels && 'show-icon-labels' }
-							scope="core/edit-post"
-						/>
-					) }
-					<WritingMenu />
-					<ModeSwitcher />
-					<ActionItem.Slot
-						name="core/edit-post/plugin-more-menu"
-						label={ __( 'Plugins' ) }
-						as={ MenuGroup }
-						fillProps={ { onClick: onClose } }
+		<>
+			{ isLargeViewport && (
+				<ViewMoreMenuGroup>
+					<PreferenceToggleMenuItem
+						scope="core/edit-post"
+						name="fullscreenMode"
+						label={ __( 'Fullscreen mode' ) }
+						info={ __( 'Show and hide the admin user interface' ) }
+						messageActivated={ __( 'Fullscreen mode activated' ) }
+						messageDeactivated={ __(
+							'Fullscreen mode deactivated'
+						) }
+						shortcut={ displayShortcut.secondary( 'f' ) }
 					/>
-					<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-					<MenuGroup>
-						<PreferencesMenuItem />
-					</MenuGroup>
-				</>
+				</ViewMoreMenuGroup>
 			) }
-		</DropdownMenu>
+			<ToolsMoreMenuGroup>
+				<ManagePatternsMenuItem />
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<EditPostPreferencesModal />
+		</>
 	);
 };
 

package/src/components/header/more-menu/manage-patterns-menu-item.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+function ManagePatternsMenuItem() {
+	const url = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		const defaultUrl = addQueryArgs( 'edit.php', {
+			post_type: 'wp_block',
+		} );
+		const patternsUrl = addQueryArgs( 'site-editor.php', {
+			path: '/patterns',
+		} );
+
+		// The site editor and templates both check whether the user has
+		// edit_theme_options capabilities. We can leverage that here and not
+		// display the manage patterns link if the user can't access it.
+		return canUser( 'read', 'templates' ) ? patternsUrl : defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
+export default ManagePatternsMenuItem;