From 344b0db44771ee784686d2717a6f644a70bbae14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 1 Jul 2020 15:09:26 +0200 Subject: [PATCH 1/8] Customizable toolbar contents --- packages/block-editor/README.md | 4 + packages/block-editor/package.json | 1 + .../block-toolbar-contents/index.js | 55 ++++++++ .../block-toolbar/customizable-content.js | 123 ++++++++++++++++++ .../src/components/block-toolbar/index.js | 14 +- .../src/components/block-toolbar/style.scss | 28 ++++ packages/block-editor/src/components/index.js | 1 + .../navigation-editor/block-editor-area.js | 5 +- 8 files changed, 227 insertions(+), 4 deletions(-) create mode 100644 packages/block-editor/src/components/block-toolbar-contents/index.js create mode 100644 packages/block-editor/src/components/block-toolbar/customizable-content.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index f4b164a9a58e9..4fa518c74f061 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -210,6 +210,10 @@ _Returns_ Undocumented declaration. +# **BlockToolbarContents** + +Undocumented declaration. + # **BlockVerticalAlignmentToolbar** _Related_ diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 31647fcb2742b..9482c280e5c20 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -60,6 +60,7 @@ "memize": "^1.1.0", "react-autosize-textarea": "^3.0.2", "react-spring": "^8.0.19", + "react-transition-group": "^2.9.0", "redux-multi": "^0.1.12", "refx": "^3.0.0", "rememo": "^3.0.0", diff --git a/packages/block-editor/src/components/block-toolbar-contents/index.js b/packages/block-editor/src/components/block-toolbar-contents/index.js new file mode 100644 index 0000000000000..4337c3d165cee --- /dev/null +++ b/packages/block-editor/src/components/block-toolbar-contents/index.js @@ -0,0 +1,55 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useContext } from '@wordpress/element'; +import { + __experimentalToolbarContext as ToolbarContext, + createSlotFill, + ToolbarGroup, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import useDisplayBlockToolbarContents from '../use-display-block-controls'; + +const { Fill, Slot } = createSlotFill( 'BlockToolbarContents' ); + +function BlockToolbarContentsSlot( props ) { + const accessibleToolbarState = useContext( ToolbarContext ); + return ; +} + +function BlockToolbarContentsFill( { controls, children } ) { + if ( ! useDisplayBlockToolbarContents() ) { + return null; + } + + return ( + + { ( fillProps ) => { + // Children passed to BlockToolbarContentsFill will not have access to any + // React Context whose Provider is part of the BlockToolbarContentsSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + + { children } + + ); + } } + + ); +} + +const BlockToolbarContents = BlockToolbarContentsFill; + +BlockToolbarContents.Slot = BlockToolbarContentsSlot; + +export default BlockToolbarContents; diff --git a/packages/block-editor/src/components/block-toolbar/customizable-content.js b/packages/block-editor/src/components/block-toolbar/customizable-content.js new file mode 100644 index 0000000000000..118bf21fd3cab --- /dev/null +++ b/packages/block-editor/src/components/block-toolbar/customizable-content.js @@ -0,0 +1,123 @@ +/** + * External dependencies + */ +import { TransitionGroup, CSSTransition } from 'react-transition-group'; +import { throttle } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useRef, useState, useEffect, useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BlockToolbarContents from '../block-toolbar-contents'; + +export default function CustomizableBlockToolbarContent( { + children, + className, +} ) { + return ( + + { ( fills ) => ( + + { children } + + ) } + + ); +} + +function CustomizableBlockToolbarContentChildren( { + fills, + className = '', + children, +} ) { + const containerRef = useRef(); + const fillsRef = useRef(); + const toolbarRef = useRef(); + const [ dimensions, setDimensions ] = useState( {} ); + + const fillsPropRef = useRef(); + fillsPropRef.current = fills; + const resize = useCallback( + throttle( ( elem ) => { + if ( ! elem ) { + elem = fillsPropRef.current.length + ? fillsRef.current + : toolbarRef.current; + } + if ( ! elem ) { + return; + } + elem.style.position = 'absolute'; + elem.style.width = 'auto'; + const css = window.getComputedStyle( elem, null ); + setDimensions( { + width: css.getPropertyValue( 'width' ), + height: css.getPropertyValue( 'height' ), + } ); + elem.style.position = ''; + elem.style.width = ''; + }, 100 ), + [] + ); + + useEffect( () => { + // Create an observer instance linked to the callback function + const observer = new window.MutationObserver( function ( + mutationsList + ) { + const hasChildList = mutationsList.find( + ( { type } ) => type === 'childList' + ); + if ( hasChildList ) { + resize(); + } + } ); + + // Start observing the target node for configured mutations + observer.observe( containerRef.current, { + childList: true, + subtree: true, + } ); + + return () => observer.disconnect(); + }, [] ); + + return ( +
+ + { fills.length ? ( + +
+ { fills } +
+ + ) : ( + +
+ { children } +
+ + ) } + +
+ ); +} diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index f4014ff2fe429..10b1165344157 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -22,8 +22,12 @@ import BlockFormatControls from '../block-format-controls'; import BlockSettingsMenu from '../block-settings-menu'; import BlockDraggable from '../block-draggable'; import { useShowMoversGestures, useToggleBlockHighlight } from './utils'; +import CustomizableBlockToolbarContent from './customizable-content'; -export default function BlockToolbar( { hideDragHandle } ) { +export default function BlockToolbar( { + hideDragHandle, + __experimentalCustomizableContent = false, +} ) { const { blockClientIds, blockClientId, @@ -100,8 +104,12 @@ export default function BlockToolbar( { hideDragHandle } ) { shouldShowMovers && 'is-showing-movers' ); + const Wrapper = __experimentalCustomizableContent + ? CustomizableBlockToolbarContent + : 'div'; + return ( -
+
) } -
+ ); } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index dd9e83f5c658a..d5ce086ba0915 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -103,3 +103,31 @@ display: block; } } + +.block-editor-block-toolbar-width-container { + position: relative; + overflow: hidden; + transition: width 300ms; +} + +.block-editor-block-toolbar-content-enter { + position: absolute; + top: 0; + left: 0; + width: auto; + opacity: 0; +} +.block-editor-block-toolbar-content-enter-active { + position: absolute; + opacity: 1; + transition: opacity 300ms; +} +.block-editor-block-toolbar-content-exit { + width: auto; + opacity: 1; + pointer-events: none; +} +.block-editor-block-toolbar-content-exit-active { + opacity: 0; + transition: opacity 300ms; +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 10bd953ecc1d8..73c891c5cf36c 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -15,6 +15,7 @@ export { default as BlockControls } from './block-controls'; export { default as BlockColorsStyleSelector } from './color-style-selector'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; +export { default as BlockToolbarContents } from './block-toolbar-contents'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot'; diff --git a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js index 37161baf64ba8..1a5692e8f6efc 100644 --- a/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js +++ b/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js @@ -109,7 +109,10 @@ export default function BlockEditorArea( { aria-label={ __( 'Block tools' ) } > { hasSelectedBlock && ! isRootBlockSelected && ( - + ) } From 18e00471d9e5493a04f5eda5c211e4ca786c5b88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 13:07:14 +0200 Subject: [PATCH 2/8] Export BlockToolbarContents as __experimentalBlockToolbarContents --- packages/block-editor/README.md | 4 ---- packages/block-editor/src/components/index.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 4fa518c74f061..f4b164a9a58e9 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -210,10 +210,6 @@ _Returns_ Undocumented declaration. -# **BlockToolbarContents** - -Undocumented declaration. - # **BlockVerticalAlignmentToolbar** _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 73c891c5cf36c..147dde3186539 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -15,7 +15,7 @@ export { default as BlockControls } from './block-controls'; export { default as BlockColorsStyleSelector } from './color-style-selector'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; -export { default as BlockToolbarContents } from './block-toolbar-contents'; +export { default as __experimentalBlockToolbarContents } from './block-toolbar-contents'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot'; From 22877dcb7a1248f5680eb96ff9bdbd2e8e525448 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 13:33:23 +0200 Subject: [PATCH 3/8] Update package-lock.json --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 589041da45289..fcc93a588f65a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10980,6 +10980,7 @@ "memize": "^1.1.0", "react-autosize-textarea": "^3.0.2", "react-spring": "^8.0.19", + "react-transition-group": "^2.9.0", "redux-multi": "^0.1.12", "refx": "^3.0.0", "rememo": "^3.0.0", From db1647854256eedb0ea1f4d8e3d8e4eb6773788d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 13:50:45 +0200 Subject: [PATCH 4/8] Update package-lock.json --- package-lock.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index fcc93a588f65a..9a482bd601967 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24914,7 +24914,6 @@ "version": "3.4.0", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", - "dev": true, "requires": { "@babel/runtime": "^7.1.2" } @@ -46043,8 +46042,7 @@ "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "dev": true + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-moment-proptypes": { "version": "1.6.0", @@ -47398,7 +47396,6 @@ "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", - "dev": true, "requires": { "dom-helpers": "^3.4.0", "loose-envify": "^1.4.0", From 5d139446505cd669a78f951ec3d6ffc761cf968f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 16:12:14 +0200 Subject: [PATCH 5/8] Use BlockControlsSlot instead of a custom BlockToolbarContents slot --- packages/block-editor/package.json | 1 + .../src/components/block-controls/index.js | 17 ++++-- .../block-toolbar-contents/index.js | 55 ------------------- .../block-toolbar/customizable-content.js | 35 ++++++++---- packages/block-editor/src/components/index.js | 1 - 5 files changed, 37 insertions(+), 72 deletions(-) delete mode 100644 packages/block-editor/src/components/block-toolbar-contents/index.js diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 9482c280e5c20..fd7ab7a57c396 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -50,6 +50,7 @@ "@wordpress/token-list": "file:../token-list", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", + "@wordpress/warning": "file:../warning", "@wordpress/wordcount": "file:../wordcount", "classnames": "^2.2.5", "css-mediaquery": "^0.1.2", diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js index 297d3839df4aa..f2b35e4b5301f 100644 --- a/packages/block-editor/src/components/block-controls/index.js +++ b/packages/block-editor/src/components/block-controls/index.js @@ -20,18 +20,24 @@ import useDisplayBlockControls from '../use-display-block-controls'; const { Fill, Slot } = createSlotFill( 'BlockControls' ); -function BlockControlsSlot( props ) { +function BlockControlsSlot( { __experimentalIsExpanded = false, ...props } ) { const accessibleToolbarState = useContext( ToolbarContext ); - return ; + return ( + + ); } -function BlockControlsFill( { controls, children } ) { +function BlockControlsFill( { controls, __experimentalIsExpanded, children } ) { if ( ! useDisplayBlockControls() ) { return null; } return ( - + { ( fillProps ) => { // Children passed to BlockControlsFill will not have access to any // React Context whose Provider is part of the BlockControlsSlot tree. @@ -48,6 +54,9 @@ function BlockControlsFill( { controls, children } ) { ); } +const buildSlotName = ( isExpanded ) => + `BlockControls${ isExpanded ? '-expanded' : '' }`; + const BlockControls = BlockControlsFill; BlockControls.Slot = BlockControlsSlot; diff --git a/packages/block-editor/src/components/block-toolbar-contents/index.js b/packages/block-editor/src/components/block-toolbar-contents/index.js deleted file mode 100644 index 4337c3d165cee..0000000000000 --- a/packages/block-editor/src/components/block-toolbar-contents/index.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useContext } from '@wordpress/element'; -import { - __experimentalToolbarContext as ToolbarContext, - createSlotFill, - ToolbarGroup, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import useDisplayBlockToolbarContents from '../use-display-block-controls'; - -const { Fill, Slot } = createSlotFill( 'BlockToolbarContents' ); - -function BlockToolbarContentsSlot( props ) { - const accessibleToolbarState = useContext( ToolbarContext ); - return ; -} - -function BlockToolbarContentsFill( { controls, children } ) { - if ( ! useDisplayBlockToolbarContents() ) { - return null; - } - - return ( - - { ( fillProps ) => { - // Children passed to BlockToolbarContentsFill will not have access to any - // React Context whose Provider is part of the BlockToolbarContentsSlot tree. - // So we re-create the Provider in this subtree. - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - - { children } - - ); - } } - - ); -} - -const BlockToolbarContents = BlockToolbarContentsFill; - -BlockToolbarContents.Slot = BlockToolbarContentsSlot; - -export default BlockToolbarContents; diff --git a/packages/block-editor/src/components/block-toolbar/customizable-content.js b/packages/block-editor/src/components/block-toolbar/customizable-content.js index 118bf21fd3cab..2c8bcdd60653a 100644 --- a/packages/block-editor/src/components/block-toolbar/customizable-content.js +++ b/packages/block-editor/src/components/block-toolbar/customizable-content.js @@ -8,27 +8,30 @@ import { throttle } from 'lodash'; * WordPress dependencies */ import { useRef, useState, useEffect, useCallback } from '@wordpress/element'; +import warning from '@wordpress/warning'; /** * Internal dependencies */ -import BlockToolbarContents from '../block-toolbar-contents'; +import BlockControls from '../block-controls'; export default function CustomizableBlockToolbarContent( { children, className, } ) { return ( - - { ( fills ) => ( - - { children } - - ) } - + + { ( fills ) => { + return ( + + { children } + + ); + } } + ); } @@ -89,6 +92,14 @@ function CustomizableBlockToolbarContentChildren( { return () => observer.disconnect(); }, [] ); + useEffect( () => { + if ( fills.length > 1 ) { + warning( + `${ fills.length } slots were registered but only one may be displayed.` + ); + } + }, [ fills.length ] ); + return (
- { fills } + { fills[ 0 ] }
) : ( diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 147dde3186539..10bd953ecc1d8 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -15,7 +15,6 @@ export { default as BlockControls } from './block-controls'; export { default as BlockColorsStyleSelector } from './color-style-selector'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; -export { default as __experimentalBlockToolbarContents } from './block-toolbar-contents'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot'; From 5525e7a24cfeb4a127c3c04b40d9bffd6f3c65c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 1 Jul 2020 15:31:17 +0200 Subject: [PATCH 6/8] Testing PR --- .../block-library/src/navigation-link/edit.js | 90 ++++++++----------- 1 file changed, 39 insertions(+), 51 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 29d30643acb8f..5971143ad2303 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -10,6 +10,7 @@ import { escape, get, head, find } from 'lodash'; import { compose } from '@wordpress/compose'; import { createBlock } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; +import { external as externalIcon } from '@wordpress/icons'; import { ExternalLink, KeyboardShortcuts, @@ -19,10 +20,12 @@ import { ToggleControl, ToolbarButton, ToolbarGroup, + __experimentalToolbarItem as ToolbarItem, } from '@wordpress/components'; import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { + BlockToolbarContents, BlockControls, InnerBlocks, InspectorControls, @@ -136,6 +139,42 @@ function NavigationLinkEdit( { return ( + { isLinkOpen && ( + + + + { ( toolbarItemProps ) => ( + {} } + /> + ) } + + + + + setIsLinkOpen( false ) } + className="navigation-link-edit-link-done" + > + Done + + + + ) } - { isLinkOpen && ( - setIsLinkOpen( false ) } - > - - setAttributes( { - url: encodeURI( newURL ), - label: ( () => { - const normalizedTitle = newTitle.replace( - /http(s?):\/\//gi, - '' - ); - const normalizedURL = newURL.replace( - /http(s?):\/\//gi, - '' - ); - if ( - newTitle !== '' && - normalizedTitle !== - normalizedURL && - label !== newTitle - ) { - return escape( newTitle ); - } else if ( label ) { - return label; - } - // If there's no label, add the URL. - return escape( normalizedURL ); - } )(), - opensInNewTab: newOpensInNewTab, - id, - } ) - } - /> - - ) }
{ showSubmenuIcon && ( From dd00e3dfbc3d92a10c56d4c11cf092b4d1de8127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 13:27:47 +0200 Subject: [PATCH 7/8] Update imported name --- packages/block-library/src/navigation-link/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 5971143ad2303..9f409e39738bb 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -25,7 +25,7 @@ import { import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { - BlockToolbarContents, + __experimentalBlockToolbarContents as BlockToolbarContents, BlockControls, InnerBlocks, InspectorControls, From c4a6bf67a128f9f3fe6f9b0e416117c41731edb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 2 Jul 2020 16:14:37 +0200 Subject: [PATCH 8/8] Rebase --- packages/block-library/src/navigation-link/edit.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 9f409e39738bb..5617922d7e8ff 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -25,7 +25,6 @@ import { import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { - __experimentalBlockToolbarContents as BlockToolbarContents, BlockControls, InnerBlocks, InspectorControls, @@ -140,7 +139,7 @@ function NavigationLinkEdit( { return ( { isLinkOpen && ( - + { ( toolbarItemProps ) => ( @@ -173,7 +172,7 @@ function NavigationLinkEdit( { Done - + ) }