From 3dd2c05bd2e8c727c3fb4226227d58bfac486d96 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 6 Jun 2024 15:43:12 +1000 Subject: [PATCH 1/6] Ensure the Edit template context menu is shown in the post editor/site editor pages by checking only for a templateId. Previously it was only shown for pages and there was no check if the user can edit template. Show a not-very-pretty dialogue box where a user cannot edit a template. --- .../content-only-settings-menu.js | 111 +++++++++++------- 1 file changed, 70 insertions(+), 41 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index 4683dd38593a59..2f28476d873a43 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -11,6 +11,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { __experimentalText as Text, MenuItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { lockSmall as lock } from '@wordpress/icons'; /** * Internal dependencies @@ -19,53 +20,81 @@ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; function ContentOnlySettingsMenuItems( { clientId, onClose } ) { - const { entity, onNavigateToEntityRecord } = useSelect( - ( select ) => { - const { - getBlockEditingMode, - getBlockParentsByBlockName, - getSettings, - getBlockAttributes, - } = select( blockEditorStore ); - const contentOnly = - getBlockEditingMode( clientId ) === 'contentOnly'; - if ( ! contentOnly ) { - return {}; - } - const patternParent = getBlockParentsByBlockName( - clientId, - 'core/block', - true - )[ 0 ]; + const { entity, onNavigateToEntityRecord, canEditTemplateParts } = + useSelect( + ( select ) => { + const { + getBlockEditingMode, + getBlockParentsByBlockName, + getSettings, + getBlockAttributes, + } = select( blockEditorStore ); + const contentOnly = + getBlockEditingMode( clientId ) === 'contentOnly'; + if ( ! contentOnly ) { + return {}; + } + const patternParent = getBlockParentsByBlockName( + clientId, + 'core/block', + true + )[ 0 ]; - let record; - if ( patternParent ) { - record = select( coreStore ).getEntityRecord( - 'postType', - 'wp_block', - getBlockAttributes( patternParent ).ref + let record; + const _canEditTemplateParts = select( coreStore ).canUser( + 'create', + 'templates' ); - } else { - const { getCurrentPostType, getCurrentTemplateId } = - select( editorStore ); - const currentPostType = getCurrentPostType(); - const templateId = getCurrentTemplateId(); - if ( currentPostType === 'page' && templateId ) { + if ( patternParent ) { record = select( coreStore ).getEntityRecord( 'postType', - 'wp_template', - templateId + 'wp_block', + getBlockAttributes( patternParent ).ref ); + } else { + const { getCurrentTemplateId } = select( editorStore ); + const templateId = getCurrentTemplateId(); + if ( templateId && _canEditTemplateParts ) { + record = select( coreStore ).getEntityRecord( + 'postType', + 'wp_template', + templateId + ); + } } - } - return { - entity: record, - onNavigateToEntityRecord: - getSettings().onNavigateToEntityRecord, - }; - }, - [ clientId ] - ); + return { + canEditTemplateParts: _canEditTemplateParts, + entity: record, + onNavigateToEntityRecord: + getSettings().onNavigateToEntityRecord, + }; + }, + [ clientId ] + ); + + if ( ! canEditTemplateParts ) { + return ( + <> + + + { __( 'Locked' ) } + + + + { __( 'Sorry, you cannot edit this block.' ) } + + + ); + } if ( ! entity ) { return ( From 5c129b997c398907304c3ae80b9f629d4540ffea Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 6 Jun 2024 16:52:45 +1000 Subject: [PATCH 2/6] Check for an entity before showing the canUser message. --- .../content-only-settings-menu.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index 2f28476d873a43..228bf8b3cd3bd8 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -31,8 +31,14 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { } = select( blockEditorStore ); const contentOnly = getBlockEditingMode( clientId ) === 'contentOnly'; + const _canEditTemplateParts = select( coreStore ).canUser( + 'create', + 'templates' + ); if ( ! contentOnly ) { - return {}; + return { + canEditTemplateParts: _canEditTemplateParts, + }; } const patternParent = getBlockParentsByBlockName( clientId, @@ -41,10 +47,6 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { )[ 0 ]; let record; - const _canEditTemplateParts = select( coreStore ).canUser( - 'create', - 'templates' - ); if ( patternParent ) { record = select( coreStore ).getEntityRecord( 'postType', @@ -54,7 +56,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { } else { const { getCurrentTemplateId } = select( editorStore ); const templateId = getCurrentTemplateId(); - if ( templateId && _canEditTemplateParts ) { + if ( templateId ) { record = select( coreStore ).getEntityRecord( 'postType', 'wp_template', @@ -72,7 +74,8 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { [ clientId ] ); - if ( ! canEditTemplateParts ) { + // The post has a parent template part, but the user does not have the capability to edit template parts. + if ( ! canEditTemplateParts && entity ) { return ( <> From 20247811d2c68fcaffadafdb9953e7eea6d5f999 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 6 Jun 2024 16:59:28 +1000 Subject: [PATCH 3/6] Rename variable Move canUser fallback component beneath existing entity check block --- .../content-only-settings-menu.js | 111 +++++++++--------- 1 file changed, 54 insertions(+), 57 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index 228bf8b3cd3bd8..fb515f4cf9f770 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -20,62 +20,68 @@ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; function ContentOnlySettingsMenuItems( { clientId, onClose } ) { - const { entity, onNavigateToEntityRecord, canEditTemplateParts } = - useSelect( - ( select ) => { - const { - getBlockEditingMode, - getBlockParentsByBlockName, - getSettings, - getBlockAttributes, - } = select( blockEditorStore ); - const contentOnly = - getBlockEditingMode( clientId ) === 'contentOnly'; - const _canEditTemplateParts = select( coreStore ).canUser( - 'create', - 'templates' - ); - if ( ! contentOnly ) { - return { - canEditTemplateParts: _canEditTemplateParts, - }; - } - const patternParent = getBlockParentsByBlockName( - clientId, - 'core/block', - true - )[ 0 ]; + const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect( + ( select ) => { + const { + getBlockEditingMode, + getBlockParentsByBlockName, + getSettings, + getBlockAttributes, + } = select( blockEditorStore ); + const contentOnly = + getBlockEditingMode( clientId ) === 'contentOnly'; + if ( ! contentOnly ) { + return {}; + } + const patternParent = getBlockParentsByBlockName( + clientId, + 'core/block', + true + )[ 0 ]; - let record; - if ( patternParent ) { + let record; + if ( patternParent ) { + record = select( coreStore ).getEntityRecord( + 'postType', + 'wp_block', + getBlockAttributes( patternParent ).ref + ); + } else { + const { getCurrentTemplateId } = select( editorStore ); + const templateId = getCurrentTemplateId(); + if ( templateId ) { record = select( coreStore ).getEntityRecord( 'postType', - 'wp_block', - getBlockAttributes( patternParent ).ref + 'wp_template', + templateId ); - } else { - const { getCurrentTemplateId } = select( editorStore ); - const templateId = getCurrentTemplateId(); - if ( templateId ) { - record = select( coreStore ).getEntityRecord( - 'postType', - 'wp_template', - templateId - ); - } } - return { - canEditTemplateParts: _canEditTemplateParts, - entity: record, - onNavigateToEntityRecord: - getSettings().onNavigateToEntityRecord, - }; - }, - [ clientId ] + } + const _canEditTemplates = select( coreStore ).canUser( + 'create', + 'templates' + ); + return { + canEditTemplates: _canEditTemplates, + entity: record, + onNavigateToEntityRecord: + getSettings().onNavigateToEntityRecord, + }; + }, + [ clientId ] + ); + + if ( ! entity ) { + return ( + ); + } // The post has a parent template part, but the user does not have the capability to edit template parts. - if ( ! canEditTemplateParts && entity ) { + if ( ! canEditTemplates ) { return ( <> @@ -99,15 +105,6 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { ); } - if ( ! entity ) { - return ( - - ); - } - const isPattern = entity.type === 'wp_block'; return ( From a61b9cdfa75ed367c146fea92e0586498b227e3a Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 6 Jun 2024 18:44:10 +1000 Subject: [PATCH 4/6] Use existing component but disable the edit button and update the copy --- .../content-only-settings-menu.js | 44 ++++++------------- 1 file changed, 13 insertions(+), 31 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index fb515f4cf9f770..6679b175b92afc 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -11,7 +11,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { __experimentalText as Text, MenuItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { lockSmall as lock } from '@wordpress/icons'; /** * Internal dependencies @@ -80,33 +79,21 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { ); } - // The post has a parent template part, but the user does not have the capability to edit template parts. + const isPattern = entity.type === 'wp_block'; + let helpText = isPattern + ? __( + 'Edit the pattern to move, delete, or make further changes to this block.' + ) + : __( + 'Edit the template to move, delete, or make further changes to this block.' + ); + if ( ! canEditTemplates ) { - return ( - <> - - - { __( 'Locked' ) } - - - - { __( 'Sorry, you cannot edit this block.' ) } - - + helpText = __( + 'Only users with permissions to edit the template can move or delete this block' ); } - const isPattern = entity.type === 'wp_block'; - return ( <> @@ -117,6 +104,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { postType: entity.type, } ); } } + disabled={ ! canEditTemplates } > { isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) } @@ -126,13 +114,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { as="p" className="editor-content-only-settings-menu__description" > - { isPattern - ? __( - 'Edit the pattern to move, delete, or make further changes to this block.' - ) - : __( - 'Edit the template to move, delete, or make further changes to this block.' - ) } + { helpText } ); From e17d37defad081a572b518b55fac3c3c85a9367b Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 7 Jun 2024 15:54:13 +1000 Subject: [PATCH 5/6] Check for content blocks --- .../block-settings-menu/content-only-settings-menu.js | 7 ++++++- .../components/provider/disable-non-page-content-blocks.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index 6679b175b92afc..4cbb64292be8c1 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n'; */ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { CONTENT_ONLY_BLOCKS } from '../provider/disable-non-page-content-blocks'; function ContentOnlySettingsMenuItems( { clientId, onClose } ) { const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect( @@ -26,6 +27,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { getBlockParentsByBlockName, getSettings, getBlockAttributes, + getBlockName, } = select( blockEditorStore ); const contentOnly = getBlockEditingMode( clientId ) === 'contentOnly'; @@ -48,7 +50,10 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { } else { const { getCurrentTemplateId } = select( editorStore ); const templateId = getCurrentTemplateId(); - if ( templateId ) { + if ( + CONTENT_ONLY_BLOCKS.includes( getBlockName( clientId ) ) && + templateId + ) { record = select( coreStore ).getEntityRecord( 'postType', 'wp_template', diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js index 4ee3b9a8b2703c..f8be8994771199 100644 --- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js +++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js @@ -6,7 +6,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; -const DEFAULT_CONTENT_ONLY_BLOCKS = [ +export const DEFAULT_CONTENT_ONLY_BLOCKS = [ 'core/post-title', 'core/post-featured-image', 'core/post-content', From 77a02a4251a45170780e28e026f5c4a88673fc1b Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Jun 2024 12:00:50 +1000 Subject: [PATCH 6/6] Use `getContentLockingParent` Whoops, too many exclamation marks :) --- .../block-settings-menu/content-only-settings-menu.js | 10 ++++------ .../provider/disable-non-page-content-blocks.js | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js index 4cbb64292be8c1..8527dfff4f7523 100644 --- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js +++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js @@ -17,7 +17,6 @@ import { __ } from '@wordpress/i18n'; */ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { CONTENT_ONLY_BLOCKS } from '../provider/disable-non-page-content-blocks'; function ContentOnlySettingsMenuItems( { clientId, onClose } ) { const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect( @@ -27,7 +26,6 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { getBlockParentsByBlockName, getSettings, getBlockAttributes, - getBlockName, } = select( blockEditorStore ); const contentOnly = getBlockEditingMode( clientId ) === 'contentOnly'; @@ -50,10 +48,10 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) { } else { const { getCurrentTemplateId } = select( editorStore ); const templateId = getCurrentTemplateId(); - if ( - CONTENT_ONLY_BLOCKS.includes( getBlockName( clientId ) ) && - templateId - ) { + const { getContentLockingParent } = unlock( + select( blockEditorStore ) + ); + if ( ! getContentLockingParent( clientId ) && templateId ) { record = select( coreStore ).getEntityRecord( 'postType', 'wp_template', diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js index f8be8994771199..4ee3b9a8b2703c 100644 --- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js +++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js @@ -6,7 +6,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; -export const DEFAULT_CONTENT_ONLY_BLOCKS = [ +const DEFAULT_CONTENT_ONLY_BLOCKS = [ 'core/post-title', 'core/post-featured-image', 'core/post-content',