fix(ui): add Below action respects filterOptions in blocks field

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -46,6 +46,7 @@ type BlocksFieldProps = {
   rowIndex: number
   schemaPath: string
   setCollapse: (id: string, collapsed: boolean) => void
+  filteredBlocks?: (ClientBlock | string)[]
 } & UseDraggableSortableReturn
 
 export const BlockRow: React.FC<BlocksFieldProps> = ({
@@ -57,6 +58,7 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
   duplicateRow,
   errorCount,
   fields,
+  filteredBlocks,
   hasMaxRows,
   isLoading: isLoadingFromProps,
   isSortable,
@@ -149,6 +151,7 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
               copyRow={copyRow}
               duplicateRow={duplicateRow}
               fields={block.fields}
+              filteredBlocks={filteredBlocks}
               hasMaxRows={hasMaxRows}
               isSortable={isSortable}
               labels={labels}

packages/ui/src/fields/Blocks/RowActions.tsx

@@ -15,6 +15,7 @@ export const RowActions: React.FC<{
   readonly copyRow: (rowIndex: number) => void
   readonly duplicateRow: (rowIndex: number, blockType: string) => void
   readonly fields: ClientField[]
+  readonly filteredBlocks?: (ClientBlock | string)[]
   readonly hasMaxRows?: boolean
   readonly isSortable?: boolean
   readonly labels: Labels
@@ -30,6 +31,7 @@ export const RowActions: React.FC<{
     blockType,
     copyRow,
     duplicateRow,
+    filteredBlocks,
     hasMaxRows,
     isSortable,
     labels,
@@ -55,7 +57,7 @@ export const RowActions: React.FC<{
           closeModal(drawerSlug)
         }}
         addRowIndex={rowIndex}
-        blocks={blocks}
+        blocks={filteredBlocks ?? blocks}
         drawerSlug={drawerSlug}
         labels={labels}
       />

packages/ui/src/fields/Blocks/index.tsx

@@ -441,6 +441,8 @@ const BlocksFieldComponent: BlocksFieldClientComponent = (props) => {
                       block={blockConfig}
                       // Pass all blocks, not just clientBlocksAfterFilter, as existing blocks should still be displayed even if they don't match the new filter
                       blocks={clientBlocks}
+                      // Pass filtered blocks for the "Add Below" action to respect filterOptions
+                      filteredBlocks={clientBlocksAfterFilter}
                       copyRow={copyRow}
                       duplicateRow={duplicateRow}
                       errorCount={rowErrorCount}

test/fields/collections/Blocks/e2e.spec.ts

@@ -934,5 +934,52 @@ describe('Block fields', () => {
       // Ensure no validation error is thrown when saving page
       await saveDocAndAssert(page)
     })
+
+    test('ensure Add Below action respects static filterOptions', async () => {
+      await page.goto(url.create)
+
+      // First, add a block using the main "Add" button to have an existing row
+      const addButton = page.locator(
+        '#field-blocksWithFilterOptions > .blocks-field__drawer-toggler',
+      )
+      await addButton.click()
+
+      const blocksDrawer = page.locator('[id^=drawer_1_blocks-drawer-]')
+      await expect(blocksDrawer).toBeVisible()
+
+      // Select blockFour
+      const blockFourCard = blocksDrawer
+        .locator('.blocks-drawer__block')
+        .filter({ hasText: 'Block Four' })
+        .first()
+      await blockFourCard.click()
+      await expect(blocksDrawer).toBeHidden()
+
+      // Now use "Add Below" on the first row
+      const firstRow = page.locator('#blocksWithFilterOptions-row-0')
+      const addBelowButton = firstRow.locator('.array-actions__button[aria-label="Add Below"]')
+      await addBelowButton.click()
+
+      // The drawer should open with only blockFour and blockFive (respecting filterOptions)
+      await expect(blocksDrawer).toBeVisible()
+
+      const labels = blocksDrawer.locator('.thumbnail-card__label')
+
+      // There should ONLY be blockFour and blockFive available (not blockSix)
+      await expect(labels).toHaveCount(2)
+      await expect(labels.nth(0)).toHaveText('Block Four')
+      await expect(labels.nth(1)).toHaveText('Block Five')
+
+      // Select blockFive to add below
+      const blockFiveCard = blocksDrawer
+        .locator('.blocks-drawer__block')
+        .filter({ hasText: 'Block Five' })
+        .first()
+      await blockFiveCard.click()
+
+      // Ensure the new block was inserted as row 1
+      await expect(page.locator('#blocksWithFilterOptions-row-1')).toBeVisible()
+      await expect(page.locator('#blocksWithFilterOptions-row-1 .blocks-field__block-pill')).toContainText('Block Five')
+    })
   })
 })