WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

DataForm component #59745

Open youknowriad opened 8 months ago

youknowriad commented 8 months ago

Related:

Problem scope

As we continue expanding our UIs, be it the editor UI or new pages being added to the site editor, we’re finding our selves creating a lot of forms to edit entities and for each one of these, we keep recreating adhoc designs and implement adhoc forms.

Here are some of the existing forms:

Where Screenshot
The inspector panel for post/pages/templates/patterns Screenshot 2024-03-07 at 4 14 51 PM
Forms to create new patterns/pages/templates Screenshot 2024-03-11 at 9 58 55 AM
Details panels Screenshot 2024-03-07 at 4 14 39 PM

Also, as we advance into the admin redesign work, we’ll be creating even more forms:

To avoid creating and designing UIs for these over and over again in an ad-hoc and inconsistent way, we should explore an API to generate these forms consistently.

Proposal

When implementing the DataViews in the site editor, we introduce a “fields” config for each data view component. To render a DataView, we’ve built a generic component with the following API:

<DataViews data={data} fields={ fields } view={ view } />

So this component render a list of items given a “fields” config and a some options (view).

Similarly, we should explore building a generic component that renders a form/panel

<DataForm item={item} fields={ fields } form={ form } />

Such component would render a form or panel for a given item based on a “fields” config and some options (form).

Notes

Tasks

Improvements

Fields improvements

joshuatf commented 4 months ago

@youknowriad @oandregal Out of curiosity, will the DataForm ever allow control over layout within a form (columns, tabs, sections, etc) or would those be comprised of multiple DataForms?

youknowriad commented 4 months ago

@joshuatf My current thinking is that "columns" and "tabs" are something you should be able to control on the form object. It's not clear to me at this point if a single "form type" can absorb everything or if we'd need several "form layouts" or "form types" like we have for data views, but I think we should be able do say, I want to group these fields in a tab...

jameskoster commented 3 months ago

Noting this is closely related to https://github.com/WordPress/gutenberg/issues/63624.

oandregal commented 3 months ago

Added a new section in the issue for "Task/Log".

Also: created https://github.com/WordPress/gutenberg/pull/63895 that prepares the initial structure for validation.

oandregal commented 3 months ago

https://github.com/WordPress/gutenberg/pull/63983 adds the ability to update the author in the quick edit form.

oandregal commented 3 months ago

In https://github.com/WordPress/gutenberg/pull/63983 I ran into some issues with sorting. While working on them we discussed the need to formalize a bit the existing field types. This is the ongoing work:

oandregal commented 1 month ago

Edited a bit the issue description, including updating the issue title to DataForm component, like we have the DataViews component.

Also added some new tasks:

  • [ ] https://github.com/WordPress/gutenberg/issues/65685
  • [ ] Sync edits
    • [ ] When user edit the title in the editor and then visit Pages, both the DataViews and QuickEdit should have the new title.
    • [ ] When users edit the title via QuickEdit, DataViews should reflect the new title immediately. If the users visit the Editor at that point, they should also see the new title.
gigitux commented 2 weeks ago

Edited a bit the issue description, adding some issues that we opened in the last weeks. I hope that it is fine!

cc @youknowriad @oandregal @louwie17