[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]