diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss index 75e9a154646a86..324fff367d27ff 100644 --- a/edit-post/components/visual-editor/style.scss +++ b/edit-post/components/visual-editor/style.scss @@ -50,8 +50,8 @@ } &[data-align="full"] > .editor-block-contextual-toolbar, - &[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars - max-width: $content-width + 2; // 1px border left and right + &[data-align="wide"] > .editor-block-contextual-toolbar { // Don't affect nested block toolbars. + max-width: $content-width + $parent-block-padding; // Add 1px border left and right. margin-left: auto; margin-right: auto; } @@ -69,8 +69,8 @@ // The base width of the title should match that of blocks even if it isn't a block .editor-post-title { @include break-small() { - padding-left: $block-side-ui-padding; - padding-right: $block-side-ui-padding; + padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; + padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; } } .edit-post-visual-editor .editor-post-title__block { @@ -78,13 +78,13 @@ margin-right: auto; max-width: $content-width; - // stack borders + // Stack borders. > div { - margin-left: -1px; - margin-right: -1px; + margin-left: 0; + margin-right: 0; } - // include space for side UI on desktops + // Include space for side UI on desktops. @include break-small() { > div { margin-left: -$block-side-ui-width; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 0b2c228fc836cb..9e08d43db8fd32 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -104,11 +104,11 @@ } .editor-block-list__layout { - // make room in the main content column for the side UI - // the side UI uses negative margins to position itself so as to not affect the block width + // Make room in the main content column for the side UI. + // The side UI uses negative margins to position itself so as to not affect the block width. @include break-small() { - padding-left: $block-side-ui-padding; - padding-right: $block-side-ui-padding; + padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; + padding-right: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; } // Don't add side padding for nested blocks, and compensate for block padding @@ -221,14 +221,19 @@ transition: outline .1s linear; pointer-events: none; - // show wider padding for top level blocks - right: -$parent-block-padding; - left: -$parent-block-padding; top: -$block-padding; bottom: -$block-padding; + right: -$block-padding; + left: -$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 + // Show smaller padding for child blocks. .editor-block-list__block-edit:before { right: -$block-padding; left: -$block-padding; @@ -346,16 +351,25 @@ // Alignments &[data-align="left"], &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content + // Without z-index, won't be clickable as "above" adjacent content. z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' ); width: 100%; - // When images are floated, the block itself should collapse to zero height + // When images are floated, the block itself should collapse to zero height. margin-bottom: 0; + height: 0; - // Hide block outline when an image is floated - &:before { - content: none; + // Hide block outline when an image is floated. + .editor-block-list__block-edit { + + &:before { + content: none; + } + } + + // The padding collapses, but the outline is still 1px to compensate for. + .editor-block-contextual-toolbar { + margin-bottom: 1px; } } @@ -432,6 +446,7 @@ > .editor-block-mover { display: none; } + @include break-wide() { > .editor-block-mover { display: block; @@ -455,10 +470,10 @@ right: -$border-width; } - // compensate for main container padding, subtract border + // Compensate for main container padding and subtract border. @include break-small() { - margin-left: -$block-side-ui-padding + $border-width; - margin-right: -$block-side-ui-padding + $border-width; + margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; + margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; } > .editor-block-list__block-edit { @@ -470,7 +485,7 @@ margin-right: -$block-side-ui-padding - $block-padding; } - // this explicitly sets the width of the block, to override the fit-content from the image block + // This explicitly sets the width of the block, to override the fit-content from the image block. figure { width: 100%; } @@ -853,7 +868,11 @@ z-index: z-index( '.editor-block-list__breadcrumb' ); // Position in the top right of the border - right: -$block-parent-side-ui-clearance; + right: -$block-side-ui-clearance; + + @include break-small() { + right: -$block-parent-side-ui-clearance; + } top: 0; // Nested diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss index 68c229dfaa9ccb..3a5c27b33580e2 100644 --- a/editor/components/default-block-appender/style.scss +++ b/editor/components/default-block-appender/style.scss @@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; right: $item-spacing; // show on the right on mobile @include break-small { - left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance; + left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; right: auto; } @@ -85,6 +85,10 @@ $empty-paragraph-height: $text-editor-font-size * 4; .editor-inserter__toggle { transition: opacity 0.2s; border-radius: 50%; + width: $block-side-ui-width; + height: $block-side-ui-width; + top: 4px; + padding: 4px; // use opacity to work in various editor styles &:not( :hover ) { diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss index 76a5fc757ad9bf..fe2aa732a10524 100644 --- a/editor/components/post-title/style.scss +++ b/editor/components/post-title/style.scss @@ -9,15 +9,30 @@ .editor-post-title__input { display: block; width: 100%; - padding: #{ $block-padding + 5px } $parent-block-padding; margin: 0; box-shadow: none; - border: 1px solid transparent; background: transparent; font-family: $editor-font; line-height: $default-line-height; transition: border .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-top: 1px solid transparent; + border-bottom: 1px solid transparent; + border-left: 0; + border-right: 0; + + @include break-small() { + border: 1px solid transparent; + } + // Match h1 heading font-size: 2.441em; font-weight: 600;