@wordpress/edit-post 7.13.0 → 7.15.0

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

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/keyboard-shortcuts';
 import { withSelect, withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -21,9 +22,9 @@ import { compose } from '@wordpress/compose';
 import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
-import { store as editPostStore } from '../../store';
 
-const MODAL_NAME = 'edit-post/keyboard-shortcut-help';
+export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
+	'edit-post/keyboard-shortcut-help';
 
 const ShortcutList = ( { shortcuts } ) => (
 	/*
@@ -141,14 +142,18 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
 
 export default compose( [
 	withSelect( ( select ) => ( {
-		isModalActive: select( editPostStore ).isModalActive( MODAL_NAME ),
+		isModalActive: select( interfaceStore ).isModalActive(
+			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+		),
 	} ) ),
 	withDispatch( ( dispatch, { isModalActive } ) => {
-		const { openModal, closeModal } = dispatch( editPostStore );
+		const { openModal, closeModal } = dispatch( interfaceStore );
 
 		return {
 			toggleModal: () =>
-				isModalActive ? closeModal() : openModal( MODAL_NAME ),
+				isModalActive
+					? closeModal()
+					: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME ),
 		};
 	} ),
 ] )( KeyboardShortcutHelpModal );

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

@@ -223,8 +223,6 @@ function KeyboardShortcuts() {
 	} );
 
 	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		closeGeneralSidebar();
-		setIsListViewOpened( false );
 		toggleDistractionFree();
 		toggleFeature( 'distractionFree' );
 		createInfoNotice(

package/src/components/layout/actions-panel.js

@@ -31,18 +31,17 @@ export default function ActionsPanel( {
 	const {
 		publishSidebarOpened,
 		hasActiveMetaboxes,
-		isSavingMetaBoxes,
 		hasNonPostEntityChanges,
-	} = useSelect( ( select ) => {
-		return {
+	} = useSelect(
+		( select ) => ( {
 			publishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isSavingMetaBoxes: select( editPostStore ).isSavingMetaBoxes(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
-		};
-	}, [] );
+		} ),
+		[]
+	);
 
 	const openEntitiesSavedStates = useCallback(
 		() => setEntitiesSavedStatesCallback( true ),
@@ -57,7 +56,6 @@ export default function ActionsPanel( {
 			<PostPublishPanel
 				onClose={ closePublishSidebar }
 				forceIsDirty={ hasActiveMetaboxes }
-				forceIsSaving={ isSavingMetaBoxes }
 				PrePublishExtension={ PluginPrePublishPanel.Slot }
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>

package/src/components/layout/index.js

@@ -12,7 +12,9 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	EditorKeyboardShortcutsRegister,
+	EditorKeyboardShortcuts,
 	EditorSnackbars,
+	PostSyncStatusModal,
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -202,6 +204,7 @@ function Layout( { styles } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
+			<EditorKeyboardShortcuts />
 			<SettingsSidebar />
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isLargeViewport }
@@ -291,6 +294,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<PostSyncStatusModal />
 			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />

package/src/components/layout/style.native.scss

@@ -6,7 +6,7 @@
 }
 
 .containerDark {
-	background-color: $app-background-dark-alt;
+	background-color: $app-safe-area-background-dark;
 }
 
 .background {

package/src/components/preferences-modal/index.js

@@ -18,6 +18,7 @@ import {
 	PreferencesModal,
 	PreferencesModalTabs,
 	PreferencesModalSection,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -35,17 +36,18 @@ import MetaBoxesSection from './meta-boxes-section';
 import { store as editPostStore } from '../../store';
 import BlockManager from '../block-manager';
 
-const MODAL_NAME = 'edit-post/preferences';
+export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
 
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { closeModal } = useDispatch( editPostStore );
+	const { closeModal } = useDispatch( interfaceStore );
 	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { getEditorMode, isFeatureActive } = select( editPostStore );
-			const modalActive =
-				select( editPostStore ).isModalActive( MODAL_NAME );
+			const modalActive = select( interfaceStore ).isModalActive(
+				PREFERENCES_MODAL_NAME
+			);
 			const mode = getEditorMode();
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled =

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -590,6 +590,8 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13 {
+  font-size: 13px;
+  font-family: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -617,11 +619,17 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.emotion-13:focus-visible {
   box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var(
-  				--wp-components-color-accent,
-  				var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
-  			);
+  					--wp-components-color-accent,
+  					var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
+  				);
   outline: 2px solid transparent;
+  outline-offset: 0;
 }
 
 .emotion-15 {

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

@@ -58,6 +58,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 								marginTop: '16px',
 							} }
 							spacing={ 4 }
+							wrap
 						>
 							<PostSwitchToDraftButton />
 							<PostTrash />

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

@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
-import { FlexItem } from '@wordpress/components';
 
 export default function PostTrash() {
 	return (
 		<PostTrashCheck>
-			<FlexItem isBlock>
-				<PostTrashLink />
-			</FlexItem>
+			<PostTrashLink />
 		</PostTrashCheck>
 	);
 }

package/src/components/start-page-options/style.scss

@@ -3,9 +3,6 @@
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
 	@include break-medium() {
 		column-count: 3;
 	}

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

@@ -4,7 +4,6 @@
 import {
 	PostTextEditor,
 	PostTitle,
-	TextEditorGlobalKeyboardShortcuts,
 	store as editorStore,
 } from '@wordpress/editor';
 import { Button } from '@wordpress/components';
@@ -25,7 +24,6 @@ export default function TextEditor() {
 
 	return (
 		<div className="edit-post-text-editor">
-			<TextEditorGlobalKeyboardShortcuts />
 			{ isRichEditingEnabled && (
 				<div className="edit-post-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>

package/src/components/visual-editor/header.native.js

@@ -16,23 +16,9 @@ import {
 	useEditorWrapperStyles,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 const Header = memo(
-	function EditorHeader( {
-		editTitle,
-		setTitleRef,
-		title,
-		getStylesFromColorScheme,
-	} ) {
+	function EditorHeader( { editTitle, setTitleRef, title } ) {
 		const [ wrapperStyles ] = useEditorWrapperStyles();
-		const blockHolderFocusedStyle = getStylesFromColorScheme(
-			styles.blockHolderFocused,
-			styles.blockHolderFocusedDark
-		);
 		return (
 			<View style={ wrapperStyles }>
 				<PostTitle
@@ -40,8 +26,6 @@ const Header = memo(
 					title={ title }
 					onUpdate={ editTitle }
 					placeholder={ __( 'Add title' ) }
-					borderStyle={ styles.blockHolderFullBordered }
-					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
 			</View>

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

@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	VisualEditorGlobalKeyboardShortcuts,
-	PostTitle,
-	store as editorStore,
-} from '@wordpress/editor';
+import { PostTitle, store as editorStore } from '@wordpress/editor';
 import {
 	WritingFlow,
 	BlockList,
@@ -345,7 +341,6 @@ export default function VisualEditor( { styles } ) {
 				'is-template-mode': isTemplateMode,
 			} ) }
 		>
-			<VisualEditorGlobalKeyboardShortcuts />
 			<motion.div
 				className="edit-post-visual-editor__content-area"
 				animate={ {

package/src/components/visual-editor/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when nothing is selected media buttons and picker display correctly 1`] = `
+"<!-- wp:paragraph -->
+<p>First example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;

package/src/components/visual-editor/test/index.native.js

@@ -1,11 +1,12 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent } from 'test/helpers';
+import { initializeEditor, getEditorHtml, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
+import { Platform } from '@wordpress/element';
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
@@ -21,6 +22,12 @@ afterAll( () => {
 	} );
 } );
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'WordPress Media Library',
+];
+
 const initialHtml = `
 <!-- wp:paragraph -->
 <p>First example paragraph.</p>
@@ -63,6 +70,38 @@ describe( 'when title is focused', () => {
 			screen.getAllByLabelText( /Paragraph Block. Row 3/ )[ 0 ]
 		).toBeDefined();
 	} );
+
+	it( 'media blocks should be displayed', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
+
+		// Focus title
+		fireEvent(
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Assert that the media buttons are visible
+		const imageButton = await screen.findByTestId( 'insert-image-button' );
+		expect( imageButton ).toBeVisible();
+
+		const videoButton = await screen.findByTestId( 'insert-video-button' );
+		expect( videoButton ).toBeVisible();
+
+		const galleryButton = await screen.findByTestId(
+			'insert-gallery-button'
+		);
+		expect( galleryButton ).toBeVisible();
+
+		const audioButton = await screen.findByTestId( 'insert-audio-button' );
+		expect( audioButton ).toBeVisible();
+	} );
 } );
 
 describe( 'when title is no longer focused', () => {
@@ -101,4 +140,82 @@ describe( 'when title is no longer focused', () => {
 			screen.getAllByLabelText( /Heading Block. Row 3/ )[ 0 ]
 		).toBeDefined();
 	} );
+
+	it( 'media blocks should not be displayed', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
+
+		// Focus title
+		fireEvent(
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Focus last block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
+		);
+
+		// Assert that the media buttons are not visible
+		const imageButton = screen.queryByTestId( 'insert-image-button' );
+		expect( imageButton ).toBeNull();
+
+		const videoButton = screen.queryByTestId( 'insert-video-button' );
+		expect( videoButton ).toBeNull();
+
+		const galleryButton = screen.queryByTestId( 'insert-gallery-button' );
+		expect( galleryButton ).toBeNull();
+
+		const audioButton = screen.queryByTestId( 'insert-audio-button' );
+		expect( audioButton ).toBeNull();
+	} );
+} );
+
+describe( 'when nothing is selected', () => {
+	it( 'media buttons and picker display correctly', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const { getByText, getByTestId } = screen;
+
+		// Check that the gallery button is visible within the toolbar
+		const galleryButton = await screen.queryByTestId(
+			'insert-gallery-button'
+		);
+		expect( galleryButton ).toBeVisible();
+
+		// Press the toolbar Gallery button
+		fireEvent.press( galleryButton );
+
+		// Expect the block to be created
+		expect(
+			screen.getAllByLabelText( /Gallery Block. Row 3/ )[ 0 ]
+		).toBeDefined();
+
+		expect( getByText( 'Choose images' ) ).toBeVisible();
+		MEDIA_OPTIONS.forEach( ( option ) =>
+			expect( getByText( option ) ).toBeVisible()
+		);
+
+		// Dismiss the picker
+		if ( Platform.isIOS ) {
+			fireEvent.press( getByText( 'Cancel' ) );
+		} else {
+			fireEvent( getByTestId( 'media-options-picker' ), 'backdropPress' );
+		}
+
+		// Expect the Gallery block to remain
+		expect(
+			screen.getAllByLabelText( /Gallery Block. Row 3/ )[ 0 ]
+		).toBeDefined();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/editor.js

@@ -25,6 +25,7 @@ import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
 import { unlock } from './lock-unlock';
+import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
@@ -32,6 +33,7 @@ const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 	useCommands();
+	useCommonCommands();
 	const {
 		hasFixedToolbar,
 		focusMode,

package/src/hooks/commands/use-common-commands.js

@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	code,
+	cog,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+	keyboardClose,
+	desktop,
+	listView,
+} from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
+import { store as editPostStore } from '../../store';
+
+export default function useCommonCommands() {
+	const {
+		openGeneralSidebar,
+		closeGeneralSidebar,
+		switchEditorMode,
+		setIsListViewOpened,
+	} = useDispatch( editPostStore );
+	const { openModal } = useDispatch( interfaceStore );
+	const { editorMode, activeSidebar, isListViewOpen } = useSelect(
+		( select ) => {
+			const { getEditorMode, isListViewOpened } = select( editPostStore );
+			return {
+				activeSidebar: select(
+					interfaceStore
+				).getActiveComplementaryArea( editPostStore.name ),
+				editorMode: getEditorMode(),
+				isListViewOpen: isListViewOpened(),
+			};
+		},
+		[]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+
+	useCommand( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/document' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/document' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/block' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/block' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'distractionFree' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'focusMode' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-fullscreen-mode',
+		label: __( 'Toggle fullscreen mode' ),
+		icon: desktop,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fullscreenMode' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-list-view',
+		label: __( 'Toggle list view' ),
+		icon: listView,
+		callback: ( { close } ) => {
+			setIsListViewOpened( ! isListViewOpen );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-preferences',
+		label: __( 'Open editor preferences' ),
+		icon: cog,
+		callback: () => {
+			openModal( PREFERENCES_MODAL_NAME );
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Open keyboard shortcuts' ),
+		icon: keyboardClose,
+		callback: () => {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		},
+	} );
+}

package/src/plugins/index.js

@@ -2,6 +2,9 @@
  * WordPress dependencies
  */
 import { MenuItem, VisuallyHidden } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 import { external } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
@@ -15,6 +18,34 @@ import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
+function ManagePatternsMenuItem() {
+	const url = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		const { getEditorSettings } = select( editorStore );
+
+		const isBlockTheme = getEditorSettings().__unstableIsBlockBasedTheme;
+		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' ) && isBlockTheme
+			? patternsUrl
+			: defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
 registerPlugin( 'edit-post', {
 	render() {
 		return (
@@ -22,14 +53,7 @@ registerPlugin( 'edit-post', {
 				<ToolsMoreMenuGroup>
 					{ ( { onClose } ) => (
 						<>
-							<MenuItem
-								role="menuitem"
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_block',
-								} ) }
-							>
-								{ __( 'Manage Patterns' ) }
-							</MenuItem>
+							<ManagePatternsMenuItem />
 							<KeyboardShortcutsHelpMenuItem
 								onSelect={ onClose }
 							/>