Display names for Context providers (#71208)

im3dabasia · im3dabasia · luisherranz · web-flow · commit 651badeaea8b · 2025-09-03T12:14:34.000+04:00
* feat: Add Context displaynames in React dev tools for improved dev exp
* fix: Remove the context in interactivity hooks.tsx
* chore: Add changelog entries

Co-authored-by: im3dabasia &lt;im3dabasia1@git.wordpress.org&gt;
Co-authored-by: luisherranz &lt;luisherranz@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: desrosj &lt;desrosj@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/block-context/index.js b/packages/block-editor/src/components/block-context/index.js
@@ -15,6 +15,7 @@ import { createContext, useContext, useMemo } from '@wordpress/element';
 
 /** @type {import('react').Context<Record<string,*>>} */
 const Context = createContext( {} );
+Context.displayName = 'BlockContext';
 
 /**
  * Component which merges passed value with current consumed block context.
diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js
@@ -15,6 +15,8 @@ export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 };
 
 const Context = createContext( DEFAULT_BLOCK_EDIT_CONTEXT );
+Context.displayName = 'BlockEditContext';
+
 const { Provider } = Context;
 
 export { Provider as BlockEditContextProvider };
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -40,6 +40,8 @@ import { ZoomOutSeparator } from './zoom-out-separator';
 import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
+IntersectionObserver.displayName = 'IntersectionObserverContext';
+
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
@@ -12,6 +12,7 @@ import { useSettings } from '../use-settings';
 export const defaultLayout = { type: 'default' };
 
 const Layout = createContext( defaultLayout );
+Layout.displayName = 'BlockLayoutContext';
 
 /**
  * Allows to define the layout.
diff --git a/packages/block-editor/src/components/block-list/private-block-context.js b/packages/block-editor/src/components/block-list/private-block-context.js
@@ -4,3 +4,4 @@
 import { createContext } from '@wordpress/element';
 
 export const PrivateBlockContext = createContext( {} );
+PrivateBlockContext.displayName = 'PrivateBlockContext';
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -26,6 +26,7 @@ import usePopoverScroll from './use-popover-scroll';
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
 export const InsertionPointOpenRef = createContext();
+InsertionPointOpenRef.displayName = 'InsertionPointOpenRefContext';
 
 function BlockPopoverInbetween( {
 	previousClientId,
diff --git a/packages/block-editor/src/components/block-toolbar/block-name-context.js b/packages/block-editor/src/components/block-toolbar/block-name-context.js
@@ -4,5 +4,6 @@
 import { createContext } from '@wordpress/element';
 
 const __unstableBlockNameContext = createContext( '' );
+__unstableBlockNameContext.displayName = '__unstableBlockNameContext';
 
 export default __unstableBlockNameContext;
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -21,6 +21,7 @@ import BlockDropZonePopover from '../block-popover/drop-zone';
 import { unlock } from '../../lock-unlock';
 
 export const InsertionPointOpenRef = createContext();
+InsertionPointOpenRef.displayName = 'InsertionPointOpenRefContext';
 
 function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
diff --git a/packages/block-editor/src/components/global-styles/context.js b/packages/block-editor/src/components/global-styles/context.js
@@ -13,3 +13,4 @@ export const DEFAULT_GLOBAL_STYLES_CONTEXT = {
 export const GlobalStylesContext = createContext(
 	DEFAULT_GLOBAL_STYLES_CONTEXT
 );
+GlobalStylesContext.displayName = 'GlobalStylesContext';
diff --git a/packages/block-editor/src/components/image-editor/context.js b/packages/block-editor/src/components/image-editor/context.js
@@ -10,6 +10,7 @@ import useSaveImage from './use-save-image';
 import useTransformImage from './use-transform-image';
 
 const ImageEditingContext = createContext( {} );
+ImageEditingContext.displayName = 'ImageEditingContext';
 
 export const useImageEditingContext = () => useContext( ImageEditingContext );
 
diff --git a/packages/block-editor/src/components/inserter-listbox/context.js b/packages/block-editor/src/components/inserter-listbox/context.js
@@ -4,5 +4,6 @@
 import { createContext } from '@wordpress/element';
 
 const InserterListboxContext = createContext();
+InserterListboxContext.displayName = 'InserterListboxContext';
 
 export default InserterListboxContext;
diff --git a/packages/block-editor/src/components/list-view/context.js b/packages/block-editor/src/components/list-view/context.js
@@ -4,5 +4,6 @@
 import { createContext, useContext } from '@wordpress/element';
 
 export const ListViewContext = createContext( {} );
+ListViewContext.displayName = 'ListViewContext';
 
 export const useListViewContext = () => useContext( ListViewContext );
diff --git a/packages/block-editor/src/components/provider/block-refs-provider.js b/packages/block-editor/src/components/provider/block-refs-provider.js
@@ -5,6 +5,7 @@ import { createContext, useMemo } from '@wordpress/element';
 import { observableMap } from '@wordpress/compose';
 
 export const BlockRefs = createContext( { refsMap: observableMap() } );
+BlockRefs.displayName = 'BlockRefsContext';
 
 export function BlockRefsProvider( { children } ) {
 	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
diff --git a/packages/block-editor/src/components/recursion-provider/index.js b/packages/block-editor/src/components/recursion-provider/index.js
@@ -10,6 +10,7 @@ import deprecated from '@wordpress/deprecated';
 import { useBlockEditContext } from '../block-edit/context';
 
 const RenderedRefsContext = createContext( {} );
+RenderedRefsContext.displayName = 'RenderedRefsContext';
 
 /**
  * Immutably adds an unique identifier to a set scoped for a given block type.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -43,7 +43,10 @@ import { canBindBlock } from '../../utils/block-bindings';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
+keyboardShortcutContext.displayName = 'keyboardShortcutContext';
+
 export const inputEventContext = createContext();
+inputEventContext.displayName = 'inputEventContext';
 
 const instanceIdKey = Symbol( 'instanceId' );
 
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,7 +8,13 @@
 
 ### Internal
 
+- Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208)
+
+### Internal
+
 -   Upgrade `framer-motion` package to version `^11.15.0` ([#71442](https://github.com/WordPress/gutenberg/pull/71442)).
+-   Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208).
+
 
 ## 30.2.0 (2025-08-20)
 
diff --git a/packages/components/src/card/context.ts b/packages/components/src/card/context.ts
@@ -4,4 +4,6 @@
 import { createContext, useContext } from '@wordpress/element';
 
 export const CardContext = createContext( {} );
+CardContext.displayName = 'CardContext';
+
 export const useCardContext = () => useContext( CardContext );
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-context.tsx b/packages/components/src/circular-option-picker/circular-option-picker-context.tsx
@@ -10,3 +10,4 @@ import type { CircularOptionPickerContextProps } from './types';
 
 export const CircularOptionPickerContext =
 	createContext< CircularOptionPickerContextProps >( {} );
+CircularOptionPickerContext.displayName = 'CircularOptionPickerContext';
diff --git a/packages/components/src/composite/context.tsx b/packages/components/src/composite/context.tsx
@@ -9,5 +9,6 @@ import { createContext, useContext } from '@wordpress/element';
 import type { CompositeContextProps } from './types';
 
 export const CompositeContext = createContext< CompositeContextProps >( {} );
+CompositeContext.displayName = 'CompositeContext';
 
 export const useCompositeContext = () => useContext( CompositeContext );
diff --git a/packages/components/src/context/context-system-provider.js b/packages/components/src/context/context-system-provider.js
@@ -25,6 +25,8 @@ import { useUpdateEffect } from '../utils';
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
+ComponentsContext.displayName = 'ComponentsContext';
+
 export const useComponentsContext = () => useContext( ComponentsContext );
 
 /**
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -28,6 +28,7 @@ import BaseControl from '../base-control';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
+CustomSelectContext.displayName = 'CustomSelectContext';
 
 function defaultRenderSelectedValue(
 	value: CustomSelectButtonProps[ 'value' ]
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
@@ -12,6 +12,8 @@ import type { WordPressComponentProps } from '../context';
 import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );
+Context.displayName = 'DisabledContext';
+
 const { Consumer, Provider } = Context;
 
 /**
diff --git a/packages/components/src/item-group/context.ts b/packages/components/src/item-group/context.ts
@@ -11,5 +11,6 @@ import type { ItemGroupContext as Context } from './types';
 export const ItemGroupContext = createContext( {
 	size: 'medium',
 } as Context );
+ItemGroupContext.displayName = 'ItemGroupContext';
 
 export const useItemGroupContext = () => useContext( ItemGroupContext );
diff --git a/packages/components/src/menu/context.tsx b/packages/components/src/menu/context.tsx
@@ -9,3 +9,4 @@ import { createContext } from '@wordpress/element';
 import type { ContextProps } from './types';
 
 export const Context = createContext< ContextProps | undefined >( undefined );
+Context.displayName = 'MenuContext';
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
@@ -44,6 +44,7 @@ type Dismissers = Set<
 	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
+ModalContext.displayName = 'ModalContext';
 
 // Used to track body class names applied while modals are open.
 const bodyOpenClasses = new Map< string, number >();
diff --git a/packages/components/src/navigation/context.tsx b/packages/components/src/navigation/context.tsx
@@ -34,4 +34,7 @@ export const NavigationContext = createContext< NavigationContextType >( {
 		isMenuEmpty: defaultIsEmpty,
 	},
 } );
+
+NavigationContext.displayName = 'NavigationContext';
+
 export const useNavigationContext = () => useContext( NavigationContext );
diff --git a/packages/components/src/navigation/group/context.tsx b/packages/components/src/navigation/group/context.tsx
@@ -10,6 +10,7 @@ import type { NavigationGroupContext as NavigationGroupContextType } from '../ty
 
 export const NavigationGroupContext =
 	createContext< NavigationGroupContextType >( { group: undefined } );
+NavigationGroupContext.displayName = 'NavigationGroupContext';
 
 export const useNavigationGroupContext = () =>
 	useContext( NavigationGroupContext );
diff --git a/packages/components/src/navigation/menu/context.tsx b/packages/components/src/navigation/menu/context.tsx
@@ -14,5 +14,7 @@ export const NavigationMenuContext = createContext< NavigationMenuContextType >(
 		search: '',
 	}
 );
+NavigationMenuContext.displayName = 'NavigationMenuContext';
+
 export const useNavigationMenuContext = () =>
 	useContext( NavigationMenuContext );
diff --git a/packages/components/src/navigator/context.ts b/packages/components/src/navigator/context.ts
@@ -18,3 +18,4 @@ const initialContextValue: NavigatorContextType = {
 	params: {},
 };
 export const NavigatorContext = createContext( initialContextValue );
+NavigatorContext.displayName = 'NavigatorContext';
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -102,6 +102,7 @@ const ArrowTriangle = () => (
 );
 
 const slotNameContext = createContext< string | undefined >( undefined );
+slotNameContext.displayName = '__unstableSlotNameContext';
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {
diff --git a/packages/components/src/radio-group/context.tsx b/packages/components/src/radio-group/context.tsx
@@ -15,3 +15,4 @@ export const RadioGroupContext = createContext< {
 	store: undefined,
 	disabled: undefined,
 } );
+RadioGroupContext.displayName = 'RadioGroupContext';
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
@@ -29,5 +29,6 @@ const initialContextValue: SlotFillBubblesVirtuallyContext = {
 };
 
 const SlotFillContext = createContext( initialContextValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/context.ts b/packages/components/src/slot-fill/context.ts
@@ -19,5 +19,6 @@ const initialValue: BaseSlotFillContext = {
 	updateFill: () => {},
 };
 export const SlotFillContext = createContext( initialValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;
diff --git a/packages/components/src/tabs/context.ts b/packages/components/src/tabs/context.ts
@@ -9,5 +9,6 @@ import { createContext, useContext } from '@wordpress/element';
 import type { TabsContextProps } from './types';
 
 export const TabsContext = createContext< TabsContextProps >( undefined );
+TabsContext.displayName = 'TabsContext';
 
 export const useTabsContext = () => useContext( TabsContext );
diff --git a/packages/components/src/toggle-group-control/context.ts b/packages/components/src/toggle-group-control/context.ts
@@ -11,6 +11,8 @@ import type { ToggleGroupControlContextProps } from './types';
 const ToggleGroupControlContext = createContext(
 	{} as ToggleGroupControlContextProps
 );
+ToggleGroupControlContext.displayName = 'ToggleGroupControlContext';
+
 export const useToggleGroupControlContext = () =>
 	useContext( ToggleGroupControlContext );
 export default ToggleGroupControlContext;
diff --git a/packages/components/src/toolbar/toolbar-context/index.ts b/packages/components/src/toolbar/toolbar-context/index.ts
@@ -11,5 +11,6 @@ import { createContext } from '@wordpress/element';
 const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
 	undefined
 );
+ToolbarContext.displayName = 'ToolbarContext';
 
 export default ToolbarContext;
diff --git a/packages/components/src/tools-panel/context.ts b/packages/components/src/tools-panel/context.ts
@@ -22,6 +22,7 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );
+ToolsPanelContext.displayName = 'ToolsPanelContext';
 
 export const useToolsPanelContext = () =>
 	useContext< ToolsPanelContextType >( ToolsPanelContext );
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
@@ -30,6 +30,7 @@ import { positionToPlacement } from '../popover/utils';
 const TooltipInternalContext = createContext< TooltipInternalContextType >( {
 	isNestedInTooltip: false,
 } );
+TooltipInternalContext.displayName = 'TooltipInternalContext';
 
 /**
  * Time over anchor to wait before showing tooltip
diff --git a/packages/components/src/tree-grid/roving-tab-index-context.ts b/packages/components/src/tree-grid/roving-tab-index-context.ts
@@ -12,6 +12,8 @@ const RovingTabIndexContext = createContext<
 	  }
 	| undefined
 >( undefined );
+RovingTabIndexContext.displayName = 'RovingTabIndexContext';
+
 export const useRovingTabIndexContext = () =>
 	useContext( RovingTabIndexContext );
 export const RovingTabIndexProvider = RovingTabIndexContext.Provider;
diff --git a/packages/compose/src/hooks/use-viewport-match/index.js b/packages/compose/src/hooks/use-viewport-match/index.js
@@ -57,6 +57,7 @@ const OPERATOR_EVALUATORS = {
 const ViewportMatchWidthContext = createContext(
 	/** @type {null | number} */ ( null )
 );
+ViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';
 
 /**
  * Returns true if the viewport matches the given query, or false otherwise.
diff --git a/packages/core-data/src/entity-context.js b/packages/core-data/src/entity-context.js
@@ -4,3 +4,4 @@
 import { createContext } from '@wordpress/element';
 
 export const EntityContext = createContext( {} );
+EntityContext.displayName = 'EntityContext';
diff --git a/packages/customize-widgets/src/components/focus-control/index.js b/packages/customize-widgets/src/components/focus-control/index.js
@@ -16,6 +16,7 @@ import {
 import { settingIdToWidgetId } from '../../utils';
 
 const FocusControlContext = createContext();
+FocusControlContext.displayName = 'FocusControlContext';
 
 export default function FocusControl( { api, sidebarControls, children } ) {
 	const [ focusedWidgetIdRef, setFocusedWidgetIdRef ] = useState( {
diff --git a/packages/customize-widgets/src/components/sidebar-controls/index.js b/packages/customize-widgets/src/components/sidebar-controls/index.js
@@ -4,6 +4,7 @@
 import { createContext, useMemo, useContext } from '@wordpress/element';
 
 export const SidebarControlsContext = createContext();
+SidebarControlsContext.displayName = 'SidebarControlsContext';
 
 export default function SidebarControls( {
 	sidebarControls,
diff --git a/packages/data/src/components/async-mode-provider/context.js b/packages/data/src/components/async-mode-provider/context.js
@@ -4,6 +4,7 @@
 import { createContext } from '@wordpress/element';
 
 export const Context = createContext( false );
+Context.displayName = 'AsyncModeContext';
 
 const { Consumer, Provider } = Context;
 
diff --git a/packages/data/src/components/registry-provider/context.js b/packages/data/src/components/registry-provider/context.js
@@ -9,6 +9,7 @@ import { createContext } from '@wordpress/element';
 import defaultRegistry from '../../default-registry';
 
 export const Context = createContext( defaultRegistry );
+Context.displayName = 'RegistryProviderContext';
 
 const { Consumer, Provider } = Context;
 
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 -   DataForm: add description support for the combined fields and show the description in the Card layout ([#71380](https://github.com/WordPress/gutenberg/pull/71380)).
 
+### Internal
+
+- Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208)
+
 ### Bug Fixes
 
 -   DataViews: Fix incorrect documentation for `defaultLayouts` prop. [#71334](https://github.com/WordPress/gutenberg/pull/71334)
diff --git a/packages/dataviews/src/components/dataform-context/index.tsx b/packages/dataviews/src/components/dataform-context/index.tsx
@@ -15,6 +15,7 @@ type DataFormContextType< Item > = {
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
 } );
+DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -88,4 +88,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	},
 } );
 
+DataViewsContext.displayName = 'DataViewsContext';
+
 export default DataViewsContext;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -38,6 +38,7 @@ import { toggleFont } from './utils/toggleFont';
 import setNestedValue from '../../../utils/set-nested-value';
 
 export const FontLibraryContext = createContext( {} );
+FontLibraryContext.displayName = 'FontLibraryContext';
 
 function FontLibraryProvider( { children } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -16,6 +16,8 @@ import {
 import { focus } from '@wordpress/dom';
 
 export const SidebarNavigationContext = createContext( () => {} );
+SidebarNavigationContext.displayName = 'SidebarNavigationContext';
+
 // Focus a sidebar element after a navigation. The element to focus is either
 // specified by `focusSelector` (when navigating back) or it is the first
 // tabbable element (usually the "Back" button).
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
@@ -48,7 +48,11 @@ import RawHTML from './raw-html';
 
 /** @typedef {import('react').ReactElement} ReactElement */
 
-const { Provider, Consumer } = createContext( undefined );
+const Context = createContext( undefined );
+Context.displayName = 'ElementContext';
+
+const { Provider, Consumer } = Context;
+
 const ForwardRef = forwardRef( () => {
 	return null;
 } );
diff --git a/packages/keyboard-shortcuts/src/context.js b/packages/keyboard-shortcuts/src/context.js
diff --git a/packages/plugins/src/components/plugin-context/index.tsx b/packages/plugins/src/components/plugin-context/index.tsx
diff --git a/packages/react-i18n/src/index.tsx b/packages/react-i18n/src/index.tsx
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx

Original file line number	Diff line number	Diff line change
`@@ -4,3 +4,4 @@`
`4`	`4`	`import { createContext } from '@wordpress/element';`
`5`	`5`
`6`	`6`	`export const PrivateBlockContext = createContext( {} );`
	`7`	`+PrivateBlockContext.displayName = 'PrivateBlockContext';`