From 58cd6e507d3574e2cb801fefd66fdd4579487e8c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 2 Aug 2019 15:40:19 +0100 Subject: [PATCH] Revert "Selecting Parent Blocks: Try clickthrough (#15537)" This reverts commit c5e8784799f4e0f4d0891f52fae95375f43b76f7. --- assets/stylesheets/_z-index.scss | 16 +++++-------- .../block-list/block-async-mode-provider.js | 23 ------------------- .../src/components/block-list/block.js | 5 +--- .../src/components/block-list/index.js | 8 +++---- .../src/components/block-list/style.scss | 14 ----------- .../src/components/inner-blocks/index.js | 12 ++++++---- .../src/components/inner-blocks/style.scss | 20 +++++++--------- .../src/block/edit-panel/editor.scss | 4 ---- .../block-library/src/columns/editor.scss | 17 +++++++++----- .../e2e-tests/specs/reusable-blocks.test.js | 12 ++++++---- 10 files changed, 44 insertions(+), 87 deletions(-) delete mode 100644 packages/block-editor/src/components/block-list/block-async-mode-provider.js diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 949a0101b1f52..11cda916e091d 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -18,6 +18,7 @@ $z-layers: ( ".components-modal__header": 10, ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, + ".block-editor-block-contextual-toolbar": 21, ".components-popover__close": 5, ".block-editor-block-list__insertion-point": 6, ".block-editor-inserter-with-shortcuts": 5, @@ -49,21 +50,16 @@ $z-layers: ( ".components-drop-zone": 100, ".components-drop-zone__content": 110, + // The block mover, particularly in nested contexts, + // should overlap most block content. + ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80, + // The block mover for floats should overlap the controls of adjacent blocks. ".block-editor-block-list__block {core/image aligned left or right}": 81, // Small screen inner blocks overlay must be displayed above drop zone, // settings menu, and movers. - ".block-editor-inner-blocks.has-overlay::after": 120, - - // The toolbar, when contextual, should be above any adjacent nested block click overlays. - ".block-editor-block-list__layout .reusable-block-edit-panel": 121, - ".block-editor-block-contextual-toolbar": 121, - ".editor-inner-blocks .block-editor-block-list__breadcrumb": 122, - - // The block mover, particularly in nested contexts, - // should overlap most block content. - ".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 121, + ".block-editor-inner-blocks__small-screen-overlay:after": 120, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } diff --git a/packages/block-editor/src/components/block-list/block-async-mode-provider.js b/packages/block-editor/src/components/block-list/block-async-mode-provider.js deleted file mode 100644 index aaa2e709db92c..0000000000000 --- a/packages/block-editor/src/components/block-list/block-async-mode-provider.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalAsyncModeProvider as AsyncModeProvider, - useSelect, -} from '@wordpress/data'; - -const BlockAsyncModeProvider = ( { children, clientId, isBlockInSelection } ) => { - const isParentOfSelectedBlock = useSelect( ( select ) => { - return select( 'core/block-editor' ).hasSelectedInnerBlock( clientId, true ); - } ); - - const isSyncModeForced = isBlockInSelection || isParentOfSelectedBlock; - - return ( - - { children } - - ); -}; - -export default BlockAsyncModeProvider; diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 55495602436a5..eb23919fcc300 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -24,10 +24,7 @@ import { } from '@wordpress/blocks'; import { KeyboardShortcuts, withFilters } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { - withDispatch, - withSelect, -} from '@wordpress/data'; +import { withDispatch, withSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; import { compose, pure } from '@wordpress/compose'; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 3e65a52fd3b2e..2f2ebdc7b02f9 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -23,7 +23,6 @@ import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import BlockAsyncModeProvider from './block-async-mode-provider'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; import { getBlockDOMNode } from '../../utils/dom'; @@ -215,10 +214,9 @@ class BlockList extends Component { selectedBlockClientId === clientId; return ( - - + ); } ) } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 5a3410d7230c4..39a2539350850 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -332,20 +332,6 @@ } } - // Reusable Blocks clickthrough overlays - &.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay { - // Remove only the top click overlay. - &::after { - display: none; - } - - // Restore it for subsequent. - .block-editor-inner-blocks.has-overlay::after { - display: block; - } - } - - // Alignments &[data-align="left"], &[data-align="right"] { diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 0d1feef14ff39..ee9f22e834727 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -7,6 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { withViewportMatch } from '@wordpress/viewport'; import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks'; @@ -107,7 +108,8 @@ class InnerBlocks extends Component { render() { const { clientId, - hasOverlay, + isSmallScreen, + isSelectedBlockInRoot, renderAppender, template, __experimentalTemplateOptions: templateOptions, @@ -119,7 +121,7 @@ class InnerBlocks extends Component { const isPlaceholder = template === null && !! templateOptions; const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', { - 'has-overlay': hasOverlay && ! isPlaceholder, + 'has-overlay': isSmallScreen && ! isSelectedBlockInRoot && ! isPlaceholder, } ); return ( @@ -143,6 +145,7 @@ class InnerBlocks extends Component { InnerBlocks = compose( [ withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ), + withViewportMatch( { isSmallScreen: '< medium' } ), withSelect( ( select, ownProps ) => { const { isBlockSelected, @@ -153,13 +156,12 @@ InnerBlocks = compose( [ getTemplateLock, } = select( 'core/block-editor' ); const { clientId } = ownProps; - const block = getBlock( clientId ); const rootClientId = getBlockRootClientId( clientId ); return { - block, + isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ), + block: getBlock( clientId ), blockListSettings: getBlockListSettings( clientId ), - hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ), parentLock: getTemplateLock( rootClientId ), }; } ), diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index e7bd479e04e02..081a4cebd064d 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -1,15 +1,11 @@ -// Add clickable overlay to blocks with nesting. -// This makes it easy to select all layers of the block. -.block-editor-inner-blocks.has-overlay { - &::after { - content: ""; - position: absolute; - top: -$block-padding; - right: -$block-padding; - bottom: -$block-padding; - left: -$block-padding; - z-index: z-index(".block-editor-inner-blocks.has-overlay::after"); - } +.block-editor-inner-blocks.has-overlay::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: z-index(".block-editor-inner-blocks__small-screen-overlay:after"); } // On fullwide blocks, don't go beyond the canvas. diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss index d5b5c81fd7e71..6c11e19d5e227 100644 --- a/packages/block-library/src/block/edit-panel/editor.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -11,10 +11,6 @@ margin: 0 (-$block-padding); padding: $grid-size $block-padding; - // Elevate the reusable blocks toolbar above the clickthrough overlay. - position: relative; - z-index: z-index(".block-editor-block-list__layout .reusable-block-edit-panel"); - // Use opacity to work in various editor styles. border: $border-width dashed $dark-opacity-light-500; border-bottom: none; diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 1dc626a9e84e0..5140fae3c5e0e 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -174,12 +174,17 @@ div.block-core-columns.is-vertically-aligned-bottom { left: -$block-left-border-width; } -/** - * Make single Column overlay not extend past boundaries of parent - */ -.block-core-columns > .block-editor-inner-blocks.has-overlay::after { - left: 0; - right: 0; +// The empty state of a columns block has the default appenders. +// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. +// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style. +.wp-block-columns [data-type="core/column"].is-hovered { + > .block-editor-block-list__block-edit::before { + content: none; + } + + .block-editor-block-list__breadcrumb { + display: none; + } } /** diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js index 81f8db73d4862..9e88fcda8e449 100644 --- a/packages/e2e-tests/specs/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/reusable-blocks.test.js @@ -45,8 +45,10 @@ describe( 'Reusable Blocks', () => { '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); - // Select all of the text in the title field. - await pressKeyWithModifier( 'primary', 'a' ); + // Select all of the text in the title field by triple-clicking on it. We + // triple-click because, on Mac, Mod+A doesn't work. This step can be removed + // when https://github.com/WordPress/gutenberg/issues/7972 is fixed + await page.click( '.reusable-block-edit-panel__title', { clickCount: 3 } ); // Give the reusable block a title await page.keyboard.type( 'Greeting block' ); @@ -221,8 +223,10 @@ describe( 'Reusable Blocks', () => { '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); - // Select all of the text in the title field. - await pressKeyWithModifier( 'primary', 'a' ); + // Select all of the text in the title field by triple-clicking on it. We + // triple-click because, on Mac, Mod+A doesn't work. This step can be removed + // when https://github.com/WordPress/gutenberg/issues/7972 is fixed + await page.click( '.reusable-block-edit-panel__title', { clickCount: 3 } ); // Give the reusable block a title await page.keyboard.type( 'Multi-selection reusable block' );