From 04b16ebd44982a12db859069d95f9d2dc2993267 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Mon, 27 May 2024 16:31:14 +0100 Subject: [PATCH 1/4] Update: Move template areas into a panel. --- .../editor/src/components/sidebar/index.js | 4 +- .../src/components/sidebar/post-summary.js | 2 - .../src/components/template-areas/index.js | 94 ------------------- .../src/components/template-areas/style.scss | 22 ----- .../template-content-panel/index.js | 22 ++++- .../editor/src/store/private-selectors.js | 25 ----- packages/editor/src/style.scss | 1 - 7 files changed, 20 insertions(+), 150 deletions(-) delete mode 100644 packages/editor/src/components/template-areas/index.js delete mode 100644 packages/editor/src/components/template-areas/style.scss diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js index 668f8bc7b85175..dbd33459b7f0f8 100644 --- a/packages/editor/src/components/sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -112,9 +112,7 @@ const SidebarContent = ( { - { renderingMode !== 'post-only' && ( - - ) } + diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js index 676c330e708db3..a6a95d36388ba5 100644 --- a/packages/editor/src/components/sidebar/post-summary.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -28,7 +28,6 @@ import BlogTitle from '../blog-title'; import PostsPerPage from '../posts-per-page'; import SiteDiscussion from '../site-discussion'; import { store as editorStore } from '../../store'; -import TemplateAreas from '../template-areas'; import { PrivatePostLastRevision } from '../post-last-revision'; /** @@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) { - { fills } ) } diff --git a/packages/editor/src/components/template-areas/index.js b/packages/editor/src/components/template-areas/index.js deleted file mode 100644 index 0d3bbe42d02eed..00000000000000 --- a/packages/editor/src/components/template-areas/index.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { - Button, - __experimentalHeading as Heading, -} from '@wordpress/components'; - -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; -import { TEMPLATE_POST_TYPE } from '../../store/constants'; - -function TemplateAreaItem( { area, clientId } ) { - const { selectBlock, toggleBlockHighlight } = - useDispatch( blockEditorStore ); - const templatePartArea = useSelect( - ( select ) => { - const defaultAreas = - select( - editorStore - ).__experimentalGetDefaultTemplatePartAreas(); - - return defaultAreas.find( - ( defaultArea ) => defaultArea.area === area - ); - }, - [ area ] - ); - - const highlightBlock = () => toggleBlockHighlight( clientId, true ); - const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false ); - - return ( - - ); -} - -export default function TemplateAreas() { - const { isTemplate, templateParts } = useSelect( ( select ) => { - const _isTemplate = - select( editorStore ).getCurrentPostType() === TEMPLATE_POST_TYPE; - - return { - isTemplate: _isTemplate, - templateParts: - _isTemplate && - unlock( - select( editorStore ) - ).getCurrentTemplateTemplateParts(), - }; - }, [] ); - - if ( ! isTemplate || ! templateParts.length ) { - return null; - } - - return ( -
- - { __( 'Areas' ) } - - -
    - { templateParts.map( ( { templatePart, block } ) => ( -
  • - -
    • - ) ) } -
-
- ); -} diff --git a/packages/editor/src/components/template-areas/style.scss b/packages/editor/src/components/template-areas/style.scss deleted file mode 100644 index 4a0dcd748c2edf..00000000000000 --- a/packages/editor/src/components/template-areas/style.scss +++ /dev/null @@ -1,22 +0,0 @@ -.editor-template-areas { - &__list { - margin: 0; - > li { - margin: 0; - } - } - - &__item { - width: 100%; - - // Override the default padding. - &.components-button.has-icon { - padding: 0; - } - } -} - -h3.components-heading.editor-template-areas__title { - font-weight: 500; - margin: 0 0 $grid-unit-10; -} diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js index e0f131f27feb5d..b5f31e791e86b8 100644 --- a/packages/editor/src/components/template-content-panel/index.js +++ b/packages/editor/src/components/template-content-panel/index.js @@ -13,6 +13,8 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { TEMPLATE_POST_TYPE } from '../../store/constants'; +import { store as editorStore } from '../../store'; const { BlockQuickNavigation } = unlock( blockEditorPrivateApis ); @@ -22,11 +24,25 @@ const PAGE_CONTENT_BLOCKS = [ 'core/post-title', ]; -export default function TemplateContentPanel() { - const clientIds = useSelect( ( select ) => { +const TEMPLATE_PART_BLOCK = 'core/template-part'; + +export default function TemplateContentPanel( renderingMode ) { + const { clientIds, postType } = useSelect( ( select ) => { const { getBlocksByName } = select( blockEditorStore ); - return getBlocksByName( PAGE_CONTENT_BLOCKS ); + const { getCurrentPostType } = select( editorStore ); + const _postType = getCurrentPostType(); + return { + postType: _postType, + clientIds: getBlocksByName( + TEMPLATE_POST_TYPE === _postType + ? TEMPLATE_PART_BLOCK + : PAGE_CONTENT_BLOCKS + ), + }; }, [] ); + if ( renderingMode !== 'post-only' && postType !== TEMPLATE_POST_TYPE ) { + return null; + } return ( diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index f56e1e8c9e81fb..c635cbc816f92b 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -25,8 +25,6 @@ import { getCurrentPost, __experimentalGetDefaultTemplatePartAreas, } from './selectors'; -import { TEMPLATE_PART_POST_TYPE } from './constants'; -import { getFilteredTemplatePartBlocks } from './utils/get-filtered-template-parts'; import { getEntityActions as _getEntityActions } from '../dataviews/store/private-selectors'; const EMPTY_INSERTION_POINT = { @@ -120,29 +118,6 @@ export const getPostIcon = createRegistrySelector( } ); -/** - * Returns the template parts and their blocks for the current edited template. - * - * @param {Object} state Global application state. - * @return {Array} Template parts and their blocks in an array. - */ -export const getCurrentTemplateTemplateParts = createRegistrySelector( - ( select ) => () => { - const templateParts = select( coreStore ).getEntityRecords( - 'postType', - TEMPLATE_PART_POST_TYPE, - { per_page: -1 } - ); - - const clientIds = - select( blockEditorStore ).getBlocksByName( 'core/template-part' ); - const blocks = - select( blockEditorStore ).getBlocksByClientId( clientIds ); - - return getFilteredTemplatePartBlocks( blocks, templateParts ); - } -); - /** * Returns true if there are unsaved changes to the * post's meta fields, and false otherwise. diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index a4034a8a51c733..d1af3095230f34 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -54,6 +54,5 @@ @import "./components/sidebar/style.scss"; @import "./components/site-discussion/style.scss"; @import "./components/table-of-contents/style.scss"; -@import "./components/template-areas/style.scss"; @import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; From ca46c4a55803c3bba790c90abd1d72eee8569181 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 2 Jul 2024 16:06:37 +0100 Subject: [PATCH 2/4] Keep document tab on template content select --- .../src/components/block-quick-navigation/index.js | 12 +++++++++--- .../src/components/template-content-panel/index.js | 11 +++++++++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js index 7a0e7984b83cb7..748043feb57773 100644 --- a/packages/block-editor/src/components/block-quick-navigation/index.js +++ b/packages/block-editor/src/components/block-quick-navigation/index.js @@ -21,7 +21,7 @@ import { import { store as blockEditorStore } from '../../store'; import BlockIcon from '../block-icon'; -export default function BlockQuickNavigation( { clientIds } ) { +export default function BlockQuickNavigation( { clientIds, onSelect } ) { if ( ! clientIds.length ) { return null; } @@ -29,6 +29,7 @@ export default function BlockQuickNavigation( { clientIds } ) { { clientIds.map( ( clientId ) => ( @@ -37,7 +38,7 @@ export default function BlockQuickNavigation( { clientIds } ) { ); } -function BlockQuickNavigationItem( { clientId } ) { +function BlockQuickNavigationItem( { clientId, onSelect } ) { const { name, icon, isSelected } = useSelect( ( select ) => { const { @@ -72,7 +73,12 @@ function BlockQuickNavigationItem( { clientId } ) { return ( From 1679f31d6a21ebd7f36d1d6d41b69583c89092e9 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 3 Jul 2024 15:16:13 +0100 Subject: [PATCH 4/4] gix logical condition --- .../editor/src/components/template-content-panel/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js index 0c13e1bce8a470..14532387ecd059 100644 --- a/packages/editor/src/components/template-content-panel/index.js +++ b/packages/editor/src/components/template-content-panel/index.js @@ -27,7 +27,7 @@ const PAGE_CONTENT_BLOCKS = [ const TEMPLATE_PART_BLOCK = 'core/template-part'; -export default function TemplateContentPanel( renderingMode ) { +export default function TemplateContentPanel( { renderingMode } ) { const { enableComplementaryArea } = useDispatch( interfaceStore ); const { clientIds, postType } = useSelect( ( select ) => { const { getBlocksByName } = select( blockEditorStore ); @@ -42,7 +42,8 @@ export default function TemplateContentPanel( renderingMode ) { ), }; }, [] ); - if ( renderingMode !== 'post-only' && postType !== TEMPLATE_POST_TYPE ) { + + if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) { return null; }