diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index b494e9f6fdc50..39e1bb461d46b 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -37,6 +37,9 @@ $z-layers: ( // Active pill button ".components-button.is-button {:focus or .is-primary}": 1, + // Reusable blocks UI, needs to be above sibling inserter. + ".editor-block-list__layout .reusable-block-edit-panel": 7, + // The draggable element should show up above the entire UI ".components-draggable__clone": 1000000000, diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss index ff73c68fee7e3..854cfe03f282f 100644 --- a/packages/block-library/src/block/edit-panel/style.scss +++ b/packages/block-library/src/block/edit-panel/style.scss @@ -8,8 +8,10 @@ font-size: $default-font-size; position: relative; top: -$block-padding; - margin: 0 (-$block-padding) (-$block-padding) (-$block-padding); + margin: 0 (-$block-padding); padding: $grid-size $block-padding; + position: relative; + z-index: z-index(".editor-block-list__layout .reusable-block-edit-panel"); // Show a smaller padding when nested. .editor-block-list__layout & { diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index ebe614483c4a5..a96a6dcf8c1ea 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -25,15 +25,6 @@ } } -// This block has flex container children. Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers. -// Therefore, let's at least not add any additional margins here. -// The goal is for the editor to look more like the front-end. -.editor-block-list__layout .editor-block-list__block[data-type="core/columns"] > .editor-block-list__block-edit, -.editor-block-list__layout .editor-block-list__block[data-type="core/column"] > .editor-block-list__block-edit { - margin-top: 0; - margin-bottom: 0; -} - .wp-block-columns { display: block; @@ -55,8 +46,13 @@ // The Column block is a child of the Columns block and is mostly a passthrough container. // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. - margin-top: -$block-padding; - margin-bottom: -$block-padding; + margin-top: -$block-padding - $block-padding; + margin-bottom: -$block-padding - $block-padding; + + > .editor-block-list__block-edit { + margin-top: 0; + margin-bottom: 0; + } // On mobile, only a single column is shown, so match adjacent block paddings. padding-left: 0; @@ -130,3 +126,13 @@ } } } + +// In absence of making the individual columns resizable, we prevent them from being clickable. +// This makes them less fiddly. This will be revisited as the interface is refined. +.wp-block-columns [data-type="core/column"] { + pointer-events: none; +} + +:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > .editor-inner-blocks { + pointer-events: all; +} diff --git a/packages/components/src/disabled/style.scss b/packages/components/src/disabled/style.scss index 8ca29bb801e15..77e0dab63a0b8 100644 --- a/packages/components/src/disabled/style.scss +++ b/packages/components/src/disabled/style.scss @@ -10,4 +10,9 @@ bottom: 0; left: 0; } + + // Also make nested blocks unselectable. + * { + pointer-events: none; + } } diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index c66a202741175..28632c0eda60a 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -57,14 +57,9 @@ margin-right: -$block-padding; } - // Adjust the spacing of the appender to match text blocks. - .editor-default-block-appender > .editor-default-block-appender__content { - margin-top: $block-padding * 2 + $block-spacing; - } - // Space every block, and the default appender, using margins. // This allows margins to collapse, which gives a better representation of how it looks on the frontend. - > .editor-default-block-appender__content, + .editor-default-block-appender > .editor-default-block-appender__content, > .editor-block-list__block > .editor-block-list__block-edit, > .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit { margin-top: $block-padding * 2 + $block-spacing;