diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index b31bf3e2682052..8f6a7f2091c1f2 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -70,3 +70,13 @@ This list is manually curated to include valuable contributions by volunteers th | @shaunandrews | | | @hugobaeta | | | @mizejewski | | +| @buzztone | | +| @mathetos | | +| @GaryJones | | +| @jasonagnew | | +| @brickbones | | +| @iamgabrielma | | +| @swissspidy | | +| @dixitadusara | | +| @ameeker | | +| @StaggerLeee | | diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss index 915b06593ad32f..6db2dfb3963983 100644 --- a/blocks/editable/style.scss +++ b/blocks/editable/style.scss @@ -10,6 +10,14 @@ min-height: $editor-font-size * $editor-line-height; } + > p:first-child { + margin-top: 0; + } + + &.mce-content-body > p { // needs specificity + line-height: inherit; + } + &:focus { outline: none; } diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index 79ba13dfe958fe..f05c7d74079f47 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -19,3 +19,7 @@ .blocks-gallery__placeholder-instructions { margin: 1.8em 0; } + +.editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit { + overflow: hidden; +} diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 4fa4e287f04206..69dbccf1a4f99a 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -13,10 +13,10 @@ $z-layers: ( '.editor-inserter__tabs': 1, '.editor-inserter__tab.is-active': 1, '.components-panel__header': 1, + '.editor-block-mover': 10, '.editor-header': 20, '.editor-post-visibility__dialog': 30, '.editor-post-schedule__dialog': 30, - '.editor-block-mover': 30, // Show drop zone above most standard content, but below any overlays '.components-drop-zone': 100, diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index 7c132c5e480d3c..b93ca93655320c 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -1,8 +1,9 @@ .editor-block-mover { position: absolute; - top: 10px; + top: 0; left: 0; - padding: 0 14px 20px 0; // handles hover area + height: $text-editor-font-size * 4; // same height as an empty paragraph + padding: 6px 14px 6px 0; // handles hover area z-index: z-index( '.editor-block-mover' ); // Mobile, to be revisited @@ -34,4 +35,8 @@ .dashicon { display: block; } + + &:first-child { + margin-bottom: 4px; + } } diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index cee3d28ad06ddd..39176b763deceb 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -1,9 +1,11 @@ .editor-block-settings-menu { position: absolute; - top: 10px; + top: 0; right: 0; + height: $text-editor-font-size * 4; // same height as an empty paragraph + padding: 6px 0 6px 14px; // handles hover area - // Mobile, to be revisited + // Mobile display: none; @include break-small { @@ -22,7 +24,6 @@ width: 20px; height: 20px; border-radius: 50%; - margin-bottom: 8px; &[aria-disabled="true"] { cursor: default; @@ -33,4 +34,8 @@ .dashicon { display: block; } + + &:first-child { + margin-bottom: 4px; + } } diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js index e0917db81a8047..28576de7b33eab 100644 --- a/editor/modes/visual-editor/block-list.js +++ b/editor/modes/visual-editor/block-list.js @@ -249,15 +249,16 @@ class VisualEditorBlockList extends Component { ); } ) } { ! blocks.length && - +
+ +
}
.editor-inserter__block { opacity: 0; transition: opacity 150ms; @@ -389,6 +431,10 @@ $sticky-bottom-offset: 20px; font-family: $default-font; font-size: $default-font-size; box-shadow: none; + + &:active { + background: none; + } } &:hover > .editor-inserter__block, diff --git a/editor/post-permalink/style.scss b/editor/post-permalink/style.scss index 02bc5113a58b25..533363079232c0 100644 --- a/editor/post-permalink/style.scss +++ b/editor/post-permalink/style.scss @@ -2,15 +2,20 @@ display: inline-flex; align-items: center; position: absolute; - top: -36px; - left: $block-padding; - right: $block-padding; + top: -34px; box-shadow: $shadow-popover; border: 1px solid $light-gray-500; background: $white; padding: 5px; font-family: $default-font; font-size: $default-font-size; + left: 0; + right: 0; + + @include break-small() { + left: $block-padding + $block-mover-padding-visible - 2px; + right: $block-padding + $block-mover-padding-visible - 2px; + } } .editor-post-permalink__label { diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss index 714d9d1c6ae984..eb4ffbd5f03856 100644 --- a/editor/post-title/style.scss +++ b/editor/post-title/style.scss @@ -3,19 +3,25 @@ margin-left: auto; margin-right: auto; position: relative; - margin-bottom: 10px; - max-width: $visual-editor-max-width - ( 2 * $block-mover-margin ); + max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ); + padding: 5px 0; - @include break-small { - max-width: $visual-editor-max-width; + @include break-small() { + padding: 5px ( $block-padding + $block-mover-padding-visible ); } h1 { outline: 1px solid transparent; - margin: 0; - padding: #{ $block-padding / 2 } #{ $block-padding - 2px }; font-size: $editor-font-size; transition: 0.2s outline; + margin-top: 0; + margin-bottom: 0; + padding: $block-padding; + + @include break-small() { + margin-left: -$block-padding; + margin-right: -$block-padding; + } } &:hover h1 { @@ -38,7 +44,6 @@ } @include break-large() { - max-width: $text-editor-max-width; margin: 0 auto; padding: 0; } diff --git a/editor/sidebar/block-inspector/style.scss b/editor/sidebar/block-inspector/style.scss index d65291f269d1c8..213084ca9494ff 100644 --- a/editor/sidebar/block-inspector/style.scss +++ b/editor/sidebar/block-inspector/style.scss @@ -11,6 +11,8 @@ .editor-block-inspector__no-blocks { display: block; font-size: $default-font-size; - margin: 32px 16px; + background: $white; + padding: ( $panel-padding * 2 ) $panel-padding; + border-bottom: 1px solid $light-gray-500; text-align: center; } diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss index 53e30b1e576b9c..bcd3be42e43ebb 100644 --- a/editor/sidebar/style.scss +++ b/editor/sidebar/style.scss @@ -28,20 +28,14 @@ overflow: auto; height: 100%; padding-top: $sidebar-panel-header-height; + margin-top: -1px; + margin-bottom: -1px; @include break-small() { overflow: inherit; height: auto; padding-top: 0; } - - &:first-child { - margin-top: -1px; - } - - &:last-child { - margin-bottom: -1px; - } } > .components-panel .components-panel__header { @@ -111,6 +105,8 @@ .components-panel__header.editor-sidebar__panel-tabs { justify-content: flex-start; padding-left: 0; + padding-right: $panel-padding / 2; + border-top: 0; .components-icon-button { margin-left: auto;