Skip to content

Commit

Permalink
Fix regression with column block being selected. (WordPress#14876)
Browse files Browse the repository at this point in the history
* Fix regression with column block being selected.

The columns block is currently slightly fiddly, due to the nesting nature of Columns > Column > Blocks structure. All three levels are "Blocks" in the block editor sense, and all can be selected. This is pending enhancements in WordPress#9628.

However in the mean time, we have a hack in place, this uses `pointer-events` to prevent the _mouse_ selection of the individual column blocks. This makes it drastically simpler to select the Columns block, which is where you can adjust the number of columns in the block. The individual column blocks, on the other hand, is currently largely inactionable. You can set alignments on them, which is why WordPress#9628 is urgent, but until we have a better system for selecting parent blocks, this pointer-events hack is arguably the better stopgap solution.

That hack regressed in master. This PR restores it, and makes it slightly better.

Things to test:

- Insert a columns block with content, and verify you can select both child and parent block.
- Insert an "Archives" block inside a column, and verify that the block itself is clickable, but the links inside are not (it's using component-disabled to make archive links unfollowable)

* Fix mess ¯\_(ツ)_/¯
  • Loading branch information
jasmussen authored and mchowning committed Apr 15, 2019
1 parent 773fda9 commit c0f4136
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions packages/block-library/src/columns/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -148,26 +148,26 @@ div.block-core-columns.is-vertically-aligned-bottom {
right: 0;
}

// The empty state of a columns block has the default appenders.
// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
.wp-block-columns [data-type="core/column"].is-hovered {
> .block-editor-block-list__block-edit::before {
content: none;
}

.block-editor-block-list__breadcrumb {
display: none;
}
}

// In absence of making the individual columns resizable, we prevent them from being clickable.
// This makes them less fiddly. @todo: This should be revisited as the interface is refined.
.wp-block-columns [data-type="core/column"] {
pointer-events: none;

// The empty state of a columns block has the default appenders.
// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
&.is-hovered {
> .block-editor-block-list__block-edit::before {
content: none;
}

.block-editor-block-list__breadcrumb {
display: none;
}
// This selector re-enables clicking on any child of a column block.
.block-core-columns .block-editor-block-list__layout {
pointer-events: all;
}
}

// This selector re-enables clicking on any child of a column block.
:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > * {
pointer-events: all;
}

0 comments on commit c0f4136

Please sign in to comment.