Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Try additional borders and padding for nested blocks #14961

Merged
merged 38 commits into from
Jul 30, 2019
Merged

Try additional borders and padding for nested blocks #14961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
d3f8857
Add extra padding and borders to child blocks
kjellr Apr 12, 2019
8165e5a
Small tweaks margin/padding of selected Media+Text/Group blocks.
kjellr Apr 12, 2019
e5d35b1
Add has-child-selected class to parent blocks.
kjellr Apr 16, 2019
67a7180
Adjust border/padding to also apply when child blocks are selected.
kjellr Apr 16, 2019
09bc3a4
Try an animation when nested blocks are selected.
kjellr Apr 16, 2019
879f025
Hide the "Column" block.
kjellr Apr 17, 2019
66e535d
Try using a scale animation for child blocks.
kjellr Apr 18, 2019
77dedc1
Reduce scale animation to be really tiny.
kjellr Apr 18, 2019
a50aa46
Re-add has-child-selected class.
kjellr May 9, 2019
66ca27b
Selecting parents: Try clickthrough.
May 9, 2019
cd153fc
Add some visual debugging for nested overlays
gziolo May 14, 2019
762ab1d
Add hasChildSelected prop
gziolo May 16, 2019
869acc7
Add borders/padding to direct children + parents only.
kjellr May 16, 2019
60c849f
Revert "Merge branch 'try/clickthrough' into try/additional-borders-p…
kjellr May 17, 2019
324d293
Revert "Add borders/padding to direct children + parents only."
kjellr May 21, 2019
4f54fd7
Revert "Add hasChildSelected prop"
kjellr May 21, 2019
e717cfc
Remove animation, adjust specificity.
kjellr May 21, 2019
e4612ea
Columns block adjustments.
kjellr May 21, 2019
8d27002
Clean up media-text block CSS.
kjellr May 21, 2019
84824a0
Correct block breadcrumb position for the column block.
kjellr May 22, 2019
0a4903e
Move all block movers up above contextual toolbars.
kjellr May 22, 2019
272fe4a
Clean up block list appender margins.
kjellr May 22, 2019
a3e32ce
Clean up block list appender margins for the columns block.
kjellr May 22, 2019
c6462d9
Reduce specificity for the group block appender overrides.
kjellr May 22, 2019
9228859
Resolve merge inconsitencies after rebasing this branch
gziolo Jun 6, 2019
8e6705d
Merge branch 'master' into try/additional-borders-padding-for-child-b…
kjellr Jun 17, 2019
ce2759a
Improve compaibiilty with custom inner containers.
kjellr Jun 17, 2019
b0e5c99
Merge branch 'master' into try/additional-borders-padding-for-child-b…
kjellr Jun 18, 2019
f46d338
Move extra padding to just the columns and group blocks.
kjellr Jun 18, 2019
77c5321
Merge branch 'master' into try/additional-borders-padding-for-child-b…
kjellr Jun 24, 2019
47f6f44
Try fixing e2e test
ellatrix Jun 25, 2019
ac69599
Merge branch 'master' into try/additional-borders-padding-for-child-b…
kjellr Jul 1, 2019
2ff9a80
Clean up columns block placeholder padding.
kjellr Jul 1, 2019
82dfc34
Modify writing-flow test to pass.
kjellr Jul 9, 2019
45b7bbb
Followup to 82dfc34
kjellr Jul 9, 2019
f67dccf
Update snapshots for writing-flow test.
kjellr Jul 9, 2019
1b9d6bb
Add inline comments about the test adjustment.
kjellr Jul 22, 2019
7a0a201
Remove previous attempt to fix failing tests.
kjellr Jul 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ function BlockListBlock( {
'is-typing': isTypingWithinBlock,
'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
'is-focus-mode': isFocusMode,
'has-child-selected': isParentOfSelectedBlock,
},
className
);
Expand Down
27 changes: 21 additions & 6 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
tellthemachines marked this conversation as resolved.
Show resolved Hide resolved
border: $border-width dashed $dark-opacity-light-800;
}
}

/**
* Cross-block selection
Expand Down Expand Up @@ -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;
Expand Down
37 changes: 30 additions & 7 deletions packages/block-library/src/columns/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

/**
Expand All @@ -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;
}

/**
Expand All @@ -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});
}
}
28 changes: 28 additions & 0 deletions packages/block-library/src/group/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `
<!-- wp:columns -->
<div class=\\"wp-block-columns\\"><!-- wp:column -->
<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
<p>First col</p>
<p>1st col</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
<p>Second col</p>
<p>2nd col</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Expand Down
8 changes: 4 additions & 4 deletions packages/e2e-tests/specs/writing-flow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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.
Expand Down