From 47d6de7e011cee3dab1594fcd06af20393d5f06f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 9 May 2019 11:52:22 +0200 Subject: [PATCH 01/11] Selecting parents: Try clickthrough. Clickthrough has you select the parent before you can select the child. This is already in place on the mobile breakpoints, this just expands it to desktop as well. It is a work in progress, right now it is not working as intended: once you have "unlocked" the deepest level, it becomes immediately locked and you have to click through the layers again to unlock it again. The deepest layer should always be unlocked until you deselect all blocks again. --- .../src/components/inner-blocks/index.js | 3 +-- packages/block-library/src/columns/editor.scss | 14 +------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 2a69e5305fc3f..1137f6e5c10c6 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -106,14 +106,13 @@ class InnerBlocks extends Component { render() { const { clientId, - isSmallScreen, isSelectedBlockInRoot, renderAppender, } = this.props; const { templateInProcess } = this.state; const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', { - 'has-overlay': isSmallScreen && ! isSelectedBlockInRoot, + 'has-overlay': ! isSelectedBlockInRoot, } ); return ( diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index c771c79f5f9d3..6277ee7ee180c 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -164,17 +164,5 @@ div.block-core-columns.is-vertically-aligned-bottom { */ [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { 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; - } + left: auto; } From 2667575ec06d19fcc62f189414c059ea0ba25716 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 13 May 2019 16:59:05 +0200 Subject: [PATCH 02/11] Render overlay on top of inner block only when none of the nested blocks is selected --- assets/stylesheets/_z-index.scss | 6 ++-- .../src/components/inner-blocks/index.js | 8 ++---- .../src/components/inner-blocks/style.scss | 28 +++++++++++++++++-- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 92a044a7b899a..060511e25feb1 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -19,7 +19,6 @@ $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, @@ -60,7 +59,10 @@ $z-layers: ( // Small screen inner blocks overlay must be displayed above drop zone, // settings menu, and movers. - ".block-editor-inner-blocks__small-screen-overlay:after": 120, + ".block-editor-inner-blocks.has-overlay::after": 120, + + // The toolbar, when contextual, should be above any adjacent nested block click overlays. + ".block-editor-block-contextual-toolbar": 121, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 1137f6e5c10c6..55450a8de2b6d 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -7,7 +7,6 @@ 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'; @@ -106,13 +105,13 @@ class InnerBlocks extends Component { render() { const { clientId, - isSelectedBlockInRoot, + hasOverlay, renderAppender, } = this.props; const { templateInProcess } = this.state; const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', { - 'has-overlay': ! isSelectedBlockInRoot, + 'has-overlay': hasOverlay, } ); return ( @@ -130,7 +129,6 @@ class InnerBlocks extends Component { InnerBlocks = compose( [ withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ), - withViewportMatch( { isSmallScreen: '< medium' } ), withSelect( ( select, ownProps ) => { const { isBlockSelected, @@ -144,9 +142,9 @@ InnerBlocks = compose( [ const rootClientId = getBlockRootClientId( clientId ); return { - isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ), block: getBlock( clientId ), blockListSettings: getBlockListSettings( clientId ), + hasOverlay: ! 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 f4218ef0667eb..26a45dbdda885 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -1,9 +1,31 @@ .block-editor-inner-blocks.has-overlay::after { content: ""; position: absolute; - top: 0; + top: -$block-padding; right: 0; - bottom: 0; + bottom: -$block-padding; left: 0; - z-index: z-index(".block-editor-inner-blocks__small-screen-overlay:after"); + z-index: z-index(".block-editor-inner-blocks.has-overlay::after"); +} + +// These are temporary debug colors. +/*.block-editor-inner-blocks.has-overlay { + background-color: #00a0d2; + + .block-editor-inner-blocks.has-overlay { + background-color: #4ab866; + } +} +*/ + +// Temporary hover style for testing +.block-editor-block-list__block.is-hovered .block-editor-inner-blocks.has-overlay { + &::after { + background: rgba($blue-medium-500, 0.5); + } + + // Stop propogating beyond one level + .block-editor-inner-blocks.has-overlay::after { + background: none; + } } From b66cb2d735439911f65968f03ebac0995ccbac44 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 21 May 2019 10:07:24 +0200 Subject: [PATCH 03/11] Fix overlay, fix breadcrumb, polish. --- assets/stylesheets/_z-index.scss | 2 +- .../src/components/inner-blocks/style.scss | 31 +++++++------------ .../block-library/src/columns/editor.scss | 8 +++++ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 060511e25feb1..06a5605c2f522 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -9,7 +9,6 @@ $z-layers: ( ".block-library-classic__toolbar": 10, ".block-editor-block-list__layout .reusable-block-indicator": 1, ".block-editor-block-list__breadcrumb": 2, - ".editor-inner-blocks .block-editor-block-list__breadcrumb": 22, ".components-form-toggle__input": 1, ".components-panel__header.edit-post-sidebar__panel-tabs": -1, ".edit-post-sidebar .components-panel": -2, @@ -63,6 +62,7 @@ $z-layers: ( // The toolbar, when contextual, should be above any adjacent nested block click overlays. ".block-editor-block-contextual-toolbar": 121, + ".editor-inner-blocks .block-editor-block-list__breadcrumb": 122, // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index 26a45dbdda885..8fb8f9d2930be 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -1,27 +1,20 @@ -.block-editor-inner-blocks.has-overlay::after { - content: ""; - position: absolute; - top: -$block-padding; - right: 0; - bottom: -$block-padding; - left: 0; - z-index: z-index(".block-editor-inner-blocks.has-overlay::after"); -} - -// These are temporary debug colors. -/*.block-editor-inner-blocks.has-overlay { - background-color: #00a0d2; - - .block-editor-inner-blocks.has-overlay { - background-color: #4ab866; +.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"); } } -*/ -// Temporary hover style for testing +// Visual overlay style to indicate nesting. +// We should revisit this with the nested block outlines, .block-editor-block-list__block.is-hovered .block-editor-inner-blocks.has-overlay { &::after { - background: rgba($blue-medium-500, 0.5); + background: rgba($blue-medium-500, 0.1); } // Stop propogating beyond one level diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 6277ee7ee180c..f8780b91ebab5 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -166,3 +166,11 @@ div.block-core-columns.is-vertically-aligned-bottom { right: 0; left: auto; } + +/** + * Make single Column overlay not extend past boundaries of parent + */ +.block-core-columns > .block-editor-inner-blocks.has-overlay::after { + left: 0; + right: 0; +} From 74920ee51e7d30f45c18240fd25569ecf4ba83eb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 21 May 2019 15:19:21 +0200 Subject: [PATCH 04/11] Remove click-overlay. --- .../src/components/inner-blocks/style.scss | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index 8fb8f9d2930be..61ed91c42ac02 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -9,16 +9,3 @@ z-index: z-index(".block-editor-inner-blocks.has-overlay::after"); } } - -// Visual overlay style to indicate nesting. -// We should revisit this with the nested block outlines, -.block-editor-block-list__block.is-hovered .block-editor-inner-blocks.has-overlay { - &::after { - background: rgba($blue-medium-500, 0.1); - } - - // Stop propogating beyond one level - .block-editor-inner-blocks.has-overlay::after { - background: none; - } -} From e5a0b122fbf6651e3882f279bd70153235f3abdb Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 27 May 2019 14:58:44 +0200 Subject: [PATCH 05/11] Fix the selection of inner blocks for reusable blocks template --- .../src/components/inner-blocks/index.js | 5 +++-- packages/e2e-tests/specs/reusable-blocks.test.js | 12 ++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 55450a8de2b6d..75a6731f42db5 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -139,12 +139,13 @@ InnerBlocks = compose( [ getTemplateLock, } = select( 'core/block-editor' ); const { clientId } = ownProps; + const block = getBlock( clientId ); const rootClientId = getBlockRootClientId( clientId ); return { - block: getBlock( clientId ), + block, blockListSettings: getBlockListSettings( clientId ), - hasOverlay: ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ), + hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ), parentLock: getTemplateLock( rootClientId ), }; } ), diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js index 7a9174f5b6246..1eb25f41735e1 100644 --- a/packages/e2e-tests/specs/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/reusable-blocks.test.js @@ -45,10 +45,8 @@ describe( 'Reusable Blocks', () => { '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); - // 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 } ); + // Select all of the text in the title field. + await pressKeyWithModifier( 'primary', 'a' ); // Give the reusable block a title await page.keyboard.type( 'Greeting block' ); @@ -223,10 +221,8 @@ describe( 'Reusable Blocks', () => { '//*[contains(@class, "components-snackbar")]/*[text()="Block created."]' ); - // 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 } ); + // Select all of the text in the title field. + await pressKeyWithModifier( 'primary', 'a' ); // Give the reusable block a title await page.keyboard.type( 'Multi-selection reusable block' ); From fafcb1fd819463b5372aea823c0468c0674bf570 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 27 May 2019 15:47:23 +0200 Subject: [PATCH 06/11] Disable async mode for parent blocks when nested block selected --- packages/block-editor/src/components/block-list/index.js | 9 +++++++-- .../block-editor/src/components/block-list/style.scss | 4 ++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 2da9071693d5f..99a2994481d68 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -194,6 +194,7 @@ class BlockList extends Component { rootClientId, isDraggable, selectedBlockClientId, + selectedBlockRootClientId, multiSelectedBlockClientIds, hasMultiSelection, renderAppender, @@ -204,7 +205,7 @@ class BlockList extends Component { { map( blockClientIds, ( clientId ) => { const isBlockInSelection = hasMultiSelection ? multiSelectedBlockClientIds.includes( clientId ) : - selectedBlockClientId === clientId; + [ selectedBlockRootClientId, selectedBlockClientId ].includes( clientId ); return ( { const { getBlockOrder, + getBlockHierarchyRootClientId, isSelectionEnabled, isMultiSelecting, getMultiSelectedBlocksStartClientId, @@ -249,6 +252,7 @@ export default compose( [ } = select( 'core/block-editor' ); const { rootClientId } = ownProps; + const selectedBlockClientId = getSelectedBlockClientId(); return { blockClientIds: getBlockOrder( rootClientId ), @@ -256,7 +260,8 @@ export default compose( [ selectionEnd: getMultiSelectedBlocksEndClientId(), isSelectionEnabled: isSelectionEnabled(), isMultiSelecting: isMultiSelecting(), - selectedBlockClientId: getSelectedBlockClientId(), + selectedBlockClientId, + selectedBlockRootClientId: getBlockHierarchyRootClientId( selectedBlockClientId ), multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), hasMultiSelection: hasMultiSelection(), }; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 4aaf4e3f2c449..113feb9b3d7d0 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -211,6 +211,10 @@ */ .block-editor-block-list__layout .block-editor-block-list__block { + &.is-sync { + background-color: $alert-red; + } + &.has-warning { min-height: ( $block-padding + $block-spacing ) * 2; } From 0f5ffac9179bff26791cf4e63d7984057f7fc67c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 28 May 2019 08:31:08 +0200 Subject: [PATCH 07/11] Refactor BlockListBlock to use AsyncModeProvider --- .../block-list/block-async-mode-provider.js | 33 +++++++++++++++++++ .../src/components/block-list/block.js | 5 ++- .../src/components/block-list/index.js | 25 +++----------- .../src/components/block-list/style.scss | 4 --- 4 files changed, 41 insertions(+), 26 deletions(-) create mode 100644 packages/block-editor/src/components/block-list/block-async-mode-provider.js 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 new file mode 100644 index 0000000000000..e34298d626077 --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-async-mode-provider.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { + __experimentalAsyncModeProvider as AsyncModeProvider, + useSelect, +} from '@wordpress/data'; + +const BlockAsyncModeProvider = ( { children, clientId } ) => { + const isSyncModeForced = useSelect( ( select ) => { + const { + hasSelectedInnerBlock, + isAncestorMultiSelected, + isBlockMultiSelected, + isBlockSelected, + } = select( 'core/block-editor' ); + + const isSelected = isBlockSelected( clientId ); + const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true ); + const isPartOfMultiSelection = isBlockMultiSelected( clientId ) || + isAncestorMultiSelected( clientId ); + + return isSelected || isParentOfSelectedBlock || isPartOfMultiSelection; + } ); + + 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 a9b28f618daf5..98f12baa4ff93 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -23,7 +23,10 @@ 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 99a2994481d68..5112558b9dbf5 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -24,6 +24,7 @@ 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'; @@ -193,34 +194,25 @@ class BlockList extends Component { blockClientIds, rootClientId, isDraggable, - selectedBlockClientId, - selectedBlockRootClientId, - multiSelectedBlockClientIds, - hasMultiSelection, renderAppender, } = this.props; return (
{ map( blockClientIds, ( clientId ) => { - const isBlockInSelection = hasMultiSelection ? - multiSelectedBlockClientIds.includes( clientId ) : - [ selectedBlockRootClientId, selectedBlockClientId ].includes( clientId ); - return ( - - + ); } ) } @@ -241,18 +233,13 @@ export default compose( [ withSelect( ( select, ownProps ) => { const { getBlockOrder, - getBlockHierarchyRootClientId, isSelectionEnabled, isMultiSelecting, getMultiSelectedBlocksStartClientId, getMultiSelectedBlocksEndClientId, - getSelectedBlockClientId, - getMultiSelectedBlockClientIds, - hasMultiSelection, } = select( 'core/block-editor' ); const { rootClientId } = ownProps; - const selectedBlockClientId = getSelectedBlockClientId(); return { blockClientIds: getBlockOrder( rootClientId ), @@ -260,10 +247,6 @@ export default compose( [ selectionEnd: getMultiSelectedBlocksEndClientId(), isSelectionEnabled: isSelectionEnabled(), isMultiSelecting: isMultiSelecting(), - selectedBlockClientId, - selectedBlockRootClientId: getBlockHierarchyRootClientId( selectedBlockClientId ), - multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), - hasMultiSelection: hasMultiSelection(), }; } ), withDispatch( ( dispatch ) => { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 113feb9b3d7d0..4aaf4e3f2c449 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -211,10 +211,6 @@ */ .block-editor-block-list__layout .block-editor-block-list__block { - &.is-sync { - background-color: $alert-red; - } - &.has-warning { min-height: ( $block-padding + $block-spacing ) * 2; } From 5c28d4b62031fd91d2a09260e58360fc739c0afb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 28 May 2019 10:03:23 +0200 Subject: [PATCH 08/11] Make the reusable blocks save button clickable. i At least this means you can edit and save reusable blocks. --- assets/stylesheets/_z-index.scss | 1 + packages/block-library/src/block/edit-panel/editor.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 06a5605c2f522..0d9fc02454179 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -61,6 +61,7 @@ $z-layers: ( ".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, diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss index 6c11e19d5e227..d5b5c81fd7e71 100644 --- a/packages/block-library/src/block/edit-panel/editor.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -11,6 +11,10 @@ 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; From de050d49306ae5b5b305542163b18f8fe54b7116 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 28 May 2019 10:20:53 +0200 Subject: [PATCH 09/11] Fix so reusable blocks with nesting are editable. --- .../src/components/block-list/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 4aaf4e3f2c449..01b80df8d66be 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -305,6 +305,20 @@ } } + // 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"] { From b4b3e76f3baeac07306a9d3e25d4f94bfa1a4559 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 28 May 2019 11:18:43 +0200 Subject: [PATCH 10/11] Fix movers. The z-index was too low. It had to be higher to accommodate the other z-index changes. --- assets/stylesheets/_z-index.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 0d9fc02454179..12f9b16de2003 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -49,10 +49,6 @@ $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, @@ -65,6 +61,10 @@ $z-layers: ( ".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, + // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".edit-post-sidebar": 100000, From b0649e1f9b4d846a191993918967e20619a6d907 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 6 Jun 2019 11:41:49 +0200 Subject: [PATCH 11/11] Bring the behavior closer to what we have as of today --- .../block-list/block-async-mode-provider.js | 20 +++++-------------- .../src/components/block-list/index.js | 14 +++++++++++++ 2 files changed, 19 insertions(+), 15 deletions(-) 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 index e34298d626077..aaa2e709db92c 100644 --- 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 @@ -6,23 +6,13 @@ import { useSelect, } from '@wordpress/data'; -const BlockAsyncModeProvider = ( { children, clientId } ) => { - const isSyncModeForced = useSelect( ( select ) => { - const { - hasSelectedInnerBlock, - isAncestorMultiSelected, - isBlockMultiSelected, - isBlockSelected, - } = select( 'core/block-editor' ); - - const isSelected = isBlockSelected( clientId ); - const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true ); - const isPartOfMultiSelection = isBlockMultiSelected( clientId ) || - isAncestorMultiSelected( clientId ); - - return isSelected || isParentOfSelectedBlock || isPartOfMultiSelection; +const BlockAsyncModeProvider = ( { children, clientId, isBlockInSelection } ) => { + const isParentOfSelectedBlock = useSelect( ( select ) => { + return select( 'core/block-editor' ).hasSelectedInnerBlock( clientId, true ); } ); + const isSyncModeForced = isBlockInSelection || isParentOfSelectedBlock; + return ( { children } diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 5112558b9dbf5..79cc1b2927337 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -194,16 +194,24 @@ class BlockList extends Component { blockClientIds, rootClientId, isDraggable, + selectedBlockClientId, + multiSelectedBlockClientIds, + hasMultiSelection, renderAppender, } = this.props; return (
{ map( blockClientIds, ( clientId ) => { + const isBlockInSelection = hasMultiSelection ? + multiSelectedBlockClientIds.includes( clientId ) : + selectedBlockClientId === clientId; + return ( {