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/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 107a08f8bd22d5..279df9ea78e08c 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..27633a23b19914 100644 --- a/packages/block-library/src/block/indicator/style.scss +++ b/packages/block-library/src/block/indicator/style.scss @@ -8,10 +8,5 @@ padding: $grid-size-small; position: absolute; 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..12073cb0d7ba63 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -53,7 +53,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 +91,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 +131,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 +231,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 { @@ -397,11 +379,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; @@ -524,37 +501,12 @@ } } - // 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; @@ -813,14 +765,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 +870,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 +914,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; } @@ -1001,24 +938,17 @@ .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; - } + position: absolute; + top: -$block-padding - $border-width; + right: -$block-padding - $border-width; + 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; } }