From b5036a395bdec86c0203ba6f4e0e7feb2c9f3802 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 18 Oct 2017 12:12:25 +0200 Subject: [PATCH 01/12] First pass at alternate block style. --- editor/block-mover/style.scss | 2 +- editor/block-settings-menu/style.scss | 2 +- editor/modes/visual-editor/style.scss | 30 +++++++++++++++++---------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index ed9f6c2e9c2f22..e91653588defbf 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -1,6 +1,6 @@ .editor-block-mover { position: absolute; - top: 0; + top: 4px; left: 4px; height: $text-editor-font-size * 4; // same height as an empty paragraph padding: 6px 14px 6px 0; // handles hover area diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index 0df3a8cff74c64..27ae680a4272cd 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -1,6 +1,6 @@ .editor-block-settings-menu { position: absolute; - top: 0; + top: 16px; right: 4px; padding: 6px 0 6px 14px; // handles hover area diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 7015c388946755..b572a440dc0c01 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -43,8 +43,8 @@ z-index: z-index( '.editor-visual-editor__block:before' ); content: ''; position: absolute; - outline: 1px solid transparent; - transition: 0.2s outline; + /*outline: 1px solid transparent; + transition: 0.2s outline; */ top: 0; bottom: 0; @@ -67,7 +67,7 @@ } } - &.has-warning .editor-visual-editor__block-edit::after { + &.has-warning .editor-visual-editor__block-edit:after { content: ''; position: absolute; top: 0; @@ -77,14 +77,24 @@ background-color: rgba( $white, 0.6 ); } + &.is-selected:before, &.is-hovered:before { - outline: 1px solid $light-gray-500; - transition: 0.2s outline; + content: ''; + position: absolute; + border-left: 1px solid $light-gray-500; + height: 36px; + top: $block-padding; + left: $block-padding + $block-mover-padding-visible - $item-spacing; } - &.is-selected:before { - outline: 2px solid $light-gray-500; - transition: 0.2s outline; + &.is-selected:before, + &.is-hovered:before { + content: ''; + position: absolute; + border-right: 1px solid $light-gray-500; + height: 36px; + top: $block-padding; + right: $block-padding + $block-mover-padding-visible - $item-spacing; } &.is-multi-selected *::selection { @@ -92,9 +102,7 @@ } &.is-multi-selected:before { - background: $blue-medium-100; - outline: 2px solid $blue-medium-200; - transition: 0s outline; + background: rgba( $blue-medium-200, .6 ); } .iframe-overlay { From 728c2d49d4321ddb678e501155f54f31d497f16d Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 19 Oct 2017 13:08:34 +0200 Subject: [PATCH 02/12] Polish the hovered mover and settings. --- editor/block-settings-menu/style.scss | 5 +++-- editor/modes/visual-editor/style.scss | 31 +++++++++++++-------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index 27ae680a4272cd..c412eb0886b6d9 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -1,8 +1,8 @@ .editor-block-settings-menu { position: absolute; - top: 16px; + top: 4px; right: 4px; - padding: 6px 0 6px 14px; // handles hover area + padding: 16px 0 6px 14px; // handles hover area // Mobile display: none; @@ -31,6 +31,7 @@ } .editor-block-settings-menu__toggle { + border-radius: 50%; padding: 0; transform: rotate( 90deg ); transition-duration: 0.3s; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index b572a440dc0c01..7fada40c2dc2e2 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -43,11 +43,8 @@ z-index: z-index( '.editor-visual-editor__block:before' ); content: ''; position: absolute; - /*outline: 1px solid transparent; - transition: 0.2s outline; */ top: 0; bottom: 0; - left: 0; right: 0; @@ -77,24 +74,26 @@ background-color: rgba( $white, 0.6 ); } - &.is-selected:before, - &.is-hovered:before { + &.is-selected .editor-block-mover:before, + &.is-hovered .editor-block-mover:before, + &.is-selected .editor-block-settings-menu:before, + &.is-hovered .editor-block-settings-menu:before { content: ''; position: absolute; - border-left: 1px solid $light-gray-500; height: 36px; - top: $block-padding; - left: $block-padding + $block-mover-padding-visible - $item-spacing; + top: 10px; } - &.is-selected:before, - &.is-hovered:before { - content: ''; - position: absolute; + &.is-selected .editor-block-mover:before, + &.is-hovered .editor-block-mover:before { border-right: 1px solid $light-gray-500; - height: 36px; - top: $block-padding; - right: $block-padding + $block-mover-padding-visible - $item-spacing; + right: 4px; + } + + &.is-selected .editor-block-settings-menu:before, + &.is-hovered .editor-block-settings-menu:before { + border-left: 1px solid $light-gray-500; + left: 4px; } &.is-multi-selected *::selection { @@ -102,7 +101,7 @@ } &.is-multi-selected:before { - background: rgba( $blue-medium-200, .6 ); + background: Highlight; // This variable is a CSS 2.1 variable that selects the operating system select color } .iframe-overlay { From ed0bf6a5a116518a61a6d9f4e458e719faee1534 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 19 Oct 2017 15:31:49 +0200 Subject: [PATCH 03/12] Try a subtle "text focus" color for some blocks. --- editor/modes/visual-editor/style.scss | 35 ++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 7fada40c2dc2e2..392dcabf6bad9b 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -74,6 +74,7 @@ background-color: rgba( $white, 0.6 ); } + // simpler style for a block that has cursor focus (but hasn't been selected) &.is-selected .editor-block-mover:before, &.is-hovered .editor-block-mover:before, &.is-selected .editor-block-settings-menu:before, @@ -227,12 +228,13 @@ @include break-wide() { .editor-block-mover { display: block; - } - - .editor-block-mover { top: -30px; left: 10px; height: auto; + + &:before { + content: none; + } } .editor-block-mover__control { @@ -250,6 +252,10 @@ top: -30px; right: 10px; height: auto; + + &:before { + content: none; + } } } @@ -291,6 +297,29 @@ } } +// show a separate cursor/caret highlight style for when an item was selected by the mouse or keyboard (but isn't multi selected) +// this is only for some blocks +.editor-visual-editor__block.is-selected[data-type="core/more"], +.editor-visual-editor__block.is-selected[data-type="core/separator"], +.editor-visual-editor__block.is-selected[data-type="core/button"] { + &:after { + content: ''; + position: absolute; + pointer-events: none; + top: $block-padding; + bottom: $block-padding; + left: $block-padding + $block-mover-padding-visible; + right: $block-padding + $block-mover-padding-visible; + background: Highlight; + opacity: .15; + } + + &[data-align="full"]:after { + left: 0; + right: 0; + } +} + .editor-visual-editor .editor-inserter { margin: $item-spacing; From f47f3b9329fca682bb5a4ca0b80491073f2ce3da Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 19 Oct 2017 17:34:28 +0200 Subject: [PATCH 04/12] Add normal color as fallback for Highlight. --- editor/modes/visual-editor/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 392dcabf6bad9b..92031cac7c49ec 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -102,6 +102,7 @@ } &.is-multi-selected:before { + background: $blue-medium-200; background: Highlight; // This variable is a CSS 2.1 variable that selects the operating system select color } @@ -310,6 +311,7 @@ bottom: $block-padding; left: $block-padding + $block-mover-padding-visible; right: $block-padding + $block-mover-padding-visible; + background: $blue-medium-300; background: Highlight; opacity: .15; } From f50e4ba0be49c3f9523ee016867d62bb3716695c Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 18 Oct 2017 12:12:25 +0200 Subject: [PATCH 05/12] First pass at alternate block style. --- editor/modes/visual-editor/style.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 92031cac7c49ec..db977c4aeffc7a 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -97,6 +97,26 @@ left: 4px; } + &.is-selected:before, + &.is-hovered:before { + content: ''; + position: absolute; + border-left: 1px solid $light-gray-500; + height: 36px; + top: $block-padding; + left: $block-padding + $block-mover-padding-visible - $item-spacing; + } + + &.is-selected:before, + &.is-hovered:before { + content: ''; + position: absolute; + border-right: 1px solid $light-gray-500; + height: 36px; + top: $block-padding; + right: $block-padding + $block-mover-padding-visible - $item-spacing; + } + &.is-multi-selected *::selection { background: transparent; } From e5b91ab1cacf9452304cfe46098de4e51f432e39 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 19 Oct 2017 13:08:34 +0200 Subject: [PATCH 06/12] Polish the hovered mover and settings. --- editor/modes/visual-editor/style.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index db977c4aeffc7a..0f00a97551b991 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -101,20 +101,20 @@ &.is-hovered:before { content: ''; position: absolute; - border-left: 1px solid $light-gray-500; height: 36px; - top: $block-padding; - left: $block-padding + $block-mover-padding-visible - $item-spacing; + top: 10px; } - &.is-selected:before, - &.is-hovered:before { - content: ''; - position: absolute; + &.is-selected .editor-block-mover:before, + &.is-hovered .editor-block-mover:before { border-right: 1px solid $light-gray-500; - height: 36px; - top: $block-padding; - right: $block-padding + $block-mover-padding-visible - $item-spacing; + right: 4px; + } + + &.is-selected .editor-block-settings-menu:before, + &.is-hovered .editor-block-settings-menu:before { + border-left: 1px solid $light-gray-500; + left: 4px; } &.is-multi-selected *::selection { From a42d5a66e49a3ac7d03e3a95e3903e34a585ac4b Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 23 Oct 2017 14:35:09 +0200 Subject: [PATCH 07/12] Restore the boundary for a selected block. It's important for some blocks, if we are to look at removing this entirely, let's do that as a separate PR. This does tweak the width to 1px though. --- editor/modes/visual-editor/style.scss | 38 ++++++++------------------- 1 file changed, 11 insertions(+), 27 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 0f00a97551b991..789d4a72185507 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -47,6 +47,7 @@ bottom: 0; left: 0; right: 0; + outline: 1px solid transparent; @include break-small { left: $block-mover-padding-visible; @@ -102,21 +103,28 @@ content: ''; position: absolute; height: 36px; - top: 10px; + top: 0; + outline: 1px solid transparent; } &.is-selected .editor-block-mover:before, &.is-hovered .editor-block-mover:before { border-right: 1px solid $light-gray-500; - right: 4px; + right: 6px; } &.is-selected .editor-block-settings-menu:before, &.is-hovered .editor-block-settings-menu:before { border-left: 1px solid $light-gray-500; - left: 4px; + left: 6px; + } + + // focused block-style + &.is-selected:before { + outline: 1px solid $light-gray-500; } + // selection style for multiple blocks &.is-multi-selected *::selection { background: transparent; } @@ -318,30 +326,6 @@ } } -// show a separate cursor/caret highlight style for when an item was selected by the mouse or keyboard (but isn't multi selected) -// this is only for some blocks -.editor-visual-editor__block.is-selected[data-type="core/more"], -.editor-visual-editor__block.is-selected[data-type="core/separator"], -.editor-visual-editor__block.is-selected[data-type="core/button"] { - &:after { - content: ''; - position: absolute; - pointer-events: none; - top: $block-padding; - bottom: $block-padding; - left: $block-padding + $block-mover-padding-visible; - right: $block-padding + $block-mover-padding-visible; - background: $blue-medium-300; - background: Highlight; - opacity: .15; - } - - &[data-align="full"]:after { - left: 0; - right: 0; - } -} - .editor-visual-editor .editor-inserter { margin: $item-spacing; From b48efaa2cfc908fe9bfc87bbea714aa0928b1e01 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 23 Oct 2017 14:52:54 +0200 Subject: [PATCH 08/12] Improve and polish the position of movers and settings. --- editor/block-mover/style.scss | 4 ++-- editor/block-settings-menu/style.scss | 4 ++-- editor/modes/visual-editor/style.scss | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index e91653588defbf..44a435e88d9464 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -1,9 +1,9 @@ .editor-block-mover { position: absolute; - top: 4px; + top: 2px; left: 4px; height: $text-editor-font-size * 4; // same height as an empty paragraph - padding: 6px 14px 6px 0; // handles hover area + padding: 4px 14px 6px 0; // handles hover area z-index: z-index( '.editor-block-mover' ); // Mobile, to be revisited diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss index c412eb0886b6d9..5df7267ad8bb1e 100644 --- a/editor/block-settings-menu/style.scss +++ b/editor/block-settings-menu/style.scss @@ -1,8 +1,8 @@ .editor-block-settings-menu { position: absolute; - top: 4px; + top: 2px; right: 4px; - padding: 16px 0 6px 14px; // handles hover area + padding: 16px 0 20px 14px; // handles hover area // Mobile display: none; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 789d4a72185507..0827a30ed83e08 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -103,7 +103,7 @@ content: ''; position: absolute; height: 36px; - top: 0; + top: 8px; outline: 1px solid transparent; } @@ -507,7 +507,7 @@ opacity: 1; } - &::before { + &:before { content: ''; position: absolute; width: 100%; @@ -516,7 +516,7 @@ transform: translateY( -50% ); } - &:hover::before { + &:hover:before { height: 44px; } From fa3a1bf69e7d133ef248e130f7cc21bee859d34e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 23 Oct 2017 15:03:47 +0200 Subject: [PATCH 09/12] Fix issues with prompt and full-wide ellipsis. --- editor/modes/visual-editor/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 0827a30ed83e08..aefaeebaf8a6c1 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -257,7 +257,7 @@ @include break-wide() { .editor-block-mover { display: block; - top: -30px; + top: -29px; left: 10px; height: auto; @@ -278,7 +278,7 @@ } .editor-block-settings-menu { - top: -30px; + top: -41px; right: 10px; height: auto; @@ -370,7 +370,7 @@ input[type=text] { height: $text-editor-font-size * 4; // same height as an empty paragraph margin-top: 0px; - margin-bottom: 5px; + margin-bottom: 4px; outline: 1px solid transparent; border: none; background: none; From 00366f7f0c0ee011b4c198b49572ec9ca32ab61f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 24 Oct 2017 15:45:54 +0200 Subject: [PATCH 10/12] Fix rebase issues. --- editor/modes/visual-editor/style.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index aefaeebaf8a6c1..30af12ffd5b75e 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -98,15 +98,6 @@ left: 4px; } - &.is-selected:before, - &.is-hovered:before { - content: ''; - position: absolute; - height: 36px; - top: 8px; - outline: 1px solid transparent; - } - &.is-selected .editor-block-mover:before, &.is-hovered .editor-block-mover:before { border-right: 1px solid $light-gray-500; From 3332ed8ef46caa775a5274066b3b3c2689ba18ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 25 Oct 2017 15:43:43 +0200 Subject: [PATCH 11/12] Count arrow keys for isTyping. --- editor/modes/visual-editor/block.js | 1 + 1 file changed, 1 insertion(+) diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 1ccb7209d9c42c..7e63f9b685c0cd 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -283,6 +283,7 @@ class VisualEditorBlock extends Component { ], this.props.order + 1 ); } this.removeOrDeselect( event ); + this.maybeStartTyping( event ); } onBlockError( error ) { From 118f489ecace3f780a7bcf2ea8fe14d5ff2c24f6 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 26 Oct 2017 14:53:18 -0400 Subject: [PATCH 12/12] Block: Consolidate keydown event handling --- editor/modes/visual-editor/block.js | 79 +++++++++++++++-------------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 7e63f9b685c0cd..f3808a6ecadfec 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -54,7 +54,7 @@ import { getBlockMode, } from '../../selectors'; -const { BACKSPACE, ESCAPE, DELETE, ENTER } = keycodes; +const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes; class VisualEditorBlock extends Component { constructor() { @@ -65,7 +65,6 @@ class VisualEditorBlock extends Component { this.maybeHover = this.maybeHover.bind( this ); this.maybeStartTyping = this.maybeStartTyping.bind( this ); this.stopTypingOnMouseMove = this.stopTypingOnMouseMove.bind( this ); - this.removeOrDeselect = this.removeOrDeselect.bind( this ); this.mergeBlocks = this.mergeBlocks.bind( this ); this.onFocus = this.onFocus.bind( this ); this.onPointerDown = this.onPointerDown.bind( this ); @@ -198,35 +197,6 @@ class VisualEditorBlock extends Component { this.lastClientY = clientY; } - removeOrDeselect( event ) { - const { keyCode, target } = event; - const { - uid, - previousBlock, - onRemove, - onFocus, - onDeselect, - } = this.props; - - // Remove block on backspace. - if ( - target === this.node && - ( BACKSPACE === keyCode || DELETE === keyCode ) - ) { - event.preventDefault(); - onRemove( [ uid ] ); - - if ( previousBlock ) { - onFocus( previousBlock.uid, { offset: -1 } ); - } - } - - // Deselect on escape. - if ( ESCAPE === keyCode ) { - onDeselect(); - } - } - mergeBlocks( forward = false ) { const { block, previousBlock, nextBlock, onMerge } = this.props; @@ -275,15 +245,48 @@ class VisualEditorBlock extends Component { onKeyDown( event ) { const { keyCode, target } = event; - if ( ENTER === keyCode && target === this.node ) { - event.preventDefault(); - this.props.onInsertBlocks( [ - createBlock( 'core/paragraph' ), - ], this.props.order + 1 ); + switch ( keyCode ) { + case ENTER: + // Insert default block after current block if enter and event + // not already handled by descendant. + if ( target === this.node ) { + event.preventDefault(); + + this.props.onInsertBlocks( [ + createBlock( 'core/paragraph' ), + ], this.props.order + 1 ); + } + break; + + case UP: + case RIGHT: + case DOWN: + case LEFT: + // Arrow keys do not fire keypress event, but should still + // trigger typing mode. + this.maybeStartTyping(); + break; + + case BACKSPACE: + case DELETE: + // Remove block on backspace. + if ( target === this.node ) { + event.preventDefault(); + const { uid, onRemove, previousBlock, onFocus } = this.props; + onRemove( uid ); + + if ( previousBlock ) { + onFocus( previousBlock.uid, { offset: -1 } ); + } + } + break; + + case ESCAPE: + // Deselect on escape. + this.props.onDeselect(); + break; } - this.removeOrDeselect( event ); - this.maybeStartTyping( event ); } onBlockError( error ) {