Skip to content

DataViews: Try using 24px padding for consistency across different uses #73334

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

Merged
youknowriad merged 11 commits into from
Dec 8, 2025
+93 −176
Merged

DataViews: Try using 24px padding for consistency across different uses #73334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bf7a011
DataViews: Try using 24px padding for consistency across uses
andrewserong Nov 17, 2025
9103d01
Add changelog entry
andrewserong Nov 17, 2025
2e9cbc3
Update comments for accuracy
andrewserong Nov 17, 2025
f426b1f
Update layouts for consistency with 24px horizontal padding
andrewserong Nov 26, 2025
79d1844
Remove unintentional margin change
andrewserong Nov 27, 2025
9bb205b
Update Page module heuristics
youknowriad Nov 28, 2025
2b5b26a
Update Modal padding to 24px
youknowriad Nov 28, 2025
973c826
update components changelog
youknowriad Nov 28, 2025
e725c2a
Update DataViewsPicker story to demo how zeroing out modal padding ca…
andrewserong Dec 1, 2025
2f4fcfb
Make sure full screen modal margin-bottom matches the new padding value
andrewserong Dec 1, 2025
8bd5892
Fix pattern explorer sidebar
andrewserong Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/admin-ui/src/page/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,8 @@ export default function Header( {
} ) {
return (
<VStack className="admin-ui-page__header" as="header">
<HStack
className="admin-ui-page__header-title"
justify="space-between"
spacing={ 2 }
>
<HStack spacing={ 2 } justify="flex-start">
<HStack justify="space-between" spacing={ 2 }>
<HStack spacing={ 2 } justify="left">
{ showSidebarToggle && (
<SidebarToggleSlot
bubblesVirtually
Expand Down
19 changes: 5 additions & 14 deletions packages/admin-ui/src/page/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,18 @@
position: relative;
z-index: 1;
flex-flow: column;
container: admin-ui-page / inline-size;

@media not (prefers-reduced-motion) {
transition: width ease-out 0.2s;
}
}

.admin-ui-page__header {
padding: $grid-unit-20 $grid-unit-60;
padding: $grid-unit-20 $grid-unit-30;
border-bottom: 1px solid $gray-100;
background: $white;
position: sticky;
top: 0;
}

@container (max-width: 430px) {
padding: $grid-unit-20 $grid-unit-30;
}
.admin-ui-page__sidebar-toggle-slot:empty {
display: none;
}

.admin-ui-page__header-subtitle {
Expand All @@ -44,10 +39,7 @@
flex-direction: column;

&.has-padding {
padding: $grid-unit-20 $grid-unit * 2.5;
@container (max-width: 430px) {
padding: $grid-unit-20 $grid-unit-30;
}
padding: $grid-unit-20 $grid-unit-30;
}
}

Expand All @@ -71,4 +63,3 @@

}
}

2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ $block-inserter-tabs-height: 44px;
left: 0;
bottom: 0;
width: $sidebar-width;
padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
padding: $grid-unit-30 $grid-unit-30 $grid-unit-30;
overflow-x: visible;
overflow-y: auto;

Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Enhancements

- `Menu` and othr menu items: change default size to be 32px tall rather than 40px to improve menu density. ([#73429](https://github.com/WordPress/gutenberg/pull/73429)).
- Unify padding using for DataViews, Modals and other container components. ([#73334](https://github.com/WordPress/gutenberg/pull/73334))

### Bug Fixes

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
height: $button-size;
justify-content: center;
margin: 0 0 $grid-unit-30 0;
padding: 0 $grid-unit-40;
padding: 0 $grid-unit-30;
position: relative;
width: 100%;
}
Expand Down Expand Up @@ -103,11 +103,11 @@
}

&.components-guide__back-button {
left: $grid-unit-40;
left: $grid-unit-30;
}

&.components-guide__forward-button,
&.components-guide__finish-button {
right: $grid-unit-40;
right: $grid-unit-30;
}
}
8 changes: 4 additions & 4 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
:where(.components-modal__content) {
display: flex;
// If this container is scrollable, bottom padding won't apply so we use margin instead.
margin-bottom: $grid-unit-40;
margin-bottom: $grid-unit-30;
padding-bottom: 0;

> :last-child {
Expand Down Expand Up @@ -152,7 +152,7 @@
.components-modal__header {
box-sizing: border-box;
border-bottom: $border-width solid transparent;
padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
padding: $grid-unit-30;
display: flex;
flex-direction: row;
justify-content: space-between;
Expand Down Expand Up @@ -206,12 +206,12 @@
flex: 1;
margin-top: $header-height + $grid-unit-10;
// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
padding: $grid-unit-05 $grid-unit-30 $grid-unit-30;
overflow: auto;

&.hide-header {
margin-top: 0;
padding-top: $grid-unit-40;
padding-top: $grid-unit-30;
}

&.is-scrollable:focus-visible {
Expand Down
1 change: 1 addition & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
- Field API: move validation to the field type. [#73642](https://github.com/WordPress/gutenberg/pull/73642)
- DataForm: add support for `min`/`max` and `minLength`/`maxLength` validation for relevant controls. [#73465](https://github.com/WordPress/gutenberg/pull/73465)
- Field API: display formats for `number` and `integer` types. [#73644](https://github.com/WordPress/gutenberg/pull/73644)
- DataViews: Update padding to 24px for consistency. [#73334](https://github.com/WordPress/gutenberg/pull/73334)

## 11.0.0 (2025-11-26)

Expand Down
8 changes: 1 addition & 7 deletions packages/dataviews/src/components/dataviews-footer/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
bottom: 0;
left: 0;
background-color: inherit;
padding: $grid-unit-15 $grid-unit-60;
padding: $grid-unit-15 $grid-unit-30;
border-top: $border-width solid $gray-100;
flex-shrink: 0;

Expand All @@ -18,12 +18,6 @@
z-index: z-index(".dataviews-footer");
}

@container (max-width: 430px) {
.dataviews-footer {
padding: $grid-unit-15 $grid-unit-30;
}
}

@container (max-width: 560px) {
.dataviews-footer {
flex-direction: column !important;
Expand Down
31 changes: 3 additions & 28 deletions packages/dataviews/src/components/dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
.dataviews__view-actions,
.dataviews-filters__container {
box-sizing: border-box;
padding: $grid-unit-20 $grid-unit-60;
padding: $grid-unit-20 $grid-unit-30;
flex-shrink: 0;
position: sticky;
left: 0;
Expand All @@ -33,7 +33,7 @@

.dataviews-no-results,
.dataviews-loading {
padding: 0 $grid-unit-60;
padding: 0 $grid-unit-30;
flex-grow: 1;
display: flex;
align-items: center;
Expand All @@ -53,12 +53,6 @@
.dataviews-filters__container {
padding: $grid-unit-15 $grid-unit-30;
}

.dataviews-no-results,
.dataviews-loading {
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
}
}

.dataviews-title-field {
Expand Down Expand Up @@ -109,29 +103,10 @@
}

/**
* Applying a consistent 24px padding when DataViews are placed within cards.
* When DataViews are placed within cards, apply a consistent top padding.
Copy link
Member

@oandregal oandregal Dec 2, 2025

Choose a reason for hiding this comment

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

Do you still see us offering a way to configure padding later on? Or would this PR be enough for the use cases discussed?

Ideally, these styles for the card would be removed from this package, for example. If we were thinking about follow-up with a PR to configure padding via CSS Custom Prop, how would you feel about introducing it in this PR?

I'm all for controlling scope in PRs. In this situation, I worry about this: this PR ships a change that requires consumers to adapt. Then, later on, we may be shipping an API for setting padding, and they'll need to adapt again. I wonder if this experience can be more streamlined.

Copy link
Contributor Author

@andrewserong andrewserong Dec 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Do you still see us offering a way to configure padding later on? Or would this PR be enough for the use cases discussed?

For the main use cases I've had in mind so far (Card and Modals) I think this PR might be enough to begin with, without requiring configurable padding on DataViews, with the caveat that we still need a couple of these rules. In the other thread (#73334 (comment)), I think a follow-up would be to allow Modal to zero out its padding, similar to this Card rule that still exists.

If we were thinking about follow-up with a PR to configure padding via CSS Custom Prop, how would you feel about introducing it in this PR?

Pretty hesitant TBH. Each of these PRs has generated a lot of valid discussion but also quite differing opinions amongst reviewers and in terms of how customisation should work. My main goal is to try to advance a couple of current use cases (using DataViews / DataViewPicker in a modal, simplifying the CSS where we can).

While configurable padding is a good idea, as @jameskoster pointed out in #72989 (comment) "the juice simply isn't worth the squeeze", which is to say, we quickly encounter a lot of complexity.

So for now, my hope is to see if there's a minimal step forward for all this that we can commit to.

All that said, did you have an idea in mind for how we might structure a CSS custom variable or prop? I suppose if it were to be mostly an internal thing, it wouldn't preclude adding in a padding prop further down the track 🤔

Edit: I replied to this comment before reading the further comments below about other DataViews cases like 16px padding and that Cards come in various different sizes. I think I'm a little on the fence about how all this should work 🤔

*/
.components-card__body:has(> .dataviews-wrapper),
.components-card__body:has(> .dataviews-picker-wrapper) {
padding: $grid-unit-10 0 0;
overflow: hidden; // Prevent cells with white backgrounds overflowing the card

.dataviews__view-actions,
.dataviews-filters__container,
.dataviews-footer,
.dataviews-view-grid,
.dataviews-loading,
.dataviews-no-results {
padding-inline: $grid-unit-30;
}

.dataviews-view-table tr td:first-child,
.dataviews-view-table tr th:first-child {
padding-inline-start: $grid-unit-30;
}

.dataviews-view-table tr td:last-child,
.dataviews-view-table tr th:last-child {
padding-inline-end: $grid-unit-30;
}
}
2 changes: 1 addition & 1 deletion packages/dataviews/src/dataviews-layouts/activity/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

.dataviews-view-activity {
margin: 0 0 auto;
padding: $grid-unit-10 $grid-unit-60;
padding: $grid-unit-10 $grid-unit-30;

.dataviews-view-activity__group-header {
font-size: $font-size-large;
Expand Down
14 changes: 2 additions & 12 deletions packages/dataviews/src/dataviews-layouts/grid/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@use "../utils/grid-items.scss" as *;

.dataviews-view-grid {
padding: 0 $grid-unit-60 $grid-unit-30;
padding: 0 $grid-unit-30 $grid-unit-30;
display: flex;
flex-direction: column;
gap: $grid-unit-40;
Expand All @@ -16,11 +16,6 @@
transition: padding ease-out 0.1s;
}

@container (max-width: 430px) {
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
}

.dataviews-view-grid__row {
display: grid;
gap: $grid-unit-40;
Expand Down Expand Up @@ -224,11 +219,6 @@
font-weight: $font-weight-medium;
color: $gray-900;
margin: 0 0 $grid-unit-10 0;
padding: 0 $grid-unit-60;
padding: 0 $grid-unit-30;
container-type: inline-size;

@container (max-width: 430px) {
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
}
}
17 changes: 3 additions & 14 deletions packages/dataviews/src/dataviews-layouts/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,12 @@

td:first-child,
th:first-child {
padding-left: $grid-unit-60;
padding-left: $grid-unit-30;
}

td:last-child,
th:last-child {
padding-right: $grid-unit-60;
padding-right: $grid-unit-30;
}

&:last-child {
Expand Down Expand Up @@ -260,17 +260,6 @@
}
}

@container (max-width: 430px) {
.dataviews-view-table tr td:first-child,
.dataviews-view-table tr th:first-child {
padding-left: $grid-unit-30;
}

.dataviews-view-table tr td:last-child,
.dataviews-view-table tr th:last-child {
padding-right: $grid-unit-30;
}
}

.dataviews-view-table-selection-checkbox {
--checkbox-input-size: 24px;
Expand Down Expand Up @@ -316,7 +305,7 @@
.dataviews-view-table__group-header-row {
.dataviews-view-table__group-header-cell {
font-weight: $font-weight-medium;
padding: $grid-unit-15 $grid-unit-60;
padding: $grid-unit-15 $grid-unit-30;
color: $gray-900;
}
}
Expand Down
10 changes: 1 addition & 9 deletions packages/dataviews/src/dataviews-layouts/utils/grid-items.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,8 @@
gap: $grid-unit-40;
grid-template-rows: max-content;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
padding: 0 $grid-unit-60 $grid-unit-30;
padding: 0 $grid-unit-30 $grid-unit-30;
container-type: inline-size;
/**
* Breakpoints were adjusted from media queries breakpoints to account for
* the sidebar width. This was done to match the existing styles we had.
*/
@container (max-width: 430px) {
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
}

@media not (prefers-reduced-motion) {
transition: padding ease-out 0.1s;
Expand Down
44 changes: 27 additions & 17 deletions packages/dataviews/src/stories/dataviews-picker.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,23 +265,33 @@ export const WithModal = ( {
</p>
) }
{ isModalOpen && (
<Modal
title="Select Items"
onRequestClose={ () => setIsModalOpen( false ) }
isFullScreen={ false }
size="fill"
>
<DataViewsPickerContent
perPageSizes={ perPageSizes }
isMultiselectable={ isMultiselectable }
isGrouped={ isGrouped }
infiniteScrollEnabled={ infiniteScrollEnabled }
actions={ modalActions }
selection={ selectedItems.map( ( item ) =>
String( item.id )
) }
/>
</Modal>
<>
<style>{ `
Copy link
Contributor

@youknowriad youknowriad Dec 1, 2025

Choose a reason for hiding this comment

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

We may want a hasPadding prop in Modal like we do for Page at some point for this use-case. Could be done later.

Copy link
Contributor Author

@andrewserong andrewserong Dec 1, 2025

Choose a reason for hiding this comment

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

Indeed. Happy to take a look at that in a follow-up 👍

.components-modal__content {
padding: 0;
}
.components-modal__frame.is-full-screen .components-modal__content {
margin-bottom: 0;
}
` }</style>
<Modal
title="Select Items"
onRequestClose={ () => setIsModalOpen( false ) }
isFullScreen={ false }
size="fill"
>
<DataViewsPickerContent
perPageSizes={ perPageSizes }
isMultiselectable={ isMultiselectable }
isGrouped={ isGrouped }
infiniteScrollEnabled={ infiniteScrollEnabled }
actions={ modalActions }
selection={ selectedItems.map( ( item ) =>
String( item.id )
) }
/>
</Modal>
</>
) }
</>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/welcome-guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
font-size: 24px;
line-height: 1.4;
margin: $grid-unit-20 0 $grid-unit-20 0;
padding: 0 $grid-unit-40;
padding: 0 $grid-unit-30;
}

&__text {
font-size: $default-font-size;
line-height: 1.4;
margin: 0 0 $grid-unit-30 0;
padding: 0 $grid-unit-40;
padding: 0 $grid-unit-30;
}

&__inserter-icon {
Expand Down
Loading
Loading