Further improve columns block.

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( '' );