Default appender: try editable paragraph instead of text area (#30986)

* Default appender: try editable paragraph instead of text area

* Move wp-block class

* Port over CSS from 30656 that's still useful.

* Update snapshots.

* Remove content editable in favour of tab index

* Fix tests

* Fix e2e test

Co-authored-by: jasmussen <[email protected]>

Author: ellatrix

packages/block-editor/src/components/default-block-appender/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
@@ -18,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.
+ */
+export const ZWNBSP = '\ufeff';
+
 export function DefaultBlockAppender( {
 	isLocked,
 	isVisible,
@@ -33,34 +34,30 @@ 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 (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className="wp-block block-editor-default-block-appender"
+			className="block-editor-default-block-appender"
 		>
-			<TextareaAutosize
+			<p
+				tabIndex="0"
+				// Only necessary for `useCanvasClickRedirect` to consider it
+				// as a target. Ideally it should consider any tabbable target,
+				// but the inserter is rendered in place while it should be
+				// rendered in a popover, just like it does for an empty
+				// paragraph block.
+				contentEditable
+				suppressContentEditableWarning
+				// We want this element to be styled as a paragraph by themes.
+				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
 				aria-label={ __( 'Add block' ) }
-				className="block-editor-default-block-appender__content"
-				readOnly
+				// The wp-block className is important for editor styles.
+				className="wp-block block-editor-default-block-appender__content"
 				onFocus={ onAppend }
-				value={ showPrompt ? value : '' }
-			/>
+			>
+				{ showPrompt ? value : ZWNBSP }
+			</p>
 			<Inserter
 				rootClientId={ rootClientId }
 				position="bottom right"

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;
-	}
-}

packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -2,12 +2,13 @@
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div
-  className="wp-block block-editor-default-block-appender"
+  className="block-editor-default-block-appender"
   data-root-client-id=""
 >
-  <ForwardRef
+  <p
     aria-label="Add block"
-    className="block-editor-default-block-appender__content"
+    className="wp-block block-editor-default-block-appender__content"
+    contentEditable={true}
     onFocus={
       [MockFunction] {
         "calls": Array [
@@ -21,10 +22,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
         ],
       }
     }
-    readOnly={true}
     role="button"
-    value="Type / to choose a block"
-  />
+    suppressContentEditableWarning={true}
+    tabIndex="0"
+  >
+    Type / to choose a block
+  </p>
   <WithSelect(WithDispatch(IfCondition(Inserter)))
     __experimentalIsQuick={true}
     isAppender={true}
@@ -35,17 +38,20 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 
 exports[`DefaultBlockAppender should match snapshot 1`] = `
 <div
-  className="wp-block block-editor-default-block-appender"
+  className="block-editor-default-block-appender"
   data-root-client-id=""
 >
-  <ForwardRef
+  <p
     aria-label="Add block"
-    className="block-editor-default-block-appender__content"
+    className="wp-block block-editor-default-block-appender__content"
+    contentEditable={true}
     onFocus={[MockFunction]}
-    readOnly={true}
     role="button"
-    value="Type / to choose a block"
-  />
+    suppressContentEditableWarning={true}
+    tabIndex="0"
+  >
+    Type / to choose a block
+  </p>
   <WithSelect(WithDispatch(IfCondition(Inserter)))
     __experimentalIsQuick={true}
     isAppender={true}
@@ -56,17 +62,20 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 <div
-  className="wp-block block-editor-default-block-appender"
+  className="block-editor-default-block-appender"
   data-root-client-id=""
 >
-  <ForwardRef
+  <p
     aria-label="Add block"
-    className="block-editor-default-block-appender__content"
+    className="wp-block block-editor-default-block-appender__content"
+    contentEditable={true}
     onFocus={[MockFunction]}
-    readOnly={true}
     role="button"
-    value=""
-  />
+    suppressContentEditableWarning={true}
+    tabIndex="0"
+  >
+    
+  </p>
   <WithSelect(WithDispatch(IfCondition(Inserter)))
     __experimentalIsQuick={true}
     isAppender={true}

packages/block-editor/src/components/default-block-appender/test/index.js

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { DefaultBlockAppender } from '../';
+import { DefaultBlockAppender, ZWNBSP } from '../';
 
 describe( 'DefaultBlockAppender', () => {
 	const expectOnAppendCalled = ( onAppend ) => {
@@ -35,7 +35,7 @@ describe( 'DefaultBlockAppender', () => {
 			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
 		);
 
-		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();
 	} );

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;
 	}
 }