Simplify

WordPress · Jan 10, 2020 · 3868c40 · 3868c40
1 parent af10ad6
commit 3868c40
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 90 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -2,18 +2,21 @@
  * External dependencies
  */
 import { last } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
+import useBlockDropZone from '../block-drop-zone';
 
 function stopPropagation( event ) {
 	event.stopPropagation();
@@ -26,6 +29,12 @@ function BlockListAppender( {
 	isLocked,
 	renderAppender: CustomAppender,
 } ) {
+	const ref = useRef();
+	const { position } = useBlockDropZone( {
+		element: ref,
+		rootClientId,
+	} );
+
 	if ( isLocked || CustomAppender === false ) {
 		return null;
 	}
@@ -68,7 +77,11 @@ function BlockListAppender( {
 			// Prevent the block from being selected when the appender is
 			// clicked.
 			onFocus={ stopPropagation }
-			className="block-list-appender"
+			ref={ ref }
+			className={ classnames( 'block-list-appender', {
+				'is-dragging-close-to-top': position && position.y === 'top',
+				'is-dragging-close-to-bottom': position && position.y === 'bottom',
+			} ) }
 		>
 			{ appender }
 		</div>

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -309,8 +309,8 @@ function BlockListBlock( {
 			'is-focus-mode': isFocusMode,
 			'has-child-selected': isAncestorOfSelectedBlock,
 			'has-toolbar-captured': hasAncestorCapturingToolbars,
-			'is-close-to-top': position && position.y === 'top',
-			'is-close-to-bottom': position && position.y === 'bottom',
+			'is-dragging-close-to-top': position && position.y === 'top',
+			'is-dragging-close-to-bottom': position && position.y === 'bottom',
 		},
 		className
 	);

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -153,11 +153,11 @@
 		}
 	}
 
-	&.is-close-to-top::before {
+	&.is-dragging-close-to-top::before {
 		border-top: 3px solid theme(primary);
 	}
 
-	&.is-close-to-bottom::before {
+	&.is-dragging-close-to-bottom::before {
 		border-bottom: 3px solid theme(primary);
 	}
 }

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -8,60 +8,44 @@ import classnames from 'classnames';
  */
 import { Button, Icon, Tooltip } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useBlockDropZone from '../block-drop-zone';
 import Inserter from '../inserter';
 
 function ButtonBlockAppender( { rootClientId, className, __experimentalSelectBlockOnInsert: selectBlockOnInsert } ) {
-	const ref = useRef();
-	const { position } = useBlockDropZone( {
-		element: ref,
-		rootClientId,
-	} );
-
 	return (
-		<div
-			ref={ ref }
-			className={ classnames( {
-				'is-close-to-top': position && position.y === 'top',
-				'is-close-to-bottom': position && position.y === 'bottom',
-			} ) }
-		>
-			<Inserter
-				rootClientId={ rootClientId }
-				__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
-				renderToggle={ ( { onToggle, disabled, isOpen, blockTitle, hasSingleBlockType } ) => {
-					let label;
-					if ( hasSingleBlockType ) {
-						// translators: %s: the name of the block when there is only one
-						label = sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle );
-					} else {
-						label = _x( 'Add block', 'Generic label for block inserter button' );
-					}
-					const isToggleButton = ! hasSingleBlockType;
-					return (
-						<Tooltip text={ label }>
-							<Button
-								className={ classnames( className, 'block-editor-button-block-appender' ) }
-								onClick={ onToggle }
-								aria-haspopup={ isToggleButton ? 'true' : undefined }
-								aria-expanded={ isToggleButton ? isOpen : undefined }
-								disabled={ disabled }
-								label={ label }
-							>
-								<span className="screen-reader-text">{ label }</span>
-								<Icon icon="insert" />
-							</Button>
-						</Tooltip>
-					);
-				} }
-				isAppender
-			/>
-		</div>
+		<Inserter
+			rootClientId={ rootClientId }
+			__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
+			renderToggle={ ( { onToggle, disabled, isOpen, blockTitle, hasSingleBlockType } ) => {
+				let label;
+				if ( hasSingleBlockType ) {
+					// translators: %s: the name of the block when there is only one
+					label = sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle );
+				} else {
+					label = _x( 'Add block', 'Generic label for block inserter button' );
+				}
+				const isToggleButton = ! hasSingleBlockType;
+				return (
+					<Tooltip text={ label }>
+						<Button
+							className={ classnames( className, 'block-editor-button-block-appender' ) }
+							onClick={ onToggle }
+							aria-haspopup={ isToggleButton ? 'true' : undefined }
+							aria-expanded={ isToggleButton ? isOpen : undefined }
+							disabled={ disabled }
+							label={ label }
+						>
+							<span className="screen-reader-text">{ label }</span>
+							<Icon icon="insert" />
+						</Button>
+					</Tooltip>
+				);
+			} }
+			isAppender
+		/>
 	);
 }
 

diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -12,25 +11,23 @@ import { compose } from '@wordpress/compose';
 import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Inserter from '../inserter';
-import useBlockDropZone from '../block-drop-zone';
 
 export function DefaultBlockAppender( {
+	isLocked,
+	isVisible,
 	onAppend,
 	showPrompt,
 	placeholder,
 	rootClientId,
 } ) {
-	const ref = useRef();
-	const { position } = useBlockDropZone( {
-		element: ref,
-		rootClientId,
-	} );
+	if ( isLocked || ! isVisible ) {
+		return null;
+	}
 
 	const value = decodeEntities( placeholder ) || __( 'Start writing or type / to choose a block' );
 
@@ -51,15 +48,8 @@ export function DefaultBlockAppender( {
 
 	return (
 		<div
-			ref={ ref }
 			data-root-client-id={ rootClientId || '' }
-			className={ classnames(
-				'wp-block block-editor-default-block-appender',
-				{
-					'is-close-to-top': position && position.y === 'top',
-					'is-close-to-bottom': position && position.y === 'bottom',
-				}
-			) }
+			className="wp-block block-editor-default-block-appender"
 		>
 			<TextareaAutosize
 				role="button"
@@ -74,28 +64,6 @@ export function DefaultBlockAppender( {
 	);
 }
 
-function DefaultBlockAppenderWrapper( {
-	isLocked,
-	isVisible,
-	onAppend,
-	showPrompt,
-	placeholder,
-	rootClientId,
-} ) {
-	if ( isLocked || ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<DefaultBlockAppender
-			onAppend={ onAppend }
-			showPrompt={ showPrompt }
-			placeholder={ placeholder }
-			rootClientId={ rootClientId }
-		/>
-	);
-}
-
 export default compose(
 	withSelect( ( select, ownProps ) => {
 		const { getBlockCount, getBlockName, isBlockValid, getSettings, getTemplateLock } = select( 'core/block-editor' );
@@ -127,4 +95,4 @@ export default compose(
 			},
 		};
 	} ),
-)( DefaultBlockAppenderWrapper );
+)( DefaultBlockAppender );
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -14,6 +14,12 @@ describe( 'DefaultBlockAppender', () => {
 		expect( onAppend ).toHaveBeenCalledWith();
 	};
 
+	it( 'should render nothing if not visible', () => {
+		const wrapper = shallow( <DefaultBlockAppender /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow( <DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt /> );