From 97f65a0ca47c75313ef81d7c93f1182f498bff98 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 13 Jun 2023 15:39:10 +1000 Subject: [PATCH] Try/table view (#50766) * add page component * hooked up filtering and table * clean up and add new to page component * style updates to templates page * templates page title * template parts using new page component * change page header size * remove tanstack table * remove filter bar for now and simplify code * update package lock * revert package lock * mobile styles for table view * Fix page header z-index * Don't show description wrapper if description is empty Fixes vertical alignment for custom templates * Adjust alignment of last item in each row * fix table padding and scroll --------- Co-authored-by: James Koster --- packages/base-styles/_z-index.scss | 1 + .../edit-site/src/components/layout/index.js | 115 +++++++++--------- .../src/components/layout/style.scss | 7 ++ .../src/components/page-library/index.js | 104 ++++++++++++++++ .../src/components/page-main/index.js | 27 ++++ .../src/components/page-templates/index.js | 104 ++++++++++++++++ .../edit-site/src/components/page/header.js | 38 ++++++ .../edit-site/src/components/page/index.js | 20 +++ .../edit-site/src/components/page/style.scss | 38 ++++++ .../edit-site/src/components/table/index.js | 33 +++++ .../edit-site/src/components/table/style.scss | 37 ++++++ packages/edit-site/src/style.scss | 2 + 12 files changed, 471 insertions(+), 55 deletions(-) create mode 100644 packages/edit-site/src/components/page-library/index.js create mode 100644 packages/edit-site/src/components/page-main/index.js create mode 100644 packages/edit-site/src/components/page-templates/index.js create mode 100644 packages/edit-site/src/components/page/header.js create mode 100644 packages/edit-site/src/components/page/index.js create mode 100644 packages/edit-site/src/components/page/style.scss create mode 100644 packages/edit-site/src/components/table/index.js create mode 100644 packages/edit-site/src/components/table/style.scss diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 25f83989d37d40..96040ec29d07b8 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -184,6 +184,7 @@ $z-layers: ( // Site editor layout ".edit-site-layout__hub": 3, ".edit-site-layout__header": 2, + ".edit-site-page-header": 2, ".edit-site-layout__canvas-container": 2, ".edit-site-layout__sidebar": 1, ".edit-site-layout__canvas-container.is-resizing::after": 100, diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index eab6f08af0c655..29b4605e67d259 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -34,7 +34,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands */ import Sidebar from '../sidebar'; import Editor from '../editor'; -import ListPage from '../list'; import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; import getIsListPage from '../../utils/get-is-list-page'; @@ -48,6 +47,7 @@ import SavePanel from '../save-panel'; import KeyboardShortcutsRegister from '../keyboard-shortcuts/register'; import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global'; import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands'; +import PageMain from '../page-main'; import { useIsSiteEditorLoading } from './hooks'; const { useCommands } = unlock( coreCommandsPrivateApis ); @@ -201,63 +201,68 @@ export default function Layout() { { showCanvas && ( -
- { canvasResizer } - { !! canvasSize.width && ( - + { isListPage && } + { isEditorPage && ( +
- - { isEditorPage && ( - - + + - - ) } - { isListPage && } - - + isFullWidth={ isEditing } + oversizedClassName="edit-site-layout__resizable-frame-oversized" + > + + + + + ) } +
) } -
+ ) } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index ecb15aac8fe1e0..2097154fa94c34 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -81,6 +81,13 @@ } } +.edit-site-layout__main { + flex-grow: 1; + overflow: hidden; + display: flex; + flex-direction: column; +} + .edit-site-layout__canvas-container { position: relative; flex-grow: 1; diff --git a/packages/edit-site/src/components/page-library/index.js b/packages/edit-site/src/components/page-library/index.js new file mode 100644 index 00000000000000..b2bd1a0e932f85 --- /dev/null +++ b/packages/edit-site/src/components/page-library/index.js @@ -0,0 +1,104 @@ +/** + * WordPress dependencies + */ +import { + VisuallyHidden, + __experimentalHeading as Heading, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import Page from '../page'; +import Table from '../table'; +import Link from '../routes/link'; +import AddedBy from '../list/added-by'; +import TemplateActions from '../template-actions'; +import AddNewTemplate from '../add-new-template'; +import { store as editSiteStore } from '../../store'; + +export default function PageTemplates() { + const { records: templateParts } = useEntityRecords( + 'postType', + 'wp_template_part', + { + per_page: -1, + } + ); + + const { canCreate } = useSelect( ( select ) => { + const { supportsTemplatePartsMode } = + select( editSiteStore ).getSettings(); + return { + postType: select( coreStore ).getPostType( 'wp_template_part' ), + canCreate: ! supportsTemplatePartsMode, + }; + } ); + + const columns = [ + { + header: __( 'Template Part' ), + cell: ( templatePart ) => ( + + + + { decodeEntities( + templatePart.title?.rendered || + templatePart.slug + ) } + + + + ), + maxWidth: 400, + }, + { + header: __( 'Added by' ), + cell: ( templatePart ) => ( + + ), + }, + { + header: { __( 'Actions' ) }, + cell: ( templatePart ) => ( + + ), + }, + ]; + + return ( + + ) + } + > + { templateParts && ( + + ) } + + ); +} diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js new file mode 100644 index 00000000000000..97aca00b044e9a --- /dev/null +++ b/packages/edit-site/src/components/page-main/index.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import PageTemplates from '../page-templates'; +import PageLibrary from '../page-library'; +import { unlock } from '../../private-apis'; + +const { useLocation } = unlock( routerPrivateApis ); + +export default function PageMain() { + const { + params: { path }, + } = useLocation(); + + if ( path === '/wp_template/all' ) { + return ; + } else if ( path === '/wp_template_part/all' ) { + return ; + } + + return null; +} diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js new file mode 100644 index 00000000000000..a66070fa394159 --- /dev/null +++ b/packages/edit-site/src/components/page-templates/index.js @@ -0,0 +1,104 @@ +/** + * WordPress dependencies + */ +import { + VisuallyHidden, + __experimentalHeading as Heading, + __experimentalText as Text, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import Page from '../page'; +import Table from '../table'; +import Link from '../routes/link'; +import AddedBy from '../list/added-by'; +import TemplateActions from '../template-actions'; +import AddNewTemplate from '../add-new-template'; +import { store as editSiteStore } from '../../store'; + +export default function PageTemplates() { + const { records: templates } = useEntityRecords( + 'postType', + 'wp_template', + { + per_page: -1, + } + ); + + const { canCreate } = useSelect( ( select ) => { + const { supportsTemplatePartsMode } = + select( editSiteStore ).getSettings(); + return { + postType: select( coreStore ).getPostType( 'wp_template' ), + canCreate: ! supportsTemplatePartsMode, + }; + } ); + + const columns = [ + { + header: __( 'Template' ), + cell: ( template ) => ( + + + + { decodeEntities( + template.title?.rendered || template.slug + ) } + + + { template.description && ( + + { decodeEntities( template.description ) } + + ) } + + ), + maxWidth: 400, + }, + { + header: __( 'Added by' ), + cell: ( template ) => ( + + ), + }, + { + header: { __( 'Actions' ) }, + cell: ( template ) => ( + + ), + }, + ]; + + return ( + + ) + } + > + { templates &&
} + + ); +} diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js new file mode 100644 index 00000000000000..f617e8e4a4d9f5 --- /dev/null +++ b/packages/edit-site/src/components/page/header.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHeading as Heading, + __experimentalText as Text, + __experimentalHStack as HStack, + FlexBlock, + FlexItem, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ + +export default function Header( { title, subTitle, actions } ) { + return ( + + + + { title } + + { subTitle && ( + + { subTitle } + + ) } + + + { actions } + + + ); +} diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js new file mode 100644 index 00000000000000..6836456c8eb9b9 --- /dev/null +++ b/packages/edit-site/src/components/page/index.js @@ -0,0 +1,20 @@ +/** + * Internal dependencies + */ + +import Header from './header'; + +export default function Page( { title, subTitle, actions, children } ) { + return ( +
+ { title && ( +
+ ) } +
{ children }
+
+ ); +} diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss new file mode 100644 index 00000000000000..e29849e408c0d5 --- /dev/null +++ b/packages/edit-site/src/components/page/style.scss @@ -0,0 +1,38 @@ +.edit-site-page { + color: $gray-800; + background: $white; + flex-grow: 1; + overflow: auto; + margin: 0; + margin-top: $header-height; + @include break-medium() { + border-radius: 8px; + margin: $grid-unit-30 $grid-unit-30 $grid-unit-30 0; + } +} + +.edit-site-page-header { + padding: 0 $grid-unit-40; + height: $header-height; + padding-left: $grid-unit-40; + border-bottom: 1px solid $gray-100; + background: $white; + position: sticky; + top: 0; + z-index: z-index(".edit-site-page-header"); + .components-text { + color: $gray-800; + } + .components-heading { + color: $gray-900; + } + .edit-site-page-header__sub-title { + margin-top: $grid-unit-10; + color: $gray-700; + } +} + +.edit-site-page-content { + padding: $grid-unit-40 $grid-unit-40; + overflow-x: auto; +} diff --git a/packages/edit-site/src/components/table/index.js b/packages/edit-site/src/components/table/index.js new file mode 100644 index 00000000000000..0afe655876faac --- /dev/null +++ b/packages/edit-site/src/components/table/index.js @@ -0,0 +1,33 @@ +export default function Table( { data, columns } ) { + return ( +
+
+ + + { columns.map( ( column ) => ( + + ) ) } + + + + { data.map( ( row, rowIndex ) => ( + + { columns.map( ( column, columnIndex ) => ( + + ) ) } + + ) ) } + +
{ column.header }
+ { column.cell( row ) } +
+ + ); +} diff --git a/packages/edit-site/src/components/table/style.scss b/packages/edit-site/src/components/table/style.scss new file mode 100644 index 00000000000000..a53b2c836f54cc --- /dev/null +++ b/packages/edit-site/src/components/table/style.scss @@ -0,0 +1,37 @@ +.edit-site-table-wrapper { + width: 100%; +} + +.edit-site-table { + width: 100%; + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + position: relative; + a { + text-decoration: none; + } + th { + text-align: left; + font-weight: normal; + padding: 0 $grid-unit-20 $grid-unit-20; + color: $gray-700; + } + td { + padding: $grid-unit-20; + } + td, + th { + vertical-align: center; + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + text-align: right; + } + } + tr { + border-bottom: 1px solid $gray-100; + } +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 0d91942e5ca224..e921cb70106f85 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -9,6 +9,8 @@ @import "./components/header-edit-mode/style.scss"; @import "./components/header-edit-mode/document-actions/style.scss"; @import "./components/list/style.scss"; +@import "./components/page/style.scss"; +@import "./components/table/style.scss"; @import "./components/sidebar-edit-mode/style.scss"; @import "./components/sidebar-edit-mode/page-panels/style.scss"; @import "./components/sidebar-edit-mode/settings-header/style.scss";