Skip to content

Commit

Permalink
DataViews: Add Grid Layout (#55353)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Oct 17, 2023
1 parent 40df382 commit 72ccb24
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 57 deletions.
28 changes: 28 additions & 0 deletions packages/edit-site/src/components/dataviews/field-actions.js
View file
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 } ) {
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
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
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,13 +14,17 @@ 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,
page: 1,
} ) );
}, [ debouncedSearch, onChangeView ] );
}, [ debouncedSearch ] );
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
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
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
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 ) => {
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
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
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 = {
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 ) {
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
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;
}

1 comment on commit 72ccb24

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 72ccb24.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6546007539
📝 Reported issues:

Please sign in to comment.