From 616a4089c820c8a5f0117e6a6295694cfea2cc25 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 25 Oct 2019 12:15:25 +0200 Subject: [PATCH] Try: Remove dashed outlines for child and parent blocks. This PR reverts past efforts by myself and Kjell to make parent/child block interactions easier. This is not because that effort was not necessary, it is more necessary than ever, but it was because it did not work as well as we had intended. In actual practice the added padding and dashed outlines added confusion and additional UI complexity, where it was meant to do the opposite. Instead, there is an incoming breadcrumbs toolbar intended to alleviate the same problem. Tracked here: https://github.com/WordPress/gutenberg/issues/17089, I would encourage you test the PR here: https://github.com/WordPress/gutenberg/pull/17838. With this breadcrumb toolbar present, the current state of what you're editing becomes visible in a more more clear (text indication) way, with consistent buttons (breadcrumbes) to select parent blocks, without hunting pixels. Additional efforts such as those being explored in https://github.com/WordPress/gutenberg/issues/17088 can help as well. --- .../src/components/block-list/style.scss | 64 ------------------- .../block-library/src/columns/editor.scss | 16 ----- packages/block-library/src/group/editor.scss | 14 ---- 3 files changed, 94 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 761632c49d7c7..e8bae39499d4b 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -177,70 +177,6 @@ opacity: 1; } } - - // Add extra border to parent blocks when their children are selected. - &.has-child-selected { - - > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - &.is-hovered > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before { - border-style: solid; - border-color: $dark-opacity-light-500; - border-left-color: transparent; - - .is-dark-theme & { - border-color: $light-opacity-light-400; - border-left-color: transparent; - } - } - } - - // Add extra border to child blocks when they are selected. - &.is-selected { - - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected), - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected), - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) { - - > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - &.is-hovered > .block-editor-block-list__block-edit::before { - border-style: solid; - border-color: $dark-opacity-light-500; - border-left-color: transparent; - - .is-dark-theme & { - border-color: $light-opacity-light-400; - border-left-color: transparent; - } - } - } - } } /** diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 2045a1e12e965..304cd6bccf3b2 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -184,19 +184,3 @@ div.block-core-columns.is-vertically-aligned-bottom { left: 0; right: 0; } - -/** - * Add extra padding when the parent block is selected, for easier interaction. - */ -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks { - padding: $block-padding; - - // Negate this padding for the placeholder. - > .components-placeholder { - margin: -$block-padding; - width: calc(100% + #{$block-padding * 2}); - } -} diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 166d3992c6daf..9ef7f28eae6b4 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -86,20 +86,6 @@ } } -// Add padding when the block is selected, for easier interaction. -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group { - - > .wp-block-group__inner-container > .block-editor-inner-blocks { - padding: $block-padding; - } - - &:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { - margin-top: -$block-padding * 2; - margin-bottom: -$block-padding * 2; - } -} - // Place block list appender in the same place content will appear. [data-type="core/group"].is-selected {