Skip to content

DataViews: Add insert left/right in table column header #72929

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
ntsekouras merged 7 commits into from
Nov 21, 2025
Merged

DataViews: Add insert left/right in table column header #72929

ntsekouras merged 7 commits into from
Nov 21, 2025
+115 −16

Conversation

@ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Nov 3, 2025 •
edited
Loading

What?

Resolves: #72844

This PR adds two menu items in table layout that enables users to insert left or right one of the hidden fields.

Notes

  1. I've updated the icons per the mock up here and that this PR doesn't implement any right-click implementation, as it might not be necessary.
  2. For reviews hide the whitespace.

Testing Instructions

  1. Either in site editor or storybook, in a table DataViews click the column header and play around with the new menu items (insert left / insert right)
  2. Observe that everything works as expected.

Screenshots or screencast

Screenshot 2025-11-06 at 5 52 41 PM

@ntsekouras ntsekouras self-assigned this Nov 3, 2025
@ntsekouras ntsekouras added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Nov 3, 2025
@jameskoster
Copy link
Contributor

jameskoster commented Nov 5, 2025

The multiple arrow icons look a little clunky. I wonder if we should omit the icons for the 'Insert' actions. What do you think @WordPress/gutenberg-design ?

@github-actions
Copy link

github-actions bot commented Nov 5, 2025 •
edited
Loading

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: ntsekouras <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: fcoveram <[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.

@oandregal
Copy link
Member

oandregal commented Nov 5, 2025

@ntsekouras there's a CI failure because, since a few months ago, every PR to packages/dataviews needs the corresponding entry in the CHANGELOG.

@ntsekouras
Copy link
Contributor Author

ntsekouras commented Nov 5, 2025

there's a CI failure because, since a few months ago, every PR to packages/dataviews needs the corresponding entry in the CHANGELOG.

@oandregal, yes I'm aware. I'll do it later since I'm still waiting on the design feedback.

@jameskoster
Copy link
Contributor

jameskoster commented Nov 6, 2025

If no other design feedback arrives I'd lean towards removing the icons for insert left/right.

@fcoveram
Copy link
Contributor

fcoveram commented Nov 6, 2025

+1 to removing the icons.

@ntsekouras ntsekouras force-pushed the dataviews/insert-fields-table-column-header branch from 0f39873 to 8cd70d9 Compare November 6, 2025 15:52
@github-actions
Copy link

github-actions bot commented Nov 6, 2025

Flaky tests detected in f0f7678.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19142008744
📝 Reported issues:

@ntsekouras ntsekouras mentioned this pull request Nov 10, 2025
Merged
@ntsekouras ntsekouras force-pushed the dataviews/insert-fields-table-column-header branch from f0f7678 to 8c7abda Compare November 14, 2025 15:22
@ntsekouras ntsekouras requested a review from gigitux as a code owner November 14, 2025 15:22
@ntsekouras
Copy link
Contributor Author

ntsekouras commented Nov 14, 2025

I've rebased and updated the util used. I think it's worth it to try this out even with the context menu on table headers. What do you think @jameskoster @youknowriad? In other case, I'll close the PR.

@jameskoster
Copy link
Contributor

jameskoster commented Nov 14, 2025

I still think it's a nice power-user feature, but happy to defer to other stronger opinions.

@youknowriad
Copy link
Contributor

youknowriad commented Nov 14, 2025

No strong opinions for me :)

@ntsekouras ntsekouras force-pushed the dataviews/insert-fields-table-column-header branch from 8c7abda to 4069297 Compare November 20, 2025 17:50
@oandregal
Copy link
Member

oandregal commented Nov 20, 2025

I've just noticed one thing: we need to disable insert left/right when there's no field hidden.

Screen.Recording.2025-11-20.at.19.39.08.mov

@ntsekouras ntsekouras force-pushed the dataviews/insert-fields-table-column-header branch from 4069297 to 34ab755 Compare November 21, 2025 06:49
@ntsekouras
Copy link
Contributor Author

ntsekouras commented Nov 21, 2025

I've just noticed one thing: we need to disable insert left/right when there's no field hidden.

Good catch. I fixed it.

oandregal
oandregal reviewed Nov 21, 2025
View reviewed changes
packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
</Menu.Item>
) }
{ canInsertLeft && (
{ canInsertLeft && !! hiddenFields.length && (
Copy link
Member

@oandregal oandregal Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make it disabled if there are no fields to add?

There's a difference between a menu item that we should never display (e.g., never display insert left in the primary column, or never display left/right if the consumer has disabled moving) vs. a situational context (it's possible to insert fields, but there's none at the moment).

Going to tag @jameskoster for thoughts, but I'm approving in the meantime. It can be addressed as follow-up, if we want to implement what I suggested.

Copy link
Contributor

@jameskoster jameskoster Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I don't actually have a strong feeling about this so would welcome input from others.

My instinct is that after inserting the last option it's kind of implied that there's no further action to take, and therefore reasonable to hide rather than disable. On the other side of the coin, in a DataViews instance where all fields are visible by default, would a disabled 'Insert left' action be confusing?

@ntsekouras ntsekouras force-pushed the dataviews/insert-fields-table-column-header branch from 34ab755 to cd71889 Compare November 21, 2025 12:13
@ntsekouras ntsekouras merged commit 804e44b into trunk Nov 21, 2025
34 checks passed
@ntsekouras ntsekouras deleted the dataviews/insert-fields-table-column-header branch November 21, 2025 12:53
@github-actions github-actions bot added this to the Gutenberg 22.2 milestone Nov 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oandregal oandregal oandregal approved these changes

@jameskoster jameskoster Awaiting requested review from jameskoster

@gigitux gigitux Awaiting requested review from gigitux gigitux is a code owner

Assignees

@ntsekouras ntsekouras

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 22.2

Development

Successfully merging this pull request may close these issues.

DataViews: right-click to show/hide columns

6 participants

@ntsekouras @jameskoster @oandregal @fcoveram @youknowriad