diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index d22966dff2f67..fab48be7cc68b 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -21,6 +21,7 @@ function InserterLibrary( { showMostUsedBlocks = false, __experimentalSelectBlockOnInsert: selectBlockOnInsert, onSelect = noop, + autoFocus, } ) { const destinationRootClientId = useSelect( ( select ) => { @@ -35,6 +36,8 @@ function InserterLibrary( { return ( { ( showPatterns || hasReusableBlocks ) && ( onChange( event.target.value ) } autoComplete="off" value={ value || '' } diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js index 24feb8b2a5757..4003f82a3a355 100644 --- a/packages/edit-widgets/src/components/header/index.js +++ b/packages/edit-widgets/src/components/header/index.js @@ -1,16 +1,12 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { NavigableMenu } from '@wordpress/components'; -import { - BlockNavigationDropdown, - BlockToolbar, - Inserter, -} from '@wordpress/block-editor'; +import { __, _x } from '@wordpress/i18n'; +import { Button, NavigableMenu } from '@wordpress/components'; +import { BlockNavigationDropdown, BlockToolbar } from '@wordpress/block-editor'; import { PinnedItems } from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { plus } from '@wordpress/icons'; /** * Internal dependencies @@ -19,26 +15,32 @@ import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; -const inserterToggleProps = { isPrimary: true }; - -function Header( { isCustomizer } ) { +function Header( { + isCustomizer, + isInserterOpen, + onInserterToggle, + rootClientId, +} ) { const isLargeViewport = useViewportMatch( 'medium' ); - const rootClientId = useSelect( ( select ) => { - const { getBlockRootClientId, getBlockSelectionEnd } = select( - 'core/block-editor' - ); - return getBlockRootClientId( getBlockSelectionEnd() ); - }, [] ); return ( <>
- diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js index a9f1f6d95af7b..a735b2eeb63c7 100644 --- a/packages/edit-widgets/src/components/layout/index.js +++ b/packages/edit-widgets/src/components/layout/index.js @@ -1,9 +1,17 @@ /** * WordPress dependencies */ -import { Popover } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { Button, Popover } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface'; +import { close } from '@wordpress/icons'; +import { useState, useEffect } from '@wordpress/element'; +import { __experimentalLibrary as Library } from '@wordpress/block-editor'; +import { useViewportMatch } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils'; /** * Internal dependencies @@ -14,18 +22,101 @@ import Sidebar from '../sidebar'; import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content'; function Layout( { blockEditorSettings } ) { + const isMobileViewport = useViewportMatch( 'medium', '<' ); const hasSidebarEnabled = useSelect( ( select ) => !! select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-widgets' ) ); + const { disableComplementaryArea } = useDispatch( 'core/interface' ); + const disableSidebar = () => { + disableComplementaryArea( 'core/edit-widgets' ); + }; + + const rootClientId = useSelect( ( select ) => { + const { getBlockRootClientId, getBlockSelectionEnd } = select( + 'core/block-editor' + ); + const selectedRootId = getBlockRootClientId( getBlockSelectionEnd() ); + if ( selectedRootId ) { + return selectedRootId; + } + + // Default to the first widget area + const { getEntityRecord } = select( 'core' ); + const widgetAreasPost = getEntityRecord( + KIND, + POST_TYPE, + buildWidgetAreasPostId() + ); + if ( widgetAreasPost ) { + return widgetAreasPost?.blocks[ 0 ]?.clientId; + } + }, [] ); + + const [ isInserterOpened, setIsInserterOpened ] = useState( true ); + // Make sure that either inserter or sidebar are visible, but not both at the same time: + useEffect( () => { + if ( isInserterOpened ) { + disableSidebar(); + } + }, [ isInserterOpened ] ); + useEffect( () => { + if ( hasSidebarEnabled ) { + setIsInserterOpened( false ); + } + }, [ hasSidebarEnabled ] ); return ( } + header={ +
{ + if ( ! isInserterOpened && hasSidebarEnabled ) { + disableSidebar(); + } + setIsInserterOpened( ! isInserterOpened ); + } } + rootClientId={ rootClientId } + /> + } + leftSidebar={ + isInserterOpened && ( +
setIsInserterOpened( false ) } + > +
+
+
+
+ { + if ( isMobileViewport ) { + setIsInserterOpened( false ); + } + } } + /> +
+
+
+ ) + } sidebar={ hasSidebarEnabled && ( diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 63cfa061dd70c..bb2bdcd3b56a3 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -63,5 +63,15 @@ body.gutenberg_page_gutenberg-widgets { display: none; } +.edit-widgets-layout__inserter-panel-header { + padding-top: $grid-unit-10; + padding-right: $grid-unit-10; + display: flex; + justify-content: flex-end; + + @include break-medium() { + display: none; + } +} @include wordpress-admin-schemes();