Skip to content

Commit

Permalink
Try: Remove dashed outlines for child and parent blocks.
Browse files Browse the repository at this point in the history 
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: #17089, I would encourage you test the PR here: #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 #17088 can help as well.
  • Loading branch information
@jasmussen
jasmussen committed Dec 2, 2019
1 parent 4a4bd4a commit a7d240e
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 95 deletions.
64 changes: 0 additions & 64 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}

/**
Expand Down
17 changes: 0 additions & 17 deletions packages/block-library/src/columns/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 0 additions & 14 deletions packages/block-library/src/group/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down

0 comments on commit a7d240e

Please sign in to comment.