chore: block array fixes

src/admin/components/forms/Form/fieldReducer.ts

@@ -112,11 +112,9 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields {
     }
 
     case 'ADD_ROW': {
-      const {
-        rowIndex, path, subFieldState, blockType,
-      } = action;
+      const { rowIndex, path, subFieldState, blockType } = action;
 
-      const rowsMetadata = state[path]?.rows || [];
+      const rowsMetadata = [...state[path]?.rows || []];
       rowsMetadata.splice(
         rowIndex + 1,
         0,
@@ -143,13 +141,13 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields {
 
       const newState: Fields = {
         ...remainingFields,
+        ...flattenRows(path, rows),
         [path]: {
           ...state[path],
           value: rows.length,
           disableFormData: true,
           rows: rowsMetadata,
         },
-        ...flattenRows(path, rows),
       };
 
       return newState;
@@ -198,9 +196,19 @@ export function fieldReducer(state: Fields, action: FieldAction): Fields {
       // insert row copyOfMovingRow back in
       rows.splice(moveToIndex, 0, copyOfMovingRow);
 
+      // modify array/block internal row state (i.e. collapsed, blockType)
+      const rowStateCopy = [...state[path]?.rows || []];
+      const movingRowState = { ...rowStateCopy[moveFromIndex] };
+      rowStateCopy.splice(moveFromIndex, 1);
+      rowStateCopy.splice(moveToIndex, 0, movingRowState);
+
       const newState = {
         ...remainingFields,
         ...flattenRows(path, rows),
+        [path]: {
+          ...state[path],
+          rows: rowStateCopy,
+        },
       };
 
       return newState;

src/admin/components/forms/field-types/Blocks/RowActions.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Block, Labels } from '../../../../../fields/config/types';
 import { ArrayAction } from '../../../elements/ArrayAction';
 import { useDrawerSlug } from '../../../elements/Drawer/useDrawerSlug';
-import { Row } from '../rowReducer';
 import { BlocksDrawer } from './BlocksDrawer';
+import { Row } from '../../Form/types';
 
 export const RowActions: React.FC<{
   addRow: (rowIndex: number, blockType: string) => void

src/admin/components/forms/field-types/Blocks/index.tsx

@@ -100,13 +100,14 @@ const BlocksField: React.FC<Props> = (props) => {
     path,
     validate: memoizedValidate,
     condition,
+    hasRows: true,
   });
 
   const addRow = useCallback(async (rowIndex: number, blockType: string) => {
     const block = blocks.find((potentialBlock) => potentialBlock.slug === blockType);
     const preferences = await getDocPreferences();
     const subFieldState = await buildStateFromSchema({ fieldSchema: block.fields, preferences, operation, id, user, locale, t });
-    dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path });
+    dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path, blockType });
     setModified(true);
 
     setTimeout(() => {

src/admin/components/forms/useField/index.tsx

@@ -29,6 +29,7 @@ const useField = <T, >(options: Options): FieldType<T> => {
   const { id } = useDocumentInfo();
   const operation = useOperation();
   const field = useFormFields(([fields]) => fields[path]);
+
   const dispatchField = useFormFields(([_, dispatch]) => dispatch);
   const { t } = useTranslation();
 
@@ -94,6 +95,7 @@ const useField = <T, >(options: Options): FieldType<T> => {
         value,
         valid: false,
         errorMessage: undefined,
+        rows: field?.rows,
       };
 
       const validateOptions = {
@@ -133,6 +135,7 @@ const useField = <T, >(options: Options): FieldType<T> => {
     path,
     user,
     validate,
+    field?.rows,
   ]);
 
   return result;