diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index d5b962212af79..156a901460048 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -253,13 +253,28 @@ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency } + .dataviews-view-grid__card { + border-radius: $radius-block-ui * 2; + border: 1px solid $gray-200; + height: 100%; + justify-content: flex-start; + + .dataviews-view-grid__title-actions { + padding: 0 $grid-unit-05; + } + + .dataviews-view-grid__primary-field { + min-height: $grid-unit-50; + } + } + .dataviews-view-grid__media { width: 100%; min-height: 200px; aspect-ratio: 1/1; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - border-radius: $radius-block-ui * 2; overflow: hidden; + border-bottom: 1px solid $gray-200; + background-color: $gray-100; > * { object-fit: cover; @@ -268,17 +283,23 @@ } } + .dataviews-view-grid__primary-field { + padding: $grid-unit-10; + } + .dataviews-view-grid__fields { position: relative; font-size: 12px; line-height: 16px; + &:not(:empty) { + padding: $grid-unit-15; + padding-top: 0; + } + .dataviews-view-grid__field { - .dataviews-view-grid__field-header { - color: $gray-700; - } .dataviews-view-grid__field-value { - color: $gray-900; + color: $gray-700; } } } @@ -403,6 +424,10 @@ &:last-child { margin-right: 0; } + + &:empty { + display: none; + } } } diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js index de0d5eca06b73..c8cc3516e1cbb 100644 --- a/packages/dataviews/src/view-grid.js +++ b/packages/dataviews/src/view-grid.js @@ -5,6 +5,7 @@ import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, + Tooltip, } from '@wordpress/components'; import { useAsyncList } from '@wordpress/compose'; @@ -38,21 +39,24 @@ export default function ViewGrid( { const usedData = deferredRendering ? shownData : data; return ( { usedData.map( ( item ) => (
{ mediaField?.render( { item } ) }
- + { primaryField?.render( { item } ) } @@ -79,12 +83,14 @@ export default function ViewGrid( { key={ field.id } spacing={ 1 } > -
- { field.header } -
-
- { renderedValue } -
+ +
+ { renderedValue } +
+
); } ) } diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss index c2d2cc25529c4..2bd7c771fd60d 100644 --- a/packages/edit-site/src/components/page-pages/style.scss +++ b/packages/edit-site/src/components/page-pages/style.scss @@ -1,5 +1,4 @@ .edit-site-page-pages__featured-image { - border-radius: $grid-unit-05; width: $grid-unit-50; height: $grid-unit-50; display: block; diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 0d4ddd31620ab..fd28c22298ba1 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -216,18 +216,18 @@ export default function DataviewsTemplates() { id: 'description', getValue: ( { item } ) => item.description, render: ( { item } ) => { - return item.description ? ( - decodeEntities( item.description ) - ) : ( - <> - - - { __( 'No description.' ) } - - - ); + return item.description + ? decodeEntities( item.description ) + : view.type === LAYOUT_TABLE && ( + <> + + + { __( 'No description.' ) } + + + ); }, maxWidth: 200, enableSorting: false,