Mobile - Columns block - Fix transforming into a Group block crash (#…

…54035) * Mobile - Column block - Fix issue when transforming a Columns block that's nested in a container block like Group. By avoid accessing the width value outside of the isSelected and adding a fallback value. * Mobile - Columns block - Add transform Columns block integration test * Mobile - Columns Block Tests - Update usage of the screen variable, now its imported from the helpers instead of the initializedEditor * Mobile - Update changelog
WordPress · Aug 30, 2023 · 22d24f3 · 22d24f3
1 parent 2d4314d
commit 22d24f3
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 21 deletions.
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -111,10 +111,10 @@ function ColumnEdit( {
 	};
 
 	const renderAppender = useCallback( () => {
-		const { width: columnWidth } = contentStyle[ clientId ];
-		const isFullWidth = columnWidth === screenWidth;
-
 		if ( isSelected ) {
+			const { width: columnWidth } = contentStyle[ clientId ] || {};
+			const isFullWidth = columnWidth === screenWidth;
+
 			return (
 				<View
 					style={ [
@@ -133,7 +133,7 @@ function ColumnEdit( {
 			);
 		}
 		return null;
-	}, [ contentStyle[ clientId ], screenWidth, isSelected, hasChildren ] );
+	}, [ contentStyle, clientId, screenWidth, isSelected, hasChildren ] );
 
 	if ( ! isSelected && ! hasChildren ) {
 		return (

diff --git a/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap
@@ -82,6 +82,20 @@ exports[`Columns block sets current vertical alignment on new Columns 1`] = `
 <!-- /wp:columns -->"
 `;
 
+exports[`Columns block transforms a nested Columns block into a Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->"
+`;
+
 exports[`Columns block when using columns percentage mechanism sets custom values correctly 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"90%"} -->

diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
@@ -4,14 +4,16 @@
 import {
 	act,
 	addBlock,
+	dismissModal,
 	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
+	openBlockActionsMenu,
 	openBlockSettings,
-	within,
-	getBlock,
-	dismissModal,
+	screen,
 	waitForModalVisible,
+	within,
 } from 'test/helpers';
 
 /**
@@ -43,7 +45,7 @@ afterAll( () => {
 
 describe( 'Columns block', () => {
 	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Columns' );
@@ -55,7 +57,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'adds a column block using the appender', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 
@@ -73,7 +75,7 @@ describe( 'Columns block', () => {
 
 	describe( 'when using the number of columns setting', () => {
 		it( 'adds a column block when incrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -95,7 +97,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'adds at least 15 Column blocks without limitation', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -120,7 +122,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'removes a column block when decrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -142,7 +144,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
-			const screen = await initializeEditor();
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -185,7 +187,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -210,7 +212,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes the only one left Column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -247,7 +249,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes vertical alignment on Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -270,7 +272,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes the vertical alignment on individual Column', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 
@@ -308,7 +310,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'sets current vertical alignment on new Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -337,7 +339,7 @@ describe( 'Columns block', () => {
 
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
-			const screen = await initializeEditor();
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
@@ -377,7 +379,7 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'sets custom values correctly', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText, getByTestId } = screen;
@@ -443,7 +445,7 @@ describe( 'Columns block', () => {
 		test.each( testData )(
 			'sets the predefined percentages for %s',
 			async ( layout ) => {
-				const screen = await initializeEditor();
+				await initializeEditor();
 
 				// Add block
 				await addBlock( screen, 'Columns' );
@@ -463,4 +465,32 @@ describe( 'Columns block', () => {
 			}
 		);
 	} );
+
+	it( 'transforms a nested Columns block into a Group block', async () => {
+		await initializeEditor( {
+			initialHtml: `<!-- wp:group {"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group"><!-- wp:columns -->
+			<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+			<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+			<p></p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:column --></div>
+			<!-- /wp:columns --></div>
+			<!-- /wp:group -->`,
+		} );
+
+		// Get Columns block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open block actions menu
+		await openBlockActionsMenu( screen );
+
+		// Tap on the Transform block button
+		fireEvent.press( screen.getByLabelText( /Transform block…/ ) );
+
+		// Tap on the Group transform button
+		fireEvent.press( screen.getByLabelText( 'Group' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Improve horizontal rule styles to avoid invisible lines [#53883]
 -   [*] Fix horizontal rule style extensions [#53917]
 -   [*] Add block outline to all Social Link blocks when selected [#54011]
+-   [*] Columns block - Fix transforming into a Group block crash [#54035]
 
 ## 1.102.1
 - [**] Fix Voice Over and assistive keyboards [#53895]

diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
@@ -204,4 +204,8 @@ module.exports = {
 	},
 	picker: {},
 	pickerPointer: {},
+	columnsContainer: {
+		marginLeft: 16,
+		minWidth: 32,
+	},
 };