DefaultBlockAppender: refactor to hooks (#58809)

* DefaultBlockAppender: refactor to hooks * Fix DefaultBlockAppender unit tests * Remove a leftover prop --------- Co-authored-by: Marin Atanasov <tyxla@abv.bg>
WordPress · Feb 8, 2024 · e13285b · e13285b
1 parent 4b372c1
commit e13285b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 54 deletions.
diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
@@ -7,9 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -24,20 +23,38 @@ import { store as blockEditorStore } from '../../store';
  */
 export const ZWNBSP = '\ufeff';
 
-export function DefaultBlockAppender( {
-	isLocked,
-	onAppend,
-	showPrompt,
-	placeholder,
-	rootClientId,
-} ) {
+export default function DefaultBlockAppender( { rootClientId } ) {
+	const { showPrompt, isLocked, placeholder } = useSelect(
+		( select ) => {
+			const { getBlockCount, getSettings, getTemplateLock } =
+				select( blockEditorStore );
+
+			const isEmpty = ! getBlockCount( rootClientId );
+			const { bodyPlaceholder } = getSettings();
+
+			return {
+				showPrompt: isEmpty,
+				isLocked: !! getTemplateLock( rootClientId ),
+				placeholder: bodyPlaceholder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );
+
 	if ( isLocked ) {
 		return null;
 	}
 
 	const value =
 		decodeEntities( placeholder ) || __( 'Type / to choose a block' );
 
+	const onAppend = () => {
+		insertDefaultBlock( undefined, rootClientId );
+		startTyping();
+	};
+
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
@@ -76,32 +93,3 @@ export function DefaultBlockAppender( {
 		</div>
 	);
 }
-
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } =
-			select( blockEditorStore );
-
-		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const { bodyPlaceholder } = getSettings();
-
-		return {
-			showPrompt: isEmpty,
-			isLocked: !! getTemplateLock( ownProps.rootClientId ),
-			placeholder: bodyPlaceholder,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } =
-			dispatch( blockEditorStore );
-
-		return {
-			onAppend() {
-				const { rootClientId } = ownProps;
-
-				insertDefaultBlock( undefined, rootClientId );
-				startTyping();
-			},
-		};
-	} )
-)( 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
@@ -7,26 +7,36 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { DefaultBlockAppender, ZWNBSP } from '../';
+import DefaultBlockAppender, { ZWNBSP } from '../';
+import * as blockEditorActions from '../../../store/actions';
+import * as blockEditorSelectors from '../../../store/selectors';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		startTyping: jest.fn( actions.startTyping ),
+	};
+} );
+jest.mock( '../../../store/selectors', () => {
+	const selectors = jest.requireActual( '../../../store/selectors' );
+	return {
+		...selectors,
+		getBlockCount: jest.fn( selectors.getBlockCount ),
+	};
+} );
 
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
-		const onAppend = jest.fn();
-
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should append a default block when input focused', async () => {
+		const startTyping = jest.spyOn( blockEditorActions, 'startTyping' );
 		const user = userEvent.setup();
-		const onAppend = jest.fn();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		await user.click(
 			screen.getByRole( 'button', { name: 'Add default block' } )
@@ -35,17 +45,15 @@ describe( 'DefaultBlockAppender', () => {
 		expect( container ).toMatchSnapshot();
 
 		// Called once for focusing and once for clicking.
-		expect( onAppend ).toHaveBeenCalledTimes( 2 );
-		expect( onAppend ).toHaveBeenCalledWith();
+		expect( startTyping ).toHaveBeenCalledTimes( 2 );
+		expect( startTyping ).toHaveBeenCalledWith();
 	} );
 
 	it( 'should optionally show without prompt', async () => {
+		blockEditorSelectors.getBlockCount.mockImplementation( () => 1 );
 		const user = userEvent.setup();
-		const onAppend = jest.fn();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		const appender = screen.getByRole( 'button', {
 			name: 'Add default block',