diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
index 056304da1321a..6b7238e64b7df 100644
--- a/packages/block-editor/src/components/block-list/block-popover.js
+++ b/packages/block-editor/src/components/block-list/block-popover.js
@@ -120,7 +120,7 @@ function BlockPopover( {
animate={ false }
position={ popoverPosition }
focusOnMount={ false }
- anchorRef={ node.lastChild }
+ anchorRef={ node }
className="block-editor-block-list__block-popover"
__unstableSticky={ showEmptyBlockSideInserter ? false : popoverIsSticky }
__unstableSlotName="block-toolbar"
@@ -128,6 +128,7 @@ function BlockPopover( {
__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && node }
__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && node }
onBlur={ () => setIsToolbarForced( false ) }
+ shouldAnchorIncludePadding
>
{ ( shouldShowContextualToolbar || isToolbarForced ) && (
setErrorState( true );
@@ -308,6 +305,7 @@ function BlockListBlock( {
id={ blockElementId }
ref={ wrapper }
className={ wrapperClassName }
+ data-block={ clientId }
data-type={ name }
// Only allow shortcuts when a blocks is selected and not locked.
onKeyDown={ isSelected && ! isLocked ? onKeyDown : undefined }
@@ -326,24 +324,22 @@ function BlockListBlock( {
animationStyle
}
>
-
-
- { isValid && blockEdit }
- { isValid && mode === 'html' && (
-
- ) }
- { ! isValid && [
- ,
-
- { getSaveElement( blockType, attributes ) }
-
,
- ] }
-
- { !! hasError &&
}
-
+
+ { isValid && blockEdit }
+ { isValid && mode === 'html' && (
+
+ ) }
+ { ! isValid && [
+ ,
+
+ { getSaveElement( blockType, attributes ) }
+
,
+ ] }
+
+ { !! hasError &&
}
);
}
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 3e9a654913854..cbfe9ffa643ec 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -57,10 +57,6 @@
// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;
- [data-block] {
- position: relative;
- }
-
/**
* Notices
*/
@@ -169,17 +165,15 @@
// When selecting multiple blocks, we provide an additional selection indicator.
.block-editor-block-list__block.is-multi-selected {
// Show selection borders around every non-nested block's actual footprint.
- > [data-block] {
- box-shadow: 0 0 0 2px $blue-medium-focus;
- border-radius: 1px;
+ box-shadow: 0 0 0 2px $blue-medium-focus;
+ border-radius: 1px;
- // Windows High Contrast mode will show this outline.
- outline: 2px solid transparent;
+ // Windows High Contrast mode will show this outline.
+ outline: 2px solid transparent;
- // Show a lighter blue for dark themes.
- .is-dark-theme & {
- box-shadow: 0 0 0 2px $blue-medium-focus-dark;
- }
+ // Show a lighter blue for dark themes.
+ .is-dark-theme & {
+ box-shadow: 0 0 0 2px $blue-medium-focus-dark;
}
// Provide exceptions for placeholders.
@@ -202,7 +196,7 @@
}
// Warnings
- &.has-warning [data-block] {
+ &.has-warning {
// When a block has a warning, you shouldn't be able to manipulate the contents.
> * {
pointer-events: none;
@@ -289,10 +283,6 @@
&[data-align="right"] {
// Without z-index, won't be clickable as "above" adjacent content.
z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
- width: 100%;
-
- // When images are floated, the block itself should collapse to zero height.
- height: 0;
&::before {
content: none;
@@ -302,23 +292,19 @@
// Left.
&[data-align="left"] {
// This is in the editor only; the image should be floated on the frontend.
- > [data-block] {
- /*!rtl:begin:ignore*/
- float: left;
- margin-right: 2em;
- /*!rtl:end:ignore*/
- }
+ /*!rtl:begin:ignore*/
+ float: left;
+ margin-right: 2em;
+ /*!rtl:end:ignore*/
}
// Right.
&[data-align="right"] {
// Right: This is in the editor only; the image should be floated on the frontend.
- > [data-block] {
- /*!rtl:begin:ignore*/
- float: right;
- margin-left: 2em;
- /*!rtl:end:ignore*/
- }
+ /*!rtl:begin:ignore*/
+ float: right;
+ margin-left: 2em;
+ /*!rtl:end:ignore*/
}
// Wide and full-wide.
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 8f0714a63a3b6..99c0a4006ada2 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -39,10 +39,6 @@
padding: 0;
}
- [data-block] {
- margin: 0;
- }
-
> div section {
height: auto;
}
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index e8e69ce7cc1d9..ef3e7e78054d7 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -1,10 +1,8 @@
.block-editor-block-list__block[data-type="core/button"] {
&[data-align="center"] {
text-align: center;
- div[data-block] {
- margin-left: auto;
- margin-right: auto;
- }
+ margin-left: auto;
+ margin-right: auto;
}
&[data-align="right"] {
@@ -76,6 +74,6 @@
}
// Display "table" is used because the button container should only wrap the content and not takes the full width.
-div[data-type="core/button"] div[data-block] {
+div[data-type="core/button"] {
display: table;
}
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index fe8ca07d4ad6b..19b0acb884b58 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -4,10 +4,6 @@
}
.wp-block-buttons {
- div[data-type="core/button"] div[data-block] {
- display: block;
- }
-
&[data-align="center"] .block-editor-block-list__layout {
display: flex;
align-items: center;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index de91334846abe..2d77224a917d6 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -30,7 +30,6 @@
}
// Set full heights on Columns to enable vertical alignment preview
> [data-type="core/column"],
- > [data-type="core/column"] > div[data-block],
> [data-type="core/column"] .block-core-columns {
display: flex;
flex-direction: column;
@@ -53,6 +52,10 @@
margin-left: -$block-padding;
margin-right: -$block-padding;
+ // Zero out margins.
+ margin-top: 0;
+ margin-bottom: 0;
+
// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;
@@ -93,16 +96,10 @@
right: 0;
}
- // Zero out margins.
- > [data-block] {
- margin-top: 0;
- margin-bottom: 0;
- }
-
// The Columns block is a flex-container, therefore it nullifies margin collapsing.
// Therefore, blocks inside this will appear to create a double margin.
// We compensate for this using negative margins.
- > div > .block-core-columns > .block-editor-inner-blocks {
+ > .block-core-columns > .block-editor-inner-blocks {
margin-top: -$default-block-margin;
margin-bottom: -$default-block-margin;
}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index c32a1028be795..995297a269f86 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -53,7 +53,7 @@
// Provide every block with a default base margin. This margin provides a consistent spacing
// between blocks in the editor.
-.editor-styles-wrapper [data-block] {
+.editor-styles-wrapper .block-editor-block-list__block {
margin-top: $default-block-margin;
margin-bottom: $default-block-margin;
}
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index c82f373f9e57e..4abaf5b7778f5 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/packages/block-library/src/embed/style.scss
@@ -1,6 +1,6 @@
// Apply max-width to floated items that have no intrinsic width
-.block-editor-block-list__block[data-type="core/embed"][data-align="left"] > [data-block],
-.block-editor-block-list__block[data-type="core/embed"][data-align="right"] > [data-block],
+.block-editor-block-list__block[data-type="core/embed"][data-align="left"],
+.block-editor-block-list__block[data-type="core/embed"][data-align="right"],
.wp-block-embed.alignleft,
.wp-block-embed.alignright {
// Instagram widgets have a min-width of 326px, so go a bit beyond that.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index e991aaf2b0058..ee3531d972508 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -70,10 +70,8 @@
[data-type="core/image"][data-align="center"],
[data-type="core/image"][data-align="left"],
[data-type="core/image"][data-align="right"] {
- [data-block] {
- figure {
- margin: 0;
- }
+ figure {
+ margin: 0;
}
}
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 6bf5ffd292324..392ee5471e416 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -32,13 +32,8 @@
padding-right: 0;
margin-left: 0;
margin-right: 0;
- margin-bottom: 1em; // Useful for when items wrap.
- }
-
- // 3. Remove vertical margins on subsequent block container.
- .wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > [data-block] {
margin-top: 0;
- margin-bottom: 0;
+ margin-bottom: 1em; // Useful for when items wrap.
}
.wp-block-navigation .block-editor-block-list__block::before {
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 153069d855c5d..219b20ebde41e 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -28,6 +28,8 @@
padding-right: 0;
margin-left: 0;
margin-right: 0;
+ margin-top: 0;
+ margin-bottom: 0;
}
// 3. Minimize the block outlines.
@@ -48,12 +50,6 @@
border-color: transparent !important; // !important used to keep the selector from growing any more complex.
}
- // 5. Remove vertical margins on subsequent block container.
- .wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > [data-block] {
- margin-top: 0;
- margin-bottom: 0;
- }
-
// Hide the mover.
// Hide the sibling inserter.
.wp-block-social-links .block-editor-block-list__insertion-point { // Needs specificity.