From 4a078a94349a1990df3eae0d26c0da21e6969210 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 11 Nov 2021 00:53:13 +0800 Subject: [PATCH 01/14] Add edit site list page --- lib/full-site-editing/edit-site-page.php | 37 ++++++- lib/full-site-editing/template-parts.php | 2 +- lib/full-site-editing/templates.php | 2 +- lib/init.php | 8 -- .../edit-site/src/components/editor/index.js | 6 ++ .../edit-site/src/components/header/index.js | 2 - .../header/navigation-link/index.js | 95 ----------------- .../header/navigation-link/style.scss | 69 ------------ .../edit-site/src/components/list/header.js | 32 ++++++ .../edit-site/src/components/list/index.js | 39 +++++++ .../edit-site/src/components/list/style.scss | 100 ++++++++++++++++++ .../edit-site/src/components/list/table.js | 89 ++++++++++++++++ .../components/navigation-sidebar/index.js | 23 ++-- .../navigation-panel/index.js | 100 ++++++++---------- .../navigation-panel/style.scss | 6 +- .../navigation-toggle/index.js | 32 +----- .../src/components/template-details/index.js | 1 + packages/edit-site/src/index.js | 15 ++- packages/edit-site/src/style.scss | 1 + 19 files changed, 387 insertions(+), 272 deletions(-) delete mode 100644 packages/edit-site/src/components/header/navigation-link/index.js delete mode 100644 packages/edit-site/src/components/header/navigation-link/style.scss create mode 100644 packages/edit-site/src/components/list/header.js create mode 100644 packages/edit-site/src/components/list/index.js create mode 100644 packages/edit-site/src/components/list/style.scss create mode 100644 packages/edit-site/src/components/list/table.js diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index eb1020fda98bbc..b78030cdada800 100644 --- a/lib/full-site-editing/edit-site-page.php +++ b/lib/full-site-editing/edit-site-page.php @@ -31,6 +31,15 @@ function gutenberg_is_edit_site_page( $page ) { return 'appearance_page_gutenberg-edit-site' === $page; } +/** + * Checks whether the provided page is the templates list page. + * + * @return bool True for Site Editor pages, false otherwise. + */ +function gutenberg_is_edit_site_list_page() { + return isset( $_GET['postType'] ) && ! isset( $_GET['postId'] ); +} + /** * Load editor styles (this is copied from edit-form-blocks.php). * Ideally the code is extracted into a reusable function. @@ -68,7 +77,27 @@ function gutenberg_get_editor_styles() { } /** - * Initialize the Gutenberg Edit Site Page. + * Initialize the Gutenberg Templates List Page. + */ +function gutenberg_edit_site_list_init() { + wp_enqueue_script( 'wp-edit-site' ); + wp_enqueue_style( 'wp-edit-site' ); + wp_enqueue_media(); + + wp_add_inline_script( + 'wp-edit-site', + sprintf( + 'wp.domReady( function() { + wp.editSite.initializeList( "%s", "%s" ); + } );', + 'edit-site-editor', + $_GET['postType'] + ) + ); +} + +/** + * Initialize the Gutenberg Site Editor. * * @since 7.2.0 * @@ -90,6 +119,10 @@ static function( $classes ) { } ); + if ( gutenberg_is_edit_site_list_page() ) { + return gutenberg_edit_site_list_init(); + } + /** * Make the WP Screen object aware that this is a block editor page. * Since custom blocks check whether the screen is_block_editor, @@ -135,7 +168,7 @@ static function( $classes ) { '/wp/v2/themes/' . $active_theme . '/global-styles', ) ), - 'initializer_name' => 'initialize', + 'initializer_name' => 'initializeEditor', 'editor_settings' => $settings, ) ); diff --git a/lib/full-site-editing/template-parts.php b/lib/full-site-editing/template-parts.php index 1e67ae7a6fd2d6..77ef42d59c03ec 100644 --- a/lib/full-site-editing/template-parts.php +++ b/lib/full-site-editing/template-parts.php @@ -42,7 +42,7 @@ function gutenberg_register_template_part_post_type() { 'public' => false, 'has_archive' => false, 'show_ui' => true, - 'show_in_menu' => 'themes.php', + 'show_in_menu' => false, 'show_in_admin_bar' => false, 'show_in_rest' => true, 'rest_base' => 'template-parts', diff --git a/lib/full-site-editing/templates.php b/lib/full-site-editing/templates.php index e4c7ca09dbb33e..051d69647da110 100644 --- a/lib/full-site-editing/templates.php +++ b/lib/full-site-editing/templates.php @@ -42,7 +42,7 @@ function gutenberg_register_template_post_type() { 'public' => false, 'has_archive' => false, 'show_ui' => true, - 'show_in_menu' => 'themes.php', + 'show_in_menu' => false, 'show_in_admin_bar' => false, 'show_in_rest' => true, 'rest_base' => 'templates', diff --git a/lib/init.php b/lib/init.php index e28d0b5c49ec0a..c2fcd430c2ac47 100644 --- a/lib/init.php +++ b/lib/init.php @@ -106,14 +106,6 @@ function gutenberg_site_editor_menu() { 'gutenberg-edit-site', 'gutenberg_edit_site_page' ); - - add_theme_page( - __( 'Styles', 'gutenberg' ), - __( 'Styles', 'gutenberg' ), - 'edit_theme_options', - 'gutenberg-edit-site&styles=open', - 'gutenberg_edit_site_page' - ); } } add_action( 'admin_menu', 'gutenberg_site_editor_menu', 9 ); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index baf6c924616905..97f6622b135fd8 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -33,6 +33,7 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts'; */ import Header from '../header'; import { SidebarComplementaryAreaFills } from '../sidebar'; +import NavigationSidebar from '../navigation-sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; import NavigationSidebar from '../navigation-sidebar'; @@ -230,6 +231,11 @@ function Editor( { initialSettings, onError } ) { ) } + drawer={ + + } header={
{ event.preventDefault(); diff --git a/packages/edit-site/src/components/header/navigation-link/index.js b/packages/edit-site/src/components/header/navigation-link/index.js deleted file mode 100644 index 9154cb1ae53c3f..00000000000000 --- a/packages/edit-site/src/components/header/navigation-link/index.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * External dependencies - */ -import { get } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { - Button, - Icon, - __unstableMotion as motion, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { wordpress } from '@wordpress/icons'; -import { store as coreDataStore } from '@wordpress/core-data'; -import { useReducedMotion } from '@wordpress/compose'; -import { addQueryArgs } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; - -function NavigationLink( { icon } ) { - const { isRequestingSiteIcon, templateType, siteIconUrl } = useSelect( - ( select ) => { - const { getEditedPostType } = select( editSiteStore ); - const { getEntityRecord, getPostType, isResolving } = select( - coreDataStore - ); - const siteData = - getEntityRecord( 'root', '__unstableBase', undefined ) || {}; - - return { - isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [ - 'root', - '__unstableBase', - undefined, - ] ), - templateType: getPostType( getEditedPostType() ), - siteIconUrl: siteData.site_icon_url, - }; - }, - [] - ); - - const disableMotion = useReducedMotion(); - - let buttonIcon = ; - - const effect = { - expand: { - scale: 1.7, - borderRadius: 0, - transition: { type: 'tween', duration: '0.2' }, - }, - }; - - if ( siteIconUrl ) { - buttonIcon = ( - - ); - } else if ( isRequestingSiteIcon ) { - buttonIcon = null; - } else if ( icon ) { - buttonIcon = ; - } - - return ( - - - - ); -} - -export default NavigationLink; diff --git a/packages/edit-site/src/components/header/navigation-link/style.scss b/packages/edit-site/src/components/header/navigation-link/style.scss deleted file mode 100644 index adc3298fbc1f5b..00000000000000 --- a/packages/edit-site/src/components/header/navigation-link/style.scss +++ /dev/null @@ -1,69 +0,0 @@ -// Developer notes: these rules are duplicated for the post editor. -// They need to be updated in both places. - -.edit-site-navigation-link { - align-items: center; - background: $gray-900; - border-radius: 0; - display: flex; - position: absolute; - top: 0; - left: 0; - z-index: z-index(".edit-site-navigation-link"); - height: $header-height; - width: $header-height; -} - -.edit-site-navigation-link__button { - align-items: center; - background: $gray-900; - border-radius: 0; - color: $white; - height: $header-height + $border-width; - width: $header-height; - z-index: 1; - margin-bottom: - $border-width; - - &.has-icon { - min-width: $header-height; - - &:hover, - &:active, - &:focus { - color: $white; - } - - &:focus { - box-shadow: none; - } - - &::before { - transition: box-shadow 0.1s ease; - @include reduce-motion("transition"); - content: ""; - display: block; - position: absolute; - top: 9px; - right: 9px; - bottom: 9px; - left: 9px; - border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900; - } - - // Hover color. - &:hover::before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; - } - - // Lightened spot color focus. - &:focus::before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - } -} - -.edit-site-navigation-link__site-icon { - width: $button-size; - border-radius: $radius-block-ui; -} diff --git a/packages/edit-site/src/components/list/header.js b/packages/edit-site/src/components/list/header.js new file mode 100644 index 00000000000000..e090dddfb33116 --- /dev/null +++ b/packages/edit-site/src/components/list/header.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { + __experimentalHeading as Heading, + Button, +} from '@wordpress/components'; + +export default function Header( { templateType } ) { + const postType = useSelect( + ( select ) => select( coreStore ).getPostType( templateType ), + [ templateType ] + ); + + if ( ! postType ) { + return null; + } + + return ( +
+ + { postType.labels?.name } + + +
+ +
+
+ ); +} diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js new file mode 100644 index 00000000000000..111ab1d181a99c --- /dev/null +++ b/packages/edit-site/src/components/list/index.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { InterfaceSkeleton, FullscreenMode } from '@wordpress/interface'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Header from './header'; +import NavigationSidebar from '../navigation-sidebar'; +import Table from './table'; + +export default function List( { templateType } ) { + return ( + <> + + + } + drawer={ + + } + content={ +
+ + + } + /> + + ); +} diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss new file mode 100644 index 00000000000000..d6983292d97400 --- /dev/null +++ b/packages/edit-site/src/components/list/style.scss @@ -0,0 +1,100 @@ +.edit-site-list-header { + position: relative; + align-items: center; + background-color: $white; + display: flex; + height: $header-height; + box-sizing: border-box; + width: 100%; + justify-content: flex-end; + padding-right: $grid-unit-20; + + body.is-fullscreen-mode & { + padding-left: 60px; + transition: padding-left 20ms linear; + transition-delay: 80ms; + @include reduce-motion("transition"); + } + + .edit-site-list-header__title { + position: absolute; + left: 0; + width: 100%; + text-align: center; + font-size: 20px; + padding: 0; + margin: 0; + } +} + +.edit-site .edit-site-list .interface-interface-skeleton__content { + background: $white; +} + +.edit-site-list-main { + display: flex; + align-items: center; + justify-content: center; + padding: 60px; +} + +.edit-site-list-table { + width: 100%; + border: $border-width solid $gray-200; + border-radius: 2px; + + tr { + display: flex; + align-items: center; + height: 80px; + padding: $grid-unit-20 $grid-unit-40; + box-sizing: border-box; + } + + thead tr { + height: 60px; + border-bottom: $border-width solid $gray-200; + } + + tbody tr + tr { + border-top: $border-width solid $gray-100; + } + + td, + th { + // Name + &:nth-child(1) { + flex-basis: 150px; + } + + // Description + &:nth-child(2) { + flex-grow: 1; + flex-shrink: 1; + } + + // Theme + &:nth-child(3) { + flex-basis: 150px; + } + + // Actions + &:nth-child(4) { + flex-basis: 36px; + } + } + + // Name + tbody td:nth-child(1) { + font-weight: 500; + font-size: 14px; + color: $black; + } + + th { + font-size: 16px; + font-weight: 500; + text-align: left; + color: $black; + } +} diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js new file mode 100644 index 00000000000000..6754bf44d065eb --- /dev/null +++ b/packages/edit-site/src/components/list/table.js @@ -0,0 +1,89 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { __, sprintf } from '@wordpress/i18n'; +import { VisuallyHidden, Button } from '@wordpress/components'; +import { moreVertical } from '@wordpress/icons'; +import { addQueryArgs } from '@wordpress/url'; + +export default function Table( { templateType } ) { + const { templates, isLoading, postType } = useSelect( + ( select ) => { + const { + getEntityRecords, + hasFinishedResolution, + getPostType, + } = select( coreStore ); + + return { + templates: getEntityRecords( 'postType', templateType ), + isLoading: ! hasFinishedResolution( 'getEntityRecords', [ + 'postType', + templateType, + ] ), + postType: getPostType( templateType ), + }; + }, + [ templateType ] + ); + + if ( ! templates || isLoading ) { + return null; + } + + if ( ! templates.length ) { + return ( +
+ { sprintf( + // translators: The template type name, should be either "templates" or "template parts". + __( 'No %s found.' ), + postType?.labels?.name?.toLowerCase() + ) } +
+ ); + } + + return ( +
+ + + + + + + + + + + { templates.map( ( template ) => ( + + + + + + + ) ) } + +
{ __( 'Name' ) }{ __( 'Description' ) }{ __( 'Theme' ) } + { __( 'Actions' ) } +
+ + { template.title.rendered } + + { template.description }{ template.theme } +
+ ); +} diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js index d1dd73ff611030..4f0d0f7bc63ed7 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -1,30 +1,37 @@ /** * WordPress dependencies */ +import { useState } from '@wordpress/element'; import { createSlotFill } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import NavigationPanel from './navigation-panel'; import NavigationToggle from './navigation-toggle'; -import { store as editSiteStore } from '../../store'; export const { Fill: NavigationPanelPreviewFill, Slot: NavigationPanelPreviewSlot, } = createSlotFill( 'EditSiteNavigationPanelPreview' ); -export default function NavigationSidebar() { - const isNavigationOpen = useSelect( ( select ) => { - return select( editSiteStore ).isNavigationOpened(); - }, [] ); +export default function NavigationSidebar( { + defaultIsOpen = false, + activeTemplateType, +} ) { + const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen ); return ( <> - - + + ); diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index b601bac80c185b..7717387b19ae5e 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -9,64 +9,33 @@ import classnames from 'classnames'; import { __experimentalNavigation as Navigation, __experimentalNavigationBackButton as NavigationBackButton, + __experimentalNavigationGroup as NavigationGroup, + __experimentalNavigationItem as NavigationItem, + __experimentalNavigationMenu as NavigationMenu, } from '@wordpress/components'; import { store as coreDataStore } from '@wordpress/core-data'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { ESCAPE } from '@wordpress/keycodes'; import { decodeEntities } from '@wordpress/html-entities'; +import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ -import SiteMenu from './menus'; import MainDashboardButton from '../../main-dashboard-button'; -import { store as editSiteStore } from '../../../store'; -import { MENU_ROOT } from './constants'; -const NavigationPanel = ( { isOpen } ) => { - const { - page: { context: { postType, postId } = {} } = {}, - editedPostId, - editedPostType, - activeMenu, - siteTitle, - } = useSelect( ( select ) => { - const { - getEditedPostType, - getEditedPostId, - getNavigationPanelActiveMenu, - getPage, - } = select( editSiteStore ); +const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => { + const siteTitle = useSelect( ( select ) => { const { getEntityRecord } = select( coreDataStore ); const siteData = getEntityRecord( 'root', '__unstableBase', undefined ) || {}; - return { - page: getPage(), - editedPostId: getEditedPostId(), - editedPostType: getEditedPostType(), - activeMenu: getNavigationPanelActiveMenu(), - siteTitle: siteData.name, - }; + return siteData.name; }, [] ); - const { - setNavigationPanelActiveMenu: setActive, - setIsNavigationPanelOpened, - } = useDispatch( editSiteStore ); - - let activeItem; - if ( activeMenu !== MENU_ROOT ) { - if ( activeMenu.startsWith( 'content' ) ) { - activeItem = `${ postType }-${ postId }`; - } else { - activeItem = `${ editedPostType }-${ editedPostId }`; - } - } - // Ensures focus is moved to the panel area when it is activated // from a separate component (such as document actions in the header). const panelRef = useRef(); @@ -74,12 +43,12 @@ const NavigationPanel = ( { isOpen } ) => { if ( isOpen ) { panelRef.current.focus(); } - }, [ activeMenu, isOpen ] ); + }, [ activeTemplateType, isOpen ] ); const closeOnEscape = ( event ) => { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { event.preventDefault(); - setIsNavigationPanelOpened( false ); + setIsOpen( false ); } }; @@ -100,21 +69,42 @@ const NavigationPanel = ( { isOpen } ) => {
- - { activeMenu === MENU_ROOT && ( - - + + + + + + + + + - - ) } - + +
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss index 1d7c241c00bc8c..6bab3a634fe783 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss @@ -9,8 +9,10 @@ @include reduce-motion("transition"); // Footer is visible from medium so we subtract footer's height - @include break-medium() { - height: calc(100% - #{$button-size-small + $border-width}); + .interface-interface-skeleton.has-footer & { + @include break-medium() { + height: calc(100% - #{$button-size-small + $border-width}); + } } } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 98a018cb413306..519d086264c742 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { Button, Icon, @@ -12,20 +12,8 @@ import { wordpress } from '@wordpress/icons'; import { store as coreDataStore } from '@wordpress/core-data'; import { useReducedMotion } from '@wordpress/compose'; -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; - -function NavigationToggle( { icon, isOpen } ) { - const { - isRequestingSiteIcon, - navigationPanelMenu, - siteIconUrl, - } = useSelect( ( select ) => { - const { getCurrentTemplateNavigationPanelSubMenu } = select( - editSiteStore - ); +function NavigationToggle( { icon, isOpen, setIsOpen } ) { + const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => { const { getEntityRecord, isResolving } = select( coreDataStore ); const siteData = getEntityRecord( 'root', '__unstableBase', undefined ) || {}; @@ -36,25 +24,13 @@ function NavigationToggle( { icon, isOpen } ) { '__unstableBase', undefined, ] ), - navigationPanelMenu: getCurrentTemplateNavigationPanelSubMenu(), siteIconUrl: siteData.site_icon_url, }; }, [] ); - const { - openNavigationPanelToMenu, - setIsNavigationPanelOpened, - } = useDispatch( editSiteStore ); - const disableMotion = useReducedMotion(); - const toggleNavigationPanel = () => { - if ( isOpen ) { - setIsNavigationPanelOpened( false ); - return; - } - openNavigationPanelToMenu( navigationPanelMenu ); - }; + const toggleNavigationPanel = () => setIsOpen( ( open ) => ! open ); let buttonIcon = ; diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js index 014d5d37b18ff5..b97c74e54a844a 100644 --- a/packages/edit-site/src/components/template-details/index.js +++ b/packages/edit-site/src/components/template-details/index.js @@ -104,6 +104,7 @@ export default function TemplateDetails( { template, onClose } ) { { ...( newMenuSidebar ? { href: addQueryArgs( 'edit.php', { + page: 'gutenberg-edit-site', // TODO: We should update this to filter by template part's areas as well. post_type: template.type, } ), diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 0592106beb760a..b9c5e5d95c2d72 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -20,6 +20,7 @@ import './plugins'; import './hooks'; import './store'; import Editor from './components/editor'; +import List from './components/list'; /** * Reinitializes the editor after the user chooses to reboot the editor after @@ -44,7 +45,7 @@ export function reinitializeEditor( target, settings ) { * @param {string} id ID of the root element to render the screen in. * @param {Object} settings Editor settings. */ -export function initialize( id, settings ) { +export function initializeEditor( id, settings ) { settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) => fetchLinkSuggestions( search, searchOptions, settings ); settings.__experimentalFetchRichUrlData = fetchUrlData; @@ -69,6 +70,18 @@ export function initialize( id, settings ) { ); } +/** + * Initializes the site editor templates list screen. + * + * @param {string} id ID of the root element to render the screen in. + * @param {string} templateType The type of the list. "wp_template" or "wp_template_part". + */ +export function initializeList( id, templateType ) { + const target = document.getElementById( id ); + + render( , target ); +} + export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button'; export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle'; export { default as PluginSidebar } from './components/sidebar/plugin-sidebar'; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index ce6451ff07b515..05c6dc9250dc93 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -8,6 +8,7 @@ @import "./components/header/navigation-link/style.scss"; @import "./components/navigation-sidebar/navigation-toggle/style.scss"; @import "./components/navigation-sidebar/navigation-panel/style.scss"; +@import "./components/list/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; @import "./components/sidebar/template-card/style.scss"; From e4d6072d902c60fcfe77abf1917f727723b1c9fd Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 10 Nov 2021 18:42:13 +0000 Subject: [PATCH 02/14] Add Editor navigation item --- .../navigation-sidebar/navigation-panel/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index 7717387b19ae5e..cb25a5daf250dc 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -80,6 +80,13 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => { + Date: Wed, 10 Nov 2021 19:21:37 +0000 Subject: [PATCH 03/14] Editor -> Site --- .../src/components/navigation-sidebar/navigation-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index cb25a5daf250dc..70935c39de0976 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -81,7 +81,7 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => { Date: Thu, 11 Nov 2021 10:10:04 +0800 Subject: [PATCH 04/14] Remove style: closed --- .../src/components/navigation-sidebar/navigation-panel/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index 70935c39de0976..34f17da6474873 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -84,7 +84,6 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => { title={ __( 'Site' ) } href={ addQueryArgs( '', { page: 'gutenberg-edit-site', - style: 'closed', } ) } /> Date: Thu, 11 Nov 2021 10:06:36 +0800 Subject: [PATCH 05/14] Preload some API requests --- lib/full-site-editing/edit-site-page.php | 25 +++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index b78030cdada800..3a0a8557ec5c7b 100644 --- a/lib/full-site-editing/edit-site-page.php +++ b/lib/full-site-editing/edit-site-page.php @@ -84,6 +84,29 @@ function gutenberg_edit_site_list_init() { wp_enqueue_style( 'wp-edit-site' ); wp_enqueue_media(); + $template_type = $_GET['postType']; + $post_type = get_post_type_object( $template_type ); + + $preload_data = array_reduce( + array( + '/', + "/wp/v2/types/$template_type?context=edit", + '/wp/v2/types?context=edit', + "/wp/v2/$post_type->rest_base?context=edit", + ), + 'rest_preload_api_request', + array() + ); + + wp_add_inline_script( + 'wp-api-fetch', + sprintf( + 'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );', + wp_json_encode( $preload_data ) + ), + 'after' + ); + wp_add_inline_script( 'wp-edit-site', sprintf( @@ -91,7 +114,7 @@ function gutenberg_edit_site_list_init() { wp.editSite.initializeList( "%s", "%s" ); } );', 'edit-site-editor', - $_GET['postType'] + $template_type ) ); } From 7e362f9344a9a1e588ee1acaba582e465d118dea Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 11 Nov 2021 10:13:01 +0800 Subject: [PATCH 06/14] Default to is-fullscreen-mode --- .../edit-site/src/components/list/index.js | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js index 111ab1d181a99c..640f4e5082c93f 100644 --- a/packages/edit-site/src/components/list/index.js +++ b/packages/edit-site/src/components/list/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { InterfaceSkeleton, FullscreenMode } from '@wordpress/interface'; +import { InterfaceSkeleton } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; /** @@ -13,27 +13,23 @@ import Table from './table'; export default function List( { templateType } ) { return ( - <> - - - } - drawer={ - - } - content={ -
- - - } - /> - + } + drawer={ + + } + content={ +
+
+ + } + /> ); } From bd51447bcaf638854c19d247d0fffe6e86a8855e Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 11 Nov 2021 12:29:11 +0000 Subject: [PATCH 07/14] style and markup refactor --- .../edit-site/src/components/list/style.scss | 68 +++++++++---------- .../edit-site/src/components/list/table.js | 60 +++++++++------- 2 files changed, 67 insertions(+), 61 deletions(-) diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index d6983292d97400..5d55d066d284df 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -35,66 +35,62 @@ display: flex; align-items: center; justify-content: center; - padding: 60px; + padding: $grid-unit-20; + + @include break-medium() { + padding: $grid-unit * 9; + } } .edit-site-list-table { width: 100%; border: $border-width solid $gray-200; border-radius: 2px; + margin: 0; + overflow: hidden; - tr { + li { display: flex; align-items: center; - height: 80px; - padding: $grid-unit-20 $grid-unit-40; + padding: $grid-unit-20; box-sizing: border-box; - } - - thead tr { - height: 60px; - border-bottom: $border-width solid $gray-200; - } - - tbody tr + tr { border-top: $border-width solid $gray-100; - } + margin: 0; - td, - th { - // Name - &:nth-child(1) { - flex-basis: 150px; + @include break-medium() { + padding: $grid-unit-30 $grid-unit-40; } - // Description - &:nth-child(2) { - flex-grow: 1; - flex-shrink: 1; - } + .edit-site-list-table-column:nth-child(1) { + width: calc(60% - 36px); - // Theme - &:nth-child(3) { - flex-basis: 150px; + a { + display: block; + text-decoration: none; + font-weight: 500; + margin-bottom: $grid-unit-05; + } } - // Actions - &:nth-child(4) { - flex-basis: 36px; + .edit-site-list-table-column:nth-child(2) { + width: calc(40% - 36px); } - } - // Name - tbody td:nth-child(1) { - font-weight: 500; - font-size: 14px; - color: $black; + .edit-site-list-table-column:nth-child(3) { + min-width: $button-size; + } } - th { + li.edit-site-list-table-head { + border-bottom: $border-width solid $gray-200; font-size: 16px; font-weight: 500; text-align: left; color: $black; + border-top: none; + + & + li { + border-top: 0; + } } } diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index 6754bf44d065eb..eb3e87826c5510 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -4,7 +4,13 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __, sprintf } from '@wordpress/i18n'; -import { VisuallyHidden, Button } from '@wordpress/components'; +import { + VisuallyHidden, + Button, + FlexItem, + __experimentalHStack as HStack, + __experimentalHeading as Heading, +} from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { addQueryArgs } from '@wordpress/url'; @@ -46,22 +52,23 @@ export default function Table( { templateType } ) { } return ( -
- - - - - - - - +
    + + + { __( 'Template' ) } + + + { __( 'Added by' ) } + + + { __( 'Actions' ) } + + -
- { templates.map( ( template ) => ( - - - - - - - ) ) } - -
{ __( 'Name' ) }{ __( 'Description' ) }{ __( 'Theme' ) } - { __( 'Actions' ) } -
+ { templates.map( ( template ) => ( +
  • + + { template.title.rendered } -
    		• { template.description }{ template.theme } + { template.description } + + + + { template.theme } + +
    + + + + ) ) } + ); } From 744e63665736fc854bc7457c6c82b7aed3a2d4af Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 11 Nov 2021 12:40:39 +0000 Subject: [PATCH 08/14] Set a min width on the content area for smaller screens --- .../edit-site/src/components/list/style.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index 5d55d066d284df..972bda61d6effb 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -27,8 +27,20 @@ } } -.edit-site .edit-site-list .interface-interface-skeleton__content { - background: $white; +.edit-site { + .edit-site-list { + .interface-interface-skeleton__editor { + min-width: 100%; + + @include break-medium() { + min-width: 0; + } + } + + .interface-interface-skeleton__content { + background: $white; + } + } } .edit-site-list-main { From 5476b36f238e9946cee4971020c2a4aa3dead198 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 15 Nov 2021 13:53:01 +0000 Subject: [PATCH 09/14] Always hide the admin bar --- packages/edit-site/src/components/editor/style.scss | 8 ++++++++ packages/edit-site/src/style.scss | 7 +++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 711da70daede43..580268d00e9679 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -1,3 +1,11 @@ +html #wpadminbar { + display: none; +} + +html.wp-toolbar { + padding-top: 0; +} + .edit-site-editor__toggle-save-panel { z-index: z-index(".edit-site-editor__toggle-save-panel"); position: fixed !important; // Need to override the default relative positioning diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 05c6dc9250dc93..f0c58eb0db1a61 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -41,15 +41,14 @@ body.site-editor-php { @include break-small { bottom: 0; left: 0; - min-height: calc(100vh - #{$admin-bar-height-big}); + min-height: 100vh; position: absolute; right: 0; top: 0; } - // The WP header height changes at this breakpoint. - @include break-medium { - min-height: calc(100vh - #{$admin-bar-height}); + .interface-interface-skeleton { + top: 0; } // Todo: Remove this rule when edit site gets support From 053397273bc0b27b208d5221a772eff7e410f3bb Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 15 Nov 2021 16:48:54 +0000 Subject: [PATCH 10/14] Set the nav to closed on small screens --- packages/edit-site/src/components/list/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js index 640f4e5082c93f..e3beeb2cce83d0 100644 --- a/packages/edit-site/src/components/list/index.js +++ b/packages/edit-site/src/components/list/index.js @@ -3,6 +3,9 @@ */ import { InterfaceSkeleton } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; +import { + useViewportMatch, +} from '@wordpress/compose'; /** * Internal dependencies @@ -12,6 +15,9 @@ import NavigationSidebar from '../navigation-sidebar'; import Table from './table'; export default function List( { templateType } ) { + + const isDesktopViewport = useViewportMatch( 'medium' ); + return ( } drawer={ } From b90024608aaaa527205b141db19a7a7af130f993 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 15 Nov 2021 16:49:06 +0000 Subject: [PATCH 11/14] formatting --- packages/edit-site/src/components/list/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js index e3beeb2cce83d0..a21499012e3ac5 100644 --- a/packages/edit-site/src/components/list/index.js +++ b/packages/edit-site/src/components/list/index.js @@ -3,9 +3,7 @@ */ import { InterfaceSkeleton } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; -import { - useViewportMatch, -} from '@wordpress/compose'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -15,7 +13,6 @@ import NavigationSidebar from '../navigation-sidebar'; import Table from './table'; export default function List( { templateType } ) { - const isDesktopViewport = useViewportMatch( 'medium' ); return ( From 84878b5ecfbc11fbbe7d3ac42da1c1a162a0bbde Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 17 Nov 2021 15:15:22 +0800 Subject: [PATCH 12/14] Add action to remove template from the list --- .../edit-site/src/components/list/table.js | 48 ++++++++++++++++--- packages/edit-site/src/store/actions.js | 19 ++++---- packages/edit-site/src/store/test/actions.js | 29 ++++------- .../src/utils/is-template-removable.js | 13 +++++ 4 files changed, 73 insertions(+), 36 deletions(-) create mode 100644 packages/edit-site/src/utils/is-template-removable.js diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index eb3e87826c5510..87df26fb465494 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -1,19 +1,44 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { __, sprintf } from '@wordpress/i18n'; import { VisuallyHidden, - Button, FlexItem, __experimentalHStack as HStack, __experimentalHeading as Heading, + DropdownMenu, + MenuGroup, + MenuItem, } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { addQueryArgs } from '@wordpress/url'; +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import isTemplateRemovable from '../../utils/is-template-removable'; + +function Actions( { template, onClose } ) { + const { removeTemplate } = useDispatch( editSiteStore ); + + return ( + + { + removeTemplate( template ); + onClose(); + } } + > + { __( 'Remove template' ) } + + + ); +} + export default function Table( { templateType } ) { const { templates, isLoading, postType } = useSelect( ( select ) => { @@ -85,11 +110,20 @@ export default function Table( { templateType } ) { { template.theme } -