diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 12f9b16de2003..949a0101b1f52 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -8,7 +8,7 @@ $z-layers: ( ".block-editor-block-list__block {core/image aligned wide or fullwide}": 20, ".block-library-classic__toolbar": 10, ".block-editor-block-list__layout .reusable-block-indicator": 1, - ".block-editor-block-list__breadcrumb": 2, + ".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, diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index aac68e2e6faa8..9e3212d7a81f9 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -396,6 +396,7 @@ function BlockListBlock( { 'is-typing': isTypingWithinBlock, 'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ), 'is-focus-mode': isFocusMode, + 'has-child-selected': isParentOfSelectedBlock, }, className ); diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 8ee3558ddf639..f69896e1cb9ce 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -168,8 +168,28 @@ 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-800; + } + + > .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-800; + } + } + + // 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::before, + &.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::before, + &.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-800; + } +} /** * Cross-block selection @@ -1019,11 +1039,6 @@ } } - // Position this above the toolbar of parent blocks. - .editor-inner-blocks & { - z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb"); - } - // Remove negative left breadcrumb position for left aligned blocks. [data-align="left"] & { left: 0; diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 6e9e2e6065911..1dc626a9e84e0 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -132,9 +132,18 @@ * vertical to ensure there is equal visual spacing around the inserter. Note there * is no formal API for a "passthrough" Block so this is an edge case overide */ -[data-type="core/columns"] .block-list-appender { - margin-top: $block-padding*2; - margin-bottom: $block-padding*2; +[data-type="core/columns"] { + + .block-list-appender { + margin-top: $block-padding*2; + margin-bottom: $block-padding*2; + } + + // When the individual column block is selected, the nested padding overrules + // some of this margin. We need to adjust the appender spacing again as a result. + [data-type="core/column"].is-selected .block-list-appender { + margin: $block-padding 0; + } } /** @@ -158,13 +167,11 @@ div.block-core-columns.is-vertically-aligned-bottom { justify-content: flex-end; } - /** - * Fixes single Column breadcrumb to RHS of Block boundary + * Fixes single Column breadcrumb position. */ [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { - right: 0; - left: auto; + left: -$block-left-border-width; } /** @@ -174,3 +181,19 @@ 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 68bfde8888604..166d3992c6daf 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -85,3 +85,31 @@ width: calc(100% + 60px); } } + +// 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 { + + .block-list-appender { + margin-left: 0; + margin-right: 0; + } + + .has-background .block-list-appender { + margin-top: $block-padding + $grid-size-small; + margin-bottom: $block-padding + $grid-size-small; + } +} diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap index e693daea38401..e4c3263d149e5 100644 --- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap @@ -8,13 +8,13 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `
-

First col

+

1st col

-

Second col

+

2nd col

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index b9ac58f46fd40..d3cf5231b6452 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -34,7 +34,7 @@ describe( 'adding blocks', () => { await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph. - await page.keyboard.type( 'First col' ); + await page.keyboard.type( '1st col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "1st" instead of "First" here. // TODO: ArrowDown should traverse into the second column. In slower // CPUs, it can sometimes remain in the first column paragraph. This @@ -45,7 +45,7 @@ describe( 'adding blocks', () => { await page.keyboard.type( 'Paragraph' ); await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result. await page.keyboard.press( 'Enter' ); // Insert paragraph. - await page.keyboard.type( 'Second col' ); + await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here. // Arrow down from last of layouts exits nested context to default // appender of root level. @@ -55,14 +55,14 @@ describe( 'adding blocks', () => { // Arrow up into nested context focuses last text input await page.keyboard.press( 'ArrowUp' ); activeElementText = await page.evaluate( () => document.activeElement.textContent ); - expect( activeElementText ).toBe( 'Second col' ); + expect( activeElementText ).toBe( '2nd col' ); // Arrow up in inner blocks should navigate through (1) column wrapper, // (2) text fields. await page.keyboard.press( 'ArrowUp' ); await page.keyboard.press( 'ArrowUp' ); activeElementText = await page.evaluate( () => document.activeElement.textContent ); - expect( activeElementText ).toBe( 'First col' ); + expect( activeElementText ).toBe( '1st col' ); // Arrow up from first text field in nested context focuses column and // columns wrappers before escaping out.