diff --git a/block-library/freeform/editor.scss b/block-library/freeform/editor.scss index a680dcb0a0e8f6..0a6756638fe35e 100644 --- a/block-library/freeform/editor.scss +++ b/block-library/freeform/editor.scss @@ -132,7 +132,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; @@ -186,7 +186,7 @@ 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; + margin-right: -$block-side-ui-clearance - $border-width; transform: translateY(-#{ $block-padding - $border-width }); top: $block-padding; } 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 fe7b90ad185192..274de620031123 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 08b22d1f04b071..3c411beb8e7f7b 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); - padding: 10px $parent-block-padding; + margin: 0 (-$block-padding); + padding: 10px $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 2b3ed8788d7b43..21a771aaa4d2da 100644 --- a/packages/block-library/src/block/indicator/style.scss +++ b/packages/block-library/src/block/indicator/style.scss @@ -8,10 +8,5 @@ padding: 5px; 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 f082c5d255c697..900bd67d72ec4c 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -4,8 +4,8 @@ box-shadow: $shadow-popover; @include break-small { - left: -$block-parent-side-ui-clearance - $border-width; - right: -$block-parent-side-ui-clearance - $border-width; + left: -$block-side-ui-clearance - $border-width; + right: -$block-side-ui-clearance - $border-width; .editor-block-list__layout & { left: -$border-width; @@ -57,11 +57,11 @@ } @include break-small { - // use a wider available space for hovering/selecting/dragging on top level blocks - left: -$parent-block-padding - $block-padding; - right: -$parent-block-padding - $block-padding; + // Use a wider available space for hovering/selecting/dragging on top level blocks. + left: -$block-padding * 2; + right: -$block-padding * 2; - // use smaller space for hovering/selecting/dragging on child blocks + // Use smaller space for hovering/selecting/dragging on child blocks. .editor-block-list__layout & { left: 0; right: 0; @@ -132,11 +132,9 @@ padding-left: 0; padding-right: 0; - // Compensate for block padding horizontally. + // Compensate for block padding. margin-left: -$block-padding; margin-right: -$block-padding; - - // Compensate for block padding. margin-top: -$block-padding; margin-bottom: -$block-padding; } @@ -175,10 +173,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%; @@ -213,20 +213,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; } } @@ -316,14 +302,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; } // Appender @@ -441,11 +421,6 @@ right: 0; } - // Position hover label on the right - > .editor-block-list__breadcrumb { - right: -$border-width; - } - // Hide mover until wide breakpoints, or it might be covered by toolbar > .editor-block-mover { display: none; @@ -468,11 +443,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; @@ -595,37 +565,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; @@ -884,14 +829,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"] & { @@ -995,15 +934,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; @@ -1048,9 +978,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; } @@ -1074,17 +1004,11 @@ z-index: z-index(".editor-warning"); position: absolute; top: -$block-padding - $border-width; - right: -$parent-block-padding - $border-width; - left: -$parent-block-padding - $border-width; - - // Position for nested blocks - .editor-block-list__block & { - right: -$block-padding - $border-width; - left: -$block-padding - $border-width; - } + right: -$block-padding - $border-width; + left: -$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 781d5cb17537e2..90bc4aad4aede5 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 { @@ -16,14 +16,8 @@ font-family: $editor-font; line-height: $default-line-height; 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; @@ -72,7 +66,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; } }