DataViews: Allow column re-ordering.

[youknowriad]

Closes #63414

What?

This PR implements column reordering in table dataviews.

Notes:

• This skips combined fields for now but I can implement them if needed, it's weird that we'll only have "move left" and "move right" in the dropdown of these fields though. That's why I chose to not show them there for now.
• This highlights an actual bug elsewhere in the block editor iframe. If you move the "Preview" field to the right (you can do so by enabling it in the templates dataviews and moving it left and then right), you'll see a JS error in the console for the previews. Maybe @ellatrix could help here. It's a separate issue though and kind of unrelated with re-ordering.

Testing Instructions

• Open any table dataviews (templates, patterns or pages)
• Click the headers of the columns
• Try "move left" and "move right".

[github-actions]

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: youknowriad <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: jasmussen <[email protected]>

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

[youknowriad]

The two additional menu items here are the main changes here, this component was just extracted from the "index.tsx" file otherwise.

[jameskoster]

It's working for me:

[ellatrix]

This highlights an actual bug elsewhere in the block editor iframe. If you move the "Preview" field to the right (you can do so by enabling it in the templates dataviews and moving it left and then right), you'll see a JS error in the console for the previews. Maybe @ellatrix could help here. It's a separate issue though and kind of unrelated with re-ordering.

I'm not sure what steps I need to take to reproduce, could you file a separate issue if it's unrelated? I'm also not sure how to test this PR tbh, I don't see the move left/right buttons anywhere when I click the header of a column.

[youknowriad]

@ellatrix yeah, sorry that was unclear. Here's a video that shows the bug.

Screen.Recording.2024-07-11.at.2.14.02.PM.mov

[jameskoster]

A question for @WordPress/gutenberg-design (not necessary to address in this PR): should the menu remain open after moving rather than auto-closing?

[jasmussen]

should the menu remain open after moving rather than auto-closing?

There are some separate discussion on that, e.g. this menu doesn't auto-close:

I personally find that disruptive and confusing, and I think I'd find it confusing here too. But those are not strong opinions, rather to say: it may be a broader than just-design question.

[jameskoster]

Probably something we should define at the system level 👍

[ntsekouras]

Code wise this looks good, thanks!