Skip to content

Dataviews: Fix dataview columns width#72969

Merged
ntsekouras merged 4 commits intoWordPress:trunkfrom
rcrdortiz:fix/dataview-column-width
Nov 7, 2025
Merged

Dataviews: Fix dataview columns width#72969
ntsekouras merged 4 commits intoWordPress:trunkfrom
rcrdortiz:fix/dataview-column-width

Conversation

@rcrdortiz
Copy link
Copy Markdown
Contributor

@rcrdortiz rcrdortiz commented Nov 4, 2025 •
edited
Loading

What?

Closes #72774

We've changed how the title column of dataview and other columns are rendered so that the title uses most of the available space. This way, pages with different title lengths will have a consistent layout.

Why?

See the linked issue (the one we're solving) for more information.

How?

Changed CSS classes to allow the title column to use as much available space as needed. The rest of the columns use the minimum space. Added a colgroup for better column intent declaration.

Testing Instructions

  1. Make sure you're on WordPress 6.9
  2. Go to http://localhost:8888/wp-admin/site-editor.php?p=%2Fpage
  3. You should see that the different columns of the dataview are arranged as in the screenshot.

Testing Instructions for Keyboard

Screenshots or screencast

Before After
Screenshot 2025-11-04 at 14 22 17 Screenshot 2025-11-06 at 17 07 51

@rcrdortiz rcrdortiz requested a review from oandregal as a code owner November 4, 2025 13:15
@github-actions
Copy link
Copy Markdown

github-actions bot commented Nov 4, 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: rcrdortiz <rcrdortiz@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>

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

@rcrdortiz rcrdortiz mentioned this pull request Nov 4, 2025
Closed
@rcrdortiz
Copy link
Copy Markdown
Contributor Author

rcrdortiz commented Nov 4, 2025 •
edited
Loading

I'm working on making the primary column have a max-width so that we don't get back to having the original issue.
See: #72774 (comment)

@github-project-automation github-project-automation bot moved this to 🔎 Needs Review in WordPress 6.9 Editor Tasks Nov 4, 2025
@t-hamano t-hamano added [Type] Regression Related to a regression in the latest release [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Nov 4, 2025
ntsekouras
ntsekouras reviewed Nov 5, 2025
View reviewed changes
packages/dataviews/src/dataviews-layouts/table/index.tsx
aria-describedby={ tableNoticeId }
role={ isInfiniteScroll ? 'feed' : undefined }
>
<colgroup>
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras Nov 5, 2025

Choose a reason for hiding this comment

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

I think this approach with colgroup is nice and we don't have to set styles for each row.

@rcrdortiz rcrdortiz force-pushed the fix/dataview-column-width branch from 2592049 to 48874ff Compare November 6, 2025 09:37
@ntsekouras
Copy link
Copy Markdown
Contributor

ntsekouras commented Nov 6, 2025 •
edited
Loading

@rcrdortiz can you add a changelog entry in dataviews package?

Also we should fix this comment from Jay (it was in my temp PR).

@rcrdortiz
Copy link
Copy Markdown
Contributor Author

rcrdortiz commented Nov 6, 2025

@rcrdortiz can you add a changelog entry in dataviews package?

Also we should fix this comment from Jay (it was in my temp PR).

Addressed in the latest commit.

ntsekouras
ntsekouras approved these changes Nov 6, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Looks good, thanks!

Let's wait just a tiny bit for @jameskoster to verify the wrapping white-space change and let's land this.

@jameskoster
Copy link
Copy Markdown
Contributor

jameskoster commented Nov 7, 2025

Seems good now! :)

@ntsekouras
Copy link
Copy Markdown
Contributor

ntsekouras commented Nov 7, 2025

@rcrdortiz please rebase for the changelog conflicts and let's land

@rcrdortiz
Copy link
Copy Markdown
Contributor Author

rcrdortiz commented Nov 7, 2025

@rcrdortiz please rebase for the changelog conflicts and let's land

There ya go.

@ntsekouras ntsekouras enabled auto-merge (squash) November 7, 2025 10:29
@ntsekouras ntsekouras merged commit 5db7f24 into WordPress:trunk Nov 7, 2025
34 checks passed
@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.9 Editor Tasks Nov 7, 2025
@github-actions github-actions bot added this to the Gutenberg 22.1 milestone Nov 7, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Nov 7, 2025

There was a conflict while trying to cherry-pick the commit to the wp/6.9 branch. Please resolve the conflict manually and create a PR to the wp/6.9 branch.

PRs to wp/6.9 are similar to PRs to trunk, but you should base your PR on the wp/6.9 branch instead of trunk.

# Checkout the wp/6.9 branch instead of trunk.
git checkout wp/6.9

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 5db7f248cf331fec09572b05ab03cce47a09cb89

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/6.9 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

ntsekouras added a commit that referenced this pull request Nov 7, 2025
@ntsekouras @jameskoster @oandregal
Dataviews: Fix dataview columns width (#72969)
b7d3e9c 
Co-authored-by: rcrdortiz <rcrdortiz@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
@ntsekouras ntsekouras mentioned this pull request Nov 7, 2025
Merged
@ntsekouras
Copy link
Copy Markdown
Contributor

ntsekouras commented Nov 7, 2025

Opened a PR for the manual backport.

@priethor priethor added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 6.9 Beta/RC labels Nov 8, 2025
ntsekouras added a commit that referenced this pull request Nov 10, 2025
@ntsekouras @jameskoster
@oandregal @priethor
Dataviews: Fix dataview columns width (#72969) (#73078)
a1e7dd9 
Co-authored-by: rcrdortiz <rcrdortiz@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: priethor <priethor@git.wordpress.org>
This was referenced Nov 20, 2025
Merged
Merged
@andrewserong andrewserong mentioned this pull request Dec 23, 2025
Merged
@ntsekouras ntsekouras mentioned this pull request Jan 29, 2026
Open
@oandregal oandregal mentioned this pull request Feb 12, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ntsekouras ntsekouras ntsekouras approved these changes

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

@youknowriad youknowriad Awaiting requested review from youknowriad

@jameskoster jameskoster Awaiting requested review from jameskoster

Assignees

No one assigned

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Regression Related to a regression in the latest release

Projects

WordPress 6.9 Editor Tasks
Status: ✅ Done

Milestone

Gutenberg 22.1

Development

Successfully merging this pull request may close these issues.

DataViews table layout regression

5 participants

@rcrdortiz @ntsekouras @jameskoster @priethor @t-hamano