From a7d240ee289fe20723eda80422833ede4cfd1dd4 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 | 17 ----- packages/block-library/src/group/editor.scss | 14 ---- 3 files changed, 95 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ae60ac1fe512de..22a53cd34de81e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -199,70 +199,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 31189ccf39bef6..99790414819a20 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -170,23 +170,6 @@ div.block-core-columns.is-vertically-aligned-bottom { right: 0; } -/** - * Add extra padding when the parent block is selected, for easier interaction. - */ -[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[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}); - } -} - - // Fullwide: show margin left/right to ensure there's room for the side UI. // This is not a 1:1 preview with the front-end where these margins would presumably be zero. [data-type="core/columns"][data-align="full"] .wp-block-columns { diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 166d3992c6daf9..9ef7f28eae6b4d 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 {