diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 7b250eba9d375..c925426273b1b 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -71,16 +71,16 @@ body.gutenberg_page_gutenberg-demo { padding: 6px 10px; &::-webkit-input-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &::-moz-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &:-ms-input-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } &:-moz-placeholder { - color: $dark-gray-100; + color: $dark-gray-300; } } } diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index f24ebe8f9a1a2..f36e9e9c51bb8 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -3,6 +3,13 @@ top: 10px; left: 0; padding: 0 14px 20px 0; // handles hover area + + // Mobile, to be revisited + display: none; + + @include break-small { + display: block; + } } .editor-block-mover__control { diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index 8fe513cb4e409..cee3d28ad06dd 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -2,6 +2,13 @@ position: absolute; top: 10px; right: 0; + + // Mobile, to be revisited + display: none; + + @include break-small { + display: block; + } } .editor-block-settings-menu__control { diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js index 27864e959e0c0..f5a0b1eb55865 100644 --- a/editor/modes/visual-editor/block-list.js +++ b/editor/modes/visual-editor/block-list.js @@ -229,7 +229,7 @@ class VisualEditorBlockList extends Component { type="text" readOnly className="editor-visual-editor__placeholder" - value={ ! blocks.length ? __( 'Write your story.' ) : __( 'Continue writing…' ) } + value={ ! blocks.length ? __( 'Write your story' ) : __( 'Continue writing…' ) } onFocus={ ! blocks.length ? this.appendDefaultBlock : noop } onClick={ !! blocks.length ? this.appendDefaultBlock : noop } onKeyDown={ !! blocks.length ? this.onPlaceholderKeyDown : noop } diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index f8411f8cce6b3..9fd89aaa94274 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -29,19 +29,30 @@ margin-bottom: 5px; max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ); position: relative; - // The block mover needs to stay inside the block to allow clicks when hovering the block - padding: $block-padding $block-padding + $block-mover-padding-visible; + + padding: $block-padding; + + @include break-small { + // The block mover needs to stay inside the block to allow clicks when hovering the block + padding: $block-padding $block-padding + $block-mover-padding-visible; + } &:before { z-index: z-index( '.editor-visual-editor__block:before' ); content: ''; position: absolute; - top: 0; - bottom: 0; - left: $block-mover-padding-visible; - right: $block-mover-padding-visible; outline: 1px solid transparent; transition: 0.2s outline; + top: 0; + bottom: 0; + + left: 0; + right: 0; + + @include break-small { + left: $block-mover-padding-visible; + right: $block-mover-padding-visible; + } } &.is-hovered:before { @@ -211,14 +222,17 @@ z-index: z-index( '.editor-visual-editor__block-controls' ); margin-top: -$block-controls-height - $item-spacing; margin-bottom: $item-spacing + 20px; // 20px is the offset from the bottom of the selected block where it stops sticking - height: $block-controls-height; width: 0; white-space: nowrap; - top: $header-height + $item-spacing; + // Mobile viewport + top: $header-height - 1px; + margin-left: -$block-padding; + margin-right: -$block-padding; + // Larger viewports @include break-small() { - top: $header-height + $admin-bar-height-big + $item-spacing; + margin-left: 0; } @include break-medium() { @@ -240,6 +254,7 @@ $sticky-bottom-offset: 20px; .editor-visual-editor__block-controls .components-toolbar { margin-right: -1px; + // Larger viewports @include break-small() { margin-right: $item-spacing; } @@ -250,7 +265,20 @@ $sticky-bottom-offset: 20px; } .editor-visual-editor .editor-inserter { - margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick + margin: $item-spacing; + + @include break-small { + margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } ); // account for full-width trick + } + + .editor-inserter__toggle { + color: $dark-gray-300; + margin: 4px 0 0 4px; // align better with text blocks + } + + .editor-inserter__toggle.components-icon-button:not(:disabled):hover { + color: $blue-medium-500; + } } .editor-visual-editor .editor-visual-editor__insertion-point { @@ -283,7 +311,7 @@ $sticky-bottom-offset: 20px; transition: 0.2s outline; text-align: left; width: 100%; - color: $light-gray-700; + color: $dark-gray-300; font-size: $editor-font-size; line-height: $editor-line-height; cursor: text; diff --git a/editor/post-title/index.js b/editor/post-title/index.js index ecb6f5680b524..fa22b7434e9b5 100644 --- a/editor/post-title/index.js +++ b/editor/post-title/index.js @@ -99,7 +99,7 @@ class PostTitle extends Component { className="editor-post-title__input" value={ title } onChange={ this.onChange } - placeholder={ __( 'Add title…' ) } + placeholder={ __( 'Add title' ) } onFocus={ this.onSelect } onClick={ this.onSelect } onKeyDown={ this.onKeyDown } diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss index cd2bd8aaade86..714d9d1c6ae98 100644 --- a/editor/post-title/style.scss +++ b/editor/post-title/style.scss @@ -2,9 +2,13 @@ .editor-post-title { margin-left: auto; margin-right: auto; - max-width: $visual-editor-max-width; position: relative; margin-bottom: 10px; + max-width: $visual-editor-max-width - ( 2 * $block-mover-margin ); + + @include break-small { + max-width: $visual-editor-max-width; + } h1 { outline: 1px solid transparent;