DataForm - Add combined fields support #65399

louwie17 · 2024-09-17T11:33:20Z

What?

This PR adds support for combinedFields layout support to the DataForm panel view. This follows a similar configuration as combinedFields in DataViews.

cc: @youknowriad, @oandregal

Why?

This is needed to allow fields multiple fields to be rendered as part of a single row, similar to how currently the the post status field works within the site editor. This will be needed for the DataForms as well.

Part of #64519 and an initial step to implementing the Password field.

How?

This adds a layout option to the form config that accepts a combinedFields array. A combined field can contain children and direction, it also accepts a custom render function to display the data. This follows the same format as introduced here for DataViews.

Open questions:

In the design the field label is different from the top label within the modal, do we provide a separate config for this?
How would this look in the regular view?

An alternative to consider, is not to alter this through the layout, but provide a layout type as part of the field type definition that supports a direction and children.

{
  type: 'layout',
  children: [ 'title', 'status' ],
  direction: 'vertical'
}

Testing Instructions

Run storybook: npm run storybook:dev
Go to the DataViews > DataForm > Combined Fields story
See the combined field label Status & Visibility and the two fields underneath ( status & password )
Now change the form type to panel
Select the Status & Visibility field, it should render a status and password field.
Edits should be correctly reflected within status & password fields across the form types.

Testing Instructions for Keyboard

Screenshots or screencast

showcase-combined-fields.mp4

github-actions · 2024-09-17T11:33:34Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: louwie17 <[email protected]>
Co-authored-by: youknowriad <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

youknowriad · 2024-09-18T08:03:43Z

packages/dataviews/src/components/dataform/stories/index.story.tsx

+					label: 'Status & Visibility',
+					children: [ 'status', 'password' ],
+					direction: 'vertical',
+					render: ( { item } ) => item.status,


What is this function about?

The thing that I'm wondering personally is whether for "forms" these are combined fields or more things like "groups"...

I think having more example of how this translates in actual forms and panels would help make the right abstraction.

What is this function about?

Its suppose to be the same as the render function of the field config, but its acting more like the getValue function.

The thing that I'm wondering personally is whether for "forms" these are combined fields or more things like "groups"...
I think having more example of how this translates in actual forms and panels would help make the right abstraction.

Groups would probably fit this use case better, the main example is the status field that includes the status radio control, posts schedule, the password field and also the sticky checkbox:

gutenberg/packages/editor/src/components/post-status/index.js

Line 197 in 2943dd3

<form>

password-conditional.mp4

We could also create a single status field that includes all of this logic, we did have to remove the radio dependency here:

gutenberg/packages/edit-site/src/components/post-fields/index.js

Lines 283 to 294 in 3ec1ced

{

label: __( 'Status' ),

id: 'status',

type: 'text',

elements: STATUSES,

render: PostStatusField,

Edit: 'radio',

enableSorting: false,

filterBy: {

operators: [ OPERATOR_IS_ANY ],

},

},

This is mostly a use case for the panel view. For the regular form one could render multiple regular data forms to create the grouping. Although there would be some additional use cases like the column use case for displaying two fields beside each other ( we have a similar use case in the product form for regular and sale price ):

The thing that I'm wondering personally is whether for "forms" these are combined fields or more things like "groups"...

Would you envision "groups" to be like field types that accept children, or act in a similar manner as the combinedField API?

Its suppose to be the same as the render function of the field config, but its acting more like the getValue function.

Do you think we can guess this from the "fields" or is the "render" function mandatory here? I'm also curious how the "combined fields" or "groups" feature translate in regular forms. What's the output there?

Do you think we can guess this from the "fields" or is the "render" function mandatory here?

In this specific example it only shows the status value in the panel view so the render or a getValue would be mandatory.
If we wanted, we could guess it from the fields and show a comma delimited list of the nested field values.
The panel view is an exception here as it separates the edit view from the visual.

I'm also curious how the "combined fields" or "groups" feature translate in regular forms. What's the output there?

In regular forms the main difference would be a title for the grouped fields and the option to display them in a column layout. Similar to the JSON Forms layout examples: https://jsonforms.io/examples/layouts/#group

