Make filter key private

packages/block-editor/package.json

@@ -74,7 +74,8 @@
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.0",
 		"remove-accents": "^0.4.2",
-		"traverse": "^0.6.6"
+		"traverse": "^0.6.6",
+		"uuid": "8.3.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
@@ -24,6 +29,9 @@ import { store as blockEditorStore } from '../../store';
  */
 export { useBlockEditContext };
 
+// Please do not export this at the package level until we have a stable API.
+export const blockControlsFilterName = uuid();
+
 function BlockControlFilters( props ) {
 	const { name, isSelected, clientId } = props;
 	const shouldDisplayControls = useSelect(
@@ -56,14 +64,13 @@ function BlockControlFilters( props ) {
 		[ clientId, isSelected, name ]
 	);
 
-	const hookName = 'editor.BlockControls';
 	const [ , forceRender ] = useReducer( () => [] );
 
 	useEffect( () => {
 		const namespace = 'core/block-edit/block-controls';
 
 		function onHooksUpdated( updatedHookName ) {
-			if ( updatedHookName === hookName ) {
+			if ( updatedHookName === blockControlsFilterName ) {
 				forceRender();
 			}
 		}
@@ -81,16 +88,16 @@ function BlockControlFilters( props ) {
 		return;
 	}
 
-	const blockControlFilters = filters[ hookName ];
+	const blockControlFilters = filters[ blockControlsFilterName ];
 
 	if ( ! blockControlFilters ) {
 		return;
 	}
 
 	return blockControlFilters.handlers.map(
-		( { callback: Controls, namespace } ) => (
-			<Controls { ...props } key={ namespace } />
-		)
+		( { callback: Controls, namespace } ) => {
+			return <Controls { ...props } key={ namespace } />;
+		}
 	);
 }
 

packages/block-editor/src/hooks/align.js

@@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data';
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
 import { store as blockEditorStore } from '../store';
+import { blockControlsFilterName } from '../components/block-edit';
 
 /**
  * An array which includes all possible valid alignments,
@@ -239,7 +240,7 @@ addFilter(
 	withDataAlign
 );
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/editor/align/with-toolbar-controls',
 	ifCondition( ( { name } ) => hasBlockSupport( name, 'align' ) )(
 		ToolbarControls

packages/block-editor/src/hooks/anchor.js

@@ -12,6 +12,7 @@ import { ifCondition } from '@wordpress/compose';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { blockControlsFilterName } from '../components/block-edit';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -143,7 +144,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/editor/anchor/with-inspector-control',
 	ifCondition( ( { name } ) => hasBlockSupport( name, 'anchor' ) )(
 		InspectorControl

packages/block-editor/src/hooks/content-lock-ui.js

@@ -12,6 +12,7 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { blockControlsFilterName } from '../components/block-edit';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
@@ -146,7 +147,7 @@ export const LockUIBlockControls = ( props ) => {
 };
 
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/content-lock-ui/with-block-controls',
 	LockUIBlockControls
 );

packages/block-editor/src/hooks/custom-class-name.js

@@ -16,6 +16,7 @@ import { ifCondition } from '@wordpress/compose';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { blockControlsFilterName } from '../components/block-edit';
 
 /**
  * Filters registered block settings, extending attributes to include `className`.
@@ -138,7 +139,7 @@ addFilter(
 	addAttribute
 );
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/editor/custom-class-name/with-inspector-control',
 	ifCondition( ( { name } ) =>
 		hasBlockSupport( name, 'customClassName', true )

packages/block-editor/src/hooks/duotone.js

@@ -33,6 +33,7 @@ import {
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
 import { store as blockEditorStore } from '../store';
+import { blockControlsFilterName } from '../components/block-edit';
 
 const EMPTY_ARRAY = [];
 
@@ -326,7 +327,7 @@ addFilter(
 	addDuotoneAttributes
 );
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/editor/duotone/with-editor-controls',
 	ifCondition( ( { name } ) =>
 		hasBlockSupport( name, 'color.__experimentalDuotone' )

packages/block-editor/src/hooks/layout.js

@@ -33,6 +33,7 @@ import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
 import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
+import { blockControlsFilterName } from '../components/block-edit';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
@@ -481,7 +482,7 @@ addFilter(
 	withChildLayoutStyles
 );
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/editor/layout/with-inspector-controls',
 	ifCondition( ( { name } ) =>
 		hasBlockSupport( name, layoutBlockSupportKey )

packages/block-editor/src/hooks/style.js

@@ -33,6 +33,7 @@ import {
 	DimensionsPanel,
 } from './dimensions';
 import { shouldSkipSerialization } from './utils';
+import { blockControlsFilterName } from '../components/block-edit';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -455,7 +456,7 @@ addFilter(
 );
 
 addFilter(
-	'editor.BlockControls',
+	blockControlsFilterName,
 	'core/style/with-block-controls',
 	StyleBlockControls
 );

packages/block-library/src/query/hooks.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { InspectorControls } from '@wordpress/block-editor';
 
 const CreateNewPostLink = ( {
@@ -27,19 +28,26 @@ const CreateNewPostLink = ( {
 /**
  * Override the default edit UI to include layout controls
  *
- * @param {Object} props
+ * @param {Function} BlockEdit Original component
+ * @return {Function}           Wrapped component
  */
-const queryTopInspectorControls = ( props ) => {
-	const { name, isSelected } = props;
-	if ( name !== 'core/query' || ! isSelected ) {
-		return null;
-	}
+const queryTopInspectorControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name, isSelected } = props;
+		if ( name !== 'core/query' || ! isSelected ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
 
-	return (
-		<InspectorControls>
-			<CreateNewPostLink { ...props } />
-		</InspectorControls>
-	);
-};
+		return (
+			<>
+				<InspectorControls>
+					<CreateNewPostLink { ...props } />
+				</InspectorControls>
+				<BlockEdit key="edit" { ...props } />
+			</>
+		);
+	},
+	'withInspectorControls'
+);
 
 export default queryTopInspectorControls;

packages/block-library/src/query/index.js

@@ -27,7 +27,9 @@ export const settings = {
 };
 
 export const init = () => {
-	addFilter( 'editor.BlockControls', 'core/query', queryInspectorControls );
+	// This is a temporary solution so the link is displayed at the top.
+	// See https://github.com/WordPress/gutenberg/pull/31833/files#r634291993.
+	addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );
 
 	return initBlock( { name, metadata, settings } );
 };