Skip to content

Commit

Permalink
Add navigation editor block deselection when clicking canvas backgrou…
Browse files Browse the repository at this point in the history
…nd (#28876)

* Initial styleadjustments to allow full-size canvas

* Use variable for sidebar width

* Add block deselection hook

* Unskip e2e test

* Adjust spacing

* Fix classname convention and update test
  • Loading branch information
talldan authored Feb 11, 2021
1 parent 3db2b85 commit 4c97efe
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,7 @@ describe( 'Navigation editor', () => {
expect( await getSerializedBlocks() ).toMatchSnapshot();
} );

// Regressed—to be reimplemented.
it.skip( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
it( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
await setUpResponseMocking( [
...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
...getMenuItemMocks( { GET: menuItemsFixture } ),
Expand All @@ -219,7 +218,7 @@ describe( 'Navigation editor', () => {
expect( submenuLinkVisible ).toBeDefined();

// Click the editor canvas.
await page.click( '.edit-navigation-editor__block-view' );
await page.click( '.edit-navigation-layout__canvas' );

// There should be a submenu in the DOM, but it should be hidden.
const submenuLinkHidden = await page.waitForXPath( submenuLinkXPath, {
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-navigation/src/components/editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
background: $white;
border: $border-width solid $gray-900;
border-radius: $radius-block-ui;
margin-top: $grid-unit-50 * 2;
max-width: 420px;
margin: auto;

.components-spinner {
display: block;
Expand Down
1 change: 0 additions & 1 deletion packages/edit-navigation/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
display: flex;
align-items: center;
padding: $grid-unit-15;
margin-bottom: $grid-unit-40;
}

.edit-navigation-header__title-subtitle {
Expand Down
10 changes: 9 additions & 1 deletion packages/edit-navigation/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import {
BlockEditorKeyboardShortcuts,
BlockEditorProvider,
BlockInspector,
__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
} from '@wordpress/block-editor';
import { useRef } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -28,6 +30,9 @@ import InspectorAdditions from '../inspector-additions';
import { store as editNavigationStore } from '../../store';

export default function Layout( { blockEditorSettings } ) {
const canvasRef = useRef();
useBlockSelectionClearer( canvasRef );

const { saveNavigationPost } = useDispatch( editNavigationStore );
const savePost = () => saveNavigationPost( navigationPost );

Expand Down Expand Up @@ -78,7 +83,10 @@ export default function Layout( { blockEditorSettings } ) {
<NavigationEditorShortcuts
saveBlocks={ savePost }
/>
<div className="navigation-editor-canvas">
<div
className="edit-navigation-layout__canvas"
ref={ canvasRef }
>
<Editor
isPending={ ! navigationPost }
blocks={ blocks }
Expand Down
28 changes: 24 additions & 4 deletions packages/edit-navigation/src/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,33 @@
#wpcontent {
padding-left: 0;
}

// Ensure the entire layout is full-height, the background
// of the editing canvas needs to be full-height for block
// deselection to work.
#wpwrap,
#wpcontent,
#wpbody,
#wpbody-content,
.edit-navigation,
.components-drop-zone__provider,
.edit-navigation-layout {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}

.edit-navigation-layout {
margin-right: 280px;
margin-right: $sidebar-width;

.edit-navigation-layout__canvas {
// Provide space for the floating block toolbar.
padding-top: $grid-unit-40 * 3;

.navigation-editor-canvas {
max-width: 420px;
margin: auto;
// Ensure the entire layout is full-height, the background
// of the editing canvas needs to be full-height for block
// deselection to work.
flex-grow: 1;
}
}

0 comments on commit 4c97efe

Please sign in to comment.