Fix alignment when viewing a DataView with table layout and non-default column alignment #73398

xristos3490 · 2025-11-18T16:12:57Z

What?

When applying a non-default alignment to a Dataview column in the table layout, the header element's spacing becomes misaligned with the rest of the data in that list.

Closes #73397

Why?

Alignment needs to be on point.

How?

This PR does the following:

Adds two new class names to the header element: dataviews-view-table__header-align-{end, center}
Removes the inline textAlign style.
Introduces CSS to control the spacing and text alignment within the newly added class names.

Testing Instructions

Testing Instructions for Keyboard

Run npm run storybook:dev.
Navigate to DataViews examples.
Edit the default view and specify layout.styles.[column].align = end (and center). The screenshots below have the following view configured:

const [ view, setView ] = useState< View >( {
		...DEFAULT_VIEW,
		fields: [ 'categories' ],
		titleField: 'title',
		descriptionField: 'description',
		mediaField: 'image',
		layout: {
			styles:
				{
					categories: {
						align: 'end', // 'center'
					},
				},
			},
		} );

Screenshots or screencast

Align:end

Before	Before(Hover)

After	After(hover)

Align:center

Before	After

github-actions · 2025-11-18T16:13:32Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @xristos3490! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

github-actions · 2025-11-18T16:32:12Z

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: xristos3490 <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: mikejolley <[email protected]>

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

oandregal · 2025-11-18T17:13:12Z

I tested this a bit and this is what I found:

The title ("primary column") is unaffected by the alignment. This also happens in trunk. @xristos3490 is this something you could take a look at as a follow-up? I don't think that's intentional.
Columns that render buttons (all but actions) are now properly aligned at the end.

Before	After

oandregal · 2025-11-18T17:16:18Z

packages/dataviews/src/dataviews-layouts/table/index.tsx

 							return (
 								<th
 									key={ column }
+									className={ clsx( {


This works. It's so similar to #73385 where @jameskoster suggested a different approach (introduce an unstyled button variant, so that the container would control the spacing of buttons), that I'd rather ask what your thoughts are on this, James.

I don't think it would hurt to merge something like this in the short-term. But yes, this button is already applying custom styles which suggests an unstyled button variant would be useful.

jameskoster · 2025-11-18T19:29:40Z

packages/dataviews/src/dataviews-layouts/table/style.scss

 			font-weight: $font-weight-medium;

 			&:has(.dataviews-view-table-header-button):not(:first-child) {
 				padding-left: $grid-unit-05;


If we just added padding-right: $grid-unit-05; here would that solve the issue without all the extra logic and CSS?

Ah, I appreciate the clear thinking, @jameskoster! I tried this out, but it actually breaks the rules' specificity when handling the first and last child—such as when (a) the table has no primary column or checkboxes, and (b) there are no actions, causing a regular column to be placed to the last child.

This exploration also made me realize that the current approach won't work as expected in the aforementioned (b) case.

See:

However, we could modify the header-specific rules to make this work without adding any extra classes. I took a stab at this here.

xristos3490 · 2025-11-19T10:59:59Z

Thank you, @oandregal and @jameskoster, for the swift reviews!

Following James's suggestion, I went with a more straightforward, CSS-based approach to fix this, which seems to cover all cases:

Case A: No primary columns

First column end-aligned	First column start-aligned

Case B: No actions column

Classnames are removed at: 5fe3e0b
CSS fixes at: 1b8c553

Can you please take another look? Thanks!

The title ("primary column") is unaffected by the alignment. This also happens in trunk. @xristos3490 is this something you could take a look at as a follow-up? I don't think that's intentional.

Nice catch, André! Happy to follow up on this! 🙇

…-header-alignment-styles

jameskoster · 2025-11-19T13:17:06Z

packages/dataviews/src/dataviews-layouts/table/style.scss

+			&:has(.dataviews-view-table-header-button):first-child {
+				padding-left: $grid-unit-60;
+
+				.dataviews-view-table-header-button {
+					margin-left: - #{$grid-unit-10};
+				}
+			}


Instead of a negative margin could it make sense to just set the left padding to $grid-unit-50? 🤔

This is a spot-on suggestion, @jameskoster! I believe I carried over the negative margin from before, where we were setting the padding for both table cells and headers. Simplified the rules, and it works as expected in my testing. Also added a few comments to clarify; not sure about the comments policy, happy to remove them to keep it clean.

Done in eba86ee

While testing this, I realized the compact density needed a small fix too, which I added here: 128db12

See:

Before After

It's pretty hard to keep track of what some of these styles are for, so I think the comments are a great idea.

oandregal · 2025-11-24T16:37:40Z

Thanks for the changes here @xristos3490 There's some conflicts with the changelog, so you need to rebase this PR. I'll be happy to merge it afterwards!

…-header-alignment-styles

xristos3490 · 2025-11-24T22:08:08Z

Rebased in 49e9b64, @oandregal! Thanks for the reviews, folks! 🙇

oandregal · 2025-11-25T07:59:52Z

Congrats on your 1st PR merged, @xristos3490 You're welcome to send many more :)

PanosSynetos · 2025-11-26T10:40:27Z

Congrats Chris - Onwards and upwards!

Add header spacing in table layout when non-default alignment is used

4c2984c

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 18, 2025

Add changelog

c215235

xristos3490 marked this pull request as ready for review November 18, 2025 16:32

xristos3490 requested review from gigitux, ntsekouras and oandregal as code owners November 18, 2025 16:32

oandregal added [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Bug An existing feature does not function as intended labels Nov 18, 2025

oandregal reviewed Nov 18, 2025

View reviewed changes

jameskoster reviewed Nov 18, 2025

View reviewed changes

xristos3490 added 2 commits November 19, 2025 12:44

Remove th classes

5fe3e0b

Fix and reorg table header styles

1b8c553

Merge remote-tracking branch 'upstream/trunk' into fix/dataview-table…

b37d77a

…-header-alignment-styles

jameskoster reviewed Nov 19, 2025

View reviewed changes

xristos3490 added 2 commits November 19, 2025 15:44

Replace negative margin with calculated padding

eba86ee

Fix padding when using compact density

128db12

xristos3490 requested a review from oandregal November 20, 2025 12:45

oandregal approved these changes Nov 24, 2025

View reviewed changes

Merge remote-tracking branch 'upstream/trunk' into fix/dataview-table…

49e9b64

…-header-alignment-styles

oandregal merged commit ffd5c2b into WordPress:trunk Nov 25, 2025
34 checks passed

github-actions bot added this to the Gutenberg 22.2 milestone Nov 25, 2025

Fix alignment when viewing a DataView with table layout and non-default column alignment #73398

Fix alignment when viewing a DataView with table layout and non-default column alignment #73398

Conversation

xristos3490 commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Align:end

Align:center

Uh oh!

github-actions bot commented Nov 18, 2025

Uh oh!

github-actions bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oandregal commented Nov 18, 2025

Uh oh!

oandregal Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

jameskoster Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

jameskoster Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

xristos3490 Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

xristos3490 commented Nov 19, 2025

Case A: No primary columns

Case B: No actions column

Uh oh!

jameskoster Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

xristos3490 Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

jameskoster Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

oandregal commented Nov 24, 2025

Uh oh!

xristos3490 commented Nov 24, 2025

Uh oh!

Uh oh!

oandregal commented Nov 25, 2025

Uh oh!

PanosSynetos commented Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

xristos3490 commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading