From f86c3fccfd8ed3d8b47af5eb2e9cb2a899900bee Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 5 Jun 2024 15:01:48 +0200 Subject: [PATCH 1/3] Mobile - Pass isQuick option to useBlockTypesState for the native inserter --- .../src/components/inserter/block-types-tab.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/block-types-tab.native.js b/packages/block-editor/src/components/inserter/block-types-tab.native.js index e6108b95d60c3..e92efde21b138 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.native.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.native.js @@ -18,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ]; function BlockTypesTab( { onSelect, rootClientId, listProps } ) { const [ rawBlockTypes, , collections ] = useBlockTypesState( rootClientId, - onSelect + onSelect, + true ); const clipboardBlock = useClipboardBlock( rootClientId ); const filteredBlockTypes = filterInserterItems( rawBlockTypes ); From be977e3b03a7c4b0560d01634034ca0892bb1e45 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jun 2024 12:29:41 +0200 Subject: [PATCH 2/3] Mobile - Update tests for Buttons and Social Icons to check the correct blocks are shown in the inserter --- .../src/buttons/test/edit.native.js | 56 ++++++++++++++++--- .../src/social-links/test/edit.native.js | 46 +++++++++++++-- 2 files changed, 89 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index af2ffe762e6a3..c9d096a1ae87b 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -10,6 +10,7 @@ import { initializeEditor, triggerBlockListLayout, typeInRichText, + screen, openBlockSettings, waitFor, } from 'test/helpers'; @@ -90,7 +91,7 @@ describe( 'Buttons block', () => { } ); it( 'adds another button using the inline appender', async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -141,7 +142,7 @@ describe( 'Buttons block', () => { } ); it( 'adds another button using the inserter', async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -200,9 +201,48 @@ describe( 'Buttons block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + it( 'shows only the button block when using the inserter', async () => { + await initializeEditor(); + + // Add block + await addBlock( screen, 'Buttons' ); + + // Get block + const buttonsBlock = await getBlock( screen, 'Buttons' ); + fireEvent.press( buttonsBlock ); + await triggerBlockListLayout( buttonsBlock ); + + // Get inner button block + const buttonBlock = await getBlock( screen, 'Button' ); + fireEvent.press( buttonBlock ); + + // Open the block inserter + fireEvent.press( screen.getByLabelText( 'Add block' ) ); + + const inserterList = screen.getByTestId( 'InserterUI-Blocks' ); + // onScroll event used to force the FlatList to render all items + fireEvent.scroll( inserterList, { + nativeEvent: { + contentOffset: { y: 0, x: 0 }, + contentSize: { width: 100, height: 100 }, + layoutMeasurement: { width: 100, height: 100 }, + }, + } ); + + // Check the Button block is in the list + const buttonInserterBlock = + await within( inserterList ).findByText( 'Button' ); + expect( buttonInserterBlock ).toBeVisible(); + + // Check the Paragraph core block is not in the list + expect( + within( inserterList ).queryByLabelText( 'Paragraph block' ) + ).toBeNull(); + } ); + describe( 'removing button along with buttons block', () => { it( 'removes the button and buttons block when deleting the block using the block delete action', async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -251,7 +291,7 @@ describe( 'Buttons block', () => { const initialHtml = `
`; - const screen = await initializeEditor( { initialHtml } ); + await initializeEditor( { initialHtml } ); const [ block ] = await screen.findAllByLabelText( /Buttons Block\. Row 1/ @@ -275,7 +315,7 @@ describe( 'Buttons block', () => { describe( 'color customization', () => { it( 'sets a text color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act @@ -316,7 +356,7 @@ describe( 'Buttons block', () => { it( 'sets a background color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act @@ -353,7 +393,7 @@ describe( 'Buttons block', () => { it( 'sets a gradient background color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act @@ -395,7 +435,7 @@ describe( 'Buttons block', () => { it( 'sets a custom gradient background color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act diff --git a/packages/block-library/src/social-links/test/edit.native.js b/packages/block-library/src/social-links/test/edit.native.js index a4ac5246979aa..1ff2c89768b03 100644 --- a/packages/block-library/src/social-links/test/edit.native.js +++ b/packages/block-library/src/social-links/test/edit.native.js @@ -9,6 +9,8 @@ import { initializeEditor, within, getBlock, + screen, + triggerBlockListLayout, waitFor, waitForModalVisible, } from 'test/helpers'; @@ -33,7 +35,7 @@ afterAll( () => { describe( 'Social links block', () => { it( 'inserts block with the default icons and the WordPress link set as active', async () => { - const screen = await initializeEditor(); + await initializeEditor(); // Add block await addBlock( screen, 'Social Icons' ); @@ -65,7 +67,7 @@ describe( 'Social links block', () => { } ); it( 'shows active links correctly when not selected', async () => { - const screen = await initializeEditor(); + await initializeEditor(); // Add Social Icons block await addBlock( screen, 'Social Icons' ); @@ -105,7 +107,7 @@ describe( 'Social links block', () => { } ); it( 'shows the social links bottom sheet when tapping on the inline appender', async () => { - const screen = await initializeEditor(); + await initializeEditor(); // Add block await addBlock( screen, 'Social Icons' ); @@ -154,8 +156,42 @@ describe( 'Social links block', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + it( 'shows only the social link blocks when tapping on the inline appender', async () => { + await initializeEditor(); + + // Add block + await addBlock( screen, 'Social Icons' ); + + // Get block + const socialLinksBlock = await getBlock( screen, 'Social Icons' ); + fireEvent.press( socialLinksBlock ); + await triggerBlockListLayout( socialLinksBlock ); + + // Open the links bottom sheet + const appenderButton = + within( socialLinksBlock ).getByTestId( 'appender-button' ); + fireEvent.press( appenderButton ); + + // Find a social link in the inserter + const inserterList = screen.getByTestId( 'InserterUI-Blocks' ); + + // onScroll event used to force the FlatList to render all items + fireEvent.scroll( inserterList, { + nativeEvent: { + contentOffset: { y: 0, x: 0 }, + contentSize: { width: 100, height: 100 }, + layoutMeasurement: { width: 100, height: 100 }, + }, + } ); + + // Check the Paragraph core block is not in the list + expect( + within( inserterList ).queryByLabelText( 'Paragraph block' ) + ).toBeNull(); + } ); + it( 'shows the ghost placeholder when no icon is active', async () => { - const screen = await initializeEditor(); + await initializeEditor(); const { getByLabelText } = screen; // Add block @@ -201,7 +237,7 @@ describe( 'Social links block', () => { } ); it( "should set a icon's URL", async () => { - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Social Icons' ); fireEvent.press( screen.getByLabelText( 'Facebook social icon' ) ); fireEvent.press( screen.getByLabelText( 'Add link to Facebook' ) ); From a218d83e18ef49e0d73f89a377624bfd93d837db Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jun 2024 12:46:13 +0200 Subject: [PATCH 3/3] Update changelog --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 44f5b63bd1f4d..d0f9d10f2fe68 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +- [internal] Fix Inserter items list filtering [#62334] ## 1.120.0 - [*] Prevent deleting content when backspacing in the first Paragraph block [#62069]