From b8ecb816188520fd7bb60d71005e01038e0d27af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 16 Jan 2024 12:53:48 +0100 Subject: [PATCH] DataViews: set primary field styles (#57846) Co-authored-by: James Koster --- packages/dataviews/src/style.scss | 64 +++++++++++------- packages/dataviews/src/view-grid.js | 10 +-- packages/dataviews/src/view-list.js | 4 +- packages/dataviews/src/view-table.js | 11 +++- .../src/components/page-pages/index.js | 65 +++++++++---------- .../page-patterns/dataviews-patterns.js | 33 +++++----- .../src/components/page-patterns/style.scss | 9 +++ .../src/components/page-templates/index.js | 31 +++------ .../sidebar-dataviews/default-views.js | 4 +- 9 files changed, 125 insertions(+), 106 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 06997fee49a05..d5b962212af79 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -202,6 +202,44 @@ } } +.dataviews-view-list__primary-field, +.dataviews-view-grid__primary-field, +.dataviews-view-table__primary-field { + font-size: $default-font-size; + font-weight: 500; + color: $gray-900; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + width: 100%; + + a { + text-decoration: none; + color: inherit; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + width: 100%; + + &:hover { + color: $gray-900; + } + } + + button.components-button.is-link { + text-decoration: none; + color: inherit; + font-weight: inherit; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + width: 100%; + } +} + .dataviews-view-grid { margin-bottom: $grid-unit-30; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; @@ -215,26 +253,6 @@ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency } - .dataviews-view-grid__card { - .dataviews-view-grid__primary-field { - .dataviews-view-grid__title-field { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - font-size: $default-font-size; - width: 100%; - } - - .dataviews-view-grid__title-field a, - button.dataviews-view-grid__title-field { - font-weight: 500; - color: $gray-900; - text-decoration: none; - } - } - } - .dataviews-view-grid__media { width: 100%; min-height: 200px; @@ -250,10 +268,6 @@ } } - .dataviews-view-grid__primary-field { - min-height: $grid-unit-30; - } - .dataviews-view-grid__fields { position: relative; font-size: 12px; @@ -296,6 +310,7 @@ &:not(.is-selected):hover { color: var(--wp-admin-theme-color); + .dataviews-view-list__primary-field, .dataviews-view-list__fields { color: var(--wp-admin-theme-color); } @@ -308,6 +323,7 @@ background-color: var(--wp-admin-theme-color); color: $white; + .dataviews-view-list__primary-field, .dataviews-view-list__fields, .components-button { color: $white; diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js index 7c18d31dccd19..de0d5eca06b73 100644 --- a/packages/dataviews/src/view-grid.js +++ b/packages/dataviews/src/view-grid.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { - FlexBlock, __experimentalGrid as Grid, __experimentalHStack as HStack, __experimentalVStack as VStack, @@ -53,13 +52,10 @@ export default function ViewGrid( {
{ mediaField?.render( { item } ) }
- - + + { primaryField?.render( { item } ) } - + - { primaryField?.render( { item } ) } + + { primaryField?.render( { item } ) } +
{ visibleFields.map( ( field ) => { return ( diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 22e68b4f56331..8be188bf91c81 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -564,7 +564,16 @@ function ViewTable( { field.maxWidth || undefined, } } > - + { field.render( { item, } ) } diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 45368c11833f3..5ef05273be02c 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -import { - __experimentalView as View, - __experimentalVStack as VStack, - Button, -} from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -82,10 +78,21 @@ function useView( type ) { const { editEntityRecord } = useDispatch( coreStore ); const customView = useMemo( () => { - return ( - editedViewRecord?.content && JSON.parse( editedViewRecord?.content ) - ); + const storedView = + editedViewRecord?.content && + JSON.parse( editedViewRecord?.content ); + if ( ! storedView ) { + return storedView; + } + + return { + ...storedView, + layout: { + ...( DEFAULT_CONFIG_PER_VIEW_TYPE[ storedView?.type ] || {} ), + }, + }; }, [ editedViewRecord?.content ] ); + const setCustomView = useCallback( ( viewToSet ) => { editEntityRecord( @@ -224,32 +231,22 @@ export default function PagePages() { id: 'title', getValue: ( { item } ) => item.title?.rendered, render: ( { item } ) => { - return ( - - - { [ LAYOUT_TABLE, LAYOUT_GRID ].includes( - view.type - ) ? ( - - { decodeEntities( - item.title?.rendered - ) || __( '(no title)' ) } - - ) : ( - decodeEntities( item.title?.rendered ) || - __( '(no title)' ) - ) } - - + return [ LAYOUT_TABLE, LAYOUT_GRID ].includes( + view.type + ) ? ( + + { decodeEntities( item.title?.rendered ) || + __( '(no title)' ) } + + ) : ( + decodeEntities( item.title?.rendered ) || + __( '(no title)' ) ); }, maxWidth: 400, diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js index ad474d882cfcf..19b9b6381ec3b 100644 --- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js +++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js @@ -4,7 +4,6 @@ import { __experimentalHStack as HStack, Button, - __experimentalHeading as Heading, Tooltip, Flex, } from '@wordpress/components'; @@ -197,24 +196,24 @@ function Title( { item, categoryId } ) { /> ) } - + { item.type === PATTERN_TYPES.theme ? ( - - { item.title } - + item.title ) : ( - - - + ) } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index dd3c52ef08c1a..6be2f904a65ec 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -254,6 +254,15 @@ top: 0; z-index: 2; } + + .edit-site-patterns__pattern-title { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: inherit; + } } .dataviews-action-modal__duplicate-pattern { diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index ddc48542ee1b7..0d4ddd31620ab 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -8,10 +8,8 @@ import removeAccents from 'remove-accents'; */ import { Icon, - __experimentalView as View, __experimentalText as Text, __experimentalHStack as HStack, - __experimentalVStack as VStack, VisuallyHidden, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -96,28 +94,19 @@ function normalizeSearchInput( input = '' ) { function TemplateTitle( { item, viewType } ) { if ( viewType === LAYOUT_LIST ) { - return ( - <> - { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } - - ); + return decodeEntities( item.title?.rendered ) || __( '(no title)' ); } return ( - - - - { decodeEntities( item.title?.rendered ) || - __( '(no title)' ) } - - - + + { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } + ); } diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index fe9f046f31972..329103bd2b97d 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -15,7 +15,9 @@ import { } from '../../utils/constants'; export const DEFAULT_CONFIG_PER_VIEW_TYPE = { - [ LAYOUT_TABLE ]: {}, + [ LAYOUT_TABLE ]: { + primaryField: 'title', + }, [ LAYOUT_GRID ]: { mediaField: 'featured-image', primaryField: 'title',