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.