From aa5b0b4faa67b2dfef96bacae71bd6efbf007d03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 7 Dec 2023 11:30:47 +0100 Subject: [PATCH 1/9] Set primaryField and make it not interactive --- .../page-templates/dataviews-templates.js | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) 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 07de0cb73ff44..43e1a13260e0f 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -38,6 +38,7 @@ import { OPERATOR_NOT_IN, LAYOUT_GRID, LAYOUT_TABLE, + LAYOUT_LIST, } from '../../utils/constants'; import { useResetTemplateAction, @@ -59,6 +60,9 @@ const defaultConfigPerViewType = { mediaField: 'preview', primaryField: 'title', }, + [ LAYOUT_LIST ]: { + primaryField: 'title', + }, }; const DEFAULT_VIEW = { @@ -79,8 +83,32 @@ function normalizeSearchInput( input = '' ) { // TODO: these are going to be reused in the template part list. // That's the reason for leaving the template parts code for now. -function TemplateTitle( { item } ) { +const Customized = ( { item, isCustomized } ) => { + if ( ! isCustomized ) { + return null; + } + return ( + + { item.type === TEMPLATE_POST_TYPE + ? _x( 'Customized', 'template' ) + : _x( 'Customized', 'template part' ) } + + ); +}; + +function TemplateTitle( { item, view } ) { const { isCustomized } = useAddedBy( item.type, item.id ); + + if ( view.type === LAYOUT_LIST ) { + return ( + <> + { decodeEntities( item.title?.rendered || item.slug ) || + __( '(no title)' ) } + + + ); + } + return ( @@ -95,13 +123,7 @@ function TemplateTitle( { item } ) { __( '(no title)' ) } - { isCustomized && ( - - { item.type === TEMPLATE_POST_TYPE - ? _x( 'Customized', 'template' ) - : _x( 'Customized', 'template part' ) } - - ) } + ); } @@ -192,7 +214,9 @@ export default function DataviewsTemplates() { header: __( 'Template' ), id: 'title', getValue: ( { item } ) => item.title?.rendered || item.slug, - render: ( { item } ) => , + render: ( { item } ) => ( + + ), maxWidth: 400, enableHiding: false, }, @@ -352,7 +376,6 @@ export default function DataviewsTemplates() { isLoading={ isLoadingData } view={ view } onChangeView={ onChangeView } - supportedLayouts={ [ LAYOUT_TABLE, LAYOUT_GRID ] } deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) } /> From bba1d239522d5cb3e8798d16c40aa1c6a9890450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Dec 2023 20:20:15 +0100 Subject: [PATCH 2/9] Add the preview --- .../src/components/layout/style.scss | 6 +- .../page-templates/dataviews-templates.js | 60 +++++++++++++++---- 2 files changed, 51 insertions(+), 15 deletions(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 3bea97862b1c4..d0b7a4000c6b0 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -158,12 +158,14 @@ // This shouldn't be necessary (we should have a way to say that a skeletton is relative .edit-site-layout__canvas .interface-interface-skeleton, -.edit-site-page-pages-preview .interface-interface-skeleton { +.edit-site-page-pages-preview .interface-interface-skeleton, +.edit-site-template-pages-preview .interface-interface-skeleton { position: relative !important; min-height: 100% !important; } -.edit-site-page-pages-preview { +.edit-site-page-pages-preview, +.edit-site-template-pages-preview { height: 100%; } 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 43e1a13260e0f..436ec523eb07a 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -47,6 +47,7 @@ import { } from './template-actions'; import usePatternSettings from '../page-patterns/use-pattern-settings'; import { unlock } from '../../lock-unlock'; +import SideEditor from '../page-pages/side-editor'; const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock( blockEditorPrivateApis @@ -173,12 +174,16 @@ function TemplatePreview( { content, viewType } ) { } export default function DataviewsTemplates() { + const [ templateId, setTemplateId ] = useState( null ); const [ view, setView ] = useState( DEFAULT_VIEW ); const { records: allTemplates, isResolving: isLoadingData } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, { per_page: -1, } ); + const onSelectionChange = ( items ) => + setTemplateId( items?.length === 1 ? items[ 0 ].id : null ); + const authors = useMemo( () => { if ( ! allTemplates ) { return EMPTY_ARRAY; @@ -366,18 +371,47 @@ export default function DataviewsTemplates() { [ view, setView ] ); return ( - - item.id } - isLoading={ isLoadingData } - view={ view } - onChangeView={ onChangeView } - deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) } - /> - + <> + + item.id } + isLoading={ isLoadingData } + view={ view } + onChangeView={ onChangeView } + onSelectionChange={ onSelectionChange } + deferredRendering={ + ! view.hiddenFields?.includes( 'preview' ) + } + /> + + { view.type === LAYOUT_LIST && ( + +
+ { templateId !== null ? ( + + ) : ( +
+

{ __( 'Select a template to preview' ) }

+
+ ) } +
+ + ) } + ); } From a28bb7e9b9ce348aeaee988211f2c8bcc1dd43b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Dec 2023 21:21:03 +0100 Subject: [PATCH 3/9] Set mediaField --- .../src/components/page-templates/dataviews-templates.js | 1 + 1 file changed, 1 insertion(+) 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 436ec523eb07a..986a10ed77789 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -63,6 +63,7 @@ const defaultConfigPerViewType = { }, [ LAYOUT_LIST ]: { primaryField: 'title', + mediaField: 'preview', }, }; From 0458cb23306edc75a185bd7d6cc636eb7220636e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:27:34 +0100 Subject: [PATCH 4/9] Set width for template pages when list view --- packages/edit-site/src/components/layout/style.scss | 4 ++++ .../src/components/page-templates/dataviews-templates.js | 9 ++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index d0b7a4000c6b0..8e60397f6bdf8 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -156,6 +156,10 @@ } } +.edit-site-template-pages-list-view { + max-width: $nav-sidebar-width; +} + // This shouldn't be necessary (we should have a way to say that a skeletton is relative .edit-site-layout__canvas .interface-interface-skeleton, .edit-site-page-pages-preview .interface-interface-skeleton, 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 986a10ed77789..72022de981ca5 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -373,7 +373,14 @@ export default function DataviewsTemplates() { ); return ( <> - + Date: Wed, 13 Dec 2023 11:54:55 +0000 Subject: [PATCH 5/9] List item contents alignment --- packages/dataviews/src/style.scss | 1 + packages/dataviews/src/view-list.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 3ff82d3238266..e7e06e1acd27e 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -196,6 +196,7 @@ border-radius: $grid-unit-05; overflow: hidden; position: relative; + margin-top: $grid-unit-05; &::after { content: ""; diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js index 516264946d1f6..c50a0f1ca2682 100644 --- a/packages/dataviews/src/view-list.js +++ b/packages/dataviews/src/view-list.js @@ -64,7 +64,7 @@ export default function ViewList( { ) } onClick={ () => onSelectionChange( [ item ] ) } > - +
{ mediaField?.render( { item } ) || (
From a3e432aabd3c6297b721805483dd9a78332e9582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:43:34 +0100 Subject: [PATCH 6/9] Extract SideEditor to PostPreview component --- packages/edit-site/src/components/page-pages/index.js | 4 ++-- .../src/components/page-templates/dataviews-templates.js | 4 ++-- .../{page-pages/side-editor.js => post-preview/index.js} | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename packages/edit-site/src/components/{page-pages/side-editor.js => post-preview/index.js} (79%) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index c92ce35ebe46d..861aa48fcd5cb 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -37,7 +37,7 @@ import { viewPostAction, useEditPostAction, } from '../actions'; -import SideEditor from './side-editor'; +import PostPreview from '../post-preview'; import Media from '../media'; import { unlock } from '../../lock-unlock'; const { useLocation } = unlock( routerPrivateApis ); @@ -338,7 +338,7 @@ export default function PagePages() {
{ pageId !== null ? ( - 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 72022de981ca5..bab1203f1d497 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -47,7 +47,7 @@ import { } from './template-actions'; import usePatternSettings from '../page-patterns/use-pattern-settings'; import { unlock } from '../../lock-unlock'; -import SideEditor from '../page-pages/side-editor'; +import PostPreview from '../post-preview'; const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock( blockEditorPrivateApis @@ -400,7 +400,7 @@ export default function DataviewsTemplates() {
{ templateId !== null ? ( - diff --git a/packages/edit-site/src/components/page-pages/side-editor.js b/packages/edit-site/src/components/post-preview/index.js similarity index 79% rename from packages/edit-site/src/components/page-pages/side-editor.js rename to packages/edit-site/src/components/post-preview/index.js index fca561cf9f4d5..de66ef1aad745 100644 --- a/packages/edit-site/src/components/page-pages/side-editor.js +++ b/packages/edit-site/src/components/post-preview/index.js @@ -4,7 +4,7 @@ import Editor from '../editor'; import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url'; -export default function SideEditor( { postType, postId } ) { +export default function PostPreview( { postType, postId } ) { useInitEditedEntity( { postId, postType, From 449d870911d628ae5f0466bc0aacc218854e3fce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:53:20 +0100 Subject: [PATCH 7/9] Remove icon from author in list view --- .../components/page-templates/dataviews-templates.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) 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 bab1203f1d497..9db7c899925ae 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -130,13 +130,14 @@ function TemplateTitle( { item, view } ) { ); } -function AuthorField( { item } ) { +function AuthorField( { item, view } ) { const { text, icon, imageUrl } = useAddedBy( item.type, item.id ); + const withIcon = view.type !== LAYOUT_LIST; + return ( - { imageUrl ? ( - - ) : ( + { withIcon && imageUrl && } + { withIcon && ! imageUrl && (
@@ -252,7 +253,7 @@ export default function DataviewsTemplates() { id: 'author', getValue: ( { item } ) => item.author_text, render: ( { item } ) => { - return ; + return ; }, enableHiding: false, type: ENUMERATION_TYPE, From 856c35170ee8a1641015faa1d73d33375d034e79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:55:45 +0100 Subject: [PATCH 8/9] Do not show customized in list view --- .../src/components/page-templates/dataviews-templates.js | 1 - 1 file changed, 1 deletion(-) 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 9db7c899925ae..6aed0863f89bb 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -106,7 +106,6 @@ function TemplateTitle( { item, view } ) { <> { decodeEntities( item.title?.rendered || item.slug ) || __( '(no title)' ) } - ); } From 99f400be986f9d2058a3071fa1bee65727dd74ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:56:22 +0100 Subject: [PATCH 9/9] Remove customized altogether --- .../page-templates/dataviews-templates.js | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) 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 6aed0863f89bb..1121eeb3daa5d 100644 --- a/packages/edit-site/src/components/page-templates/dataviews-templates.js +++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js @@ -14,7 +14,7 @@ import { __experimentalVStack as VStack, VisuallyHidden, } from '@wordpress/components'; -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { useState, useMemo, useCallback } from '@wordpress/element'; import { useEntityRecords } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -83,24 +83,7 @@ function normalizeSearchInput( input = '' ) { return removeAccents( input.trim().toLowerCase() ); } -// TODO: these are going to be reused in the template part list. -// That's the reason for leaving the template parts code for now. -const Customized = ( { item, isCustomized } ) => { - if ( ! isCustomized ) { - return null; - } - return ( - - { item.type === TEMPLATE_POST_TYPE - ? _x( 'Customized', 'template' ) - : _x( 'Customized', 'template part' ) } - - ); -}; - function TemplateTitle( { item, view } ) { - const { isCustomized } = useAddedBy( item.type, item.id ); - if ( view.type === LAYOUT_LIST ) { return ( <> @@ -124,7 +107,6 @@ function TemplateTitle( { item, view } ) { __( '(no title)' ) } - ); }