From 68a5e76d01035dc05e7c55a1d14bdc33d6540bc1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 28 Oct 2024 11:12:27 +1100 Subject: [PATCH 1/8] Add "show template" to preview dropdown. --- .../src/components/preview-dropdown/index.js | 58 ++++++++++++++----- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index e7a19f92548f5f..f8026ff7231510 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -16,7 +16,7 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { desktop, mobile, tablet, external } from '@wordpress/icons'; +import { desktop, mobile, tablet, external, check } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -31,21 +31,29 @@ import PostPreviewButton from '../post-preview-button'; import { unlock } from '../../lock-unlock'; export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { - const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } = - useSelect( ( select ) => { - const { getDeviceType, getCurrentPostType } = select( editorStore ); - const { getEntityRecord, getPostType } = select( coreStore ); - const { get } = select( preferencesStore ); - const _currentPostType = getCurrentPostType(); - return { - deviceType: getDeviceType(), - homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home, - isTemplate: _currentPostType === 'wp_template', - isViewable: getPostType( _currentPostType )?.viewable ?? false, - showIconLabels: get( 'core', 'showIconLabels' ), - }; - }, [] ); - const { setDeviceType } = useDispatch( editorStore ); + const { + deviceType, + homeUrl, + isTemplate, + isViewable, + showIconLabels, + isTemplateHidden, + } = useSelect( ( select ) => { + const { getDeviceType, getCurrentPostType } = select( editorStore ); + const { getRenderingMode } = unlock( select( editorStore ) ); + const { getEntityRecord, getPostType } = select( coreStore ); + const { get } = select( preferencesStore ); + const _currentPostType = getCurrentPostType(); + return { + deviceType: getDeviceType(), + homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home, + isTemplate: _currentPostType === 'wp_template', + isViewable: getPostType( _currentPostType )?.viewable ?? false, + showIconLabels: get( 'core', 'showIconLabels' ), + isTemplateHidden: getRenderingMode() === 'post-only', + }; + }, [] ); + const { setDeviceType, setRenderingMode } = useDispatch( editorStore ); const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); const handleDevicePreviewChange = ( newDeviceType ) => { @@ -142,6 +150,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { ) } + { ! isTemplate && ( + + { + setRenderingMode( + isTemplateHidden + ? 'template-locked' + : 'post-only' + ); + } } + > + { __( 'Show template' ) } + + + ) } { isViewable && ( Date: Mon, 28 Oct 2024 13:27:00 +1100 Subject: [PATCH 2/8] Show icon in document bar when template preview is selected --- packages/editor/src/components/document-bar/index.js | 11 ++++++++++- .../editor/src/components/document-bar/style.scss | 4 ++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 3c522189a2632f..f5de10d811e681 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -15,7 +15,7 @@ import { __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { BlockIcon } from '@wordpress/block-editor'; -import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons'; +import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; import { store as coreStore } from '@wordpress/core-data'; import { store as commandsStore } from '@wordpress/commands'; @@ -58,12 +58,14 @@ export default function DocumentBar( props ) { isNotFound, templateTitle, onNavigateToPreviousEntityRecord, + isTemplatePreview, } = useSelect( ( select ) => { const { getCurrentPostType, getCurrentPostId, getEditorSettings, __experimentalGetTemplateInfo: getTemplateInfo, + getRenderingMode, } = select( editorStore ); const { getEditedEntityRecord, @@ -95,6 +97,7 @@ export default function DocumentBar( props ) { templateTitle: _templateInfo.title, onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord, + isTemplatePreview: getRenderingMode() === 'template-locked', }; }, [] ); @@ -142,6 +145,12 @@ export default function DocumentBar( props ) { { __( 'Back' ) } ) } + { ! isTemplate && isTemplatePreview && ( + + ) } { isNotFound ? ( { __( 'Document not found' ) } diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 6a7e7930f5bfb7..214feafacac327 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -102,3 +102,7 @@ background-color: transparent; } } + +.editor-document-bar__icon-layout { + position: absolute; +} From 22a33bda77e776dc901fb65ceb3e22dd60ee56c9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 28 Oct 2024 14:07:29 +1100 Subject: [PATCH 3/8] add icon color --- packages/editor/src/components/document-bar/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 214feafacac327..18660b69b5af5d 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -103,6 +103,10 @@ } } -.editor-document-bar__icon-layout { +.editor-document-bar__icon-layout.editor-document-bar__icon-layout { position: absolute; + + svg { + fill: $gray-600; + } } From b8c7bb0e123725524612dd3ca44ad253ec2db7bf Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 28 Oct 2024 15:10:17 +1100 Subject: [PATCH 4/8] hide icon on small screens --- packages/editor/src/components/document-bar/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 18660b69b5af5d..8634348a634efd 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -105,8 +105,11 @@ .editor-document-bar__icon-layout.editor-document-bar__icon-layout { position: absolute; - + display: none; svg { fill: $gray-600; } + @include break-small { + display: flex; + } } From f808b3496d7f4219c4c87ea38da2631abc3d740d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 28 Oct 2024 15:59:29 +1100 Subject: [PATCH 5/8] Add a little padding --- packages/editor/src/components/document-bar/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 8634348a634efd..c198b6993d4560 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -105,6 +105,7 @@ .editor-document-bar__icon-layout.editor-document-bar__icon-layout { position: absolute; + padding-left: $grid-unit-15; display: none; svg { fill: $gray-600; From 553af4d28605cea119bc84681452b23bf4157867 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 30 Oct 2024 15:40:12 +1100 Subject: [PATCH 6/8] Check that there's an actual template. --- packages/editor/src/components/preview-dropdown/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index f8026ff7231510..6fa35c673430cc 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -38,8 +38,10 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { isViewable, showIconLabels, isTemplateHidden, + templateId, } = useSelect( ( select ) => { - const { getDeviceType, getCurrentPostType } = select( editorStore ); + const { getDeviceType, getCurrentPostType, getCurrentTemplateId } = + select( editorStore ); const { getRenderingMode } = unlock( select( editorStore ) ); const { getEntityRecord, getPostType } = select( coreStore ); const { get } = select( preferencesStore ); @@ -51,6 +53,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { isViewable: getPostType( _currentPostType )?.viewable ?? false, showIconLabels: get( 'core', 'showIconLabels' ), isTemplateHidden: getRenderingMode() === 'post-only', + templateId: getCurrentTemplateId(), }; }, [] ); const { setDeviceType, setRenderingMode } = useDispatch( editorStore ); @@ -150,7 +153,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { ) } - { ! isTemplate && ( + { ! isTemplate && !! templateId && ( Date: Tue, 5 Nov 2024 11:13:19 +1100 Subject: [PATCH 7/8] Fix back button erroneously showing --- packages/editor/src/components/document-bar/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f5de10d811e681..e95c43301e2e24 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -145,13 +145,13 @@ export default function DocumentBar( props ) { { __( 'Back' ) } ) } - { ! isTemplate && isTemplatePreview && ( - - ) } + { ! isTemplate && isTemplatePreview && ( + + ) } { isNotFound ? ( { __( 'Document not found' ) } ) : ( From 2389a89aeeb0c2c8b6d9935957e54d6d6f1c3fc1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 5 Nov 2024 11:15:18 +1100 Subject: [PATCH 8/8] Adjust margin and remove pointer events --- packages/editor/src/components/document-bar/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index c198b6993d4560..749da6ec8c9837 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -105,8 +105,9 @@ .editor-document-bar__icon-layout.editor-document-bar__icon-layout { position: absolute; - padding-left: $grid-unit-15; + margin-left: $grid-unit-15; display: none; + pointer-events: none; svg { fill: $gray-600; }