Only render InserterWithShortcuts on hover

WordPress · Dec 3, 2018 · fd629c5 · fd629c5
1 parent 68367b4
commit fd629c5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/editor/src/components/default-block-appender/index.js b/packages/editor/src/components/default-block-appender/index.js
@@ -7,7 +7,7 @@ import TextareaAutosize from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
+import { compose, withState } from '@wordpress/compose';
 import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -26,6 +26,8 @@ export function DefaultBlockAppender( {
 	showPrompt,
 	placeholder,
 	rootClientId,
+	hovered,
+	setState,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -49,7 +51,12 @@ export function DefaultBlockAppender( {
 	// The wp-block className is important for editor styles.
 
 	return (
-		<div data-root-client-id={ rootClientId || '' } className="wp-block editor-default-block-appender">
+		<div
+			data-root-client-id={ rootClientId || '' }
+			className="wp-block editor-default-block-appender"
+			onMouseEnter={ () => setState( { hovered: true } ) }
+			onMouseLeave={ () => setState( { hovered: false } ) }
+		>
 			<BlockDropZone rootClientId={ rootClientId } />
 			<TextareaAutosize
 				role="button"
@@ -59,12 +66,13 @@ export function DefaultBlockAppender( {
 				onFocus={ onAppend }
 				value={ showPrompt ? value : '' }
 			/>
-			<InserterWithShortcuts rootClientId={ rootClientId } />
+			{ hovered && <InserterWithShortcuts rootClientId={ rootClientId } /> }
 			<Inserter position="top right" />
 		</div>
 	);
 }
 export default compose(
+	withState( { hovered: false } ),
 	withSelect( ( select, ownProps ) => {
 		const { getBlockCount, getBlockName, isBlockValid, getEditorSettings, getTemplateLock } = select( 'core/editor' );
 

diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -4,6 +4,8 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 <div
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
@@ -22,7 +24,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     rows={1}
     value="Start writing or type / to choose a block"
   />
-  <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))
     position="top right"
   />
@@ -33,6 +34,8 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 <div
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
@@ -44,7 +47,6 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     rows={1}
     value="Start writing or type / to choose a block"
   />
-  <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))
     position="top right"
   />
@@ -55,6 +57,8 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 <div
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
@@ -66,7 +70,6 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     rows={1}
     value=""
   />
-  <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))
     position="top right"
   />