From bd5c9481801850a1118de743e10dd3f774556cfc Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 12 Jan 2023 13:34:58 +0100 Subject: [PATCH 1/5] Use a template part for the overlay. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/navigation/block.json | 3 + .../src/navigation/edit/index.js | 188 +++++++++--------- .../edit/overlay-template-part-selector.js | 180 +++++++++++++++++ .../src/navigation/edit/responsive-wrapper.js | 81 ++------ .../block-library/src/navigation/index.php | 10 + .../src/navigation/use-navigation-entities.js | 13 ++ packages/edit-site/src/hooks/index.js | 1 + .../src/hooks/navigation-overlay-edit.js | 81 ++++++++ 9 files changed, 396 insertions(+), 163 deletions(-) create mode 100644 packages/block-library/src/navigation/edit/overlay-template-part-selector.js create mode 100644 packages/edit-site/src/hooks/navigation-overlay-edit.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 71c0c1c8b957f..1be523e589d7f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -393,7 +393,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Name:** core/navigation - **Category:** theme - **Supports:** align (full, wide), inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor +- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTemplatePart, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index b54da128bd86e..ff79e104e35f5 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -71,6 +71,9 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] + }, + "overlayTemplatePart": { + "type": "string" } }, "providesContext": { diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 2855bc5e2b9ba..89ff81dd1d2f7 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -67,6 +67,7 @@ import { useInnerBlocks } from './use-inner-blocks'; import { detectColors } from './utils'; import ManageMenusButton from './manage-menus-button'; import MenuInspectorControls from './menu-inspector-controls'; +import OverlayTemplatePartSelector from './overlay-template-part-selector'; function Navigation( { attributes, @@ -104,6 +105,7 @@ function Navigation( { } = {}, hasIcon, icon = 'handle', + overlayTemplatePart, } = attributes; const ref = attributes.ref; @@ -201,8 +203,7 @@ function Navigation( { __unstableMarkNextChangeAsNotPersistent, } = useDispatch( blockEditorStore ); - const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = - useState( false ); + const [ isResponsiveMenuOpen ] = useState( false ); const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false ); @@ -553,94 +554,93 @@ function Navigation( { const stylingInspectorControls = ( <> - { hasSubmenuIndicatorSetting && ( - - { isResponsive && ( - <> - - { overlayMenuPreview && ( - - ) } - + + { __( 'Overlay Menu' ) } - - setAttributes( { overlayMenu: value } ) - } - isBlock - hideLabelFromVision - > - - - - - { hasSubmenus && ( - <> -

{ __( 'Submenus' ) }

- { - setAttributes( { - openSubmenusOnClick: value, - ...( value && { - showSubmenuIcon: true, - } ), // Make sure arrows are shown when we toggle this on. - } ); - } } - label={ __( 'Open on click' ) } - /> - - { - setAttributes( { - showSubmenuIcon: value, - } ); - } } - disabled={ attributes.openSubmenusOnClick } - label={ __( 'Show arrow' ) } + onChange={ ( value ) => + setAttributes( { overlayMenu: value } ) + } + isBlock + hideLabelFromVision + > + + + + + { isResponsive && ( + <> + + { overlayMenuPreview && ( + - - ) } + ) } + + ) } + + + { hasSubmenuIndicatorSetting && hasSubmenus && ( + + { + setAttributes( { + openSubmenusOnClick: value, + ...( value && { + showSubmenuIcon: true, + } ), // Make sure arrows are shown when we toggle this on. + } ); + } } + label={ __( 'Open on click' ) } + /> + { + setAttributes( { + showSubmenuIcon: value, + } ); + } } + disabled={ attributes.openSubmenusOnClick } + label={ __( 'Show arrow' ) } + /> ) } @@ -664,13 +664,13 @@ function Navigation( { }, { colorValue: overlayTextColor.color, - label: __( 'Submenu & overlay text' ), + label: __( 'Submenu text' ), onColorChange: setOverlayTextColor, resetAllFilter: () => setOverlayTextColor(), }, { colorValue: overlayBackgroundColor.color, - label: __( 'Submenu & overlay background' ), + label: __( 'Submenu background' ), onColorChange: setOverlayBackgroundColor, resetAllFilter: () => setOverlayBackgroundColor(), @@ -732,14 +732,12 @@ function Navigation( { { stylingInspectorControls } { isEntityAvailable && (
', + } + ); + setAttributes( { overlayTemplatePart: newTemplatePart?.id } ); + /* + * Todo: After a new part has been created, we need to either: + * 1. Redirect to the new template part + * 2. Update the list of template parts in the dropdown without refreshing the full page. + * + * Until then, unlock the dropdown: + */ + setIsCreatingTemplatePart( false ); + setEnableOptions( true ); + } + + // Filter out template parts that are not navigation overlays. + let filteredTemplateParts = ''; + if ( hasTemplateParts ) { + filteredTemplateParts = templateParts.filter( + ( post ) => post.title.rendered === 'Navigation Overlay' + ); + } + + // Create a list of template parts for the dropdown. + const templatePartChoices = useMemo( () => { + if ( ! filteredTemplateParts ) { + return; + } + return ( + filteredTemplateParts?.map( ( { id, slug } ) => { + /** + * This replacement is very silly but we need a unique identifier: + * the title is not unique and the slug is not pretty. + * Make the slug prettier: + */ + const label = slug + .replaceAll( '-', ' ' ) + .replace( 'n', 'N' ) + .replaceAll( 'o', 'O' ) + .replace( 'O', 'o' ); + if ( id === overlayTemplatePart && ! isCreatingTemplatePart ) { + setEnableOptions( true ); + } + return { + value: id, + label, + }; + } ) || [] + ); + }, [] ); + + toggleProps = { + ...toggleProps, + className: 'wp-block-navigation__navigation-selector-button', + children: ( + <> + + { __( 'Select Overlay' ) } + + + + ), + isBusy: ! enableOptions, + disabled: ! enableOptions, + __experimentalIsFocusable: true, + onClick: () => { + setIsPressed( ! isPressed ); + }, + }; + + return ( + <> + + { ( { onClose } ) => ( + <> + { templatePartChoices && ( + + { + setAttributes( { + overlayTemplatePart: value, + } ); + } } + /> + + ) } + + { + onClose(); + createOverlayTemplatePart(); + setIsCreatingTemplatePart( true ); + setEnableOptions( false ); + } } + > + { __( 'Create new Overlay' ) } + + + + ) } + + { overlayTemplatePart && ( + + ) } + + ); +} + +export default OverlayTemplatePartSelector; diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index ff66be85b5cde..76a5b859a575e 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -6,10 +6,9 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { close, Icon } from '@wordpress/icons'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { getColorClassName } from '@wordpress/block-editor'; +import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies @@ -18,15 +17,12 @@ import OverlayMenuIcon from './overlay-menu-icon'; export default function ResponsiveWrapper( { children, - id, isOpen, isResponsive, - onToggle, isHiddenByDefault, - overlayBackgroundColor, - overlayTextColor, hasIcon, icon, + overlayTemplatePart, } ) { if ( ! isResponsive ) { return children; @@ -35,85 +31,38 @@ export default function ResponsiveWrapper( { const responsiveContainerClasses = classnames( 'wp-block-navigation__responsive-container', { - 'has-text-color': - !! overlayTextColor.color || !! overlayTextColor?.class, - [ getColorClassName( 'color', overlayTextColor?.slug ) ]: - !! overlayTextColor?.slug, - 'has-background': - !! overlayBackgroundColor.color || - overlayBackgroundColor?.class, - [ getColorClassName( - 'background-color', - overlayBackgroundColor?.slug - ) ]: !! overlayBackgroundColor?.slug, - 'is-menu-open': isOpen, 'hidden-by-default': isHiddenByDefault, } ); - const styles = { - color: ! overlayTextColor?.slug && overlayTextColor?.color, - backgroundColor: - ! overlayBackgroundColor?.slug && - overlayBackgroundColor?.color && - overlayBackgroundColor.color, - }; - const openButtonClasses = classnames( 'wp-block-navigation__responsive-container-open', { 'always-shown': isHiddenByDefault } ); - const modalId = `${ id }-modal`; - - const dialogProps = { - className: 'wp-block-navigation__responsive-dialog', - ...( isOpen && { - role: 'dialog', - 'aria-modal': true, - 'aria-label': __( 'Menu' ), - } ), - }; - return ( <> { ! isOpen && ( ) } - -
-
-
- -
- { children } -
-
+
+
+ { children }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 971a5f500e774..361db142d7502 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -775,6 +775,16 @@ function render_block_core_navigation( $attributes, $content, $block ) { $toggle_aria_label_open = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label. $toggle_aria_label_close = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label. + /** + * To do: + * The overlay always shows if $attributes['overlayMenu'] === 'mobile'. + * Some CSS is not loading, probably because do_blocks is used after wp_head? + */ + $overlay = isset( $attributes['overlayTemplatePart'] ) ? get_block_template( $attributes['overlayTemplatePart'] , 'wp_template_part' ) : ''; + if ( ! empty( $overlay ) ) { + $inner_blocks_html = do_blocks( $overlay->content ); + } + $responsive_container_markup = sprintf( '
diff --git a/packages/block-library/src/navigation/use-navigation-entities.js b/packages/block-library/src/navigation/use-navigation-entities.js index e6882502ace4d..851cd62384171 100644 --- a/packages/block-library/src/navigation/use-navigation-entities.js +++ b/packages/block-library/src/navigation/use-navigation-entities.js @@ -55,6 +55,12 @@ export default function useNavigationEntities( menuId ) { { enabled: !! menuId } ); + const { + records: templateParts, + isResolving: isResolvingTemplateParts, + hasResolved: hasResolvedTemplateParts, + } = useEntityRecords( 'postType', 'wp_template_part', { per_page: -1 } ); + return { pages, isResolvingPages, @@ -68,5 +74,12 @@ export default function useNavigationEntities( menuId ) { menuItems, hasResolvedMenuItems, + + templateParts, + isResolvingTemplateParts, + hasResolvedTemplateParts, + hasTemplateParts: !! ( + hasResolvedTemplateParts && templateParts?.length + ), }; } diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js index 513634c55b8f0..8b97dd7a341b6 100644 --- a/packages/edit-site/src/hooks/index.js +++ b/packages/edit-site/src/hooks/index.js @@ -4,3 +4,4 @@ import './components'; import './push-changes-to-global-styles'; import './template-part-edit'; +import './navigation-overlay-edit'; diff --git a/packages/edit-site/src/hooks/navigation-overlay-edit.js b/packages/edit-site/src/hooks/navigation-overlay-edit.js new file mode 100644 index 0000000000000..61203623fecc7 --- /dev/null +++ b/packages/edit-site/src/hooks/navigation-overlay-edit.js @@ -0,0 +1,81 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { BlockControls } from '@wordpress/block-editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { ToolbarButton } from '@wordpress/components'; +import { addFilter } from '@wordpress/hooks'; +import { createHigherOrderComponent } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { useLocation } from '../components/routes'; +import { useLink } from '../components/routes/link'; + +function EditNavigationOverlay( { attributes } ) { + const { overlayTemplatePart } = attributes; + const { params } = useLocation(); + const templatePart = useSelect( ( select ) => { + return select( coreStore ).getEntityRecord( + 'postType', + 'wp_template_part', + overlayTemplatePart + ); + }, [] ); + + const linkProps = useLink( + { + postId: overlayTemplatePart, + postType: 'wp_template_part', + }, + { + fromTemplateId: params.postId, + } + ); + + if ( ! templatePart ) { + return null; + } + + return ( + <> + + { + linkProps.onClick( event ); + } } + > + { __( 'Edit Overlay -Works in Site Editor only' ) } + + + + ); +} + +export const withEditBlockControls = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const { attributes, name } = props; + const isDisplayed = + name === 'core/navigation' && attributes.overlayTemplatePart; + + return ( + <> + + { isDisplayed && ( + + ) } + + ); + }, + 'withEditBlockControls' +); + +addFilter( + 'editor.BlockEdit', + 'core/edit-site/navigation-overlay-edit', + withEditBlockControls +); From af067f047c34874c50e9b167c8c2efb92ba64596 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 12 Jan 2023 14:23:27 +0100 Subject: [PATCH 2/5] Enable creating new parts if there are none --- .../src/navigation/edit/overlay-template-part-selector.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/edit/overlay-template-part-selector.js b/packages/block-library/src/navigation/edit/overlay-template-part-selector.js index d15a1f8427220..a4eb98a89ff69 100644 --- a/packages/block-library/src/navigation/edit/overlay-template-part-selector.js +++ b/packages/block-library/src/navigation/edit/overlay-template-part-selector.js @@ -73,7 +73,8 @@ function OverlayTemplatePartSelector( { // Create a list of template parts for the dropdown. const templatePartChoices = useMemo( () => { - if ( ! filteredTemplateParts ) { + if ( filteredTemplateParts?.length === 0 ) { + setEnableOptions( true ); return; } return ( @@ -88,7 +89,7 @@ function OverlayTemplatePartSelector( { .replace( 'n', 'N' ) .replaceAll( 'o', 'O' ) .replace( 'O', 'o' ); - if ( id === overlayTemplatePart && ! isCreatingTemplatePart ) { + if ( ! isCreatingTemplatePart ) { setEnableOptions( true ); } return { From c05163890579b7a038f97506138af76d753a5676 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 20 Jan 2023 08:12:35 +0100 Subject: [PATCH 3/5] Use the menu name to locate the template part. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/navigation/block.json | 3 - .../src/navigation/edit/index.js | 11 +- .../edit/overlay-template-part-selector.js | 191 +++++------------- .../src/navigation/use-navigation-entities.js | 15 +- packages/edit-site/src/hooks/index.js | 1 - .../src/hooks/navigation-overlay-edit.js | 81 -------- 7 files changed, 62 insertions(+), 242 deletions(-) delete mode 100644 packages/edit-site/src/hooks/navigation-overlay-edit.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1be523e589d7f..71c0c1c8b957f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -393,7 +393,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht - **Name:** core/navigation - **Category:** theme - **Supports:** align (full, wide), inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~ -- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTemplatePart, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor +- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor ## Custom Link diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index ff79e104e35f5..b54da128bd86e 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -71,9 +71,6 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] - }, - "overlayTemplatePart": { - "type": "string" } }, "providesContext": { diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 89ff81dd1d2f7..58b7180ae13e3 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -612,10 +612,13 @@ function Navigation( { ) } ) } - + { navigationMenu && ( + + ) } { hasSubmenuIndicatorSetting && hasSubmenus && ( diff --git a/packages/block-library/src/navigation/edit/overlay-template-part-selector.js b/packages/block-library/src/navigation/edit/overlay-template-part-selector.js index a4eb98a89ff69..a45b6d11db079 100644 --- a/packages/block-library/src/navigation/edit/overlay-template-part-selector.js +++ b/packages/block-library/src/navigation/edit/overlay-template-part-selector.js @@ -1,19 +1,10 @@ /** * WordPress dependencies */ -import { - MenuGroup, - MenuItem, - MenuItemsChoice, - DropdownMenu, - VisuallyHidden, - Button, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useMemo, useState } from '@wordpress/element'; -import { store as coreStore } from '@wordpress/core-data'; -import { useDispatch } from '@wordpress/data'; -import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; +import { Button } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { store as coreStore, useEntityProp } from '@wordpress/core-data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { addQueryArgs } from '@wordpress/url'; /** @@ -21,153 +12,71 @@ import { addQueryArgs } from '@wordpress/url'; */ import useNavigationEntities from '../use-navigation-entities'; -function OverlayTemplatePartSelector( { - attributes, - setAttributes, - toggleProps = {}, -} ) { - const { overlayTemplatePart } = attributes; - const [ isPressed, setIsPressed ] = useState( false ); +function OverlayTemplatePartSelector( { currentMenuId } ) { const { saveEntityRecord } = useDispatch( coreStore ); - const [ enableOptions, setEnableOptions ] = useState( false ); - const [ isCreatingTemplatePart, setIsCreatingTemplatePart ] = - useState( false ); - const { templateParts } = useNavigationEntities(); - const hasTemplateParts = !! templateParts?.length; + const menuSlug = 'navigation-overlay-' + currentMenuId; + const { theme } = useNavigationEntities(); + const activeTheme = theme[ 0 ].stylesheet; + const templatePartId = activeTheme + '//' + menuSlug; + + // Find a template part that matches the menu. + const { hasTemplatePart } = useSelect( ( select ) => { + const { getEntityRecord } = select( coreStore ); + const part = getEntityRecord( + 'postType', + 'wp_template_part', + templatePartId + ); + return { + hasTemplatePart: part ? true : false, + }; + }, [] ); + + const menuName = useEntityProp( + 'postType', + 'wp_navigation', + 'title', + currentMenuId + ); + + const overlayName = sprintf( + // translators: %s: The name of the menu. + __( 'Navigation Overlay for %s' ), + menuName[ 0 ] + ); - /** - * To do: - * Must safeguard from errors and potential permission issues. - * Make a better template for the default content in the new template part. - */ async function createOverlayTemplatePart() { const newTemplatePart = await saveEntityRecord( 'postType', 'wp_template_part', { - slug: 'navigation-overlay', - title: 'Navigation Overlay', + slug: 'navigation-overlay-' + currentMenuId, + title: overlayName, content: '
', } ); - setAttributes( { overlayTemplatePart: newTemplatePart?.id } ); - /* - * Todo: After a new part has been created, we need to either: - * 1. Redirect to the new template part - * 2. Update the list of template parts in the dropdown without refreshing the full page. - * - * Until then, unlock the dropdown: - */ - setIsCreatingTemplatePart( false ); - setEnableOptions( true ); + return newTemplatePart; } - // Filter out template parts that are not navigation overlays. - let filteredTemplateParts = ''; - if ( hasTemplateParts ) { - filteredTemplateParts = templateParts.filter( - ( post ) => post.title.rendered === 'Navigation Overlay' - ); - } - - // Create a list of template parts for the dropdown. - const templatePartChoices = useMemo( () => { - if ( filteredTemplateParts?.length === 0 ) { - setEnableOptions( true ); - return; - } - return ( - filteredTemplateParts?.map( ( { id, slug } ) => { - /** - * This replacement is very silly but we need a unique identifier: - * the title is not unique and the slug is not pretty. - * Make the slug prettier: - */ - const label = slug - .replaceAll( '-', ' ' ) - .replace( 'n', 'N' ) - .replaceAll( 'o', 'O' ) - .replace( 'O', 'o' ); - if ( ! isCreatingTemplatePart ) { - setEnableOptions( true ); - } - return { - value: id, - label, - }; - } ) || [] - ); - }, [] ); - - toggleProps = { - ...toggleProps, - className: 'wp-block-navigation__navigation-selector-button', - children: ( - <> - - { __( 'Select Overlay' ) } - - - - ), - isBusy: ! enableOptions, - disabled: ! enableOptions, - __experimentalIsFocusable: true, - onClick: () => { - setIsPressed( ! isPressed ); - }, - }; - return ( <> - - { ( { onClose } ) => ( - <> - { templatePartChoices && ( - - { - setAttributes( { - overlayTemplatePart: value, - } ); - } } - /> - - ) } - - { - onClose(); - createOverlayTemplatePart(); - setIsCreatingTemplatePart( true ); - setEnableOptions( false ); - } } - > - { __( 'Create new Overlay' ) } - - - - ) } - - { overlayTemplatePart && ( + { ! hasTemplatePart && ( + + ) } + { hasTemplatePart && (
From 22286b18f6b1dcbaa0a447950a898bef721032ce Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 20 Jan 2023 08:43:01 +0100 Subject: [PATCH 5/5] link the correct template part to the menu button. --- .../src/navigation/edit/index.js | 5 ++- .../src/navigation/edit/responsive-wrapper.js | 36 +++++++++++++++---- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 58b7180ae13e3..c6f5306372441 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -105,7 +105,6 @@ function Navigation( { } = {}, hasIcon, icon = 'handle', - overlayTemplatePart, } = attributes; const ref = attributes.ref; @@ -735,12 +734,12 @@ function Navigation( { { stylingInspectorControls } { isEntityAvailable && ( { + const { getEntityRecord } = select( coreStore ); + const part = getEntityRecord( + 'postType', + 'wp_template_part', + templatePartId + ); + return { + hasTemplatePart: part ? true : false, + }; + }, [] ); + if ( ! isResponsive ) { return children; } @@ -50,11 +70,15 @@ export default function ResponsiveWrapper( { * To do: * Clicking this tries to reload the site editor inside the site editor. */ - href={ addQueryArgs( 'site-editor.php', { - postType: 'wp_template_part', - postId: overlayTemplatePart, - canvas: 'edit', - } ) } + href={ + hasTemplatePart + ? addQueryArgs( 'site-editor.php', { + postType: 'wp_template_part', + postId: templatePartId, + canvas: 'edit', + } ) + : null + } > { hasIcon && } { ! hasIcon && __( 'Menu' ) }