Skip to content
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

DataViews: set primary field styles #57846

Merged
merged 20 commits into from
Jan 16, 2024
Merged

DataViews: set primary field styles #57846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
4c0c0b9
Do not use dataviews class in edit-site
oandregal Jan 15, 2024
3da669a
Pages: simplify title rendering
oandregal Jan 15, 2024
9e7c4fd
List: styles for primary field
oandregal Jan 15, 2024
ad49d6a
Grid: styles for primary field
oandregal Jan 15, 2024
268e536
Table view: styles for primary field
oandregal Jan 15, 2024
2a7ae88
Templates: simplify title rendering
oandregal Jan 15, 2024
553af7e
Grid: cover styles for when primary field renders as button
oandregal Jan 15, 2024
2af1de8
Remove unnecessary span
oandregal Jan 15, 2024
19fdc9e
Remove unnecessary H5
oandregal Jan 15, 2024
16e85b0
Inherit font-weight
oandregal Jan 15, 2024
6b3b92c
Remove content wrapper class styles to not interfere with text-overflow
oandregal Jan 15, 2024
2502f57
List: set primary field color for hover and selected states
oandregal Jan 15, 2024
8b6a78d
Remove unnecessary min-height
jameskoster Jan 15, 2024
ed93d63
Align primary field vertically
oandregal Jan 15, 2024
68c46ea
Revert "Remove content wrapper class styles to not interfere with tex…
oandregal Jan 15, 2024
2b4e995
Truncation in grid layout
jameskoster Jan 15, 2024
6c3bdb7
Truncate title in table layout
jameskoster Jan 15, 2024
9ef0dc1
Simplify: truncate text only for primary field
oandregal Jan 15, 2024
8260891
Stored view should also have the layout prop
oandregal Jan 16, 2024
96a7448
Link hover styles
jameskoster Jan 16, 2024
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
64 changes: 40 additions & 24 deletions packages/dataviews/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -250,10 +268,6 @@
}
}

.dataviews-view-grid__primary-field {
min-height: $grid-unit-30;
}

.dataviews-view-grid__fields {
position: relative;
font-size: 12px;
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
Expand Down
10 changes: 3 additions & 7 deletions packages/dataviews/src/view-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import {
FlexBlock,
__experimentalGrid as Grid,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
Expand Down Expand Up @@ -53,13 +52,10 @@ export default function ViewGrid( {
<div className="dataviews-view-grid__media">
{ mediaField?.render( { item } ) }
</div>
<HStack
className="dataviews-view-grid__primary-field"
justify="space-between"
>
<FlexBlock>
<HStack justify="space-between">
<HStack className="dataviews-view-grid__primary-field">
{ primaryField?.render( { item } ) }
</FlexBlock>
</HStack>
<ItemActions
item={ item }
actions={ actions }
Expand Down
4 changes: 3 additions & 1 deletion packages/dataviews/src/view-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ export default function ViewList( {
) }
</div>
<VStack spacing={ 1 }>
{ primaryField?.render( { item } ) }
<span className="dataviews-view-list__primary-field">
{ primaryField?.render( { item } ) }
</span>
<div className="dataviews-view-list__fields">
{ visibleFields.map( ( field ) => {
return (
Expand Down
11 changes: 10 additions & 1 deletion packages/dataviews/src/view-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,16 @@ function ViewTable( {
field.maxWidth || undefined,
} }
>
<span className="dataviews-view-table__cell-content-wrapper">
<span
className={ classnames(
'dataviews-view-table__cell-content-wrapper',
{
'dataviews-view-table__primary-field':
primaryField?.id ===
field.id,
}
) }
>
{ field.render( {
item,
} ) }
Expand Down
65 changes: 31 additions & 34 deletions packages/edit-site/src/components/page-pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -224,32 +231,22 @@ export default function PagePages() {
id: 'title',
getValue: ( { item } ) => item.title?.rendered,
render: ( { item } ) => {
return (
<VStack spacing={ 1 }>
Copy link
Member Author

Choose a reason for hiding this comment

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

Removes extra divs (VStack/View) that were no longer necessary.

<View
as="span"
className="dataviews-view-grid__title-field"
>
{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
view.type
) ? (
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities(
item.title?.rendered
) || __( '(no title)' ) }
</Link>
) : (
decodeEntities( item.title?.rendered ) ||
__( '(no title)' )
) }
</View>
</VStack>
return [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
view.type
) ? (
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities( item.title?.rendered ) ||
__( '(no title)' ) }
</Link>
) : (
decodeEntities( item.title?.rendered ) ||
__( '(no title)' )
);
},
maxWidth: 400,
Expand Down
33 changes: 16 additions & 17 deletions packages/edit-site/src/components/page-patterns/dataviews-patterns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import {
__experimentalHStack as HStack,
Button,
__experimentalHeading as Heading,
Tooltip,
Flex,
} from '@wordpress/components';
Expand Down Expand Up @@ -197,24 +196,24 @@ function Title( { item, categoryId } ) {
/>
</Tooltip>
) }
<Flex as="span" gap={ 0 } justify="left">
<Flex
as="div"
gap={ 0 }
justify="left"
className="edit-site-patterns__pattern-title"
>
{ item.type === PATTERN_TYPES.theme ? (
<span className="dataviews-view-grid__title-field">
{ item.title }
</span>
item.title
) : (
<Heading level={ 5 }>
<Button
variant="link"
onClick={ onClick }
// Required for the grid's roving tab index system.
// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
tabIndex="-1"
className="dataviews-view-grid__title-field"
Copy link
Member Author

Choose a reason for hiding this comment

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

We should not use internal dataviews classes in the consumer code.

>
{ item.title || item.name }
</Button>
</Heading>
<Button
variant="link"
onClick={ onClick }
// Required for the grid's roving tab index system.
// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
tabIndex="-1"
>
{ item.title || item.name }
</Button>
) }
</Flex>
</HStack>
Expand Down
9 changes: 9 additions & 0 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
31 changes: 10 additions & 21 deletions packages/edit-site/src/components/page-templates/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<VStack spacing={ 1 }>
Copy link
Member Author

Choose a reason for hiding this comment

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

Removes extra divs (VStack/View) that were no longer necessary.

<View as="span" className="dataviews-view-grid__title-field">
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities( item.title?.rendered ) ||
__( '(no title)' ) }
</Link>
</View>
</VStack>
<Link
params={ {
postId: item.id,
postType: item.type,
canvas: 'edit',
} }
>
{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
</Link>
);
}

Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/sidebar-dataviews/default-views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import {
} from '../../utils/constants';

export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
[ LAYOUT_TABLE ]: {},
[ LAYOUT_TABLE ]: {
primaryField: 'title',
Copy link
Member Author

Choose a reason for hiding this comment

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

The table layout wasn't defining what's the primary field. This is necessary for the primary field class to be serialized into the HTML.

},
[ LAYOUT_GRID ]: {
mediaField: 'featured-image',
primaryField: 'title',
Expand Down
Loading