In regular forms the main difference would be a title for the grouped fields and the option to display them in a column layout. Similar to the JSON Forms layout examples: https://jsonforms.io/examples/layouts/#group

I think that makes sense. Is it already working in this PR? I think my main concern here is to avoid special cases for layouts (panel or default)

I didn't update the default data form yet, let me update it to support that.

I updated it to support the regular data form type as well as part of this commit: 42131f3

github-actions · 2024-09-18T15:00:18Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

gigitux

Thanks for working on this! Overall, it looks good. I left a few minor comments!

gigitux · 2024-09-19T14:38:39Z

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

+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 );
+}


I suggest maintaining consistency with the current typing by using Item instead of any.

Suggested change

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 function getVisibleFields<Item>(

fields: Field< Item >[],

formFields: string[] = [],

combinedFields?: CombinedFormField< Item >[]

): Field< Item >[] {

const visibleFields: Array<

Field< Item > | NormalizedCombinedFormField< Item >

> = [ ...fields ];

if ( combinedFields ) {

visibleFields.push(

...normalizeCombinedFields( combinedFields, fields )

);

}

return formFields

.map( ( fieldId ) =>

visibleFields.find( ( { id } ) => id === fieldId )

)

.filter( ( field ): field is Field< Item > => !! field );

}

gigitux · 2024-09-19T15:06:02Z

packages/dataviews/src/components/dataform/stories/index.story.tsx

It is a minor, but I noticed that the panel to customize props doesn't appear on the new story:

gigitux · 2024-09-19T15:13:12Z

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

+	const children = visibleChildren.map( ( child, index ) => {
+		return (
+			<div className="dataforms-combined-edit__field" key={ child.id }>
+				{ index !== 0 && hideLabelFromVision && (


Is this check necessary?

gigitux · 2024-09-19T15:14:31Z

packages/dataviews/src/normalize-fields.ts

+					.map( ( fieldId ) =>
+						fields.find( ( { id } ) => id === fieldId )
+					)
+					.filter( ( field ): field is Field< any > => !! field )


Suggested change

.filter( ( field ): field is Field< any > => !! field )

.filter( ( field ): field is Field< Item > => !! field )

youknowriad reviewed Sep 18, 2024

View reviewed changes

youknowriad requested a review from oandregal September 18, 2024 15:00

youknowriad requested a review from ntsekouras September 18, 2024 15:00

louwie17 added 3 commits September 18, 2024 17:30

Add combined fields option to DataForms

84f9180

Add storybook example

8d46dbd

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

42131f3

louwie17 force-pushed the add/dataforms_combined_fields branch from ecba739 to 42131f3 Compare September 18, 2024 15:31

gigitux reviewed Sep 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DataForm - Add combined fields support #65399

DataForm - Add combined fields support #65399

louwie17 commented Sep 17, 2024 •

edited

Loading

github-actions bot commented Sep 17, 2024 •

edited

Loading

youknowriad Sep 18, 2024

youknowriad Sep 18, 2024

louwie17 Sep 18, 2024

louwie17 Sep 18, 2024

youknowriad Sep 18, 2024

louwie17 Sep 18, 2024

youknowriad Sep 18, 2024

louwie17 Sep 18, 2024

louwie17 Sep 18, 2024

github-actions bot commented Sep 18, 2024

gigitux left a comment

gigitux Sep 19, 2024

gigitux Sep 19, 2024

gigitux Sep 19, 2024

gigitux Sep 19, 2024

	{
	label: __( 'Status' ),
	id: 'status',
	type: 'text',
	elements: STATUSES,
	render: PostStatusField,
	Edit: 'radio',
	enableSorting: false,
	filterBy: {
	operators: [ OPERATOR_IS_ANY ],
	},
	},

	.filter( ( field ): field is Field< any > => !! field )
	.filter( ( field ): field is Field< Item > => !! field )

DataForm - Add combined fields support #65399

Are you sure you want to change the base?

DataForm - Add combined fields support #65399

Conversation

louwie17 commented Sep 17, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Sep 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 18, 2024

gigitux left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louwie17 commented Sep 17, 2024 •

edited

Loading

github-actions bot commented Sep 17, 2024 •

edited

Loading