Further improve columns block. (#11659)

* Further improve columns block.

This PR is a followup to thoughts in #11620 (comment).

It improves the columns block further by doing two things:

1. It hides the hover effect on the individual _column_ block in the initial state.

2. It changes the non-block "fake" appender to be a textarea instead of an input.

To elaborate on 1, in #11620 we used pointer-events to disable the individual column blocks as selectable using the mouse. This is because those columns are not actionable at the moment, and in the current implementation of the column, being able to hover and select them only causes issues with selecting the parent columns block, which _is_ actionable.

However pointer events was not enough for the _empty_ state of a columns block. In this state, the block features no inner blocks, except the individual column blocks, because no content has yet been inserted yet. In this state, you see the "appender", which is not actually a block even though it looks exactly the same as an empty paragraph. Because this is not technically a block, the deepest nested child is a _column_, which is then allowed to be hovered.

In 1 I add a workaround to that, to simply visually hide the hover effect. I expect this to be refactored in a future columns update, but for the time being it makes it far more usable.

To elaborate on 2, there has been a long time issue with the appender (again, not the block, the fake version that we use before an empty paragraph is inserted) wrapping text in translations. This is because text _cannot_ wrap in an `input` field, which the appender is. By changing this to a `textarea`, the text can wrap.

This might affect themes which specify the input element for increased specificity in their editor styles, but overall it still seems like a worthwhile change to make, since it's the only way we can allow the writing prompt to wrap its text.

* Fix by using TextareaAutosize.

Props @aduth.

Also adds resize: none;, props @chrisvanpatten.

* Fix unit tests

packages/block-library/src/columns/editor.scss

@@ -128,11 +128,24 @@
 }
 
 // In absence of making the individual columns resizable, we prevent them from being clickable.
-// This makes them less fiddly. This will be revisited as the interface is refined.
+// This makes them less fiddly. @todo: This should be revisited as the interface is refined.
 .wp-block-columns [data-type="core/column"] {
 	pointer-events: none;
+
+	// The empty state of a columns block has the default appenders.
+	// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
+	// Because the column shouldn't be hovered as part of this temporary passhthrough, we unset the hover style.
+	&.is-hovered {
+		> .editor-block-list__block-edit::before {
+			content: none;
+		}
+
+		.editor-block-list__breadcrumb {
+			display: none;
+		}
+	}
 }
 
-:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > .editor-inner-blocks {
+:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-inner-blocks {
 	pointer-events: all;
 }

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import TextareaAutosize from 'react-autosize-textarea';
 
 /**
  * WordPress dependencies
@@ -51,11 +52,10 @@ export function DefaultBlockAppender( {
 	return (
 		<div data-root-client-id={ rootClientId || '' } className="wp-block editor-default-block-appender">
 			<BlockDropZone rootClientId={ rootClientId } />
-			<input
+			<TextareaAutosize
 				role="button"
 				aria-label={ __( 'Add block' ) }
 				className="editor-default-block-appender__content"
-				type="text"
 				readOnly
 				onFocus={ onAppend }
 				value={ showPrompt ? value : '' }

packages/editor/src/components/default-block-appender/style.scss

@@ -1,23 +1,23 @@
 .editor-default-block-appender {
 	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
 
-	input[type="text"].editor-default-block-appender__content { // Needs specificity in order to override input field styles from WP-admin styles.
+	textarea.editor-default-block-appender__content { // Needs specificity in order to override input field styles from WP-admin styles.
 		font-family: $editor-font;
 		font-size: $editor-font-size; // It should match the default paragraph size.
 		border: none;
 		background: none;
 		box-shadow: none;
 		display: block;
-		margin-left: 0;
-		margin-right: 0;
-		max-width: none; // Overrides upstream CSS from the admin.
+		margin-left: $border-width;
+		margin-right: $border-width;
 		cursor: text;
 		width: 100%;
 		outline: $border-width solid transparent;
 		transition: 0.2s outline;
+		resize: none;
 
 		// Emulate the dimensions of a paragraph block.
-		padding: 0 #{ $block-padding + $border-width };
+		padding: 0 #{ $block-padding };
 
 		// Use opacity to work in various editor styles.
 		color: $dark-opacity-300;

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

@@ -6,7 +6,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
-  <input
+  <TextareaAutosize
     aria-label="Add block"
     className="editor-default-block-appender__content"
     onFocus={
@@ -19,7 +19,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     }
     readOnly={true}
     role="button"
-    type="text"
+    rows={1}
     value="Start writing or type / to choose a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
@@ -35,13 +35,13 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
-  <input
+  <TextareaAutosize
     aria-label="Add block"
     className="editor-default-block-appender__content"
     onFocus={[MockFunction]}
     readOnly={true}
     role="button"
-    type="text"
+    rows={1}
     value="Start writing or type / to choose a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
@@ -57,13 +57,13 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
-  <input
+  <TextareaAutosize
     aria-label="Add block"
     className="editor-default-block-appender__content"
     onFocus={[MockFunction]}
     readOnly={true}
     role="button"
-    type="text"
+    rows={1}
     value=""
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />

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

@@ -31,7 +31,7 @@ describe( 'DefaultBlockAppender', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow( <DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt /> );
 
-		wrapper.find( 'input.editor-default-block-appender__content' ).simulate( 'focus' );
+		wrapper.find( 'TextareaAutosize' ).simulate( 'focus' );
 
 		expect( wrapper ).toMatchSnapshot();
 
@@ -41,7 +41,7 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should optionally show without prompt', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow( <DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt={ false } /> );
-		const input = wrapper.find( 'input.editor-default-block-appender__content' );
+		const input = wrapper.find( 'TextareaAutosize' );
 
 		expect( input.prop( 'value' ) ).toEqual( '' );