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 e6108b95d60c37..e92efde21b1388 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 ); diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index be1762d520e818..fabee59bc5bc6b 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'; @@ -92,7 +93,7 @@ describe( 'Buttons block', () => { } ); it( 'adds another button using the inline appender', async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -143,7 +144,7 @@ describe( 'Buttons block', () => { } ); it( 'adds another button using the inserter', async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -202,9 +203,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, } ); @@ -250,7 +290,7 @@ describe( 'Buttons block', () => { 'Justify items right', ].forEach( ( justificationOption ) => it( `sets ${ justificationOption } option`, async () => { - const screen = await initializeEditor( { + await initializeEditor( { initialHtml: BUTTONS_HTML, } ); @@ -276,7 +316,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 @@ -317,7 +357,7 @@ describe( 'Buttons block', () => { it( 'sets a background color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act @@ -354,7 +394,7 @@ describe( 'Buttons block', () => { it( 'sets a gradient background color', async () => { // Arrange - const screen = await initializeEditor(); + await initializeEditor(); await addBlock( screen, 'Buttons' ); // Act @@ -396,7 +436,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 a4ac5246979aa3..1ff2c89768b03a 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' ) ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 44f5b63bd1f4d0..d0f9d10f2fe681 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]