@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/block-mobile-toolbar/test/block-actions-menu.native.js

@@ -0,0 +1,439 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	changeTextOfRichText,
+} 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 );
+	} );
+} );
+
+describe( 'Block Actions Menu', () => {
+	it( "renders the block name in the Picker's header", async () => {
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph -->
+            <p></p>
+            <!-- /wp:paragraph -->`,
+		} );
+		const { getByLabelText, getByRole } = screen;
+
+		// Get block
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open block actions menu
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Get Picker title
+		const pickerHeader = getByRole( 'header' );
+		const headerTitle = within( pickerHeader ).getByText(
+			/Paragraph block options/
+		);
+		expect( headerTitle ).toBeVisible();
+	} );
+
+	describe( 'moving blocks', () => {
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Down button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block down' )
+			);
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Up button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block up' )
+			);
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Up button
+			const upButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100,
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Down button
+			const downButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'block options', () => {
+		it( 'copies and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Paste block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'does not replace a non empty Paragraph block when pasting another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Past block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'cuts and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Cut block/ ) );
+
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'duplicates a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Duplicate button
+			fireEvent.press( getByLabelText( /Duplicate block/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'transforms a Paragraph block into a Pullquote block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByRole } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Transform block…/ ) );
+
+			// Get Picker title
+			const pickerHeader = getByRole( 'header' );
+			const headerTitle = within( pickerHeader ).getByText(
+				/Transform Paragraph to/
+			);
+			expect( headerTitle ).toBeVisible();
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Pullquote/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+} );

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
 exports[`Block Mover Picker should match snapshot 1`] = `
 Array [
   <View>
@@ -15,7 +57,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -75,7 +116,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}

package/src/components/block-mover/test/index.native.js

@@ -1,7 +1,22 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	render,
+	changeTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -46,4 +61,145 @@ describe( 'Block Mover Picker', () => {
 		const screen = render( <BlockMover { ...props } /> );
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
+
+	describe( 'moving blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Tap on the Move Down button
+			const downButton = getByLabelText(
+				/Move block down from row 2 to row 3/
+			);
+			fireEvent.press( downButton );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Tap on the Move Up button
+			const upButton = getByLabelText(
+				/Move block up from row 2 to row 1/
+			);
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get the Move Up button
+			const upButton = getByLabelText( /Move block up/ );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get the Move Down button
+			const downButton = getByLabelText( /Move block down/ );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );