manzoorwanijk · Oct 14, 2026 · Oct 13, 2026 · Oct 13, 2026 · Oct 13, 2026 · Oct 13, 2026
@@ -38,6 +38,7 @@
 -   Convert the store selectors and `store/utils` to TypeScript ([#84631](https://github.com/WordPress/gutenberg/pull/84631)).
 -   Convert the store private selectors to TypeScript and type the editor settings the store reads ([#84662](https://github.com/WordPress/gutenberg/pull/84662)).
 -   Convert the store actions and private actions to TypeScript and add the store thunk arguments type ([#84672](https://github.com/WordPress/gutenberg/pull/84672)).
+-   Convert the block edit context, block context, block icon, block editing mode, `useSettings`, block refs, Global Styles utils and inheritance, and spacing size utils to TypeScript ([#84625](https://github.com/WordPress/gutenberg/pull/84625)).
 
 ## 18.1.0 (2026-10-07)
 

@@ -1,18 +1,7 @@
-// @ts-check
 import { createContext, useContext, useMemo } from '@wordpress/element';
+import type { BlockContextProviderProps } from './types';
 
-/** @typedef {React.ReactNode} ReactNode */
-
-/**
- * @typedef BlockContextProviderProps
- *
- * @property {Record<string,*>} value    Context value to merge with current
- *                                       value.
- * @property {ReactNode}        children Component children.
- */
-
-/** @type {React.Context<Record<string,*>>} */
-const Context = createContext( {} );
+const Context = createContext< Record< string, unknown > >( {} );
 Context.displayName = 'BlockContext';
 
 /**
@@ -22,7 +11,10 @@ Context.displayName = 'BlockContext';
  *
  * @param {BlockContextProviderProps} props
  */
-export function BlockContextProvider( { value, children } ) {
+export function BlockContextProvider( {
+	value,
+	children,
+}: BlockContextProviderProps ) {
 	const context = useContext( Context );
 	const nextValue = useMemo(
 		() => ( { ...context, ...value } ),

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+
+export interface BlockContextProviderProps {
+	/**
+	 * Context value to merge with current value.
+	 */
+	value: Record< string, unknown >;
+	/**
+	 * Component children.
+	 */
+	children: ReactNode;
+}
@@ -1,4 +1,5 @@
 import { createContext, useContext } from '@wordpress/element';
+import type { BlockEditContextValue } from './types';
 
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
@@ -13,7 +14,7 @@ export const isInListViewBlockSupportTreeKey = Symbol(
 	'isInListViewBlockSupportTree'
 );
 
-export const DEFAULT_BLOCK_EDIT_CONTEXT = {
+export const DEFAULT_BLOCK_EDIT_CONTEXT: BlockEditContextValue = {
 	name: '',
 	isSelected: false,
 };
@@ -28,7 +29,7 @@ export { Provider as BlockEditContextProvider };
 /**
  * A hook that returns the block edit context.
  *
- * @return {Object} Block edit context
+ * @return Block edit context
  */
 export function useBlockEditContext() {
 	return useContext( Context );

@@ -0,0 +1,27 @@
+import type { BlockEditingMode } from '../block-editing-mode';
+import type {
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+	mayDisplayPatternEditingControlsKey,
+	blockEditingModeKey,
+	blockBindingsKey,
+	isPreviewModeKey,
+	isMultiSelectedKey,
+	isInListViewBlockSupportTreeKey,
+} from './context';
+
+export interface BlockEditContextValue {
+	name: string;
+	isSelected?: boolean;
+	clientId?: string;
+	layout?: Record< string, unknown > | null;
+	__unstableLayoutClassNames?: string;
+	[ mayDisplayControlsKey ]?: boolean;
+	[ mayDisplayParentControlsKey ]?: boolean;
+	[ mayDisplayPatternEditingControlsKey ]?: boolean;
+	[ blockEditingModeKey ]?: BlockEditingMode;
+	[ blockBindingsKey ]?: Record< string, unknown > | null;
+	[ isPreviewModeKey ]?: boolean;
+	[ isMultiSelectedKey ]?: boolean;
+	[ isInListViewBlockSupportTreeKey ]?: boolean;
+}
@@ -5,10 +5,9 @@ import {
 	useBlockEditContext,
 	blockEditingModeKey,
 } from '../block-edit/context';
+import type { BlockEditingMode } from './types';
 
-/**
- * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
- */
+export type { BlockEditingMode };
 
 /**
  * Allows a block to restrict the user interface that is displayed for editing
@@ -40,7 +39,7 @@ import {
  *
  * @return {BlockEditingMode} The current editing mode.
  */
-export function useBlockEditingMode( mode ) {
+export function useBlockEditingMode( mode?: BlockEditingMode | null ) {
 	const context = useBlockEditContext();
 	const { clientId = '' } = context;
 	const registry = useRegistry();

@@ -0,0 +1 @@
+export type BlockEditingMode = 'disabled' | 'contentOnly' | 'default';
@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import { Icon as WCIcon } from '@wordpress/components';
+import type { IconType } from '@wordpress/components';
+import { blockDefault } from '@wordpress/icons';
+import { memo } from '@wordpress/element';
+import type { CSSProperties } from 'react';
+import type { BlockTypeIconDescriptor } from '@wordpress/blocks';
+import type { BlockIconProps } from './types';
+
+function BlockIcon( {
+	icon,
+	showColors = false,
+	className,
+	context,
+}: BlockIconProps ) {
+	if ( ( icon as BlockTypeIconDescriptor )?.src === 'block-default' ) {
+		icon = {
+			src: blockDefault,
+		};
+	}
+
+	const renderedIcon = (
+		<WCIcon
+			icon={
+				( icon && ( icon as BlockTypeIconDescriptor ).src
+					? ( icon as BlockTypeIconDescriptor ).src
+					: icon ) as IconType
+			}
+			// @ts-expect-error `Icon` passes extra props through to the icon.
+			context={ context }
+		/>
+	);
+	const style = showColors
+		? {
+				backgroundColor:
+					icon && ( icon as BlockTypeIconDescriptor ).background,
+				color: icon && ( icon as BlockTypeIconDescriptor ).foreground,
+			}
+		: {};
+
+	return (
+		<span
+			style={ style as CSSProperties }
+			className={ clsx( 'block-editor-block-icon', className, {
+				'has-colors': showColors,
+			} ) }
+		>
+			{ renderedIcon }
+		</span>
+	);
+}
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md
+ */
+export default memo( BlockIcon );
@@ -3,9 +3,9 @@ import { render } from 'vitest-browser-react';
 import { image } from '@wordpress/icons';
 import BlockIcon from '../';
 
-function getIconWrapper( container ) {
+function getIconWrapper( container: HTMLElement ) {
 	// The wrapper is intentionally non-semantic.
-	return container.firstChild;
+	return container.firstChild as Element;
 }
 
 describe( 'BlockIcon', () => {

@@ -0,0 +1,8 @@
+import type { BlockTypeIcon } from '@wordpress/blocks';
+
+export interface BlockIconProps {
+	icon?: BlockTypeIcon | null;
+	showColors?: boolean;
+	className?: string;
+	context?: string;
+}
@@ -1,18 +1,18 @@
+import type { Ref, RefCallback } from 'react';
 import { useContext, useState, useLayoutEffect } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { BlockRefs } from '../../provider/block-refs-provider';
 
-/** @typedef {import('@wordpress/element').RefCallback} RefCallback */
-/** @typedef {import('@wordpress/element').Ref} Ref */
-
 /**
  * Provides a ref to the BlockRefs context.
  *
- * @param {string} clientId The client ID of the element ref.
+ * @param clientId The client ID of the element ref.
  *
- * @return {RefCallback} Ref callback.
+ * @return Ref callback.
  */
-export function useBlockRefProvider( clientId ) {
+export function useBlockRefProvider(
+	clientId: string
+): RefCallback< Element > {
 	const { refsMap } = useContext( BlockRefs );
 	return useRefEffect(
 		( element ) => {
@@ -23,7 +23,7 @@ export function useBlockRefProvider( clientId ) {
 	);
 }
 
-function assignRef( ref, value ) {
+function assignRef( ref: Ref< Element | null >, value: Element | null ) {
 	if ( typeof ref === 'function' ) {
 		ref( value );
 	} else if ( ref ) {
@@ -35,10 +35,13 @@ function assignRef( ref, value ) {
  * Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref`
  * whenever it changes.
  *
- * @param {string} clientId The client ID to track.
- * @param {Ref}    ref      The ref object/callback to assign to.
+ * @param clientId The client ID to track.
+ * @param ref      The ref object/callback to assign to.
  */
-export function useBlockElementRef( clientId, ref ) {
+export function useBlockElementRef(
+	clientId: string,
+	ref: Ref< Element | null >
+) {
 	const { refsMap } = useContext( BlockRefs );
 	useLayoutEffect( () => {
 		assignRef( ref, refsMap.get( clientId ) );
@@ -56,12 +59,14 @@ export function useBlockElementRef( clientId, ref ) {
  * Return the element for a given client ID. Updates whenever the element
  * changes, becomes available, or disappears.
  *
- * @param {string} clientId The client ID to an element for.
+ * @param clientId The client ID to an element for.
  *
- * @return {Element|null} The block's wrapper element.
+ * @return The block's wrapper element.
  */
-export function useBlockElement( clientId ) {
-	const [ blockElement, setBlockElement ] = useState( null );
+export function useBlockElement( clientId: string ) {
+	const [ blockElement, setBlockElement ] = useState< Element | null >(
+		null
+	);
 	useBlockElementRef( clientId, setBlockElement );
 	return blockElement;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type BlockEditingMode = 'disabled' \| 'contentOnly' \| 'default';