From 3955b1cb3ccb184618cb64b6c086a95f1b998e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 20 Apr 2021 11:25:25 +0300 Subject: [PATCH 1/7] Default appender: try editable paragraph instead of text area --- .../components/default-block-appender/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index db1f249d393bf6..280265b884a17a 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import TextareaAutosize from 'react-autosize-textarea'; - /** * WordPress dependencies */ @@ -53,14 +48,17 @@ export function DefaultBlockAppender( { data-root-client-id={ rootClientId || '' } className="wp-block block-editor-default-block-appender" > - + > + { showPrompt ? value : '' } +

Date: Tue, 20 Apr 2021 11:31:06 +0300 Subject: [PATCH 2/7] Move wp-block class --- .../src/components/default-block-appender/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index 280265b884a17a..b09b29fa139a69 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -46,7 +46,7 @@ export function DefaultBlockAppender( { return (

{ showPrompt ? value : '' } From 9d8e77775fc7eb0d4e64df935098a180472ffc5f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 20 Apr 2021 10:52:19 +0200 Subject: [PATCH 3/7] Port over CSS from 30656 that's still useful. --- .../default-block-appender/style.scss | 42 ++----------------- .../src/components/visual-editor/style.scss | 7 ++-- 2 files changed, 6 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index e14a7e463d90b7..b2672a8c8e819c 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -12,34 +12,9 @@ outline: 1px solid transparent; } - textarea.block-editor-default-block-appender__content { // Needs specificity in order to override input field styles from WP-admin styles. - font-family: inherit; - font-size: inherit; - border: none; - background: none; - box-shadow: none; - display: block; - cursor: text; - width: 100%; - outline: $border-width solid transparent; - transition: 0.2s outline; - @include reduce-motion("transition"); - margin-top: $default-block-margin; - margin-bottom: $default-block-margin; - - // This needs high specificity as it's output as an inline style by the library. - resize: none !important; - - // Emulate the dimensions of a paragraph block. - // On mobile and in nested contexts, the plus to add blocks shows up on the right. - // The rightmost padding makes sure it doesn't overlap text. - padding: 0 #{ $block-padding + $button-size } 0 0; - - // Use opacity to work in various editor styles. - color: $dark-gray-placeholder; - .is-dark-theme & { - color: $light-gray-placeholder; - } + .block-editor-default-block-appender__content { + // Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block. + opacity: 0.62; } // Dropzone. @@ -48,11 +23,6 @@ } } -// Ensure that the height of the first appender, and the one between blocks, is the same as text. -.block-editor-default-block-appender__content { - line-height: $editor-line-height; -} - // Empty / default block side inserter. .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles. .block-editor-default-block-appender .block-editor-inserter { // Empty appender. @@ -79,9 +49,3 @@ display: none; } } - -.block-editor-default-block-appender .block-editor-inserter { - @include break-small { - align-items: center; - } -} diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 8696a841c24f2e..dcc694dc1f9aef 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -55,10 +55,9 @@ margin-left: auto; margin-right: auto; - // Apply default block margin below the post title. - // This ensures the first block on the page is in a good position. - // This rule can be retired once the title becomes an actual block. - margin-bottom: $default-block-margin; + // Margins between the title and the first block, or appender, do not collapse. + // By explicitly setting this to zero, we avoid "double margin". + margin-bottom: 0; } } From 02a5da363462cf6e394b96a61e711246d134707f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 20 Apr 2021 11:08:26 +0200 Subject: [PATCH 4/7] Update snapshots. --- .../test/__snapshots__/index.js.snap | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap index 4ec195a23acb80..a137284ecfa971 100644 --- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap @@ -35,17 +35,19 @@ exports[`DefaultBlockAppender should append a default block when input focused 1 exports[`DefaultBlockAppender should match snapshot 1`] = `

- + suppressContentEditableWarning={true} + > + Type / to choose a block +

Date: Tue, 20 Apr 2021 12:52:28 +0300 Subject: [PATCH 5/7] Remove content editable in favour of tab index --- .../default-block-appender/index.js | 29 +++++++------------ .../test/__snapshots__/index.js.snap | 3 +- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index b09b29fa139a69..20486821e2885a 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -13,6 +13,12 @@ import { withSelect, withDispatch } from '@wordpress/data'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; +/** + * Zero width non-breaking space, used as padding for the paragraph when it is + * empty. + */ +const ZWNBSP = '\ufeff'; + export function DefaultBlockAppender( { isLocked, isVisible, @@ -28,36 +34,23 @@ export function DefaultBlockAppender( { const value = decodeEntities( placeholder ) || __( 'Type / to choose a block' ); - // The appender "button" is in-fact a text field so as to support - // transitions by WritingFlow occurring by arrow key press. WritingFlow - // only supports tab transitions into text fields and to the block focus - // boundary. - // - // See: https://github.com/WordPress/gutenberg/issues/4829#issuecomment-374213658 - // - // If it were ever to be made to be a proper `button` element, it is - // important to note that `onFocus` alone would not be sufficient to - // capture click events, notably in Firefox. - // - // See: https://gist.github.com/cvrebert/68659d0333a578d75372 - - // The wp-block className is important for editor styles. - return (

- { showPrompt ? value : '' } + { showPrompt ? value : ZWNBSP }

Type / to choose a block

From e416513510f42c2399130934fefc784256741436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 20 Apr 2021 12:58:09 +0300 Subject: [PATCH 6/7] Fix tests --- .../default-block-appender/index.js | 2 +- .../test/__snapshots__/index.js.snap | 26 ++++++++++--------- .../default-block-appender/test/index.js | 8 +++--- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index 20486821e2885a..4caada6e050afb 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -17,7 +17,7 @@ import { store as blockEditorStore } from '../../store'; * Zero width non-breaking space, used as padding for the paragraph when it is * empty. */ -const ZWNBSP = '\ufeff'; +export const ZWNBSP = '\ufeff'; export function DefaultBlockAppender( { isLocked, diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap index 4b0568cc2f9cc5..46e4475f0bcdda 100644 --- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap @@ -2,12 +2,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
- + tabIndex="0" + > + Type / to choose a block +

- + tabIndex="0" + > +  +

{ const expectOnAppendCalled = ( onAppend ) => { @@ -35,7 +35,7 @@ describe( 'DefaultBlockAppender', () => { ); - wrapper.find( 'ForwardRef' ).simulate( 'focus' ); + wrapper.find( 'p' ).simulate( 'focus' ); expect( wrapper ).toMatchSnapshot(); @@ -51,9 +51,9 @@ describe( 'DefaultBlockAppender', () => { showPrompt={ false } /> ); - const input = wrapper.find( 'ForwardRef' ); + const input = wrapper.find( 'p' ); - expect( input.prop( 'value' ) ).toEqual( '' ); + expect( input.prop( 'children' ) ).toEqual( ZWNBSP ); expect( wrapper ).toMatchSnapshot(); } ); From 4f7fe2a9779ced77479a70b0dc47804fe479cae8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 20 Apr 2021 16:59:55 +0300 Subject: [PATCH 7/7] Fix e2e test --- .../src/components/default-block-appender/index.js | 8 +++++++- .../test/__snapshots__/index.js.snap | 6 ++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index 4caada6e050afb..5f3b52bcb28812 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -41,8 +41,14 @@ export function DefaultBlockAppender( { >

Type / to choose a block @@ -42,8 +44,10 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `

Type / to choose a block @@ -64,8 +68,10 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `