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: Add Grid Layout #55353

Merged
merged 5 commits into from
Oct 17, 2023
Merged

DataViews: Add Grid Layout #55353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c549877
DataViews: Add Grid Layout
youknowriad Oct 13, 2023
c3dcc28
Avoid card components
youknowriad Oct 16, 2023
b5f408f
Rename layoutConfig to layout
youknowriad Oct 17, 2023
115cacd
Improve image quality
youknowriad Oct 17, 2023
a14c48d
Avoid fixed heights
youknowriad Oct 17, 2023
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
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/dataviews/field-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { moreVertical } from '@wordpress/icons';

function FieldActions( { item, actions } ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
return (
<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
{ () => (
<MenuGroup>
{ actions.map( ( action ) => (
<MenuItem
key={ action.id }
onClick={ () => action.perform( item ) }
isDestructive={ action.isDesctructive }
>
{ action.label }
</MenuItem>
) ) }
</MenuGroup>
) }
</DropdownMenu>
);
}

export default FieldActions;
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,13 @@
color: $gray-700;
text-wrap: nowrap;
}

.dataviews-view-grid__media {
width: 100%;
min-height: 200px;

> * {
max-width: 100%;
object-fit: cover;
}
}
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/dataviews/text-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { useEffect, useRef } from '@wordpress/element';
import { SearchControl } from '@wordpress/components';

