From 5029e8757ee89bb010e9933893ecb35b67bc3859 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 21 Apr 2023 11:18:25 +1000 Subject: [PATCH 1/7] Initial commit: - create new component slot to house style book and other editor views --- .../editor-canvas-container/index.js | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 packages/edit-site/src/components/editor-canvas-container/index.js diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js new file mode 100644 index 0000000000000..b45314f608739 --- /dev/null +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -0,0 +1,57 @@ +/** + * External dependencies + */ + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; +import { createSlotFill, Button } from '@wordpress/components'; +import { ESCAPE } from '@wordpress/keycodes'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { closeSmall } from '@wordpress/icons'; + +const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot'; +const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } = + createSlotFill( SLOT_FILL_NAME ); + +function EditorCanvasContainer( { onClose, title, children } ) { + const [ isClosed, setIsClosed ] = useState( false ); + + function closeOnEscape( event ) { + if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { + event.preventDefault(); + setIsClosed( true ); + onClose(); + } + } + + if ( isClosed ) { + return null; + } + + return ( + /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ +
+
+ ); +} + +export default EditorCanvasContainer; +export { EditorCanvasContainerSlot }; From b366e0e973241dcae89ec8c79bf8b5c80d3fd6ce Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 21 Apr 2023 12:33:24 +1000 Subject: [PATCH 2/7] - adding state for editor canvas view container - forwarding refs to first child --- .../src/components/block-editor/index.js | 15 ++-- .../editor-canvas-container/index.js | 90 ++++++++++++++----- .../editor-canvas-container/style.scss | 19 ++++ .../src/components/global-styles/ui.js | 16 ++-- .../src/components/header-edit-mode/index.js | 19 ++-- .../global-styles-sidebar.js | 38 ++++---- .../src/components/style-book/index.js | 57 ++---------- .../src/components/style-book/style.scss | 18 ---- .../edit-site/src/store/private-actions.js | 14 +++ .../edit-site/src/store/private-selectors.js | 11 +++ packages/edit-site/src/store/reducer.js | 17 ++++ packages/edit-site/src/style.scss | 1 + 12 files changed, 191 insertions(+), 124 deletions(-) create mode 100644 packages/edit-site/src/components/editor-canvas-container/style.scss diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index ac6f762ded6c8..667984b93a7d8 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -36,8 +36,8 @@ import { store as editSiteStore } from '../../store'; import BackButton from './back-button'; import ResizableEditor from './resizable-editor'; import EditorCanvas from './editor-canvas'; -import StyleBook from '../style-book'; import { unlock } from '../../private-apis'; +import EditorCanvasContainer from '../editor-canvas-container'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); @@ -166,18 +166,19 @@ export default function BlockEditor() { { /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ } - - { ( [ styleBook ] ) => - styleBook ? ( + + { ( [ editorCanvasView ] ) => + editorCanvasView ? (
- { styleBook } + { editorCanvasView }
) : ( ) } - + ); diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index b45314f608739..fffe5c8efc899 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -1,57 +1,101 @@ -/** - * External dependencies - */ - /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { Children, cloneElement, useState } from '@wordpress/element'; import { createSlotFill, Button } from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; +import { useDispatch } from '@wordpress/data'; +import { closeSmall } from '@wordpress/icons'; +import { + useFocusOnMount, + useFocusReturn, + useMergeRefs, +} from '@wordpress/compose'; /** * Internal dependencies */ -import { closeSmall } from '@wordpress/icons'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; + +/** + * Returns a translated string for the title of the editor canvas container. + * + * @param {string} view Editor canvas container view. + * + * @return {string} Translated string corresponding to value of view. Default is ''. + */ +export function getEditorCanvasContainerTitle( view ) { + switch ( view ) { + case 'style-book': + return __( 'Style book' ); + default: + return ''; + } +} const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot'; const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } = createSlotFill( SLOT_FILL_NAME ); -function EditorCanvasContainer( { onClose, title, children } ) { +function EditorCanvasContainer( { + children, + closeButtonLabel, + onClose = () => {}, +} ) { const [ isClosed, setIsClosed ] = useState( false ); + const { setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + const focusOnMountRef = useFocusOnMount( 'firstElement' ); + const sectionFocusReturnRef = useFocusReturn(); + const refs = useMergeRefs( [ sectionFocusReturnRef, focusOnMountRef ] ); + + function onCloseContainer() { + onClose(); + setEditorCanvasContainerView( 'init' ); + setIsClosed( true ); + } function closeOnEscape( event ) { if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { event.preventDefault(); - setIsClosed( true ); - onClose(); + onCloseContainer(); } } + const childrenWithProps = Array.isArray( children ) + ? Children.map( children, ( child, index ) => + index === 0 + ? cloneElement( child, { + ref: refs, + onKeyDown: closeOnEscape, + } ) + : child + ) + : cloneElement( children, { ref: refs, onKeyDown: closeOnEscape } ); + if ( isClosed ) { return null; } return ( /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ -
-
); } +EditorCanvasContainer.Slot = EditorCanvasContainerSlot; export default EditorCanvasContainer; -export { EditorCanvasContainerSlot }; diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss new file mode 100644 index 0000000000000..acc0e0872f0b4 --- /dev/null +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -0,0 +1,19 @@ +.edit-site-editor-canvas-container { + background: $white; // Fallback color, overridden by JavaScript. + border-radius: $radius-block-ui; + bottom: 0; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + transition: all 0.3s; // Match .block-editor-iframe__body transition. +} + +.edit-site-editor-canvas-container__close-button { + position: absolute; + right: $grid-unit-10; + top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2 + z-index: 1; + background: $white; +} diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index b2f3da2306a1d..a536014180a27 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -42,6 +42,7 @@ import StyleBook from '../style-book'; import ScreenCSS from './screen-css'; import { unlock } from '../../private-apis'; import ScreenEffects from './screen-effects'; +import { store as editSiteStore } from '../../store'; const SLOT_FILL_NAME = 'GlobalStylesMenu'; const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = @@ -239,7 +240,7 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { ); } -function GlobalStylesStyleBook( { onClose } ) { +function GlobalStylesStyleBook() { const navigator = useNavigator(); const { path } = navigator.location; return ( @@ -257,7 +258,6 @@ function GlobalStylesStyleBook( { onClose } ) { // Now go to the selected block. navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); } } - onClose={ onClose } /> ); } @@ -296,9 +296,13 @@ function GlobalStylesBlockLink() { }, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] ); } -function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { +function GlobalStylesUI() { const blocks = getBlockTypes(); - + const editorCanvasContainerView = useSelect( + ( select ) => + unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + [] + ); return ( ); } ) } - { isStyleBookOpened && ( - + { 'style-book' === editorCanvasContainerView && ( + ) } diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 448682100092d..ebfcd83aac3ec 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -38,7 +38,8 @@ import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; import DocumentActions from './document-actions'; import { store as editSiteStore } from '../../store'; -import { useHasStyleBook } from '../style-book'; +import { getEditorCanvasContainerTitle } from '../editor-canvas-container'; +import { unlock } from '../../private-apis'; const preventDefault = ( event ) => { event.preventDefault(); @@ -56,6 +57,7 @@ export default function HeaderEditMode() { blockEditorMode, homeUrl, showIconLabels, + editorCanvasView, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, @@ -88,6 +90,9 @@ export default function HeaderEditMode() { 'core/edit-site', 'showIconLabels' ), + editorCanvasView: unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), }; }, [] ); @@ -117,7 +122,7 @@ export default function HeaderEditMode() { [ setIsListViewOpened, isListViewOpen ] ); - const hasStyleBook = useHasStyleBook(); + const hasDefaultEditorCanvasView = 'init' === editorCanvasView; const isFocusMode = templateType === 'wp_template_part'; @@ -138,7 +143,7 @@ export default function HeaderEditMode() { 'show-icon-labels': showIconLabels, } ) } > - { ! hasStyleBook && ( + { hasDefaultEditorCanvasView && ( - { hasStyleBook ? __( 'Style Book' ) : } + { ! hasDefaultEditorCanvasView ? ( + getEditorCanvasContainerTitle( editorCanvasView ) + ) : ( + + ) }
- { ! isFocusMode && ! hasStyleBook && ( + { ! isFocusMode && hasDefaultEditorCanvasView && (
select( editSiteStore ).getEditorMode(), - [] + const { editorMode, editorCanvasView } = useSelect( ( select ) => { + return { + editorMode: select( editSiteStore ).getEditorMode(), + editorCanvasView: unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), + }; + }, [] ); + const { setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) ); useEffect( () => { if ( editorMode !== 'visual' ) { - setIsStyleBookOpened( false ); + setEditorCanvasContainerView( 'init' ); } }, [ editorMode ] ); + + const isStyleBookOpened = editorCanvasView === 'style-book'; + return ( { - setIsStyleBookOpened( ! isStyleBookOpened ); - } } + onClick={ () => + setEditorCanvasContainerView( + isStyleBookOpened ? 'init' : 'style-book' + ) + } /> @@ -58,10 +69,7 @@ export default function GlobalStylesSidebar() { } > - setIsStyleBookOpened( false ) } - /> + ); } diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index a010f811dcf1d..d1dbd258e5c07 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -7,14 +7,11 @@ import classnames from 'classnames'; * WordPress dependencies */ import { - Button, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Disabled, TabPanel, - createSlotFill, - __experimentalUseSlotFills as useSlotFills, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { @@ -31,29 +28,19 @@ import { __unstableIframe as Iframe, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { closeSmall } from '@wordpress/icons'; -import { - useResizeObserver, - useFocusOnMount, - useFocusReturn, - useMergeRefs, -} from '@wordpress/compose'; +import { useResizeObserver } from '@wordpress/compose'; import { useMemo, memo } from '@wordpress/element'; -import { ESCAPE } from '@wordpress/keycodes'; /** * Internal dependencies */ import { unlock } from '../../private-apis'; +import EditorCanvasContainer from '../editor-canvas-container'; const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock( blockEditorPrivateApis ); -const SLOT_FILL_NAME = 'EditSiteStyleBook'; -const { Slot: StyleBookSlot, Fill: StyleBookFill } = - createSlotFill( SLOT_FILL_NAME ); - // The content area of the Style Book is rendered within an iframe so that global styles // are applied to elements within the entire content area. To support elements that are // not part of the block previews, such as headings and layout for the block previews, @@ -174,11 +161,8 @@ function getExamples() { return [ headingsExample, ...otherExamples ]; } -function StyleBook( { isSelected, onSelect, onClose } ) { +function StyleBook( { isSelected, onSelect } ) { const [ resizeObserver, sizes ] = useResizeObserver(); - const focusOnMountRef = useFocusOnMount( 'firstElement' ); - const sectionFocusReturnRef = useFocusReturn(); - const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const examples = useMemo( getExamples, [] ); @@ -207,17 +191,9 @@ function StyleBook( { isSelected, onSelect, onClose } ) { [ originalSettings ] ); - function closeOnEscape( event ) { - if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { - event.preventDefault(); - onClose(); - } - } - return ( - - { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } -
+
600, } ) } @@ -226,20 +202,8 @@ function StyleBook( { isSelected, onSelect, onClose } ) { background: backgroundColor, } } aria-label={ __( 'Style Book' ) } - onKeyDown={ closeOnEscape } - ref={ useMergeRefs( [ - sectionFocusReturnRef, - focusOnMountRef, - ] ) } > { resizeObserver } -
- +
+ ); } @@ -365,11 +329,4 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => { ); }; -function useHasStyleBook() { - const fills = useSlotFills( SLOT_FILL_NAME ); - return !! fills?.length; -} - -StyleBook.Slot = StyleBookSlot; export default StyleBook; -export { useHasStyleBook }; diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss index cf84655258725..6dcc1fec328ab 100644 --- a/packages/edit-site/src/components/style-book/style.scss +++ b/packages/edit-site/src/components/style-book/style.scss @@ -1,21 +1,3 @@ -.edit-site-style-book { - background: $white; // Fallback color, overridden by JavaScript. - border-radius: $radius-block-ui; - bottom: 0; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - transition: all 0.3s; // Match .block-editor-iframe__body transition. -} - -.edit-site-style-book__close-button { - position: absolute; - right: $grid-unit-10; - top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2 -} - .edit-site-style-book__tab-panel { .components-tab-panel__tabs { background: $white; diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index aeaf1d72833d7..952c1852ae305 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -27,3 +27,17 @@ export const setCanvasMode = dispatch.setIsListViewOpened( true ); } }; + +/** + * Action that switches the editor canvas container view. + * + * @param {?string} view Editor canvas container view. + */ +export const setEditorCanvasContainerView = + ( view ) => + ( { dispatch } ) => { + dispatch( { + type: 'SET_EDITOR_CANVAS_CONTAINER_VIEW', + view, + } ); + }; diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index fa4085d17f89c..1f1f6e999fdb2 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -8,3 +8,14 @@ export function getCanvasMode( state ) { return state.canvasMode; } + +/** + * Returns the editor canvas container view. + * + * @param {Object} state Global application state. + * + * @return {string} Editor canvas container view. + */ +export function getEditorCanvasContainerView( state ) { + return state.editorCanvasContainerView; +} diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index fee3a8fcc5618..0d506fbc9eeb8 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -140,6 +140,22 @@ function canvasMode( state = 'init', action ) { return state; } +/** + * Reducer used to track the site editor canvas container view. + * This could be `'init'` (the visual block editor), `'style-book'` (the style book). + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + */ +function editorCanvasContainerView( state = 'init', action ) { + switch ( action.type ) { + case 'SET_EDITOR_CANVAS_CONTAINER_VIEW': + return action.view; + } + + return state; +} + export default combineReducers( { deviceType, settings, @@ -148,4 +164,5 @@ export default combineReducers( { listViewPanel, saveViewPanel, canvasMode, + editorCanvasContainerView, } ); diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index a68971f901157..30abf4057b80e 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -31,6 +31,7 @@ @import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; @import "./components/site-icon/style.scss"; @import "./components/style-book/style.scss"; +@import "./components/editor-canvas-container/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss"; html #wpadminbar { From 7feeed1d8fc148ebd5750242a5b342983bad0268 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 21 Apr 2023 12:42:08 +1000 Subject: [PATCH 3/7] - attempting to juggle refs so that we retain keyboard navigation and close functionality --- .../editor-canvas-container/index.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index fffe5c8efc899..d66bd5ed5c83c 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -7,11 +7,7 @@ import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { closeSmall } from '@wordpress/icons'; -import { - useFocusOnMount, - useFocusReturn, - useMergeRefs, -} from '@wordpress/compose'; +import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; /** * Internal dependencies @@ -50,7 +46,6 @@ function EditorCanvasContainer( { ); const focusOnMountRef = useFocusOnMount( 'firstElement' ); const sectionFocusReturnRef = useFocusReturn(); - const refs = useMergeRefs( [ sectionFocusReturnRef, focusOnMountRef ] ); function onCloseContainer() { onClose(); @@ -69,21 +64,26 @@ function EditorCanvasContainer( { ? Children.map( children, ( child, index ) => index === 0 ? cloneElement( child, { - ref: refs, - onKeyDown: closeOnEscape, + ref: sectionFocusReturnRef, } ) : child ) - : cloneElement( children, { ref: refs, onKeyDown: closeOnEscape } ); + : cloneElement( children, { + ref: sectionFocusReturnRef, + } ); if ( isClosed ) { return null; } return ( - /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ -
- + + { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ } +
+
+ ); } From 2fae441ea41868509d12edb8373985227f9e2c93 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 21 Apr 2023 12:49:56 +1000 Subject: [PATCH 4/7] Remove comment that was the motivation behind this PR in the first place. --- packages/edit-site/src/components/block-editor/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 667984b93a7d8..4957beee030f2 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -165,7 +165,6 @@ export default function BlockEditor() { - { /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ } { ( [ editorCanvasView ] ) => editorCanvasView ? ( From 848d03c29a671376139a8e486fc1db3882065105 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 21 Apr 2023 13:59:40 +1000 Subject: [PATCH 5/7] Adding the label to the interactive element --- .../editor-canvas-container/index.js | 19 ++++++++++++++----- .../src/components/style-book/index.js | 1 - 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index d66bd5ed5c83c..b684eb34956ef 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -1,11 +1,11 @@ /** * WordPress dependencies */ -import { Children, cloneElement, useState } from '@wordpress/element'; +import { Children, cloneElement, useState, useMemo } from '@wordpress/element'; import { createSlotFill, Button } from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { closeSmall } from '@wordpress/icons'; import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; @@ -25,7 +25,7 @@ import { store as editSiteStore } from '../../store'; export function getEditorCanvasContainerTitle( view ) { switch ( view ) { case 'style-book': - return __( 'Style book' ); + return __( 'Style Book' ); default: return ''; } @@ -40,13 +40,21 @@ function EditorCanvasContainer( { closeButtonLabel, onClose = () => {}, } ) { + const editorCanvasContainerView = useSelect( + ( select ) => + unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + [] + ); const [ isClosed, setIsClosed ] = useState( false ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); const focusOnMountRef = useFocusOnMount( 'firstElement' ); const sectionFocusReturnRef = useFocusReturn(); - + const title = useMemo( + () => getEditorCanvasContainerTitle( editorCanvasContainerView ), + [ editorCanvasContainerView ] + ); function onCloseContainer() { onClose(); setEditorCanvasContainerView( 'init' ); @@ -78,11 +86,12 @@ function EditorCanvasContainer( { return ( - { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ } + { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }