diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 97cbdf94f97cbf..7be5a8157cd851 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -1,6 +1,7 @@ /** * Internal dependencies */ +import './style.scss'; import { registerBlock, query } from 'api'; import Editable from 'components/editable'; diff --git a/blocks/library/heading/style.scss b/blocks/library/heading/style.scss new file mode 100644 index 00000000000000..a7fde21d91ccc7 --- /dev/null +++ b/blocks/library/heading/style.scss @@ -0,0 +1,39 @@ +.editor-visual-editor__block[data-type="core/heading"] { + padding-top: 0; + padding-bottom: 0; + + h1, + h2, + h3, + h4, + h5, + h6 { + // for this block only we change the block padding to reflect margin instead + margin: 0; + padding: .5em 0; + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.6em; + } + + h3 { + font-size: 1.4em; + } + + h4 { + font-size: 1.2em; + } + + h5 { + font-size: 1.1em; + } + + h6 { + font-size: 1em; + } +} diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 5785d0eb763df9..576a4efb47ec8c 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -8,12 +8,12 @@ &[data-align="left"] { float: left; - margin-right: 15px; + margin-right: $block-padding; } &[data-align="right"] { float: right; - margin-left: 15px; + margin-left: $block-padding; } &[data-align="wide"] { @@ -91,7 +91,7 @@ } .blocks-image.is-placeholder { - margin: -15px; + margin: -$block-padding; padding: 6em 0; border: 2px solid $light-gray-500; text-align: center; diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index 45efac61426e48..18ea4d55f7d134 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -48,6 +48,10 @@ $admin-sidebar-width-big: 190px; $admin-sidebar-width-collapsed: 36px; $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 ); +/* Blocks */ +$block-padding: 14px; +$block-mover-margin: 18px; + /* Media Queries */ /* All media queries currently in WordPress: diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss index 5a41e101c9d942..a93bcef9c178ef 100644 --- a/editor/components/block-mover/style.scss +++ b/editor/components/block-mover/style.scss @@ -10,7 +10,7 @@ border: none; outline: none; background: none; - color: $light-gray-600; + color: $dark-gray-100; cursor: pointer; width: 20px; height: 20px; diff --git a/editor/components/button/style.scss b/editor/components/button/style.scss index 3c1717e5bd7304..423bf4a3c2eae1 100644 --- a/editor/components/button/style.scss +++ b/editor/components/button/style.scss @@ -6,16 +6,4 @@ &:disabled { opacity: 0.6; } - - .editor-tools__tabs & { - &.is-toggled { - background: $dark-gray-500; - color: $white; - } - - &.is-toggled:hover { - color: $white; - background: $dark-gray-400; - } - } } diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss index 4c8a891e34ab40..93e1abffa46d0b 100644 --- a/editor/header/saved-state/style.scss +++ b/editor/header/saved-state/style.scss @@ -2,6 +2,7 @@ display: flex; align-items: center; margin-right: $item-spacing; + color: $dark-gray-500; .dashicon { margin-right: 4px; diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss index 71c2bb142ae734..0f48bb2285ed68 100644 --- a/editor/header/tools/style.scss +++ b/editor/header/tools/style.scss @@ -59,4 +59,16 @@ margin-right: 4px; } } + + .editor-button { + &.is-toggled { + background: $dark-gray-500; + color: $white; + } + + &.is-toggled:hover { + color: $white; + background: $dark-gray-400; + } + } } diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 5e44792e925972..feb528cca2a258 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,7 +1,7 @@ .editor-visual-editor { margin: 0 auto; max-width: 700px; - padding: 10px; /* Floating up/down arrows invisible */ + padding: 50px 10px; /* Floating up/down arrows invisible */ &, & p { @@ -11,7 +11,7 @@ } @include break-small() { - padding: 30px 40px; /* Floating up/down appear */ + padding: 50px 40px; /* Floating up/down appear */ } @include break-large() { @@ -21,8 +21,8 @@ .editor-visual-editor__block { position: relative; - left: -35px; - padding: 15px 15px 15px 50px; + left: -#{ $block-padding + $block-mover-margin }; // make room for the mover + padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin }; // compensate for mover transition: 0.2s border-color; &:before { @@ -31,7 +31,7 @@ position: absolute; top: 0; bottom: 0; - left: 35px; + left: #{ $block-padding + $block-mover-margin }; // compensate for mover right: 0; border: 2px solid transparent; transition: 0.2s border-color; @@ -69,7 +69,7 @@ position: absolute; bottom: 100%; margin-bottom: -4px; - left: 43px; + left: #{ $block-padding * 2 + $block-mover-margin }; // compensate for mover, and indent same as padding display: flex; z-index: 1; }