diff --git a/package-lock.json b/package-lock.json
index 5f314106697431..ed407df5473a70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17338,7 +17338,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"
}
},
"@wordpress/block-library": {
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 9874171ffc95cf..bb676342562775 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index edcc094f4373fd..553c467783f727 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/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 } ) => (
-
- )
+ ( { callback: Controls, namespace } ) => {
+ return ;
+ }
);
}
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index fa2d7b94c68ae5..e3804d4c9cd8fb 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/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
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 841bfae58b8ee4..0035d821a8f428 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/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
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 9a31d3a9b16568..463ab9f25ef4a1 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/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
);
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index fcdfd2bcc781c9..58b7f4b450614c 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/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 )
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 2288b229649b74..c73351469b3433 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/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' )
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index c7373d14e5589e..b45964c087e6bd 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/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 )
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index cec6be71e7e65e..5e264121c036b0 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/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
);
diff --git a/packages/block-library/src/query/hooks.js b/packages/block-library/src/query/hooks.js
index a09b13e925ac02..b2bb32a7be7b4e 100644
--- a/packages/block-library/src/query/hooks.js
+++ b/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 ;
+ }
- return (
-
-
-
- );
-};
+ return (
+ <>
+
+
+
+
+
+ );
+ },
+ 'withInspectorControls'
+);
export default queryTopInspectorControls;
diff --git a/packages/block-library/src/query/index.js b/packages/block-library/src/query/index.js
index 7e01894ce5b607..e3682edf506ddb 100644
--- a/packages/block-library/src/query/index.js
+++ b/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 } );
};