@wordpress/edit-post 6.5.0 → 6.8.0

package/src/components/start-page-options/index.js

@@ -19,13 +19,11 @@ import { store as editPostStore } from '../../store';
 
 function PatternSelection( { onChoosePattern } ) {
 	const { blockPatterns } = useSelect( ( select ) => {
-		const { __experimentalGetPatternsByBlockTypes } = select(
-			blockEditorStore
-		);
+		const { __experimentalGetPatternsByBlockTypes } =
+			select( blockEditorStore );
 		return {
-			blockPatterns: __experimentalGetPatternsByBlockTypes(
-				'core/post-content'
-			),
+			blockPatterns:
+				__experimentalGetPatternsByBlockTypes( 'core/post-content' ),
 		};
 	}, [] );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
@@ -57,17 +55,15 @@ export default function StartPageOptions() {
 			if ( modalState !== START_PAGE_MODAL_STATES.INITIAL ) {
 				return false;
 			}
-			const { __experimentalGetPatternsByBlockTypes } = select(
-				blockEditorStore
-			);
+			const { __experimentalGetPatternsByBlockTypes } =
+				select( blockEditorStore );
 			const {
 				getCurrentPostType,
 				getEditedPostContent,
 				isEditedPostSaveable,
 			} = select( editorStore );
-			const { isEditingTemplate, isFeatureActive } = select(
-				editPostStore
-			);
+			const { isEditingTemplate, isFeatureActive } =
+				select( editPostStore );
 			return (
 				getCurrentPostType() === 'page' &&
 				! isEditedPostSaveable() &&

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

@@ -8,30 +8,34 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { Button } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
-function TextEditor( { onExit, isRichEditingEnabled } ) {
+export default function TextEditor() {
+	const isRichEditingEnabled = useSelect( ( select ) => {
+		return select( editorStore ).getEditorSettings().richEditingEnabled;
+	}, [] );
+	const { switchEditorMode } = useDispatch( editPostStore );
+
 	return (
 		<div className="edit-post-text-editor">
+			<TextEditorGlobalKeyboardShortcuts />
 			{ isRichEditingEnabled && (
 				<div className="edit-post-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
 						variant="tertiary"
-						onClick={ onExit }
+						onClick={ () => switchEditorMode( 'visual' ) }
 						shortcut={ displayShortcut.secondary( 'm' ) }
 					>
 						{ __( 'Exit code editor' ) }
 					</Button>
-					<TextEditorGlobalKeyboardShortcuts />
 				</div>
 			) }
 			<div className="edit-post-text-editor__body">
@@ -41,17 +45,3 @@ function TextEditor( { onExit, isRichEditingEnabled } ) {
 		</div>
 	);
 }
-
-export default compose(
-	withSelect( ( select ) => ( {
-		isRichEditingEnabled: select( editorStore ).getEditorSettings()
-			.richEditingEnabled,
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onExit() {
-				dispatch( editPostStore ).switchEditorMode( 'visual' );
-			},
-		};
-	} )
-)( TextEditor );

package/src/components/visual-editor/block-inspector-button.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,8 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as editPostStore } from '../../store';
 
+const noop = () => {};
+
 export function BlockInspectorButton( { onClick = noop, small = false } ) {
 	const { shortcut, areAdvancedSettingsOpened } = useSelect(
 		( select ) => ( {
@@ -29,9 +26,8 @@ export function BlockInspectorButton( { onClick = noop, small = false } ) {
 		} ),
 		[]
 	);
-	const { openGeneralSidebar, closeGeneralSidebar } = useDispatch(
-		editPostStore
-	);
+	const { openGeneralSidebar, closeGeneralSidebar } =
+		useDispatch( editPostStore );
 
 	const label = areAdvancedSettingsOpened
 		? __( 'Hide more settings' )

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

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { initializeEditor, fireEvent } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+const initialHtml = `
+<!-- wp:paragraph -->
+<p>First example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second example paragraph.</p>
+<!-- /wp:paragraph -->
+`;
+
+describe( 'when title is focused', () => {
+	it( 'new blocks are inserted after the title', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+
+		// Focus title
+		fireEvent(
+			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Add new Heading block
+		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByText( 'Heading' ) );
+
+		expect( screen.getByA11yLabel( /Heading Block. Row 1/ ) ).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+		).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 3/ )
+		).toBeDefined();
+	} );
+} );
+
+describe( 'when title is no longer focused', () => {
+	it( 'new blocks are inserted after the currently focused block', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+
+		// Focus title
+		fireEvent(
+			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Focus last block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 2/ ) );
+
+		// Add new Heading block
+		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByText( 'Heading' ) );
+
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 1/ )
+		).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+		).toBeDefined();
+		expect( screen.getByA11yLabel( /Heading Block. Row 3/ ) ).toBeDefined();
+	} );
+} );

