diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 46e5012f68a345..7e18e73a9b14ae 100644 --- 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 ( " `; +exports[`Columns block transforms a nested Columns block into a Group block 1`] = ` +" +
+
+
+
+

+
+
+
+
+" +`; + exports[`Columns block when using columns percentage mechanism sets custom values correctly 1`] = ` "
diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js index bb7bfbdafea4b0..20430704c8e1e2 100644 --- 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: ` +
+
+
+

+
+
+
+ `, + } ); + + // 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 index 7cb02a4848dd64..a9fa07190f2fcd 100644 --- 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 index e0c690b6282349..8b682ef005e496 100644 --- 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, + }, };