[Mobile] - Fix Inserter items list

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 );

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

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' ) );

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]