From 693d54f431a90ae79d059990c7fc0ddfffaf41f8 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 29 Nov 2023 08:53:38 +0200 Subject: [PATCH] Dataviews: Grid layout refinements (#56441) * Dataviews: Grid layout refinements * grid compact item actions * Revert tooltips and update styles * temp fix to not render empty values in grid * linting issues * do not render description in grid view if empty * add theme's background color in previews empty space --------- Co-authored-by: James Koster --- .../src/components/dataviews/dataviews.js | 14 ++- .../src/components/dataviews/item-actions.js | 9 +- .../src/components/dataviews/style.scss | 63 +++++++++++-- .../src/components/dataviews/view-grid.js | 91 +++++++++++-------- .../src/components/page-pages/index.js | 1 + .../page-templates/dataviews-templates.js | 23 +++-- .../src/components/page-templates/style.scss | 7 +- 7 files changed, 144 insertions(+), 64 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 78d0ea83abb8ee..56a9cfd7c6ae38 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -71,14 +71,12 @@ export default function DataViews( { onChangeView={ onChangeView } /> - - - + + { !! primaryActions.length && primaryActions.map( ( action ) => { if ( !! action.RenderModal ) { diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss index 2d403caa6d4e06..8460c95ef4316a 100644 --- a/packages/edit-site/src/components/dataviews/style.scss +++ b/packages/edit-site/src/components/dataviews/style.scss @@ -65,13 +65,64 @@ } } -.dataviews-view-grid__media { - width: 100%; - min-height: 200px; +.dataviews-grid-view { + margin-bottom: $grid-unit-30; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + + @include break-xlarge() { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency + } + + @include break-huge() { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency + } + + .dataviews-view-grid__card { + h3 { // Todo: A better way to target this + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .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; - > * { - max-width: 100%; - object-fit: cover; + > * { + object-fit: cover; + width: 100%; + height: 100%; + } + } + + .dataviews-view-grid__title { + min-height: $grid-unit-30; + + a { + color: $gray-900; + text-decoration: none; + font-weight: 500; + } + } + + .dataviews-view-grid__fields { + position: relative; + font-size: 12px; + line-height: 16px; + + .dataviews-view-grid__field { + .dataviews-view-grid__field-header { + color: $gray-700; + } + .dataviews-view-grid__field-value { + color: $gray-900; + } + } } } diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js index fd74d4f401a966..597f3b13bd3091 100644 --- a/packages/edit-site/src/components/dataviews/view-grid.js +++ b/packages/edit-site/src/components/dataviews/view-grid.js @@ -5,8 +5,6 @@ import { __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, - FlexBlock, - Placeholder, } from '@wordpress/components'; import { useAsyncList } from '@wordpress/compose'; @@ -19,10 +17,15 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) { const mediaField = fields.find( ( field ) => field.id === view.layout.mediaField ); + const primaryField = fields.find( + ( field ) => field.id === view.layout.primaryField + ); const visibleFields = fields.filter( ( field ) => ! view.hiddenFields.includes( field.id ) && - field.id !== view.layout.mediaField + ! [ view.layout.mediaField, view.layout.primaryField ].includes( + field.id + ) ); const shownData = useAsyncList( data, { step: 3 } ); return ( @@ -32,42 +35,56 @@ export function ViewGrid( { data, fields, view, actions, getItemId } ) { alignment="top" className="dataviews-grid-view" > - { shownData.map( ( item, index ) => { - return ( - -
- { mediaField?.render( { item, view } ) || ( - - ) } -
- - - - - { visibleFields.map( ( field ) => ( -
- { field.render( { item, view } ) } -
- ) ) } + { shownData.map( ( item, index ) => ( + +
+ { mediaField?.render( { item, view } ) } +
+ + { primaryField?.render( { item, view } ) } + + + + { visibleFields.map( ( field ) => { + const renderedValue = field.render( { + item, + view, + } ); + if ( ! renderedValue ) { + return null; + } + return ( + +
+ { field.header } +
+
+ { field.render( { item, view } ) } +
- - - - - + ); + } ) } - ); - } ) } + + ) ) } ); } diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 5e42ce70120478..2d3a4c659f504e 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -39,6 +39,7 @@ const defaultConfigPerViewType = { list: {}, grid: { mediaField: 'featured-image', + primaryField: 'title', }, }; diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js index c0999afa7ee3ff..7dab7192779c89 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -12,6 +12,7 @@ import { __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack, + VisuallyHidden, } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState, useMemo, useCallback } from '@wordpress/element'; @@ -40,7 +41,9 @@ import { import usePatternSettings from '../page-patterns/use-pattern-settings'; import { unlock } from '../../lock-unlock'; -const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); +const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock( + blockEditorPrivateApis +); const EMPTY_ARRAY = []; @@ -48,6 +51,7 @@ const defaultConfigPerViewType = { list: {}, grid: { mediaField: 'preview', + primaryField: 'title', }, }; @@ -114,6 +118,7 @@ function AuthorField( { item } ) { function TemplatePreview( { content, viewType } ) { const settings = usePatternSettings(); + const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' ); const blocks = useMemo( () => { return parse( content ); }, [ content ] ); @@ -131,6 +136,7 @@ function TemplatePreview( { content, viewType } ) {
@@ -189,12 +195,17 @@ export default function DataviewsTemplates() { id: 'description', getValue: ( { item } ) => item.description, render: ( { item } ) => { - return ( - item.description && ( - - { decodeEntities( item.description ) } + return item.description ? ( + decodeEntities( item.description ) + ) : ( + <> + - ) + + { __( 'No description.' ) } + + ); }, maxWidth: 200, diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss index 8af0097b8e2ec4..ed4484550b48d5 100644 --- a/packages/edit-site/src/components/page-templates/style.scss +++ b/packages/edit-site/src/components/page-templates/style.scss @@ -1,9 +1,4 @@ .page-templates-preview-field { - .block-editor-block-preview__container { - border: 1px solid $gray-300; - border-radius: $radius-block-ui; - } - &.is-viewtype-list { .block-editor-block-preview__container { height: 120px; @@ -12,7 +7,7 @@ &.is-viewtype-grid { .block-editor-block-preview__container { - height: 320px; + height: auto; } } }