package/src/editor.js

@@ -56,9 +56,8 @@ function Editor( {
 				getEditedPostTemplate,
 				getHiddenBlockTypes,
 			} = select( editPostStore );
-			const { getEntityRecord, getPostType, getEntityRecords } = select(
-				coreStore
-			);
+			const { getEntityRecord, getPostType, getEntityRecords } =
+				select( coreStore );
 			const { getEditorSettings } = select( editorStore );
 			const { getBlockTypes } = select( blocksStore );
 			const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
@@ -75,8 +74,8 @@ function Editor( {
 			} else {
 				postObject = getEntityRecord( 'postType', postType, postId );
 			}
-			const supportsTemplateMode = getEditorSettings()
-				.supportsTemplateMode;
+			const supportsTemplateMode =
+				getEditorSettings().supportsTemplateMode;
 			const isViewable = getPostType( postType )?.viewable ?? false;
 
 			return {
@@ -104,9 +103,8 @@ function Editor( {
 		[ postType, postId ]
 	);
 
-	const { updatePreferredStyleVariations, setIsInserterOpened } = useDispatch(
-		editPostStore
-	);
+	const { updatePreferredStyleVariations, setIsInserterOpened } =
+		useDispatch( editPostStore );
 
 	const editorSettings = useMemo( () => {
 		const result = {

package/src/editor.native.js

@@ -92,12 +92,15 @@ class Editor extends Component {
 			() => {
 				if ( this.postTitleRef ) {
 					this.postTitleRef.focus();
+				} else {
+					// If the post title ref is not available, we postpone setting focus to when it's available.
+					this.focusTitleWhenAvailable = true;
 				}
 			}
 		);
 
-		this.subscriptionParentFeaturedImageIdNativeUpdated = subscribeFeaturedImageIdNativeUpdated(
-			( payload ) => {
+		this.subscriptionParentFeaturedImageIdNativeUpdated =
+			subscribeFeaturedImageIdNativeUpdated( ( payload ) => {
 				editEntityRecord(
 					'postType',
 					postType,
@@ -107,8 +110,7 @@ class Editor extends Component {
 						undoIgnore: true,
 					}
 				);
-			}
-		);
+			} );
 	}
 
 	componentWillUnmount() {
@@ -122,6 +124,11 @@ class Editor extends Component {
 	}
 
 	setTitleRef( titleRef ) {
+		if ( this.focusTitleWhenAvailable && ! this.postTitleRef ) {
+			this.focusTitleWhenAvailable = false;
+			titleRef.focus();
+		}
+
 		this.postTitleRef = titleRef;
 	}
 

package/src/index.js

@@ -117,12 +117,19 @@ export function initializeEditor(
 		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
+		showListViewByDefault: false,
 		themeStyles: true,
 		welcomeGuide: true,
 		welcomeGuideTemplate: true,
 	} );
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+
+	// Check if the block list view should be open by default.
+	if ( select( editPostStore ).isFeatureActive( 'showListViewByDefault' ) ) {
+		dispatch( editPostStore ).setIsListViewOpened( true );
+	}
+
 	registerCoreBlocks();
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {

package/src/plugins/copy-content-menu-item/index.js

@@ -25,5 +25,5 @@ export default function CopyContentMenuItem() {
 
 	const ref = useCopyToClipboard( getText, onSuccess );
 
-	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
 }