diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 8bccc2d10e3137..d140bb1f25f8f1 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- DataViews: Introduce `--wp-dataviews-edge-padding` CSS custom property. [#77053](https://github.com/WordPress/gutenberg/pull/77053) + ## 14.0.0 (2026-04-01) ### Breaking Changes diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 29300183472324..c725a3aae6cd46 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -525,6 +525,8 @@ These are the CSS Custom Properties that can be used to tweak the appearance of `--wp-dataviews-color-background`: sets the background color. +`--wp-dataviews-edge-padding`: sets the horizontal edge padding for all layouts (header, footer, grid, table, list, activity). Defaults to `24px`. + ### Composition modes The `DataViews` component supports two composition modes: diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss index ec1582134d95e4..44c6d656f5a4a8 100644 --- a/packages/dataviews/src/components/dataviews-footer/style.scss +++ b/packages/dataviews/src/components/dataviews-footer/style.scss @@ -8,7 +8,7 @@ bottom: 0; left: 0; background-color: inherit; - padding: $grid-unit-15 $grid-unit-30; + padding: $grid-unit-15 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); border-top: $border-width solid $gray-100; flex-shrink: 0; diff --git a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss index 2672685c099f5b..5f2cfd5aa8df1f 100644 --- a/packages/dataviews/src/components/dataviews-layouts/activity/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/activity/style.scss @@ -4,7 +4,7 @@ .dataviews-view-activity { margin: 0 0 auto; - padding: $grid-unit-10 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); .dataviews-view-activity__group-header { font-size: $font-size-large; @@ -104,7 +104,7 @@ .dataviews-view-activity__item { &.is-compact { .dataviews-view-activity__item-type { - width: $grid-unit-10; + width: $grid-unit-15; &::before { height: $grid-unit-15; diff --git a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss index 8e119803b4086b..fdc89433ad2a87 100644 --- a/packages/dataviews/src/components/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/grid/style.scss @@ -6,7 +6,7 @@ @use "../../../dataviews/style" as *; .dataviews-view-grid { - padding: 0 $grid-unit-30 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}) $grid-unit-30; display: flex; flex-direction: column; gap: $grid-unit-30; @@ -258,6 +258,6 @@ font-weight: $font-weight-medium; color: $gray-900; margin: 0 0 $grid-unit-10 0; - padding: 0 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); container-type: inline-size; } diff --git a/packages/dataviews/src/components/dataviews-layouts/list/style.scss b/packages/dataviews/src/components/dataviews-layouts/list/style.scss index 0938644076dc4c..a305c41c49686c 100644 --- a/packages/dataviews/src/components/dataviews-layouts/list/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/list/style.scss @@ -16,7 +16,7 @@ div.dataviews-view-list { .dataviews-view-list__item-wrapper { position: relative; - padding: $grid-unit-20 $grid-unit-30; + padding: $grid-unit-20 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); box-sizing: border-box; } @@ -211,7 +211,7 @@ div.dataviews-view-list { &.has-compact-density { div[role="row"] { .dataviews-view-list__item-wrapper { - padding: $grid-unit-10 $grid-unit-30; + padding: $grid-unit-10 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } .dataviews-view-list__title-field { @@ -239,7 +239,7 @@ div.dataviews-view-list { &.has-comfortable-density { div[role="row"] { .dataviews-view-list__item-wrapper { - padding: $grid-unit-30 $grid-unit-30; + padding: $grid-unit-30 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } .dataviews-view-list__title-field { @@ -274,5 +274,5 @@ div.dataviews-view-list { font-weight: $font-weight-medium; color: $gray-900; margin: 0 0 $grid-unit-10 0; - padding: 0 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } diff --git a/packages/dataviews/src/components/dataviews-layouts/table/style.scss b/packages/dataviews/src/components/dataviews-layouts/table/style.scss index 84aa48e9b904dd..231343b79efffe 100644 --- a/packages/dataviews/src/components/dataviews-layouts/table/style.scss +++ b/packages/dataviews/src/components/dataviews-layouts/table/style.scss @@ -62,12 +62,12 @@ td:first-child, th:first-child { - padding-left: $grid-unit-30; + padding-left: var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } td:last-child, th:last-child { - padding-right: $grid-unit-30; + padding-right: var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } &:last-child { @@ -168,13 +168,13 @@ } &:has(.dataviews-view-table-header-button):first-child { - // Table cell padding minus the header button padding. - padding-left: $grid-unit-20; + // Edge padding minus the header button padding. + padding-left: calc(var(--wp-dataviews-edge-padding, #{$grid-unit-30}) - #{$grid-unit-10}); } &:has(.dataviews-view-table-header-button):last-child { - // Table cell padding minus the header button padding. - padding-right: $grid-unit-20; + // Edge padding minus the header button padding. + padding-right: calc(var(--wp-dataviews-edge-padding, #{$grid-unit-30}) - #{$grid-unit-10}); } } } @@ -315,7 +315,7 @@ .dataviews-view-table__group-header-row { .dataviews-view-table__group-header-cell { font-weight: $font-weight-medium; - padding: $grid-unit-15 $grid-unit-30; + padding: $grid-unit-15 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); color: $gray-900; } } diff --git a/packages/dataviews/src/components/dataviews-layouts/utils/grid-items.scss b/packages/dataviews/src/components/dataviews-layouts/utils/grid-items.scss index 261f9ab9cc261b..e73b79b90082c6 100644 --- a/packages/dataviews/src/components/dataviews-layouts/utils/grid-items.scss +++ b/packages/dataviews/src/components/dataviews-layouts/utils/grid-items.scss @@ -6,7 +6,7 @@ gap: $grid-unit-30; grid-template-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); - padding: 0 $grid-unit-30 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}) $grid-unit-30; container-type: inline-size; @media not (prefers-reduced-motion) { diff --git a/packages/dataviews/src/dataviews/style.scss b/packages/dataviews/src/dataviews/style.scss index 91ac013348e969..5494e19827a381 100644 --- a/packages/dataviews/src/dataviews/style.scss +++ b/packages/dataviews/src/dataviews/style.scss @@ -29,7 +29,7 @@ .dataviews__view-actions, .dataviews-filters__container { box-sizing: border-box; - padding: $grid-unit-20 $grid-unit-30; + padding: $grid-unit-20 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); flex-shrink: 0; position: sticky; left: 0; @@ -42,7 +42,7 @@ .dataviews-no-results, .dataviews-loading { - padding: 0 $grid-unit-30; + padding: 0 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); flex-grow: 1; display: flex; align-items: center; @@ -75,7 +75,7 @@ @container (max-width: 430px) { .dataviews__view-actions, .dataviews-filters__container { - padding: $grid-unit-15 $grid-unit-30; + padding: $grid-unit-15 var(--wp-dataviews-edge-padding, #{$grid-unit-30}); } } diff --git a/packages/editor/src/components/post-revisions-panel/style.scss b/packages/editor/src/components/post-revisions-panel/style.scss index a99ae73e927815..b9d539ed098cac 100644 --- a/packages/editor/src/components/post-revisions-panel/style.scss +++ b/packages/editor/src/components/post-revisions-panel/style.scss @@ -1,4 +1,6 @@ .editor-post-revisions-panel { + --wp-dataviews-edge-padding: 0; + .editor-post-revisions-panel__view-all { justify-content: center; }