@wordpress/edit-post 7.14.0 → 7.16.0

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

@@ -55,12 +55,31 @@ function ModeSwitcher() {
 		return null;
 	}
 
-	if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) {
-		return null;
+	let selectedMode = mode;
+	if ( ! isRichEditingEnabled && mode === 'visual' ) {
+		selectedMode = 'text';
+	}
+	if ( ! isCodeEditingEnabled && mode === 'text' ) {
+		selectedMode = 'visual';
 	}
 
 	const choices = MODES.map( ( choice ) => {
-		if ( choice.value !== mode ) {
+		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;
@@ -70,7 +89,7 @@ function ModeSwitcher() {
 		<MenuGroup label={ __( 'Editor' ) }>
 			<MenuItemsChoice
 				choices={ choices }
-				value={ mode }
+				value={ selectedMode }
 				onSelect={ switchEditorMode }
 			/>
 		</MenuGroup>

package/src/components/header/post-publish-button-or-toggle.js

@@ -12,7 +12,6 @@ import { store as editPostStore } from '../../store';
 
 export function PostPublishButtonOrToggle( {
 	forceIsDirty,
-	forceIsSaving,
 	hasPublishAction,
 	isBeingScheduled,
 	isPending,
@@ -67,7 +66,6 @@ export function PostPublishButtonOrToggle( {
 	return (
 		<PostPublishButton
 			forceIsDirty={ forceIsDirty }
-			forceIsSaving={ forceIsSaving }
 			isOpen={ isPublishSidebarOpened }
 			isToggle={ component === IS_TOGGLE }
 			onToggle={ togglePublishSidebar }

package/src/components/header/style.scss

@@ -44,7 +44,7 @@
 	}
 }
 
-.edit-post-header__document-title {
+.edit-post-header__center {
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;

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';
@@ -54,7 +56,7 @@ import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -69,13 +71,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-const blockRemovalRules = {
-	'core/footnotes': __(
-		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
-	),
-};
-
-function Layout( { styles } ) {
+function Layout() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -99,10 +95,45 @@ function Layout( { styles } ) {
 		showBlockBreadcrumbs,
 		isTemplateMode,
 		documentLabel,
+		styles,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
+		const hasThemeStyles = isFeatureActive( 'themeStyles' );
+
+		const themeStyles = [];
+		const presetStyles = [];
+		editorSettings.styles?.forEach( ( style ) => {
+			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
+				themeStyles.push( style );
+			} else {
+				presetStyles.push( style );
+			}
+		} );
+
+		const defaultEditorStyles = [
+			...editorSettings.defaultEditorStyles,
+			...presetStyles,
+		];
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if (
+			! editorSettings.disableLayoutStyles &&
+			! ( hasThemeStyles && themeStyles.length )
+		) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
+		}
 
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
@@ -135,6 +166,10 @@ function Layout( { styles } ) {
 			),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			styles:
+				hasThemeStyles && themeStyles.length
+					? editorSettings.styles
+					: defaultEditorStyles,
 		};
 	}, [] );
 
@@ -214,7 +249,7 @@ function Layout( { styles } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<BlockRemovalWarningModal rules={ blockRemovalRules } />
+			<EditorKeyboardShortcuts />
 			<SettingsSidebar />
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isLargeViewport }
@@ -304,6 +339,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/test/__snapshots__/index.js.snap

@@ -115,6 +115,8 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-general-view"
             aria-selected="true"
             class="components-button components-tab-panel__tabs-item is-active"
+            data-active-item=""
+            data-command=""
             id="tab-panel-0-general"
             role="tab"
             type="button"
@@ -125,9 +127,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-blocks-view"
             aria-selected="false"
             class="components-button components-tab-panel__tabs-item"
+            data-command=""
             id="tab-panel-0-blocks"
             role="tab"
-            tabindex="-1"
             type="button"
           >
             Blocks
@@ -136,9 +138,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
             aria-controls="tab-panel-0-panels-view"
             aria-selected="false"
             class="components-button components-tab-panel__tabs-item"
+            data-command=""
             id="tab-panel-0-panels"
             role="tab"
-            tabindex="-1"
             type="button"
           >
             Panels
@@ -149,6 +151,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
           class="components-tab-panel__tab-content"
           id="tab-panel-0-general-view"
           role="tabpanel"
+          tabindex="0"
         >
           <fieldset
             class="interface-preferences-modal__section"
@@ -590,6 +593,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;
@@ -616,12 +621,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
+.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/preferences-modal/test/index.js

@@ -20,20 +20,20 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	describe( 'should match snapshot when the modal is active', () => {
-		it( 'large viewports', () => {
+		it( 'large viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => true );
 			render( <EditPostPreferencesModal /> );
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
+				await screen.findByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
-		it( 'small viewports', () => {
+		it( 'small viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => false );
 			render( <EditPostPreferencesModal /> );
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
+				await screen.findByRole( 'dialog', { name: 'Preferences' } )
 			).toMatchSnapshot();
 		} );
 	} );

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

@@ -11,7 +11,7 @@ import {
 import { useDispatch } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -140,12 +140,12 @@ export default function ListViewSidebar() {
 				tabs={ [
 					{
 						name: 'list-view',
-						title: 'List View',
+						title: _x( 'List View', 'Post overview' ),
 						className: 'edit-post-sidebar__panel-tab',
 					},
 					{
 						name: 'outline',
-						title: 'Outline',
+						title: _x( 'Outline', 'Post overview' ),
 						className: 'edit-post-sidebar__panel-tab',
 					},
 				] }

package/src/components/sidebar/discussion-panel/index.js

@@ -8,8 +8,7 @@ import {
 	PostPingbacks,
 	PostTypeSupportCheck,
 } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -21,7 +20,18 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'discussion-panel';
 
-function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
+function DiscussionPanel() {
+	const { isEnabled, isOpened } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editPostStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
 	if ( ! isEnabled ) {
 		return null;
 	}
@@ -31,7 +41,7 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 			<PanelBody
 				title={ __( 'Discussion' ) }
 				opened={ isOpened }
-				onToggle={ onTogglePanel }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
 			>
 				<PostTypeSupportCheck supportKeys="comments">
 					<PanelRow>
@@ -49,19 +59,4 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( DiscussionPanel );
+export default DiscussionPanel;

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();
+	} );
 } );