/**
Expand All @@ -14,12 +14,16 @@ export default function TextFilter( { view, onChangeView } ) {
const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
view.search
);
const onChangeViewRef = useRef( onChangeView );
useEffect( () => {
onChangeView( ( currentView ) => ( {
onChangeViewRef.current = onChangeView;
}, [ onChangeView ] );
useEffect( () => {
onChangeViewRef.current( ( currentView ) => ( {
...currentView,
search: debouncedSearch,
} ) );
}, [ debouncedSearch, onChangeView ] );
}, [ debouncedSearch ] );
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
const searchLabel = __( 'Filter list' );
return (
<SearchControl
Expand Down
64 changes: 62 additions & 2 deletions packages/edit-site/src/components/dataviews/view-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,63 @@
export function ViewGrid() {
return 'Grid';
/**
* WordPress dependencies
*/
import {
__experimentalGrid as Grid,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
FlexBlock,
Placeholder,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import FieldActions from './field-actions';

export function ViewGrid( { data, fields, view, actions } ) {
const mediaField = fields.find(
( field ) => field.id === view.layout.mediaField
);
const visibleFields = fields.filter(
( field ) =>
! view.hiddenFields.includes( field.id ) &&
field.id !== view.layout.mediaField
);
return (
<Grid gap={ 8 } columns={ 2 } alignment="top">
{ data.map( ( item, index ) => {
return (
<VStack key={ index }>
<div className="dataviews-view-grid__media">
{ ( mediaField &&
mediaField.render( { item, view } ) ) || (
<Placeholder
withIllustration
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If there's no "mediaField" or there's no featured image for the current post, we fallback to a placeholder.

style={ {
width: '100%',
minHeight: '200px',
} }
/>
) }
</div>

<HStack justify="space-between" alignment="top">
<FlexBlock>
<VStack>
{ visibleFields.map( ( field ) => (
<div key={ field.id }>
{ field.render
? field.render( { item, view } )
: field.accessorFn( item ) }
</div>
) ) }
</VStack>
</FlexBlock>
<FieldActions item={ item } actions={ actions } />
</HStack>
</VStack>
);
} ) }
</Grid>
);
}
45 changes: 14 additions & 31 deletions packages/edit-site/src/components/dataviews/view-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,20 @@ import {
check,
arrowUp,
arrowDown,
moreVertical,
} from '@wordpress/icons';
import {
Button,
Icon,
privateApis as componentsPrivateApis,
VisuallyHidden,
DropdownMenu,
MenuGroup,
MenuItem,
} from '@wordpress/components';
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import FieldActions from './field-actions';

const {
DropdownMenuV2,
Expand Down Expand Up @@ -135,38 +132,24 @@ function ViewList( {
paginationInfo,
} ) {
const columns = useMemo( () => {
const _columns = [ ...fields ];
const _columns = [
...fields.map( ( field ) => {
const column = { ...field };
delete column.render;
column.cell = ( props ) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The cell API is very weird and specific to tanstack, I've updated it to make it a bit clearer. I've called it "render" and it receives the "item" as a prop. This makes that function more generic and not specific to table cells.

I believe we might want to remove accessorFn as well later, but didn't do it in the current PR.

return field.render
? field.render( { item: props.row.original, view } )
: field.accessorFn( props.row.original );
};
return column;
} ),
];
if ( actions?.length ) {
_columns.push( {
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
id: 'actions',
cell: ( props ) => {
return (
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions' ) }
>
{ () => (
<MenuGroup>
{ actions.map( ( action ) => (
<MenuItem
key={ action.id }
onClick={ () =>
action.perform(
props.row.original
)
}
isDestructive={
action.isDesctructive
}
>
{ action.label }
</MenuItem>
) ) }
</MenuGroup>
) }
</DropdownMenu>
);
return <FieldActions item={ props.row.original } />;
},
enableHiding: false,
} );
Expand Down
10 changes: 4 additions & 6 deletions packages/edit-site/src/components/media/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,12 @@
*/
import { useEntityRecord } from '@wordpress/core-data';

function Media( { id, size, ...props } ) {
function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
const { record: media } = useEntityRecord( 'root', 'media', id );
const sizesPerPriority = [ 'large', 'thumbnail' ];
const currentSize =
size ??
sizesPerPriority.find( ( s ) => !! media?.media_details?.sizes[ s ] );
const currentSize = size.find(
( s ) => !! media?.media_details?.sizes[ s ]
);
const mediaDetails = media?.media_details?.sizes[ currentSize ];

if ( ! mediaDetails ) {
return null;
}
Expand Down
58 changes: 44 additions & 14 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
Expand Up @@ -8,7 +8,7 @@ import {
import { __ } from '@wordpress/i18n';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
import { useState, useMemo } from '@wordpress/element';
import { useState, useMemo, useCallback } from '@wordpress/element';
import { dateI18n, getDate, getSettings } from '@wordpress/date';

/**
Expand All @@ -22,6 +22,12 @@ import Media from '../media';

const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};
const defaultConfigPerViewType = {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
list: {},
grid: {
mediaField: 'featured-image',
},
};

export default function PagePages() {
const [ view, setView ] = useState( {
Expand All @@ -36,6 +42,7 @@ export default function PagePages() {
// All fields are visible by default, so it's
// better to keep track of the hidden ones.
hiddenFields: [ 'date', 'featured-image' ],
layout: {},
} );
// Request post statuses to get the proper labels.
const { records: statuses } = useEntityRecords( 'root', 'status' );
Expand Down Expand Up @@ -82,12 +89,16 @@ export default function PagePages() {
id: 'featured-image',
header: __( 'Featured Image' ),
accessorFn: ( page ) => page.featured_media,
cell: ( props ) =>
!! props.row.original.featured_media ? (
render: ( { item, view: currentView } ) =>
!! item.featured_media ? (
<Media
className="edit-site-page-pages__featured-image"
id={ props.row.original.featured_media }
size="thumbnail"
id={ item.featured_media }
size={
currentView.type === 'list'
? [ 'thumbnail', 'medium', 'large', 'full' ]
: [ 'large', 'full', 'medium', 'thumbnail' ]
}
/>
) : null,
enableSorting: false,
Expand All @@ -96,8 +107,7 @@ export default function PagePages() {
header: __( 'Title' ),
id: 'title',
accessorFn: ( page ) => page.title?.rendered || page.slug,
cell: ( props ) => {
const page = props.row.original;
render: ( { item: page } ) => {
return (
<VStack spacing={ 1 }>
<Heading as="h3" level={ 5 }>
Expand All @@ -108,8 +118,9 @@ export default function PagePages() {
canvas: 'edit',
} }
>
{ decodeEntities( props.getValue() ) ||
__( '(no title)' ) }
{ decodeEntities(
page.title?.rendered || page.slug
) || __( '(no title)' ) }
</Link>
</Heading>
</VStack>
Expand All @@ -123,8 +134,8 @@ export default function PagePages() {
header: __( 'Author' ),
id: 'author',
accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
cell: ( props ) => {
const author = props.row.original._embedded?.author[ 0 ];
render: ( { item } ) => {
const author = item._embedded?.author[ 0 ];
return (
<a href={ `user-edit.php?user_id=${ author.id }` }>
{ author.name }
Expand All @@ -142,10 +153,10 @@ export default function PagePages() {
{
header: 'Date',
id: 'date',
cell: ( props ) => {
render: ( { item } ) => {
const formattedDate = dateI18n(
getSettings().formats.datetimeAbbreviated,
getDate( props.row.original.date )
getDate( item.date )
);
return <time>{ formattedDate }</time>;
},
Expand All @@ -157,6 +168,25 @@ export default function PagePages() {

const trashPostAction = useTrashPostAction();
const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
const onChangeView = useCallback(
( viewUpdater ) => {
let updatedView =
typeof viewUpdater === 'function'
? viewUpdater( view )
: viewUpdater;
if ( updatedView.type !== view.type ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
updatedView = {
...updatedView,
layout: {
...defaultConfigPerViewType[ updatedView.type ],
},
};
}

setView( updatedView );
},
[ view ]
);

// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
return (
Expand All @@ -168,7 +198,7 @@ export default function PagePages() {
data={ pages || EMPTY_ARRAY }
isLoading={ isLoadingPages }
view={ view }
onChangeView={ setView }
onChangeView={ onChangeView }
/>
</Page>
);
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/page-pages/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
.edit-site-page-pages__featured-image {
border-radius: $radius-block-ui;
max-height: 60px;
}
Loading