search

WordPress / gutenberg

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

[Data Views] drag and drop ordering for Filter properties and table column #66611

Open jayclydeTags opened 1 month ago

jayclydeTags commented 1 month ago

What problem does this address?

Reordering table columns is cumbersome, especially when desired columns are located at the end.

Current: Image Image

What is your proposed solution?

Refer to Notion table. Notion's drag-and-drop feature for reordering table columns and properties offers a seamless and intuitive user experience.

Notion properties: Image

Table columns corresponding to properties order Image

jayclydeTags commented 2 weeks ago

Draggable appearance properties mockup.

credits to WordPress Design System.

Image

Mayank-Tripathi32 commented 2 weeks ago

I am working on implementing the draggable functionality using the above design mock up.

Mayank-Tripathi32 commented 2 weeks ago

@jayclydeTags

I have few doubts regarding the mock-up, could you share link for it? Also, I have basic solution implemented but shouldn't it also persist through refreshes as well?

Also, Any reason to have draggability in hidden list?

jayclydeTags commented 2 weeks ago

@Mayank-Tripathi32 here's the mock-up https://www.figma.com/design/QLc1Di5xCp063RkXgS6FRZ/WordPress-Design-System---Explorations?node-id=18312-17629&t=wIBTOCVnPUoNn5V7-1

I have basic solution implemented but shouldn't it also persist through refreshes as well?

It would be great if it were possible to make it persistent to save user preferences.

Any reason to have draggability in hidden list?

Draggability in a hidden list can provide a more intuitive user experience. This allows users to drag items directly from the hidden list to visible groups.

Mayank-Tripathi32 commented 2 weeks ago

@jayclydeTags

It would be great if it were possible to make it persistent to save user preferences.

I think we can probably come up with a local storage solution or indexDb to store them, probably need to open separate PR on this.

Draggability in a hidden list can provide a more intuitive user experience. This allows users to drag items directly from the hidden list to visible groups.

Got it. Will make it possible to do that as well.

Also, I don't see any use case of Preview Size, So we can skip that I guess?

jayclydeTags commented 2 weeks ago

@Mayank-Tripathi32 Great!

Disregard the preview size for now.

jasmussen commented 2 weeks ago

Tentatively, the ItemGroup pattern suggested here, seems like a valid path forward.

It seems important the draggable functionality gets implemented well into the ItemGroup itself, so that other consumers of this component can opt-in to the handles contextually. A quick CC to @WordPress/gutenberg-design and @WordPress/gutenberg-components as well, for any input.

Mayank-Tripathi32 commented 2 weeks ago

I’ll work on itemGroup and implement the required drag-and-drop functionality there. Since it’s used in multiple places, I’ll make sure to update all relevant instances afterwards.

mirka commented 2 weeks ago

A quick CC to @WordPress/gutenberg-design and @WordPress/gutenberg-components as well, for any input.

Adding drag & drop features to ItemGroup is probably done best as part of the overhaul in #64445, as there will presumably be a lot of API changes and considerations there.

I'm also thinking it may be better to have a more generic utility component for drag & drop, rather than baking it into ItemGroup. Maybe a simplified version of something like dnd-kit.

@Mayank-Tripathi32 If you're going to work on implementing an ad hoc drag & drop feature to Data Views, we need to make sure that it is well-isolated from the existing component logic. Currently, the drag & drop code in #66981 will be hard to refactor away from, because it is interwoven with the component code and the responsibilities are muddled. Also note that any persistence concerns should be the responsibility of each consumer, not the drag & drop logic. It may help to see how some drag & drop libraries design their APIs, to get an idea of how the logic should be contained and interfaced with.

Mayank-Tripathi32 commented 2 weeks ago

I think this can be tracked under GitHub Issue #63128.

I'm also thinking it may be better to have a more generic utility component for drag & drop, rather than baking it into ItemGroup. Maybe a simplified version of something like dnd-kit.

I’ll research dnd-kit and explore creating a utility component for this. We’ll likely need a Higher-Order Component (HOC) that can be easily reused.

Additionally, I’m looking into GitHub Issue #57669 to address making properties persistent.