Add support for combined fields in the regular dataform view as well

packages/dataviews/src/components/dataform-combined-edit/index.tsx

@@ -13,12 +13,9 @@ import {
  */
 import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
 
-function FieldHeader( { title }: { title: string } ) {
+function Header( { title }: { title: string } ) {
 	return (
-		<VStack
-			className="dataforms-layouts-panel__dropdown-header"
-			spacing={ 4 }
-		>
+		<VStack className="dataforms-layouts__dropdown-header" spacing={ 4 }>
 			<HStack alignment="center">
 				<Heading level={ 2 } size={ 13 }>
 					{ title }
@@ -33,6 +30,7 @@ function DataFormCombinedEdit< Item >( {
 	field,
 	data,
 	onChange,
+	hideLabelFromVision,
 }: DataFormCombinedEditProps< Item > ) {
 	const className = 'dataforms-combined-edit';
 	const visibleChildren = ( field.children ?? [] )
@@ -44,28 +42,28 @@ function DataFormCombinedEdit< Item >( {
 	const children = visibleChildren.map( ( child, index ) => {
 		return (
 			<div className="dataforms-combined-edit__field" key={ child.id }>
-				{ index !== 0 && <FieldHeader title={ child.label } /> }
+				{ index !== 0 && hideLabelFromVision && (
+					<Header title={ child.label } />
+				) }
 				<child.Edit
 					data={ data }
 					field={ child }
 					onChange={ onChange }
-					hideLabelFromVision
+					hideLabelFromVision={ hideLabelFromVision }
 				/>
 			</div>
 		);
 	} );
 
-	if ( field.direction === 'horizontal' ) {
-		return (
-			<HStack spacing={ 4 } className={ className }>
-				{ children }
-			</HStack>
-		);
-	}
+	const Stack = field.direction === 'horizontal' ? HStack : VStack;
+
 	return (
-		<VStack spacing={ 4 } className={ className }>
-			{ children }
-		</VStack>
+		<>
+			{ ! hideLabelFromVision && <Header title={ field.label } /> }
+			<Stack spacing={ 4 } className={ className }>
+				{ children }
+			</Stack>
+		</>
 	);
 }
 

packages/dataviews/src/components/dataform-combined-edit/style.scss

@@ -1,6 +1,8 @@
-.dataforms-combined-edit {
-	&__field:not(:first-child) {
-		border-top: $border-width solid $gray-200;
-		padding-top: $grid-unit-20;
+.dataforms-layouts-panel__field-dropdown {
+	.dataforms-combined-edit {
+		&__field:not(:first-child) {
+			border-top: $border-width solid $gray-200;
+			padding-top: $grid-unit-20;
+		}
 	}
 }

packages/dataviews/src/dataforms-layouts/get-visible-fields.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeCombinedFields } from '../normalize-fields';
+import type {
+	Field,
+	CombinedFormField,
+	NormalizedCombinedFormField,
+} from '../types';
+
+export function getVisibleFields(
+	fields: Field< any >[],
+	formFields: string[] = [],
+	combinedFields?: CombinedFormField< any >[]
+): Field< any >[] {
+	const visibleFields: Array<
+		Field< any > | NormalizedCombinedFormField< any >
+	> = [ ...fields ];
+	if ( combinedFields ) {
+		visibleFields.push(
+			...normalizeCombinedFields( combinedFields, fields )
+		);
+	}
+	return formFields
+		.map( ( fieldId ) =>
+			visibleFields.find( ( { id } ) => id === fieldId )
+		)
+		.filter( ( field ): field is Field< any > => !! field );
+}

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -16,17 +16,9 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import {
-	normalizeFields,
-	normalizeCombinedFields,
-} from '../../normalize-fields';
-import type {
-	DataFormProps,
-	NormalizedField,
-	Field,
-	CombinedFormField,
-	NormalizedCombinedFormField,
-} from '../../types';
+import { normalizeFields } from '../../normalize-fields';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps, NormalizedField } from '../../types';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -144,26 +136,6 @@ function FormField< Item >( {
 	);
 }
 
-export function getVisibleFields(
-	fields: Field< any >[],
-	formFields: string[] = [],
-	combinedFields?: CombinedFormField< any >[]
-): Field< any >[] {
-	const visibleFields: Array<
-		Field< any > | NormalizedCombinedFormField< any >
-	> = [ ...fields ];
-	if ( combinedFields ) {
-		visibleFields.push(
-			...normalizeCombinedFields( combinedFields, fields )
-		);
-	}
-	return formFields
-		.map( ( fieldId ) =>
-			visibleFields.find( ( { id } ) => id === fieldId )
-		)
-		.filter( ( field ): field is Field< any > => !! field );
-}
-
 export default function FormPanel< Item >( {
 	data,
 	fields,

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -8,7 +8,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { normalizeFields } from '../../normalize-fields';
-import type { DataFormProps, Field } from '../../types';
+import { getVisibleFields } from '../get-visible-fields';
+import type { DataFormProps } from '../../types';
 
 export default function FormRegular< Item >( {
 	data,
@@ -19,13 +20,13 @@ export default function FormRegular< Item >( {
 	const visibleFields = useMemo(
 		() =>
 			normalizeFields(
-				( form.fields ?? [] )
-					.map( ( fieldId ) =>
-						fields.find( ( { id } ) => id === fieldId )
-					)
-					.filter( ( field ): field is Field< Item > => !! field )
+				getVisibleFields(
+					fields,
+					form.fields,
+					form.layout?.combinedFields
+				)
 			),
-		[ fields, form.fields ]
+		[ fields, form.fields, form.layout?.combinedFields ]
 	);
 
 	return (

packages/dataviews/src/types.ts

@@ -524,6 +524,7 @@ export interface DataFormCombinedEditProps< Item > {
 	field: NormalizedCombinedFormField< Item >;
 	data: Item;
 	onChange: ( value: Record< string, any > ) => void;
+	hideLabelFromVision?: boolean;
 }
 
 export type NormalizedCombinedFormField< Item > = CombinedFormField< Item > & {