@wordpress/edit-post 7.14.0 → 7.15.0

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/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 }
 							/>

package/src/store/actions.js

@@ -11,6 +11,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -567,33 +568,23 @@ export const initializeMetaBoxes =
 
 		metaBoxesInitialized = true;
 
-		let wasSavingPost = registry.select( editorStore ).isSavingPost();
-		let wasAutosavingPost = registry
-			.select( editorStore )
-			.isAutosavingPost();
-
-		// Save metaboxes when performing a full save on the post.
-		registry.subscribe( async () => {
-			const isSavingPost = registry.select( editorStore ).isSavingPost();
-			const isAutosavingPost = registry
-				.select( editorStore )
-				.isAutosavingPost();
-
-			// Save metaboxes on save completion, except for autosaves.
-			const shouldTriggerMetaboxesSave =
-				wasSavingPost &&
-				! wasAutosavingPost &&
-				! isSavingPost &&
-				select.hasMetaBoxes();
-
-			// Save current state for next inspection.
-			wasSavingPost = isSavingPost;
-			wasAutosavingPost = isAutosavingPost;
-
-			if ( shouldTriggerMetaboxesSave ) {
-				await dispatch.requestMetaBoxUpdates();
-			}
-		} );
+		// Save metaboxes on save completion, except for autosaves.
+		addFilter(
+			'editor.__unstableSavePost',
+			'core/edit-post/save-metaboxes',
+			( previous, options ) =>
+				previous.then( () => {
+					if ( options.isAutosave ) {
+						return;
+					}
+
+					if ( ! select.hasMetaBoxes() ) {
+						return;
+					}
+
+					return dispatch.requestMetaBoxUpdates();
+				} )
+		);
 
 		dispatch( {
 			type: 'META_BOXES_INITIALIZED',

package/src/style.scss

@@ -41,13 +41,7 @@
 	}
 }
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
-html.wp-toolbar {
-	background: $white;
-}
-
-body.block-editor-page {
+body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }
 

package/src/components/visual-editor/style.native.scss

@@ -1,18 +0,0 @@
-.blockHolderFullBordered {
-	border-top-width: $block-selected-border-width;
-	border-bottom-width: $block-selected-border-width;
-	border-left-width: $block-selected-border-width;
-	border-right-width: $block-selected-border-width;
-	border-radius: 4px;
-	border-style: solid;
-	margin-left: 4px;
-	margin-right: 4px;
-}
-
-.blockHolderFocused {
-	border-color: $blue-wordpress;
-}
-
-.blockHolderFocusedDark {
-	border-color: $blue-30;
-}