From 1f54593e01ce73a4f88eb1951a5e36ac7a424d9a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 May 2024 21:07:14 +0100 Subject: [PATCH 1/9] Editor: Unify the sidebar between the post and site editors --- .../edit-post/src/components/layout/index.js | 53 ++++++ .../edit-site/src/components/editor/index.js | 86 +++++++-- .../default-sidebar.js | 0 .../index.js} | 2 +- .../style.scss | 0 .../src/components/sidebar-edit-mode/index.js | 173 ------------------ .../sidebar-edit-mode/page-panels/index.js | 133 -------------- .../page-panels/page-summary.js | 61 ------ .../settings-header/index.js | 43 ----- .../settings-header/style.scss | 13 -- .../sidebar-edit-mode/template-panel/index.js | 134 -------------- .../template-panel/style.scss | 16 -- packages/edit-site/src/style.scss | 3 - .../components/post-transform-panel}/hooks.js | 43 ++--- .../components/post-transform-panel/index.js | 100 ++++++++++ .../editor/src/components/sidebar/index.js | 75 ++------ .../template-content-panel/index.js} | 13 +- 17 files changed, 271 insertions(+), 677 deletions(-) rename packages/edit-site/src/components/{sidebar-edit-mode => global-styles-sidebar}/default-sidebar.js (100%) rename packages/edit-site/src/components/{sidebar-edit-mode/global-styles-sidebar.js => global-styles-sidebar/index.js} (100%) rename packages/edit-site/src/components/{sidebar-edit-mode => global-styles-sidebar}/style.scss (100%) delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/index.js delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss rename packages/{edit-site/src/components/sidebar-edit-mode/template-panel => editor/src/components/post-transform-panel}/hooks.js (70%) create mode 100644 packages/editor/src/components/post-transform-panel/index.js rename packages/{edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js => editor/src/components/template-content-panel/index.js} (64%) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index bdf2451e27564..db721b012330f 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -35,6 +35,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; import { privateApis as commandsPrivateApis } from '@wordpress/commands'; import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; +import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies @@ -273,6 +274,57 @@ function Layout( { initialPost } ) { ); } + const { createSuccessNotice } = useDispatch( noticesStore ); + + const onActionPerformed = useCallback( + ( actionId, items ) => { + switch ( actionId ) { + case 'move-to-trash': + { + const postType = items[ 0 ].type; + document.location.href = addQueryArgs( 'edit.php', { + post_type: postType, + } ); + } + break; + case 'duplicate-post': + { + const newItem = items[ 0 ]; + const title = + typeof newItem.title === 'string' + ? newItem.title + : newItem.title?.rendered; + createSuccessNotice( + sprintf( + // translators: %s: Title of the created post e.g: "Post 1". + __( '"%s" successfully created.' ), + title + ), + { + type: 'snackbar', + id: 'duplicate-post-action', + actions: [ + { + label: __( 'Edit' ), + onClick: () => { + const postId = newItem.id; + document.location.href = + addQueryArgs( 'post.php', { + post: postId, + action: 'edit', + } ); + }, + }, + ], + } + ); + } + break; + } + }, + [ createSuccessNotice ] + ); + return ( <> @@ -363,6 +415,7 @@ function Layout( { initialPost } ) { { ! isDistractionFree && ( } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index dbe268fe6adb1..0f6cbc011c4ac 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -22,7 +22,6 @@ import { BlockBreadcrumb, BlockToolbar, store as blockEditorStore, - BlockInspector, } from '@wordpress/block-editor'; import { EditorKeyboardShortcutsRegister, @@ -36,14 +35,12 @@ import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; import { useState, useCallback } from '@wordpress/element'; +import { store as noticesStore } from '@wordpress/notices'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import { - SidebarComplementaryAreaFills, - SidebarInspectorFill, -} from '../sidebar-edit-mode'; import CodeEditor from '../code-editor'; import Header from '../header-edit-mode'; import WelcomeGuide from '../welcome-guide'; @@ -59,6 +56,8 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; +import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; +import GlobalStylesSidebar from '../global-styles-sidebar'; const { ExperimentalEditorProvider: EditorProvider, @@ -68,8 +67,9 @@ const { ComplementaryArea, interfaceStore, SavePublishPanels, + Sidebar, } = unlock( editorPrivateApis ); - +const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); const interfaceLabels = { @@ -112,14 +112,16 @@ export default function Editor( { isLoading, onClick } ) { showIconLabels, showBlockBreadcrumbs, postTypeLabel, + isEditingPage, + supportsGlobalStyles, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); - const { getEditedPostContext, getCanvasMode } = unlock( + const { getEditedPostContext, getCanvasMode, isPage } = unlock( select( editSiteStore ) ); const { __unstableGetEditorMode } = select( blockEditorStore ); const { getActiveComplementaryArea } = select( interfaceStore ); - const { getEntityRecord } = select( coreDataStore ); + const { getEntityRecord, getCurrentTheme } = select( coreDataStore ); const { isInserterOpened, isListViewOpened, @@ -149,6 +151,8 @@ export default function Editor( { isLoading, onClick } ) { showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), showIconLabels: get( 'core', 'showIconLabels' ), postTypeLabel: getPostTypeLabel(), + isEditingPage: isPage(), + supportsGlobalStyles: getCurrentTheme()?.is_block_theme, }; }, [] ); @@ -207,6 +211,59 @@ export default function Editor( { isLoading, onClick } ) { [ entitiesSavedStatesCallback ] ); + const { createSuccessNotice } = useDispatch( noticesStore ); + const history = useHistory(); + const onActionPerformed = useCallback( + ( actionId, items ) => { + switch ( actionId ) { + case 'move-to-trash': + { + history.push( { + path: '/' + items[ 0 ].type, + postId: undefined, + postType: undefined, + canvas: 'view', + } ); + } + break; + case 'duplicate-post': + { + const newItem = items[ 0 ]; + const _title = + typeof newItem.title === 'string' + ? newItem.title + : newItem.title?.rendered; + createSuccessNotice( + sprintf( + // translators: %s: Title of the created post e.g: "Post 1". + __( '"%s" successfully created.' ), + _title + ), + { + type: 'snackbar', + id: 'duplicate-post-action', + actions: [ + { + label: __( 'Edit' ), + onClick: () => { + history.push( { + path: undefined, + postId: newItem.id, + postType: newItem.type, + canvas: 'edit', + } ); + }, + }, + ], + } + ); + } + break; + } + }, + [ history, createSuccessNotice ] + ); + const isReady = ! isLoading && ( ( postWithTemplate && !! contextPost && !! editedPost ) || @@ -232,7 +289,6 @@ export default function Editor( { isLoading, onClick } ) { settings={ settings } useSubRegistry={ false } > - { isEditMode && } - - - { ! isLargeViewport && ( ) } @@ -349,6 +402,15 @@ export default function Editor( { isLoading, onClick } ) { secondarySidebar: secondarySidebarLabel, } } /> + + ) + } + /> + { supportsGlobalStyles && } ) } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js similarity index 100% rename from packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js rename to packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/index.js similarity index 100% rename from packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js rename to packages/edit-site/src/components/global-styles-sidebar/index.js index 3254f594632c4..436762d6bcf94 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -21,12 +21,12 @@ import { /** * Internal dependencies */ -import DefaultSidebar from './default-sidebar'; import { GlobalStylesUI } from '../global-styles'; import { store as editSiteStore } from '../../store'; import { GlobalStylesMenuSlot } from '../global-styles/ui'; import { unlock } from '../../lock-unlock'; import { store as coreStore } from '@wordpress/core-data'; +import DefaultSidebar from './default-sidebar'; const { interfaceStore } = unlock( editorPrivateApis ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss similarity index 100% rename from packages/edit-site/src/components/sidebar-edit-mode/style.scss rename to packages/edit-site/src/components/global-styles-sidebar/style.scss diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js deleted file mode 100644 index 8541f952abbf4..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/index.js +++ /dev/null @@ -1,173 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createSlotFill, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; -import { isRTL, __ } from '@wordpress/i18n'; -import { drawerLeft, drawerRight } from '@wordpress/icons'; -import { useCallback, useContext, useEffect, useRef } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { store as coreStore } from '@wordpress/core-data'; -import { - PageAttributesPanel, - PostDiscussionPanel, - PostLastRevisionPanel, - PostTaxonomiesPanel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import DefaultSidebar from './default-sidebar'; -import GlobalStylesSidebar from './global-styles-sidebar'; -import SettingsHeader from './settings-header'; -import PagePanels from './page-panels'; -import TemplatePanel from './template-panel'; -import { store as editSiteStore } from '../../store'; -import { unlock } from '../../lock-unlock'; - -const { Tabs } = unlock( componentsPrivateApis ); -const { interfaceStore, useAutoSwitchEditorSidebars, PatternOverridesPanel } = - unlock( editorPrivateApis ); -const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( - 'EditSiteSidebarInspector' -); -export const SidebarInspectorFill = InspectorFill; - -const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => { - const tabListRef = useRef( null ); - // Because `DefaultSidebar` renders a `ComplementaryArea`, we - // need to forward the `Tabs` context so it can be passed through the - // underlying slot/fill. - const tabsContextValue = useContext( Tabs.Context ); - - // This effect addresses a race condition caused by tabbing from the last - // block in the editor into the settings sidebar. Without this effect, the - // selected tab and browser focus can become separated in an unexpected way. - // (e.g the "block" tab is focused, but the "post" tab is selected). - useEffect( () => { - const tabsElements = Array.from( - tabListRef.current?.querySelectorAll( '[role="tab"]' ) || [] - ); - const selectedTabElement = tabsElements.find( - // We are purposefully using a custom `data-tab-id` attribute here - // because we don't want rely on any assumptions about `Tabs` - // component internals. - ( element ) => element.getAttribute( 'data-tab-id' ) === tabName - ); - const activeElement = selectedTabElement?.ownerDocument.activeElement; - const tabsHasFocus = tabsElements.some( ( element ) => { - return activeElement && activeElement.id === element.id; - } ); - if ( - tabsHasFocus && - selectedTabElement && - selectedTabElement.id !== activeElement?.id - ) { - selectedTabElement?.focus(); - } - }, [ tabName ] ); - - return ( - <> - - - - } - headerClassName="edit-site-sidebar-edit-mode__panel-tabs" - // This classname is added so we can apply a corrective negative - // margin to the panel. - // see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049 - className="edit-site-sidebar__panel" - isActiveByDefault - > - - - { isEditingPage ? : } - - - - - - - - - - - - { supportsGlobalStyles && } - - ); -}; - -export function SidebarComplementaryAreaFills() { - useAutoSwitchEditorSidebars(); - const { tabName, supportsGlobalStyles, isEditingPage } = useSelect( - ( select ) => { - const sidebar = - select( interfaceStore ).getActiveComplementaryArea( 'core' ); - - const _isEditorSidebarOpened = [ - 'edit-post/block', - 'edit-post/document', - ].includes( sidebar ); - let _tabName = sidebar; - if ( ! _isEditorSidebarOpened ) { - _tabName = !! select( - blockEditorStore - ).getBlockSelectionStart() - ? 'edit-post/block' - : 'edit-post/document'; - } - - return { - tabName: _tabName, - supportsGlobalStyles: - select( coreStore ).getCurrentTheme()?.is_block_theme, - isEditingPage: select( editSiteStore ).isPage(), - }; - }, - [] - ); - const { enableComplementaryArea } = useDispatch( interfaceStore ); - - // `newSelectedTabId` could technically be falsey if no tab is selected (i.e. - // the initial render) or when we don't want a tab displayed (i.e. the - // sidebar is closed). These cases should both be covered by the `!!` check - // below, so we shouldn't need any additional falsey handling. - const onTabSelect = useCallback( - ( newSelectedTabId ) => { - if ( !! newSelectedTabId ) { - enableComplementaryArea( 'core', newSelectedTabId ); - } - }, - [ enableComplementaryArea ] - ); - - return ( - - - - ); -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js deleted file mode 100644 index f4fc2af178e08..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js +++ /dev/null @@ -1,133 +0,0 @@ -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { - PluginDocumentSettingPanel, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useCallback } from '@wordpress/element'; -import { store as noticesStore } from '@wordpress/notices'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; -import PageContent from './page-content'; -import PageSummary from './page-summary'; - -import { unlock } from '../../../lock-unlock'; - -const { PostCardPanel, PostActions } = unlock( editorPrivateApis ); -const { useHistory } = unlock( routerPrivateApis ); - -export default function PagePanels() { - const { id, type, hasResolved, status, date, password, renderingMode } = - useSelect( ( select ) => { - const { getEditedPostContext } = select( editSiteStore ); - const { getEditedEntityRecord, hasFinishedResolution } = - select( coreStore ); - const { getRenderingMode } = select( editorStore ); - const context = getEditedPostContext(); - const queryArgs = [ 'postType', context.postType, context.postId ]; - const page = getEditedEntityRecord( ...queryArgs ); - return { - hasResolved: hasFinishedResolution( - 'getEditedEntityRecord', - queryArgs - ), - id: page?.id, - type: page?.type, - status: page?.status, - date: page?.date, - password: page?.password, - renderingMode: getRenderingMode(), - }; - }, [] ); - const { createSuccessNotice } = useDispatch( noticesStore ); - const history = useHistory(); - const onActionPerformed = useCallback( - ( actionId, items ) => { - switch ( actionId ) { - case 'move-to-trash': - { - history.push( { - path: '/' + items[ 0 ].type, - postId: undefined, - postType: undefined, - canvas: 'view', - } ); - } - break; - case 'duplicate-post': - { - const newItem = items[ 0 ]; - const title = - typeof newItem.title === 'string' - ? newItem.title - : newItem.title?.rendered; - createSuccessNotice( - sprintf( - // translators: %s: Title of the created post e.g: "Post 1". - __( '"%s" successfully created.' ), - title - ), - { - type: 'snackbar', - id: 'duplicate-post-action', - actions: [ - { - label: __( 'Edit' ), - onClick: () => { - history.push( { - path: undefined, - postId: newItem.id, - postType: newItem.type, - canvas: 'edit', - } ); - }, - }, - ], - } - ); - } - break; - } - }, - [ history, createSuccessNotice ] - ); - - if ( ! hasResolved ) { - return null; - } - - return ( - <> - - } - /> - - - - - { renderingMode !== 'post-only' && ( - - - - ) } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js deleted file mode 100644 index 0830ff8364c8a..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalVStack as VStack } from '@wordpress/components'; -import { - PluginPostStatusInfo, - PostAuthorPanel, - PostURLPanel, - PostSchedulePanel, - PostTemplatePanel, - PostFeaturedImagePanel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { - PrivatePostExcerptPanel, - PostStatus, - PostContentInformation, - PostLastEditedPanel, -} = unlock( editorPrivateApis ); - -export default function PageSummary() { - return ( - - - { ( fills ) => ( - <> - - - - - - - - - - - - - - - - { fills } - - ) } - - - ); -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js deleted file mode 100644 index 054952077a491..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as componentsPrivateApis } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { store as editorStore } from '@wordpress/editor'; -import { forwardRef } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { Tabs } = unlock( componentsPrivateApis ); - -const SettingsHeader = ( _, ref ) => { - const postTypeLabel = useSelect( - ( select ) => select( editorStore ).getPostTypeLabel(), - [] - ); - - return ( - - - { postTypeLabel } - - - { __( 'Block' ) } - - - ); -}; - -export default forwardRef( SettingsHeader ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss deleted file mode 100644 index c615751952616..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss +++ /dev/null @@ -1,13 +0,0 @@ -.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs { - padding-left: 0; - - .components-button.has-icon { - padding: 0; - min-width: $icon-size; - height: $icon-size; - - @include break-medium() { - display: flex; - } - } -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js deleted file mode 100644 index f0abc9aed09d0..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { PanelBody, PanelRow } from '@wordpress/components'; -import { - PluginDocumentSettingPanel, - privateApis as editorPrivateApis, - store as editorStore, -} from '@wordpress/editor'; -import { store as coreStore } from '@wordpress/core-data'; -import { __ } from '@wordpress/i18n'; -import { useAsyncList } from '@wordpress/compose'; -import { serialize } from '@wordpress/blocks'; -import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; -import TemplateActions from '../../template-actions'; -import PluginTemplateSettingPanel from '../../plugin-template-setting-panel'; -import { useAvailablePatterns } from './hooks'; -import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants'; -import { unlock } from '../../../lock-unlock'; - -const { PostCardPanel } = unlock( editorPrivateApis ); -const { useHistory } = unlock( routerPrivateApis ); - -function TemplatesList( { availableTemplates, onSelect } ) { - const shownTemplates = useAsyncList( availableTemplates ); - if ( ! availableTemplates || availableTemplates?.length === 0 ) { - return null; - } - - return ( - - ); -} - -const POST_TYPE_PATH = { - wp_template: '/wp_template', - wp_template_part: '/patterns', -}; - -export default function TemplatePanel() { - const { title, description, record, postType, postId } = useSelect( - ( select ) => { - const { getEditedPostType, getEditedPostId } = - select( editSiteStore ); - const { getEditedEntityRecord } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); - - const type = getEditedPostType(); - const _postId = getEditedPostId(); - const _record = getEditedEntityRecord( 'postType', type, _postId ); - const info = getTemplateInfo( _record ); - - return { - title: info.title, - description: info.description, - icon: info.icon, - record: _record, - postType: type, - postId: _postId, - }; - }, - [] - ); - const history = useHistory(); - const availablePatterns = useAvailablePatterns( record ); - const { editEntityRecord } = useDispatch( coreStore ); - - if ( ! title && ! description ) { - return null; - } - - const onTemplateSelect = async ( selectedTemplate ) => { - await editEntityRecord( 'postType', postType, postId, { - blocks: selectedTemplate.blocks, - content: serialize( selectedTemplate.blocks ), - } ); - }; - - return ( - <> - { - history.push( { - path: POST_TYPE_PATH[ postType ], - } ); - } } - /> - } - /> - - - { availablePatterns?.length > 0 && ( - - -

- { __( - 'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic? - ) } -

- - - - - ) } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss deleted file mode 100644 index 15a0541672b1d..0000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss +++ /dev/null @@ -1,16 +0,0 @@ -.edit-site-template-card { - &__actions { - line-height: 0; - > .components-button.is-small.has-icon { - padding: 0; - min-width: auto; - } - flex-shrink: 0; - } -} - - -.edit-site-template-panel .block-editor-block-preview__container { - border-radius: 2px; - box-shadow: none; -} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index f2b8ebd559f2e..ca300a8d05c27 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -12,9 +12,6 @@ @import "./components/page-patterns/style.scss"; @import "./components/page-templates/style.scss"; @import "./components/table/style.scss"; -@import "./components/sidebar-edit-mode/style.scss"; -@import "./components/sidebar-edit-mode/settings-header/style.scss"; -@import "./components/sidebar-edit-mode/template-panel/style.scss"; @import "./components/editor/style.scss"; @import "./components/create-template-part-modal/style.scss"; @import "./components/welcome-guide/style.scss"; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js b/packages/editor/src/components/post-transform-panel/hooks.js similarity index 70% rename from packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js rename to packages/editor/src/components/post-transform-panel/hooks.js index 128a74da39070..6ce89a1b67a2d 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js +++ b/packages/editor/src/components/post-transform-panel/hooks.js @@ -5,16 +5,16 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { parse } from '@wordpress/blocks'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../../store'; -import { - EXCLUDED_PATTERN_SOURCES, - PATTERN_TYPES, -} from '../../../utils/constants'; -import { unlock } from '../../../lock-unlock'; +import { unlock } from '../../lock-unlock'; + +const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } = + unlock( patternsPrivateApis ); function injectThemeAttributeInBlockTemplateContent( block, @@ -67,7 +67,7 @@ function filterPatterns( patterns, template ) { } ); } -function preparePatterns( patterns, template, currentThemeStylesheet ) { +function preparePatterns( patterns, currentThemeStylesheet ) { return patterns.map( ( pattern ) => ( { ...pattern, keywords: pattern.keywords || [], @@ -84,31 +84,22 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) { } export function useAvailablePatterns( template ) { - const { blockPatterns, restBlockPatterns, currentThemeStylesheet } = - useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); + const { blockPatterns, currentThemeStylesheet } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); - return { - blockPatterns: - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns, - restBlockPatterns: select( coreStore ).getBlockPatterns(), - currentThemeStylesheet: - select( coreStore ).getCurrentTheme().stylesheet, - }; - }, [] ); + return { + blockPatterns: getSettings().__experimentalBlockPatterns, + currentThemeStylesheet: + select( coreStore ).getCurrentTheme().stylesheet, + }; + }, [] ); return useMemo( () => { - const mergedPatterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ]; - const filteredPatterns = filterPatterns( mergedPatterns, template ); + const filteredPatterns = filterPatterns( blockPatterns, template ); return preparePatterns( filteredPatterns, template, currentThemeStylesheet ); - }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] ); + }, [ blockPatterns, template, currentThemeStylesheet ] ); } diff --git a/packages/editor/src/components/post-transform-panel/index.js b/packages/editor/src/components/post-transform-panel/index.js new file mode 100644 index 0000000000000..f70dc0f4f48cb --- /dev/null +++ b/packages/editor/src/components/post-transform-panel/index.js @@ -0,0 +1,100 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { PanelBody, PanelRow } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useAsyncList } from '@wordpress/compose'; +import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; +import { serialize } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import { useAvailablePatterns } from './hooks'; +import { + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, +} from '../../store/constants'; + +function TemplatesList( { availableTemplates, onSelect } ) { + const shownTemplates = useAsyncList( availableTemplates ); + if ( ! availableTemplates || availableTemplates?.length === 0 ) { + return null; + } + + return ( + + ); +} + +function PostTransform() { + const { record, postType, postId } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const type = getCurrentPostType(); + const id = getCurrentPostId(); + return { + postType: type, + postId: id, + record: getEditedEntityRecord( 'postType', type, id ), + }; + }, [] ); + const { editEntityRecord } = useDispatch( coreStore ); + const availablePatterns = useAvailablePatterns( record ); + const onTemplateSelect = async ( selectedTemplate ) => { + await editEntityRecord( 'postType', postType, postId, { + blocks: selectedTemplate.blocks, + content: serialize( selectedTemplate.blocks ), + } ); + }; + + if ( ! availablePatterns?.length ) { + return null; + } + + return ( + + +

+ { __( + 'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic? + ) } +

+ + + + + ); +} + +export default function PostTransformPanel() { + const { postType } = useSelect( ( select ) => { + const { getCurrentPostType } = select( editorStore ); + return { + postType: getCurrentPostType(), + }; + }, [] ); + + if ( + [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType ) + ) { + return null; + } + + return ; +} diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index 4aa4d03569e11..4987e4dde156d 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -13,11 +13,9 @@ import { useEffect, useRef, } from '@wordpress/element'; -import { isRTL, __, sprintf } from '@wordpress/i18n'; +import { isRTL, __ } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { addQueryArgs } from '@wordpress/url'; -import { store as noticesStore } from '@wordpress/notices'; import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { store as interfaceStore } from '@wordpress/interface'; @@ -34,7 +32,9 @@ import PostDiscussionPanel from '../post-discussion/panel'; import PostLastRevisionPanel from '../post-last-revision/panel'; import PostSummary from './post-summary'; import PostTaxonomiesPanel from '../post-taxonomies/panel'; +import PostTransformPanel from '../post-transform-panel'; import SidebarHeader from './header'; +import TemplateContentPanel from '../template-content-panel'; import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars'; import { sidebars } from './constants'; import { unlock } from '../../lock-unlock'; @@ -51,6 +51,8 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate, + renderingMode, + onActionPerformed, extraPanels, } ) => { const tabListRef = useRef( null ); @@ -85,56 +87,6 @@ const SidebarContent = ( { selectedTabElement?.focus(); } }, [ tabName ] ); - const { createSuccessNotice } = useDispatch( noticesStore ); - - const onActionPerformed = useCallback( - ( actionId, items ) => { - switch ( actionId ) { - case 'move-to-trash': - { - const postType = items[ 0 ].type; - document.location.href = addQueryArgs( 'edit.php', { - post_type: postType, - } ); - } - break; - case 'duplicate-post': - { - const newItem = items[ 0 ]; - const title = - typeof newItem.title === 'string' - ? newItem.title - : newItem.title?.rendered; - createSuccessNotice( - sprintf( - // translators: %s: Title of the created post e.g: "Post 1". - __( '"%s" successfully created.' ), - title - ), - { - type: 'snackbar', - id: 'duplicate-post-action', - actions: [ - { - label: __( 'Edit' ), - onClick: () => { - const postId = newItem.id; - document.location.href = - addQueryArgs( 'post.php', { - post: postId, - action: 'edit', - } ); - }, - }, - ], - } - ); - } - break; - } - }, - [ createSuccessNotice ] - ); return ( { ! isEditingTemplate && } + { renderingMode !== 'post-only' && ( + + ) } + @@ -182,10 +138,10 @@ const SidebarContent = ( { ); }; -const Sidebar = ( { extraPanels } ) => { +const Sidebar = ( { extraPanels, onActionPerformed } ) => { useAutoSwitchEditorSidebars(); - const { tabName, keyboardShortcut, isEditingTemplate } = useSelect( - ( select ) => { + const { tabName, keyboardShortcut, isEditingTemplate, renderingMode } = + useSelect( ( select ) => { const shortcut = select( keyboardShortcutsStore ).getShortcutRepresentation( 'core/editor/toggle-sidebar' ); @@ -211,10 +167,9 @@ const Sidebar = ( { extraPanels } ) => { isEditingTemplate: select( editorStore ).getCurrentPostType() === 'wp_template', + renderingMode: select( editorStore ).getRenderingMode(), }; - }, - [] - ); + }, [] ); const { enableComplementaryArea } = useDispatch( interfaceStore ); @@ -237,6 +192,8 @@ const Sidebar = ( { extraPanels } ) => { tabName={ tabName } keyboardShortcut={ keyboardShortcut } isEditingTemplate={ isEditingTemplate } + renderingMode={ renderingMode } + onActionPerformed={ onActionPerformed } extraPanels={ extraPanels } /> diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/editor/src/components/template-content-panel/index.js similarity index 64% rename from packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js rename to packages/editor/src/components/template-content-panel/index.js index 18a742add41b2..e0f131f27feb5 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js +++ b/packages/editor/src/components/template-content-panel/index.js @@ -6,11 +6,13 @@ import { store as blockEditorStore, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { unlock } from '../../../lock-unlock'; +import { unlock } from '../../lock-unlock'; const { BlockQuickNavigation } = unlock( blockEditorPrivateApis ); @@ -20,10 +22,15 @@ const PAGE_CONTENT_BLOCKS = [ 'core/post-title', ]; -export default function PageContent() { +export default function TemplateContentPanel() { const clientIds = useSelect( ( select ) => { const { getBlocksByName } = select( blockEditorStore ); return getBlocksByName( PAGE_CONTENT_BLOCKS ); }, [] ); - return ; + + return ( + + + + ); } From 29fb78a523762024a73190019806e0c9512c555b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 May 2024 09:22:18 +0100 Subject: [PATCH 2/9] Fix post transform panel --- .../components/post-transform-panel/hooks.js | 31 ++++++++++++------- .../components/post-transform-panel/index.js | 3 +- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/components/post-transform-panel/hooks.js b/packages/editor/src/components/post-transform-panel/hooks.js index 6ce89a1b67a2d..0f1ef74f0efff 100644 --- a/packages/editor/src/components/post-transform-panel/hooks.js +++ b/packages/editor/src/components/post-transform-panel/hooks.js @@ -5,13 +5,13 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { parse } from '@wordpress/blocks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } = unlock( patternsPrivateApis ); @@ -84,22 +84,31 @@ function preparePatterns( patterns, currentThemeStylesheet ) { } export function useAvailablePatterns( template ) { - const { blockPatterns, currentThemeStylesheet } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); + const { blockPatterns, restBlockPatterns, currentThemeStylesheet } = + useSelect( ( select ) => { + const { getEditorSettings } = select( editorStore ); + const settings = getEditorSettings(); - return { - blockPatterns: getSettings().__experimentalBlockPatterns, - currentThemeStylesheet: - select( coreStore ).getCurrentTheme().stylesheet, - }; - }, [] ); + return { + blockPatterns: + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns, + restBlockPatterns: select( coreStore ).getBlockPatterns(), + currentThemeStylesheet: + select( coreStore ).getCurrentTheme().stylesheet, + }; + }, [] ); return useMemo( () => { - const filteredPatterns = filterPatterns( blockPatterns, template ); + const mergedPatterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ]; + const filteredPatterns = filterPatterns( mergedPatterns, template ); return preparePatterns( filteredPatterns, template, currentThemeStylesheet ); - }, [ blockPatterns, template, currentThemeStylesheet ] ); + }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] ); } diff --git a/packages/editor/src/components/post-transform-panel/index.js b/packages/editor/src/components/post-transform-panel/index.js index f70dc0f4f48cb..5ed7d34909f8b 100644 --- a/packages/editor/src/components/post-transform-panel/index.js +++ b/packages/editor/src/components/post-transform-panel/index.js @@ -56,7 +56,6 @@ function PostTransform() { content: serialize( selectedTemplate.blocks ), } ); }; - if ( ! availablePatterns?.length ) { return null; } @@ -91,7 +90,7 @@ export default function PostTransformPanel() { }, [] ); if ( - [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType ) + ! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType ) ) { return null; } From 07385d87711eed76f88c81ec759be6bfe0a028ef Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 May 2024 09:37:45 +0100 Subject: [PATCH 3/9] Fix global styles sidebar CSS --- packages/edit-site/src/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index ca300a8d05c27..42b942bca4f01 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -6,6 +6,7 @@ @import "./components/code-editor/style.scss"; @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; +@import "./components/global-styles-sidebar/style.scss"; @import "./components/header-edit-mode/style.scss"; @import "./components/page/style.scss"; @import "./components/page-pages/style.scss"; From 3e6ebfe71840a6f6e2dc42ab8fe9faa52261a6a5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 May 2024 15:18:54 +0100 Subject: [PATCH 4/9] Hide summary and trash buttons --- .../post-type-support-check/index.js | 2 +- .../editor/src/components/sidebar/index.js | 27 ++++++++++++------- .../src/components/sidebar/post-summary.js | 9 ------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js index c716593f458f1..613fda8eb82da 100644 --- a/packages/editor/src/components/post-type-support-check/index.js +++ b/packages/editor/src/components/post-type-support-check/index.js @@ -27,7 +27,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) { const { getPostType } = select( coreStore ); return getPostType( getEditedPostAttribute( 'type' ) ); }, [] ); - let isSupported = true; + let isSupported = !! postType; if ( postType ) { isSupported = ( Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ] diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index 4987e4dde156d..7c1f914c725c8 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -39,6 +39,11 @@ import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-side import { sidebars } from './constants'; import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; +import { + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../store/constants'; const { Tabs } = unlock( componentsPrivateApis ); @@ -50,10 +55,10 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { const SidebarContent = ( { tabName, keyboardShortcut, - isEditingTemplate, renderingMode, onActionPerformed, extraPanels, + showSummary = true, } ) => { const tabListRef = useRef( null ); // Because `PluginSidebar` renders a `ComplementaryArea`, we @@ -117,7 +122,7 @@ const SidebarContent = ( { /> } /> - { ! isEditingTemplate && } + { showSummary && } { renderingMode !== 'post-only' && ( @@ -140,8 +145,8 @@ const SidebarContent = ( { const Sidebar = ( { extraPanels, onActionPerformed } ) => { useAutoSwitchEditorSidebars(); - const { tabName, keyboardShortcut, isEditingTemplate, renderingMode } = - useSelect( ( select ) => { + const { tabName, keyboardShortcut, showSummary, renderingMode } = useSelect( + ( select ) => { const shortcut = select( keyboardShortcutsStore ).getShortcutRepresentation( 'core/editor/toggle-sidebar' ); @@ -164,12 +169,16 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => { return { tabName: _tabName, keyboardShortcut: shortcut, - isEditingTemplate: - select( editorStore ).getCurrentPostType() === - 'wp_template', + showSummary: ! [ + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + NAVIGATION_POST_TYPE, + ].includes( select( editorStore ).getCurrentPostType() ), renderingMode: select( editorStore ).getRenderingMode(), }; - }, [] ); + }, + [] + ); const { enableComplementaryArea } = useDispatch( interfaceStore ); @@ -191,7 +200,7 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => { { fills } - - - ) } From 9e72ea9ddec13fa18a43b8c0b0e468b14092c7eb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 May 2024 15:31:55 +0100 Subject: [PATCH 5/9] Remove useless unit test --- .../src/components/post-slug/test/check.js | 17 ----------------- .../src/components/post-slug/test/index.js | 6 +++++- 2 files changed, 5 insertions(+), 18 deletions(-) delete mode 100644 packages/editor/src/components/post-slug/test/check.js diff --git a/packages/editor/src/components/post-slug/test/check.js b/packages/editor/src/components/post-slug/test/check.js deleted file mode 100644 index 5b5b4ce8a440f..0000000000000 --- a/packages/editor/src/components/post-slug/test/check.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * External dependencies - */ -import { render, screen } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import PostSlugCheck from '../check'; - -describe( 'PostSlugCheck', () => { - it( 'should render control', () => { - render( slug ); - - expect( screen.getByText( 'slug' ) ).toBeVisible(); - } ); -} ); diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js index 81f254ba6363f..fb40055111b77 100644 --- a/packages/editor/src/components/post-slug/test/index.js +++ b/packages/editor/src/components/post-slug/test/index.js @@ -26,7 +26,11 @@ describe( 'PostSlug', () => { useSelect.mockImplementation( ( mapSelect ) => mapSelect( () => ( { - getPostType: () => null, + getPostType: () => ( { + supports: { + slug: true, + }, + } ), getEditedPostAttribute: () => 'post', getEditedPostSlug: () => '1', } ) ) From 9b6863828c5958b6aefca4ab51a178ae47241995 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 May 2024 16:08:39 +0100 Subject: [PATCH 6/9] Fix unit tests --- .../editor/src/components/page-attributes/test/order.js | 6 +++++- .../editor/src/components/post-last-revision/test/check.js | 6 +++++- .../src/components/post-type-support-check/test/index.js | 4 ++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/page-attributes/test/order.js b/packages/editor/src/components/page-attributes/test/order.js index 245cbbb8fc71d..fcb836bbfef0d 100644 --- a/packages/editor/src/components/page-attributes/test/order.js +++ b/packages/editor/src/components/page-attributes/test/order.js @@ -22,7 +22,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( { function setupDataMock( order = 0 ) { useSelect.mockImplementation( ( mapSelect ) => mapSelect( () => ( { - getPostType: () => null, + getPostType: () => ( { + supports: { + 'page-attributes': true, + }, + } ), getEditedPostAttribute: ( attr ) => { switch ( attr ) { case 'menu_order': diff --git a/packages/editor/src/components/post-last-revision/test/check.js b/packages/editor/src/components/post-last-revision/test/check.js index 6e5210e8ed6bf..0c3e680992a2e 100644 --- a/packages/editor/src/components/post-last-revision/test/check.js +++ b/packages/editor/src/components/post-last-revision/test/check.js @@ -21,7 +21,11 @@ function setupDataMock( id, count ) { getCurrentPostLastRevisionId: () => id, getCurrentPostRevisionsCount: () => count, getEditedPostAttribute: () => null, - getPostType: () => null, + getPostType: () => ( { + supports: { + revisions: true, + }, + } ), } ) ) ); } diff --git a/packages/editor/src/components/post-type-support-check/test/index.js b/packages/editor/src/components/post-type-support-check/test/index.js index 8acef8abacb6b..71b9f083a74a2 100644 --- a/packages/editor/src/components/post-type-support-check/test/index.js +++ b/packages/editor/src/components/post-type-support-check/test/index.js @@ -29,7 +29,7 @@ function setupUseSelectMock( postType ) { } describe( 'PostTypeSupportCheck', () => { - it( 'renders its children when post type is not known', () => { + it( 'does not render its children when post type is not known', () => { setupUseSelectMock( undefined ); const { container } = render( @@ -38,7 +38,7 @@ describe( 'PostTypeSupportCheck', () => { ); - expect( container ).toHaveTextContent( 'Supported' ); + expect( container ).not.toHaveTextContent( 'Supported' ); } ); it( 'does not render its children when post type is known and not supports', () => { From 949f6a1aa3846bf79d3d52b34f513fb4d693c7c1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 May 2024 17:22:17 +0100 Subject: [PATCH 7/9] Fix e2e tests --- .../specs/editor/various/change-detection.spec.js | 14 ++++++-------- test/e2e/specs/site-editor/template-revert.spec.js | 7 +++++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js index 4f539a92269e6..36496faecc3ad 100644 --- a/test/e2e/specs/editor/various/change-detection.spec.js +++ b/test/e2e/specs/editor/various/change-detection.spec.js @@ -411,19 +411,17 @@ test.describe( 'Change detection', () => { await editor.openDocumentSettingsSidebar(); await page .getByRole( 'region', { name: 'Editor settings' } ) - .getByRole( 'button', { name: 'Move to trash' } ) + .getByRole( 'button', { name: 'Actions' } ) + .click(); + await page + .getByRole( 'menu' ) + .getByRole( 'menuitem', { name: 'Move to Trash' } ) .click(); await page .getByRole( 'dialog' ) - .getByRole( 'button', { name: 'Move to trash' } ) + .getByRole( 'button', { name: 'Delete' } ) .click(); - await expect( - page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'saved' } ) - ).toBeDisabled(); - await expect( page ).toHaveURL( '/wp-admin/edit.php?post_type=post' ); } ); diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js index 2af2a90eae119..5c19ed5a39e00 100644 --- a/test/e2e/specs/site-editor/template-revert.spec.js +++ b/test/e2e/specs/site-editor/template-revert.spec.js @@ -56,7 +56,7 @@ test.describe( 'Template Revert', () => { page.locator( 'role=region[name="Editor settings"i] >> role=button[name="Actions"i]' ) - ).toBeHidden(); + ).toBeDisabled(); } ); test( 'should show the original content after revert', async ( { @@ -179,6 +179,10 @@ test.describe( 'Template Revert', () => { await editor.saveSiteEditorEntities( { isOnlyCurrentEntityDirty: true, } ); + await page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .getByText( /(updated|published)\./ ) + .click(); const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent(); @@ -190,7 +194,6 @@ test.describe( 'Template Revert', () => { await editor.saveSiteEditorEntities( { isOnlyCurrentEntityDirty: true, } ); - await admin.visitSiteEditor(); const contentAfter = From 22e2ed00d754a54540c4f76c163a5a68e4157d14 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 10:45:03 +0100 Subject: [PATCH 8/9] Restore PostTrash button --- .../editor/src/components/sidebar/index.js | 2 + .../src/components/sidebar/post-summary.js | 69 ++++++++----------- 2 files changed, 32 insertions(+), 39 deletions(-) diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index 7c1f914c725c8..fd79551741c5f 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -41,6 +41,7 @@ import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; import { NAVIGATION_POST_TYPE, + PATTERN_POST_TYPE, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE, } from '../../store/constants'; @@ -173,6 +174,7 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => { TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE, NAVIGATION_POST_TYPE, + PATTERN_POST_TYPE, ].includes( select( editorStore ).getCurrentPostType() ), renderingMode: select( editorStore ).getRenderingMode(), }; diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js index ad775f4af9f27..d79bc9161024c 100644 --- a/packages/editor/src/components/sidebar/post-summary.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { __experimentalVStack as VStack, + __experimentalHStack as HStack, PanelBody, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -24,6 +25,7 @@ import PostStatusPanel from '../post-status'; import PostStickyPanel from '../post-sticky'; import PostSyncStatus from '../post-sync-status'; import PostTemplatePanel from '../post-template/panel'; +import PostTrashPanel from '../post-trash/panel'; import PostURLPanel from '../post-url/panel'; import { store as editorStore } from '../../store'; @@ -33,30 +35,16 @@ import { store as editorStore } from '../../store'; const PANEL_NAME = 'post-status'; export default function PostSummary() { - const { isOpened, isRemoved, showPostContentPanels } = useSelect( - ( select ) => { - // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do - // not use isEditorPanelEnabled since this panel should not be disabled through the UI. - const { - isEditorPanelRemoved, - isEditorPanelOpened, - getCurrentPostType, - } = select( editorStore ); - const postType = getCurrentPostType(); - return { - isRemoved: isEditorPanelRemoved( PANEL_NAME ), - isOpened: isEditorPanelOpened( PANEL_NAME ), - // Post excerpt panel is rendered in different place depending on the post type. - // So we cannot make this check inside the PostExcerpt component based on the current edited entity. - showPostContentPanels: ! [ - 'wp_template', - 'wp_template_part', - 'wp_block', - ].includes( postType ), - }; - }, - [] - ); + const { isOpened, isRemoved } = useSelect( ( select ) => { + // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do + // not use isEditorPanelEnabled since this panel should not be disabled through the UI. + const { isEditorPanelRemoved, isEditorPanelOpened } = + select( editorStore ); + return { + isRemoved: isEditorPanelRemoved( PANEL_NAME ), + isOpened: isEditorPanelOpened( PANEL_NAME ), + }; + }, [] ); const { toggleEditorPanelOpened } = useDispatch( editorStore ); if ( isRemoved ) { @@ -72,22 +60,18 @@ export default function PostSummary() { { ( fills ) => ( <> - { showPostContentPanels && ( - - - - - - - + + + + + + - ) } + { fills } + + + ) } From 12d2b9c8ccce9ab315c1df0c28cc38d783406a51 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 13 May 2024 11:19:00 +0100 Subject: [PATCH 9/9] Restore PostSummary for pattern --- .../editor/src/components/sidebar/index.js | 2 - .../src/components/sidebar/post-summary.js | 58 ++++++++++++------- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index fd79551741c5f..7c1f914c725c8 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -41,7 +41,6 @@ import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; import { NAVIGATION_POST_TYPE, - PATTERN_POST_TYPE, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE, } from '../../store/constants'; @@ -174,7 +173,6 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => { TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE, NAVIGATION_POST_TYPE, - PATTERN_POST_TYPE, ].includes( select( editorStore ).getCurrentPostType() ), renderingMode: select( editorStore ).getRenderingMode(), }; diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js index d79bc9161024c..8c05eafeba9da 100644 --- a/packages/editor/src/components/sidebar/post-summary.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -3,8 +3,8 @@ */ import { __ } from '@wordpress/i18n'; import { - __experimentalVStack as VStack, __experimentalHStack as HStack, + __experimentalVStack as VStack, PanelBody, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -28,6 +28,7 @@ import PostTemplatePanel from '../post-template/panel'; import PostTrashPanel from '../post-trash/panel'; import PostURLPanel from '../post-url/panel'; import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; /** * Module Constants @@ -35,14 +36,21 @@ import { store as editorStore } from '../../store'; const PANEL_NAME = 'post-status'; export default function PostSummary() { - const { isOpened, isRemoved } = useSelect( ( select ) => { + const { isOpened, isRemoved, isPattern } = useSelect( ( select ) => { // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do // not use isEditorPanelEnabled since this panel should not be disabled through the UI. - const { isEditorPanelRemoved, isEditorPanelOpened } = - select( editorStore ); + const { + isEditorPanelRemoved, + isEditorPanelOpened, + getCurrentPostType, + } = select( editorStore ); + const postType = getCurrentPostType(); return { isRemoved: isEditorPanelRemoved( PANEL_NAME ), isOpened: isEditorPanelOpened( PANEL_NAME ), + // Post excerpt panel is rendered in different place depending on the post type. + // So we cannot make this check inside the PostExcerpt component based on the current edited entity. + isPattern: postType === PATTERN_POST_TYPE, }; }, [] ); const { toggleEditorPanelOpened } = useDispatch( editorStore ); @@ -60,18 +68,22 @@ export default function PostSummary() { { ( fills ) => ( <> - - - - - - + { ! isPattern && ( + + + + + + + - + ) } { fills } - - - + { ! isPattern && ( + + + + ) } ) }