Bundle the block autocompleter in the block-editor package (#21534)

* Bundle the block autocompleter in the block-editor package

* small optimizatioin

* fix unit tests

packages/editor/src/components/autocompleters/block.js → packages/block-editor/src/autocompleters/block.js

@@ -6,9 +6,13 @@ import { once } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { select, dispatch } from '@wordpress/data';
+import { select } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BlockIcon } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../components/block-icon';
 
 /** @typedef {import('@wordpress/block-editor').WPEditorInserterItem} WPEditorInserterItem */
 
@@ -68,7 +72,13 @@ function defaultGetSelectedBlockName() {
  * @return {Promise} Promise resolving once reusable blocks fetched.
  */
 const fetchReusableBlocks = once( () => {
-	dispatch( 'core/editor' ).__experimentalFetchReusableBlocks();
+	const { __experimentalFetchReusableBlocks } = select(
+		'core/block-editor'
+	).getSettings();
+
+	if ( __experimentalFetchReusableBlocks ) {
+		__experimentalFetchReusableBlocks();
+	}
 } );
 
 /**
@@ -84,7 +94,7 @@ export function createBlockCompleter( {
 } = {} ) {
 	return {
 		name: 'blocks',
-		className: 'editor-autocompleters__block',
+		className: 'block-editor-autocompleters__block',
 		triggerPrefix: '/',
 		options() {
 			fetchReusableBlocks();

packages/block-editor/src/autocompleters/style.scss

@@ -0,0 +1,5 @@
+.block-editor-autocompleters__block {
+	.block-editor-block-icon {
+		margin-right: 8px;
+	}
+}

packages/editor/src/components/autocompleters/test/block.js → packages/block-editor/src/autocompleters/test/block.js

@@ -7,7 +7,7 @@ import { shallow } from 'enzyme';
  * Internal dependencies
  */
 import blockCompleter, { createBlockCompleter } from '../block';
-import '../../../';
+import '../../store';
 
 describe( 'block', () => {
 	let originalFetch;

packages/block-editor/src/components/autocomplete/index.js

@@ -9,11 +9,22 @@ import { clone } from 'lodash';
 import { applyFilters, hasFilter } from '@wordpress/hooks';
 import { compose } from '@wordpress/compose';
 import { Autocomplete as OriginalAutocomplete } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { withBlockEditContext } from '../block-edit/context';
+import blockAutocompleter from '../../autocompleters/block';
+
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array}
+ */
+const EMPTY_ARRAY = [];
 
 /**
  * Wrap the default Autocomplete component with one that
@@ -26,7 +37,13 @@ import { withBlockEditContext } from '../block-edit/context';
  */
 export function withFilteredAutocompleters( Autocomplete ) {
 	return ( props ) => {
-		let { completers = [] } = props;
+		let { completers = EMPTY_ARRAY, blockName } = props;
+		completers = useMemo( () => {
+			if ( blockName === getDefaultBlockName() ) {
+				return completers.concat( [ blockAutocompleter ] );
+			}
+			return completers;
+		}, [ completers, blockName ] );
 
 		if ( hasFilter( 'editor.Autocomplete.completers' ) ) {
 			completers = applyFilters(

packages/block-editor/src/style.scss

@@ -5,6 +5,7 @@
 
 // Only add styles for components that are used inside the editing canvas here:
 
+@import "./autocompleters/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";

packages/editor/src/components/autocompleters/index.js

@@ -1,2 +1 @@
-export { default as blockAutocompleter } from './block';
 export { default as userAutocompleter } from './user';

packages/editor/src/components/autocompleters/style.scss

@@ -1,9 +1,3 @@
-.editor-autocompleters__block {
-	.block-editor-block-icon {
-		margin-right: 8px;
-	}
-}
-
 .editor-autocompleters__user {
 	.editor-autocompleters__no-avatar::before {
 		/* stylelint-disable */

packages/editor/src/hooks/default-autocompleters.js

@@ -7,22 +7,16 @@ import { clone } from 'lodash';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { blockAutocompleter, userAutocompleter } from '../components';
+import { userAutocompleter } from '../components';
 
-function setDefaultCompleters( completers = [], blockName ) {
+function setDefaultCompleters( completers = [] ) {
 	// Provide copies so filters may directly modify them.
 	completers.push( clone( userAutocompleter ) );
 
-	// Add blocks autocompleter for Paragraph block
-	if ( blockName === getDefaultBlockName() ) {
-		completers.push( clone( blockAutocompleter ) );
-	}
-
 	return completers;
 }