diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index eb1020fda98bbc..3a0a8557ec5c7b 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,50 @@ 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(); + + $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( + 'wp.domReady( function() { + wp.editSite.initializeList( "%s", "%s" ); + } );', + 'edit-site-editor', + $template_type + ) + ); +} + +/** + * Initialize the Gutenberg Site Editor. * * @since 7.2.0 * @@ -90,6 +142,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 +191,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..fad0b56a7f74b8 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -33,9 +33,9 @@ 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'; import URLQueryController from '../url-query-controller'; import InserterSidebar from '../secondary-sidebar/inserter-sidebar'; import ListViewSidebar from '../secondary-sidebar/list-view-sidebar'; @@ -113,11 +113,7 @@ function Editor( { initialSettings, onError } ) { // so that they can be selected with core/editor selectors in any editor. // This is needed because edit-site doesn't initialize with EditorProvider, // which internally uses updateEditorSettings as well. - const { - defaultTemplateTypes, - defaultTemplatePartAreas, - __experimentalNewMenuSidebar: newMenuSidebar, - } = settings; + const { defaultTemplateTypes, defaultTemplatePartAreas } = settings; useEffect( () => { updateEditorSettings( { defaultTemplateTypes, @@ -219,17 +215,17 @@ function Editor( { initialSettings, onError } ) { - ) - } secondarySidebar={ secondarySidebar() } sidebar={ sidebarIsOpened && ( ) } + drawer={ + + } header={
{ event.preventDefault(); @@ -47,7 +45,6 @@ export default function Header( { isListViewOpen, listViewShortcut, isLoaded, - newMenuSidebar, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, @@ -55,7 +52,6 @@ export default function Header( { getEditedPostId, isInserterOpened, isListViewOpened, - getSettings, } = select( editSiteStore ); const { getEditedEntityRecord } = select( coreStore ); const { __experimentalGetTemplateInfo: getTemplateInfo } = select( @@ -79,7 +75,6 @@ export default function Header( { listViewShortcut: getShortcutRepresentation( 'core/edit-site/toggle-list-view' ), - newMenuSidebar: getSettings().__experimentalNewMenuSidebar, }; }, [] ); @@ -110,12 +105,6 @@ export default function Header( { return (
- { newMenuSidebar && ( - - - - ) } -
- - ); -} - -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..a21499012e3ac5 --- /dev/null +++ b/packages/edit-site/src/components/list/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { InterfaceSkeleton } from '@wordpress/interface'; +import { __ } from '@wordpress/i18n'; +import { useViewportMatch } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import Header from './header'; +import NavigationSidebar from '../navigation-sidebar'; +import Table from './table'; + +export default function List( { templateType } ) { + const isDesktopViewport = useViewportMatch( 'medium' ); + + 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..972bda61d6effb --- /dev/null +++ b/packages/edit-site/src/components/list/style.scss @@ -0,0 +1,108 @@ +.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__editor { + min-width: 100%; + + @include break-medium() { + min-width: 0; + } + } + + .interface-interface-skeleton__content { + background: $white; + } + } +} + +.edit-site-list-main { + display: flex; + align-items: center; + justify-content: center; + 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; + + li { + display: flex; + align-items: center; + padding: $grid-unit-20; + box-sizing: border-box; + border-top: $border-width solid $gray-100; + margin: 0; + + @include break-medium() { + padding: $grid-unit-30 $grid-unit-40; + } + + .edit-site-list-table-column:nth-child(1) { + width: calc(60% - 36px); + + a { + display: block; + text-decoration: none; + font-weight: 500; + margin-bottom: $grid-unit-05; + } + } + + .edit-site-list-table-column:nth-child(2) { + width: calc(40% - 36px); + } + + .edit-site-list-table-column:nth-child(3) { + min-width: $button-size; + } + } + + 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 new file mode 100644 index 00000000000000..87df26fb465494 --- /dev/null +++ b/packages/edit-site/src/components/list/table.js @@ -0,0 +1,133 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { __, sprintf } from '@wordpress/i18n'; +import { + VisuallyHidden, + 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 ) => { + 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 ( +
    + + + { __( 'Template' ) } + + + { __( 'Added by' ) } + + + { __( 'Actions' ) } + + + + { templates.map( ( template ) => ( +
  • + + + + { template.title.rendered } + + { template.description } + + + + { template.theme } + + + { isTemplateRemovable( template ) && ( + + { ( { onClose } ) => ( + + ) } + + ) } + + +
    • + ) ) } +
+ ); +} 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..704d8d1da8d88e 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,48 @@ 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..e7f5bb5a5835ec 100644 --- a/packages/edit-site/src/components/template-details/index.js +++ b/packages/edit-site/src/components/template-details/index.js @@ -31,13 +31,7 @@ export default function TemplateDetails( { template, onClose } ) { select( editorStore ).__experimentalGetTemplateInfo( template ), [] ); - const newMenuSidebar = useSelect( - ( select ) => - select( editSiteStore ).getSettings().__experimentalNewMenuSidebar - ); - const { openNavigationPanelToMenu, revertTemplate } = useDispatch( - editSiteStore - ); + const { revertTemplate } = useDispatch( editSiteStore ); const templateSubMenu = useMemo( () => { if ( template?.type === 'wp_template' ) { @@ -53,11 +47,6 @@ export default function TemplateDetails( { template, onClose } ) { return null; } - const showTemplateInSidebar = () => { - onClose(); - openNavigationPanelToMenu( templateSubMenu.menu ); - }; - const revert = () => { revertTemplate( template ); onClose(); @@ -101,23 +90,11 @@ export default function TemplateDetails( { template, onClose } ) {