Skip to content

Commit

Permalink
Group: Fix click-first state (#43513)
Browse files Browse the repository at this point in the history
* Group: Fix click-first state

* Try fix for block insertion tests.

* Move the code to the Button Block Appender component.

Co-authored-by: tellthemachines <[email protected]>
  • Loading branch information
jasmussen and tellthemachines authored Aug 26, 2022
1 parent e91cb53 commit ca63ca0
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,28 @@
color: $black;
}
}

// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
.block-list-appender:only-child {
.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
pointer-events: none;

&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: $border-width dashed currentColor;
opacity: 0.4;
border-radius: $radius-block-ui;
pointer-events: none;
}

.block-editor-inserter {
visibility: hidden;
}
}
}
25 changes: 0 additions & 25 deletions packages/block-library/src/group/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,28 +53,3 @@
pointer-events: all;
}
}

// Show an unselected empty group button as a dashed outline instead of the appender button.
// This effectively adds a selectable-to-delete state.
.is-layout-flow.block-editor-block-list__block:not(.is-selected) {
> .block-list-appender:only-child {
pointer-events: none;

&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: $border-width dashed currentColor;
opacity: 0.4;
border-radius: $radius-block-ui;
pointer-events: none;
}

.block-editor-inserter {
visibility: hidden;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,8 @@ describe( 'Inserting blocks', () => {
await insertBlock( 'Group' );
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Paragraph after group' );
// Click the Group first to make the appender inside it clickable.
await page.click( '[data-type="core/group"]' );
await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
const browseAll = await page.waitForXPath(
'//button[text()="Browse all"]'
Expand All @@ -295,6 +297,8 @@ describe( 'Inserting blocks', () => {
await insertBlock( 'Group' );
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Text' );
// Click the Group first to make the appender inside it clickable.
await page.click( '[data-type="core/group"]' );
await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
await page.focus( INSERTER_SEARCH_SELECTOR );
Expand Down

0 comments on commit ca63ca0

Please sign in to comment.