From 97e439f6bc3afb37b4d15046e00a98f0ff3b7725 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 24 Nov 2017 16:34:23 +0100 Subject: [PATCH] Writing Flow: Revert the empty placeholder --- .../default-block-appender/index.js | 36 +++++++------------ .../default-block-appender/style.scss | 22 ++++-------- editor/edit-post/modes/visual-editor/index.js | 4 ++- test/e2e/integration/002-adding-blocks.js | 2 +- .../integration/003-multi-block-selection.js | 2 +- 5 files changed, 24 insertions(+), 42 deletions(-) diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js index 312682b139b5a..03d241d3187f9 100644 --- a/editor/components/default-block-appender/index.js +++ b/editor/components/default-block-appender/index.js @@ -2,7 +2,6 @@ * External dependencies */ import { connect } from 'react-redux'; -import classnames from 'classnames'; import 'element-closest'; /** @@ -33,31 +32,22 @@ export class DefaultBlockAppender extends Component { render() { const { count } = this.props; - - const className = classnames( 'editor-default-block-appender', { - 'is-visible-placeholder': count === 0, - } ); + if ( count !== 0 ) { + return null; + } return ( -
+
- { count === 0 && - - } - { count !== 0 && -
); } diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss index cbc0d2ec3f4cf..7f9fb8e9a583b 100644 --- a/editor/components/default-block-appender/style.scss +++ b/editor/components/default-block-appender/style.scss @@ -1,32 +1,22 @@ $empty-paragraph-height: $text-editor-font-size * 4; -.editor-default-block-appender { - &.is-visible-placeholder .editor-default-block-appender__content { - height: $empty-paragraph-height; - color: $dark-gray-300; - outline: 1px solid transparent; - transition: 0.2s outline; - - &:hover { - outline: 1px solid $light-gray-500; - } - } -} - -.editor-default-block-appender__content, input[type=text].editor-default-block-appender__content { border: none; background: none; box-shadow: none; display: block; width: 100%; - height: $empty-paragraph-height * 1.5; font-size: $editor-font-size; line-height: $editor-line-height; cursor: text; max-width: none; // fixes a bleed issue from the admin - &:focus { + height: $empty-paragraph-height; + color: $dark-gray-300; + outline: 1px solid transparent; + transition: 0.2s outline; + + &:focus, &:hover { outline: 1px solid $light-gray-500; } } diff --git a/editor/edit-post/modes/visual-editor/index.js b/editor/edit-post/modes/visual-editor/index.js index ddf79abd9c163..9b4e8ea0d5302 100644 --- a/editor/edit-post/modes/visual-editor/index.js +++ b/editor/edit-post/modes/visual-editor/index.js @@ -13,6 +13,7 @@ import { Component, findDOMNode } from '@wordpress/element'; */ import './style.scss'; import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender, EditorGlobalKeyboardShortcuts } from '../../../components'; +import VisualEditorInserter from './inserter'; import { isFeatureActive } from '../../../selectors'; import { clearSelectedBlock } from '../../../actions'; @@ -59,8 +60,9 @@ class VisualEditor extends Component { ref={ this.bindBlocksContainer } showContextualToolbar={ ! this.props.hasFixedToolbar } /> + - +
); /* eslint-enable jsx-a11y/no-static-element-interactions */ diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js index b052ff513d213..d7f6650de7f54 100644 --- a/test/e2e/integration/002-adding-blocks.js +++ b/test/e2e/integration/002-adding-blocks.js @@ -11,7 +11,7 @@ describe( 'Adding blocks', () => { cy.get( lastBlockSelector ).type( 'Paragraph block' ); // Using the slash command - cy.get( '.editor-default-block-appender' ).click(); + cy.get( '.editor-visual-editor__inserter [aria-label="Insert Paragraph"]' ).click(); cy.get( lastBlockSelector ).type( '/quote{enter}' ); cy.get( lastBlockSelector ).type( 'Quote block' ); diff --git a/test/e2e/integration/003-multi-block-selection.js b/test/e2e/integration/003-multi-block-selection.js index f6b85776de0af..858706602ca26 100644 --- a/test/e2e/integration/003-multi-block-selection.js +++ b/test/e2e/integration/003-multi-block-selection.js @@ -12,7 +12,7 @@ describe( 'Multi-block selection', () => { // Creating test blocks cy.get( '.editor-default-block-appender' ).click(); cy.get( lastBlockSelector ).type( 'First Paragraph' ); - cy.get( '.editor-default-block-appender' ).click(); + cy.get( '.editor-visual-editor__inserter [aria-label="Insert Paragraph"]' ).click(); cy.get( lastBlockSelector ).type( 'Second Paragraph' ); // Default: No selection