diff --git a/block-library/freeform/editor.scss b/block-library/freeform/editor.scss index 81c53e7f81c211..9c03b0667461d2 100644 --- a/block-library/freeform/editor.scss +++ b/block-library/freeform/editor.scss @@ -146,7 +146,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { .freeform-toolbar { width: auto; - margin: 0 #{ -$parent-block-padding }; + margin: 0 #{ -$block-padding }; position: sticky; z-index: z-index(".freeform-toolbar"); top: $block-padding; @@ -209,8 +209,8 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div { .editor-block-list__block[data-type="core/freeform"] { .editor-block-contextual-toolbar { float: right; - margin-right: -$block-padding - $block-side-ui-clearance - $border-width; - transform: translateY(-#{ $block-padding }); + margin-right: -$block-side-ui-clearance - $border-width; + transform: translateY(-#{ $block-padding - $border-width }); top: $block-padding; .editor-block-toolbar { diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss index 3f7675fd84bed5..b46070da687ae0 100644 --- a/edit-post/assets/stylesheets/_variables.scss +++ b/edit-post/assets/stylesheets/_variables.scss @@ -50,14 +50,12 @@ $inserter-tabs-height: 36px; $block-toolbar-height: $block-controls-height + $border-width; // Blocks -$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child $block-padding: 14px; // padding of nested blocks $block-spacing: 4px; // vertical space between blocks $block-side-ui-width: 28px; // width of the side UI, matches half matches half of a single line of text, so two buttons stacke matches 1 $block-side-ui-clearance: 2px; // space between side UI and block $block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI -$block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index 9f44e1dcb1564e..44b6824b184860 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -9,7 +9,8 @@ $z-layers: ( ".editor-block-list__block {core/image aligned left or right}": 20, ".editor-block-list__block {core/image aligned wide or fullwide}": 20, ".freeform-toolbar": 10, - ".editor-block-list__breadcrumb": 1, + ".editor-block-list__layout .reusable-block-indicator": 1, + ".editor-block-list__breadcrumb": 2, ".components-form-toggle__input": 1, ".editor-inserter__tabs": 1, ".editor-inserter__tab.is-active": 1, diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 7fb9dce4d01877..c76e233652d48f 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -32,12 +32,12 @@ // Use specific selector to not affect nested block toolbars. &[data-align="wide"] > .editor-block-contextual-toolbar, &[data-align="full"] > .editor-block-contextual-toolbar { - width: calc(100% + #{ ($parent-block-padding * 4) + $border-width + $border-width }); // Matches the negative margins applied to parent blocks. + width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks. height: 0; // This collapses the container to an invisible element without margin. text-align: center; .editor-block-toolbar { - max-width: $content-width + $block-padding + $block-padding; + max-width: $content-width; width: 100%; position: relative; } @@ -45,7 +45,7 @@ // The centering math changes when a fullwide image doesn't have block padding. &[data-align="full"] > .editor-block-contextual-toolbar { - width: calc(100% + #{ ($parent-block-padding * 2) + ($block-padding * 2) }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide. + width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide. .editor-block-toolbar { max-width: $content-width - $border-width - $border-width; @@ -80,11 +80,11 @@ margin-right: 0; } - // Include space for side UI on desktops. + // Stretch to mimic outline padding on desktop. @include break-small() { > div { - margin-left: -$block-side-ui-width; - margin-right: -$block-side-ui-width; + margin-left: -$block-side-ui-clearance; + margin-right: -$block-side-ui-clearance; } } } diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss index df57f3b5cbfb8f..854971aa7bddf9 100644 --- a/packages/block-library/src/block/edit-panel/style.scss +++ b/packages/block-library/src/block/edit-panel/style.scss @@ -8,8 +8,8 @@ font-size: $default-font-size; position: relative; top: -$block-padding; - margin: 0 (-$parent-block-padding) (-$block-padding) (-$parent-block-padding); - padding: $grid-size $parent-block-padding; + margin: 0 (-$block-padding) (-$block-padding) (-$block-padding); + padding: $grid-size $block-padding; // Show a smaller padding when nested. .editor-block-list__layout & { diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/style.scss index ccbc57ec7c33d0..1f3937ea99cd94 100644 --- a/packages/block-library/src/block/indicator/style.scss +++ b/packages/block-library/src/block/indicator/style.scss @@ -7,11 +7,7 @@ height: 30px; padding: $grid-size-small; position: absolute; + z-index: z-index(".editor-block-list__layout .reusable-block-indicator"); width: 30px; - right: -$parent-block-padding; - - // Show less offset in nested contexts. - .editor-block-list__layout & { - right: -$block-padding; - } + right: -$block-padding; } diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index b059f363d0f08b..929a6bdb7a1188 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -1,8 +1,7 @@ .editor-block-list__layout .components-draggable__clone { // Hide the Block UI when dragging the block // This ensures the page scroll properly (no sticky elements) - .editor-block-contextual-toolbar, - .editor-block-settings-menu { + .editor-block-contextual-toolbar { // I think important is fine here to avoid over complexing the selector display: none !important; } @@ -53,7 +52,7 @@ padding-left: 0; padding-right: 0; - // Compensate for block padding horizontally. + // Compensate for block padding. margin-left: -$block-padding; margin-right: -$block-padding; } @@ -91,10 +90,12 @@ /** * Notices */ + .components-placeholder .components-with-notices-ui { margin: -10px 20px 12px 20px; width: calc(100% - 40px); } + .components-with-notices-ui { margin: 0 0 12px 0; width: 100%; @@ -129,20 +130,6 @@ left: -$block-padding; top: -$block-padding; bottom: -$block-padding; - - // Show wider padding for top level blocks. - @include break-small() { - right: -$parent-block-padding; - left: -$parent-block-padding; - } - } - - // Show smaller padding for child blocks. - .editor-block-list__block-edit::before { - right: -$block-padding; - left: -$block-padding; - top: -$block-padding; - bottom: -$block-padding; } } @@ -243,14 +230,8 @@ top: -$block-padding; bottom: -$block-padding; - right: -$parent-block-padding; - left: -$parent-block-padding; - - // Position for nested blocks - .editor-block-list__block & { - right: -$block-padding; - left: -$block-padding; - } + right: -$block-padding; + left: -$block-padding; } &.has-warning.is-selected .editor-block-list__block-edit::after { @@ -345,8 +326,7 @@ z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}"); // Mover and settings above - > .editor-block-mover, - > .editor-block-settings-menu { + > .editor-block-mover { // This moves the menu up by the height of the button + border + padding. top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; bottom: auto; @@ -360,13 +340,7 @@ } } - > .editor-block-settings-menu { - width: $block-side-ui-width; - flex-direction: row; - } - - > .editor-block-mover .editor-block-mover__control, - > .editor-block-settings-menu > * { + > .editor-block-mover .editor-block-mover__control { float: left; } @@ -397,16 +371,6 @@ // Wide &[data-align="wide"] { - // Position hover label on the right - > .editor-block-list__breadcrumb { - right: -$block-padding; - } - - // Position ellipsis. - > .editor-block-settings-menu { - right: -$block-padding + $block-side-ui-clearance; - } - // Position mover > .editor-block-mover { left: -$block-padding + $border-width; @@ -450,11 +414,6 @@ border-right-width: 0; } - // Position ellipsis. - > .editor-block-settings-menu { - right: $block-side-ui-clearance; - } - // Position mover > .editor-block-mover { left: $border-width; @@ -497,7 +456,6 @@ .editor-block-list__block { // Left and right block settings and mover. - > .editor-block-settings-menu, > .editor-block-mover { position: absolute; width: $block-side-ui-width + $block-side-ui-clearance; @@ -507,7 +465,6 @@ } // Position depending on whether selected or not. - > .editor-block-settings-menu, > .editor-block-mover { top: -$block-padding - $border-width; } @@ -517,44 +474,18 @@ &.is-multi-selected, &.is-selected, &.is-hovered { - .editor-block-settings-menu, .editor-block-mover { z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}"); } } } - // Right side UI - > .editor-block-settings-menu { - padding-left: $block-side-ui-clearance; - - // Position for top level blocks - right: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance; - - // Position for nested blocks - .editor-block-list__block & { - right: -$block-side-ui-width - $block-side-ui-clearance; - } - - // Mobile - display: none; - @include break-small() { - display: flex; - flex-direction: column; - } - } - // Left side UI > .editor-block-mover { padding-right: $block-side-ui-clearance; // Position for top level blocks - left: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance; - - // Position for nested blocks - .editor-block-list__block & { - left: -$block-side-ui-width - $block-side-ui-clearance; - } + left: -$block-side-ui-width - $block-side-ui-clearance; // Mobile display: none; @@ -603,8 +534,7 @@ } .editor-inserter__toggle, - .editor-block-mover__control, - .editor-block-settings-menu .components-button { + .editor-block-mover__control { width: $icon-button-size; height: $icon-button-size; border-radius: $radius-round-rectangle; @@ -628,11 +558,6 @@ float: left; } } - - // Block Settings - .editor-block-settings-menu > * { - float: left; - } } // Reset negative margins on mobile for full-width. @@ -813,14 +738,8 @@ margin-right: 0; @include break-small() { - margin-left: -$parent-block-padding - $parent-block-padding - $border-width; - margin-right: -$parent-block-padding - $parent-block-padding - $border-width; - - // Position toolbar for nested contexts. - .editor-block-list__block & { - margin-left: -$parent-block-padding - $block-padding - $border-width; - margin-right: -$parent-block-padding - $block-padding - $border-width; - } + margin-left: -$block-side-ui-width - $block-padding - $border-width; + margin-right: -$block-side-ui-width - $block-padding - $border-width; // Except for wide elements, this causes a horizontal scrollbar. [data-align="full"] & { @@ -924,15 +843,6 @@ right: 0; top: -$block-padding - $border-width; - @include break-small() { - right: -$block-parent-side-ui-clearance; - } - - // Nested - .editor-block-list__block-edit & { - right: $parent-block-padding - $block-padding - $block-parent-side-ui-clearance; - } - .components-toolbar { padding: 0; border: none; @@ -977,9 +887,9 @@ &::before { bottom: 0; content: ""; - left: -$parent-block-padding - $block-padding; + left: -$block-padding * 2; position: absolute; - right: -$parent-block-padding - $block-padding; + right: -$block-padding * 2; top: 0; } @@ -1002,23 +912,15 @@ .editor-block-list__block .editor-warning { z-index: z-index(".editor-warning"); position: relative; - - // Stretch the warning edge to edge. - margin-left: -$parent-block-padding - $border-width; - margin-right: -$parent-block-padding - $border-width; - - // Stretch the warning less in nested contexts. - .editor-block-list__block & { - margin-left: -$block-padding - $border-width; - margin-right: -$block-padding - $border-width; - } + margin-right: -$block-padding - $border-width; + margin-left: -$block-padding - $border-width; // Pull the warning upwards to the edge, and add a negative bottom margin to compensate. margin-bottom: -$block-padding - $border-width; transform: translateY(-$block-padding - $border-width); // Bigger padding on mobile where blocks are edge to edge. - padding: 10px $parent-block-padding; + padding: 10px $block-padding; @include break-small() { padding: 10px $block-padding; } diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index a2e762ac9b51ba..0c8fc2c4ca3e88 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -4,7 +4,7 @@ font-size: $editor-font-size; @include break-small() { - padding: 5px $block-parent-side-ui-clearance; + padding: 5px $block-side-ui-clearance; } .editor-post-title__input { @@ -17,14 +17,8 @@ line-height: $default-line-height; color: $dark-gray-900; transition: border 0.1s ease-out; - - // Show wider parent padding on Desktop breakpoints. padding: #{ $block-padding + 5px } $block-padding; - @include break-small() { - padding: #{ $block-padding + 5px } $parent-block-padding; - } - // Stack borders on mobile. border: $border-width solid transparent; border-left-width: 0; @@ -86,7 +80,7 @@ right: 0; @include break-small() { - left: $block-parent-side-ui-clearance; - right: $block-parent-side-ui-clearance; + left: $block-side-ui-clearance; + right: $block-side-ui-clearance; } }