@wordpress/block-editor 11.1.0 → 11.2.0

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align options for group block sets Full width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignfull\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets None option 1`] = `
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets Wide width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"wide\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignwide\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for media block sets Align center option 1`] = `
+"<!-- wp:image {\\"align\\":\\"center\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image aligncenter size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align left option 1`] = `
+"<!-- wp:image {\\"align\\":\\"left\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignleft size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align right option 1`] = `
+"<!-- wp:image {\\"align\\":\\"right\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignright size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Full width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"full\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignfull size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets None option 1`] = `
+"<!-- wp:image {\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Wide width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"wide\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignwide size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for text block sets Align text center option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text left option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"left\\"} -->
+<p class=\\"has-text-align-left\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text right option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"right\\"} -->
+<p class=\\"has-text-align-right\\"></p>
+<!-- /wp:paragraph -->"
+`;

package/src/hooks/test/align.native.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	fireEvent,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Align options', () => {
+	describe( 'for media block', () => {
+		[
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor( {
+					initialHtml: imageHTML,
+				} );
+				const { getByLabelText } = screen;
+
+				// Get Image block
+				const imageBlock = await getBlock( screen, 'Image' );
+				expect( imageBlock ).toBeVisible();
+				fireEvent.press( imageBlock );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+
+	describe( 'for text block', () => {
+		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
+
+					// Add Paragraph block
+					await addBlock( screen, 'Paragraph' );
+
+					// Get Paragraph block
+					const paragraphBlock = await getBlock(
+						screen,
+						'Paragraph'
+					);
+					expect( paragraphBlock ).toBeVisible();
+
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align' );
+					fireEvent.press( alignmentButtons );
+
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
+
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
+		);
+	} );
+
+	describe( 'for group block', () => {
+		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor();
+				const { getByLabelText } = screen;
+
+				// Add Group block
+				await addBlock( screen, 'Group' );
+
+				// Get Paragraph block
+				const groupBlock = await getBlock( screen, 'Group' );
+				expect( groupBlock ).toBeVisible();
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper = await within(
+					groupBlock
+				).findByTestId( 'block-list-wrapper' );
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+} );

package/src/store/reducer.js

@@ -1829,14 +1829,19 @@ export function highlightedBlock( state, action ) {
 export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
+		case 'REPLACE_BLOCKS':
+		case 'REPLACE_INNER_BLOCKS':
 			if ( ! action.blocks.length ) {
 				return state;
 			}
 
-			const clientId = action.blocks[ 0 ].clientId;
+			const clientIds = action.blocks.map( ( block ) => {
+				return block.clientId;
+			} );
+
 			const source = action.meta?.source;
 
-			return { clientId, source };
+			return { clientIds, source };
 		case 'RESET_BLOCKS':
 			return {};
 	}

package/src/store/selectors.js

@@ -2647,19 +2647,19 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 export function wasBlockJustInserted( state, clientId, source ) {
 	const { lastBlockInserted } = state;
 	return (
-		lastBlockInserted.clientId === clientId &&
+		lastBlockInserted.clientIds?.includes( clientId ) &&
 		lastBlockInserted.source === source
 	);
 }
 
 /**
- * Gets the client id of the last inserted block.
+ * Gets the client ids of the last inserted blocks.
  *
  * @param {Object} state Global application state.
- * @return {string|undefined} Client Id of the last inserted block.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
  */
-export function getLastInsertedBlockClientId( state ) {
-	return state?.lastBlockInserted?.clientId;
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
 }
 
 /**

package/src/store/test/reducer.js

@@ -3255,7 +3255,7 @@ describe( 'state', () => {
 	} );
 
 	describe( 'lastBlockInserted', () => {
-		it( 'should return client id if last block inserted is called with action INSERT_BLOCKS', () => {
+		it( 'should contain client id if last block inserted is called with action INSERT_BLOCKS', () => {
 			const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
 
 			const action = {
@@ -3272,7 +3272,7 @@ describe( 'state', () => {
 
 			const state = lastBlockInserted( {}, action );
 
-			expect( state.clientId ).toBe( expectedClientId );
+			expect( state.clientIds ).toContain( expectedClientId );
 		} );
 
 		it( 'should return inserter_menu source if last block inserted is called with action INSERT_BLOCKS', () => {
@@ -3297,7 +3297,7 @@ describe( 'state', () => {
 
 		it( 'should return state if last block inserted is called with action INSERT_BLOCKS and block list is empty', () => {
 			const expectedState = {
-				clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+				clientIds: [ '9db792c6-a25a-495d-adbd-97d56a4c4189' ],
 			};
 
 			const action = {
@@ -3313,6 +3313,48 @@ describe( 'state', () => {
 			expect( state ).toEqual( expectedState );
 		} );
 
+		it( 'should return client ids of blocks when called with REPLACE_BLOCKS', () => {
+			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
+			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+
+			const action = {
+				blocks: [
+					{
+						clientId: clientIdOne,
+					},
+					{
+						clientId: clientIdTwo,
+					},
+				],
+				type: 'REPLACE_BLOCKS',
+			};
+
+			const state = lastBlockInserted( {}, action );
+
+			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+		} );
+
+		it( 'should return client ids of all blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
+			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
+			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+
+			const action = {
+				blocks: [
+					{
+						clientId: clientIdOne,
+					},
+					{
+						clientId: clientIdTwo,
+					},
+				],
+				type: 'REPLACE_INNER_BLOCKS',
+			};
+
+			const state = lastBlockInserted( {}, action );
+
+			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+		} );
+
 		it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => {
 			const expectedState = {};
 

package/src/store/test/selectors.js

@@ -73,7 +73,7 @@ const {
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
 	__experimentalGetGlobalBlocksByName,
-	getLastInsertedBlockClientId,
+	getLastInsertedBlocksClientIds,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -4457,7 +4457,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: expectedClientId,
+					clientIds: [ expectedClientId ],
 					source,
 				},
 			};
@@ -4474,7 +4474,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: unexpectedClientId,
+					clientIds: [ unexpectedClientId ],
 					source,
 				},
 			};
@@ -4490,7 +4490,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId,
+					clientIds: [ clientId ],
 				},
 			};
 
@@ -4667,22 +4667,25 @@ describe( '__unstableGetClientIdsTree', () => {
 	} );
 } );
 
-describe( 'getLastInsertedBlockClientId', () => {
+describe( 'getLastInsertedBlocksClientIds', () => {
 	it( 'should return undefined if no blocks have been inserted', () => {
 		const state = {
 			lastBlockInserted: {},
 		};
 
-		expect( getLastInsertedBlockClientId( state ) ).toEqual( undefined );
+		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( undefined );
 	} );
 
-	it( 'should return clientId if blocks have been inserted', () => {
+	it( 'should return clientIds if blocks have been inserted', () => {
 		const state = {
 			lastBlockInserted: {
-				clientId: '123456',
+				clientIds: [ '123456', '78910' ],
 			},
 		};
 
-		expect( getLastInsertedBlockClientId( state ) ).toEqual( '123456' );
+		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
+			'123456',
+			'78910',
+		] );
 	} );
 } );

package/src/style.scss

@@ -22,7 +22,6 @@
 @import "./components/block-pattern-setup/style.scss";
 @import "./components/block-variation-transforms/style.scss";
 @import "./components/border-radius-control/style.scss";
-@import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/date-format-picker/style.scss";
@@ -31,6 +30,7 @@
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
@@ -50,6 +50,7 @@
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
 @import "./hooks/dimensions.scss";
+@import "./hooks/position.scss";
 @import "./hooks/typography.scss";
 @import "./hooks/color.scss";
 @import "./hooks/padding.scss";