WordPress · im3dabasia · Sep 3, 2025 · Aug 8, 2025 · Aug 21, 2025 · Aug 26, 2025
@@ -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.

@@ -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 };

@@ -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 } ) {

@@ -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.

@@ -4,3 +4,4 @@
 import { createContext } from '@wordpress/element';
 
 export const PrivateBlockContext = createContext( {} );
+PrivateBlockContext.displayName = 'PrivateBlockContext';
@@ -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,

@@ -4,5 +4,6 @@
 import { createContext } from '@wordpress/element';
 
 const __unstableBlockNameContext = createContext( '' );
+__unstableBlockNameContext.displayName = '__unstableBlockNameContext';
 
 export default __unstableBlockNameContext;
@@ -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,

@@ -13,3 +13,4 @@ export const DEFAULT_GLOBAL_STYLES_CONTEXT = {
 export const GlobalStylesContext = createContext(
 	DEFAULT_GLOBAL_STYLES_CONTEXT
 );
+GlobalStylesContext.displayName = 'GlobalStylesContext';
@@ -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 );
 

@@ -4,5 +4,6 @@
 import { createContext } from '@wordpress/element';
 
 const InserterListboxContext = createContext();
+InserterListboxContext.displayName = 'InserterListboxContext';
 
 export default InserterListboxContext;
@@ -4,5 +4,6 @@
 import { createContext, useContext } from '@wordpress/element';
 
 export const ListViewContext = createContext( {} );
+ListViewContext.displayName = 'ListViewContext';
 
 export const useListViewContext = () => useContext( ListViewContext );
@@ -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() } ), [] );

@@ -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.

@@ -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' );
 

@@ -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)
 

@@ -4,4 +4,6 @@
 import { createContext, useContext } from '@wordpress/element';
 
 export const CardContext = createContext( {} );
+CardContext.displayName = 'CardContext';
+
 export const useCardContext = () => useContext( CardContext );
@@ -10,3 +10,4 @@ import type { CircularOptionPickerContextProps } from './types';
 
 export const CircularOptionPickerContext =
 	createContext< CircularOptionPickerContextProps >( {} );
+CircularOptionPickerContext.displayName = 'CircularOptionPickerContext';
@@ -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 );
@@ -25,6 +25,8 @@ import { useUpdateEffect } from '../utils';
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
+ComponentsContext.displayName = 'ComponentsContext';
+
 export const useComponentsContext = () => useContext( ComponentsContext );
 
 /**

@@ -28,6 +28,7 @@ import BaseControl from '../base-control';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
+CustomSelectContext.displayName = 'CustomSelectContext';
 
 function defaultRenderSelectedValue(
 	value: CustomSelectButtonProps[ 'value' ]

@@ -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;
 
 /**

@@ -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 );
@@ -9,3 +9,4 @@ import { createContext } from '@wordpress/element';
 import type { ContextProps } from './types';
 
 export const Context = createContext< ContextProps | undefined >( undefined );
+Context.displayName = 'MenuContext';
@@ -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 >();

@@ -34,4 +34,7 @@ export const NavigationContext = createContext< NavigationContextType >( {
 		isMenuEmpty: defaultIsEmpty,
 	},
 } );
+
+NavigationContext.displayName = 'NavigationContext';
+
 export const useNavigationContext = () => useContext( NavigationContext );
@@ -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 );
@@ -14,5 +14,7 @@ export const NavigationMenuContext = createContext< NavigationMenuContextType >(
 		search: '',
 	}
 );
+NavigationMenuContext.displayName = 'NavigationMenuContext';
+
 export const useNavigationMenuContext = () =>
 	useContext( NavigationMenuContext );
@@ -18,3 +18,4 @@ const initialContextValue: NavigatorContextType = {
 	params: {},
 };
 export const NavigatorContext = createContext( initialContextValue );
+NavigatorContext.displayName = 'NavigatorContext';
@@ -102,6 +102,7 @@ const ArrowTriangle = () => (
 );
 
 const slotNameContext = createContext< string | undefined >( undefined );
+slotNameContext.displayName = '__unstableSlotNameContext';
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {

@@ -15,3 +15,4 @@ export const RadioGroupContext = createContext< {
 	store: undefined,
 	disabled: undefined,
 } );
+RadioGroupContext.displayName = 'RadioGroupContext';
@@ -29,5 +29,6 @@ const initialContextValue: SlotFillBubblesVirtuallyContext = {
 };
 
 const SlotFillContext = createContext( initialContextValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;
@@ -19,5 +19,6 @@ const initialValue: BaseSlotFillContext = {
 	updateFill: () => {},
 };
 export const SlotFillContext = createContext( initialValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;
@@ -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 );
@@ -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;
@@ -11,5 +11,6 @@ import { createContext } from '@wordpress/element';
 const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
 	undefined
 );
+ToolbarContext.displayName = 'ToolbarContext';
 
 export default ToolbarContext;
@@ -22,6 +22,7 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );
+ToolsPanelContext.displayName = 'ToolsPanelContext';
 
 export const useToolsPanelContext = () =>
 	useContext< ToolsPanelContextType >( ToolsPanelContext );
@@ -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

@@ -12,6 +12,8 @@ const RovingTabIndexContext = createContext<
 	  }
 	| undefined
 >( undefined );
+RovingTabIndexContext.displayName = 'RovingTabIndexContext';
+
 export const useRovingTabIndexContext = () =>
 	useContext( RovingTabIndexContext );
 export const RovingTabIndexProvider = RovingTabIndexContext.Provider;
@@ -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.

@@ -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,

@@ -4,6 +4,7 @@
 import { createContext } from '@wordpress/element';
 
 export const Context = createContext( false );
+Context.displayName = 'AsyncModeContext';
 
 const { Consumer, Provider } = Context;
 

@@ -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;
 

@@ -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)

@@ -15,6 +15,7 @@ type DataFormContextType< Item > = {
 const DataFormContext = createContext< DataFormContextType< any > >( {
 	fields: [],
 } );
+DataFormContext.displayName = 'DataFormContext';
 
 export function DataFormProvider< Item >( {
 	fields,

@@ -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).

@@ -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;
 } );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@
		import { createContext } from '@wordpress/element';

		export const PrivateBlockContext = createContext( {} );
		PrivateBlockContext.displayName = 'PrivateBlockContext';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,4 @@ import type { CircularOptionPickerContextProps } from './types';

		export const CircularOptionPickerContext =
		createContext< CircularOptionPickerContextProps >( {} );
		CircularOptionPickerContext.displayName = 'CircularOptionPickerContext';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@ import { createContext } from '@wordpress/element';
		import type { ContextProps } from './types';

		export const Context = createContext< ContextProps \| undefined >( undefined );
		Context.displayName = 'MenuContext';
-Original file line number
+Diff line change
@@ Expand Up @@
     	},
     } );
+    DataViewsContext.displayName = 'DataViewsContext';
     export default DataViewsContext;