From 14485e76d5c49bb4f0065528582384a2340d4bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 26 Aug 2020 16:08:15 +0200 Subject: [PATCH 1/3] Remove > --- .../src/components/header/index.js | 46 ++++++------ .../src/components/layout/index.js | 75 ++++++++++++++++++- packages/edit-widgets/src/style.scss | 10 +++ 3 files changed, 107 insertions(+), 24 deletions(-) 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..d83cbba359192 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 { Button, Popover } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface'; +import { close } from '@wordpress/icons'; +import { useState } 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,81 @@ 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 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 ); return ( } + header={ +
+ 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(); From 647969f2dd3efc83720d5dffbf6a2d4b216f2027 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Fri, 28 Aug 2020 19:05:11 +0200 Subject: [PATCH 2/3] Disable default autofocus in the inserter on the widgets screen --- .../block-editor/src/components/inserter/library.js | 3 +++ packages/block-editor/src/components/inserter/menu.js | 2 ++ .../src/components/inserter/search-form.js | 10 ++++++++-- packages/edit-widgets/src/components/layout/index.js | 2 ++ 4 files changed, 15 insertions(+), 2 deletions(-) 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/layout/index.js b/packages/edit-widgets/src/components/layout/index.js index d83cbba359192..6e0f966500d6a 100644 --- a/packages/edit-widgets/src/components/layout/index.js +++ b/packages/edit-widgets/src/components/layout/index.js @@ -83,6 +83,8 @@ function Layout( { blockEditorSettings } ) {
Date: Fri, 28 Aug 2020 19:15:49 +0200 Subject: [PATCH 3/3] Make sure that either inserter or sidebar are visible, but not both at the same time --- .../src/components/layout/index.js | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js index 6e0f966500d6a..a735b2eeb63c7 100644 --- a/packages/edit-widgets/src/components/layout/index.js +++ b/packages/edit-widgets/src/components/layout/index.js @@ -2,10 +2,10 @@ * WordPress dependencies */ import { Button, Popover } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface'; import { close } from '@wordpress/icons'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { __experimentalLibrary as Library } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; /** @@ -29,6 +29,10 @@ function Layout( { blockEditorSettings } ) { 'core/edit-widgets' ) ); + const { disableComplementaryArea } = useDispatch( 'core/interface' ); + const disableSidebar = () => { + disableComplementaryArea( 'core/edit-widgets' ); + }; const rootClientId = useSelect( ( select ) => { const { getBlockRootClientId, getBlockSelectionEnd } = select( @@ -52,6 +56,17 @@ function Layout( { blockEditorSettings } ) { }, [] ); 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 ( - setIsInserterOpened( ! isInserterOpened ) - } + onInserterToggle={ () => { + if ( ! isInserterOpened && hasSidebarEnabled ) { + disableSidebar(); + } + setIsInserterOpened( ! isInserterOpened ); + } } rootClientId={ rootClientId } /> }