Add children support to regular layout

WordPress · Nov 5, 2024 · 0c67f64 · 0c67f64
1 parent 8ea852c
commit 0c67f64
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 5 deletions.
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -186,12 +186,11 @@ const CombinedFieldsComponent = ( {
 	const form = {
 		fields: [
 			'title',
-			...( type === 'regular'
+			...( type === 'inline'
 				? [ 'status', 'password' ]
 				: [
 						{
 							id: 'status',
-							layout: 'panel',
 							children: [ 'status', 'password' ],
 						},
 				  ] ),

diff --git a/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
@@ -38,7 +38,9 @@ export function DataFormLayout< Item >( {
 		<VStack spacing={ 2 }>
 			{ fields.map( ( field ) => {
 				const fieldLayoutId =
-					typeof field === 'string' ? defaultLayout : field.layout;
+					typeof field !== 'string' && field.layout
+						? field.layout
+						: defaultLayout;
 				const FieldLayout = getFormFieldLayout(
 					fieldLayoutId ?? 'regular'
 				)?.component;

diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -24,6 +24,7 @@ interface FormFieldProps< Item > {
 	data: Item;
 	field: FormField;
 	onChange: ( value: any ) => void;
+	defaultLayout?: string;
 }
 
 function DropdownHeader( {
@@ -60,13 +61,14 @@ export default function FormPanelField< Item >( {
 	data,
 	field,
 	onChange,
+	defaultLayout,
 }: FormFieldProps< Item > ) {
 	const { getFieldDefinition } = useContext( DataFormContext );
 	const fieldDefinition = getFieldDefinition( field );
 	const childrenFields = useMemo( () => {
 		if (
 			typeof field !== 'string' &&
-			field.layout === 'panel' &&
+			// field.layout === 'panel' &&
 			field.children
 		) {
 			return field.children;
@@ -139,6 +141,7 @@ export default function FormPanelField< Item >( {
 								data={ data }
 								fields={ childrenFields }
 								onChange={ onChange }
+								defaultLayout={ defaultLayout }
 							>
 								{ ( FieldLayout, nestedField ) => (
 									<FieldLayout

diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -1,33 +1,78 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { FormField } from '../../types';
 import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
 
 interface FormFieldProps< Item > {
 	data: Item;
 	field: FormField;
 	onChange: ( value: any ) => void;
 	hideLabelFromVision?: boolean;
+	defaultLayout?: string;
+}
+
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts-regular__header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
 }
 
 export default function FormRegularField< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	defaultLayout,
 }: FormFieldProps< Item > ) {
 	const { getFieldDefinition } = useContext( DataFormContext );
 	const fieldDefinition = getFieldDefinition( field );
+	const childrenFields = useMemo( () => {
+		if ( typeof field !== 'string' && field.children ) {
+			return field.children;
+		}
+		return [];
+	}, [ field ] );
+
 	if ( ! fieldDefinition ) {
 		return null;
 	}
 
+	if ( childrenFields.length > 0 ) {
+		return (
+			<>
+				{ ! hideLabelFromVision && (
+					<Header title={ fieldDefinition.label } />
+				) }
+				<DataFormLayout
+					data={ data }
+					fields={ childrenFields }
+					onChange={ onChange }
+					defaultLayout={ defaultLayout }
+				/>
+			</>
+		);
+	}
+
 	return (
 		<fieldDefinition.Edit
 			data={ data }

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -532,6 +532,7 @@ interface BaseFieldLayout {
 
 export interface RegularFieldLayout extends BaseFieldLayout {
 	layout: 'regular';
+	children?: FormField[];
 }
 
 export interface PanelFieldLayout extends BaseFieldLayout {
@@ -541,6 +542,7 @@ export interface PanelFieldLayout extends BaseFieldLayout {
 
 export interface InlineFieldLayout extends BaseFieldLayout {
 	layout: 'inline';
+	children?: FormField[];
 }
 
 export type FormField =