WordPress · im3dabasia · Sep 2, 2026 · Jun 23, 2026 · Jun 23, 2026 · Jun 23, 2026
@@ -88,11 +88,14 @@ import normalizeUrl from './normalize-url';
  * @property {boolean=}                   forceIsEditingLink         If passed as either `true` or `false`, controls the
  *                                                                   internal editing state of the component to respective
  *                                                                   show or not show the URL input field.
+ * @property {string=}                    searchInputPlaceholder     Placeholder text for the search input.
  * @property {WPLinkControlValue=}        value                      Current link value.
  * @property {WPLinkControlOnChangeProp=} onChange                   Value change handler, called with the updated value if
  *                                                                   the user selects a new link or updates settings.
  * @property {Function=}                  onInputChange              Callback fired when the search input value changes.
  *                                                                   Use this for observation only (e.g., to track search state).
+ * @property {Function=}                  onRemove                   Callback invoked when the link is removed.
+ * @property {Function=}                  onCancel                   Callback invoked when editing is cancelled.
  * @property {string=}                    inputValue                 Initial value for the search input (uncontrolled).
  * @property {boolean=}                   noDirectEntry              Whether to allow turning a URL-like search query directly into a link.
  * @property {boolean=}                   showSuggestions            Whether to present suggestions when typing the URL.

@@ -9,6 +9,7 @@
 ### Internal
 
 -   Use the `.jsx` extension for JavaScript source files that contain JSX ([#80990](https://github.com/WordPress/gutenberg/pull/80990)).
+-   Migrate the package to TypeScript ([#79486](https://github.com/WordPress/gutenberg/pull/79486)).
 
 ## 5.54.0 (2026-08-26)
 

@@ -34,12 +34,14 @@
 	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
+			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
 		"./package.json": "./package.json"
 	},
 	"wpScript": true,
+	"types": "build-types/index.d.ts",
 	"dependencies": {
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/base-styles": "file:../base-styles",

@@ -4,8 +4,10 @@ import {
 	RichTextToolbarButton,
 	RichTextShortcut,
 	__unstableRichTextInputEvent,
+	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
 import { formatBold } from '@wordpress/icons';
+import type { FormatEditWithVisibilityProps } from '../types';
 
 const name = 'core/bold';
 const title = __( 'Bold' );
@@ -15,13 +17,19 @@ export const bold = {
 	title,
 	tagName: 'strong',
 	className: null,
-	edit( { isActive, value, onChange, onFocus, isVisible = true } ) {
+	edit( {
+		isActive,
+		value,
+		onChange,
+		onFocus,
+		isVisible = true,
+	}: FormatEditWithVisibilityProps ): React.ReactNode {
 		function onToggle() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 

@@ -3,8 +3,11 @@ import { toggleFormat, remove, applyFormat } from '@wordpress/rich-text';
 import {
 	RichTextToolbarButton,
 	RichTextShortcut,
+	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
 import { code as codeIcon } from '@wordpress/icons';
+import type { RichTextValue } from '@wordpress/rich-text';
+import type { FormatEditProps } from '../types';
 
 const name = 'core/code';
 const title = __( 'Inline code' );
@@ -14,7 +17,7 @@ export const code = {
 	title,
 	tagName: 'code',
 	className: null,
-	__unstableInputRule( value ) {
+	__unstableInputRule( value: RichTextValue ): RichTextValue {
 		const BACKTICK = '`';
 		const { start, text } = value;
 		const characterBefore = text[ start - 1 ];
@@ -46,7 +49,12 @@ export const code = {
 
 		return value;
 	},
-	edit( { value, onChange, onFocus, isActive } ) {
+	edit( {
+		value,
+		onChange,
+		onFocus,
+		isActive,
+	}: FormatEditProps ): React.ReactNode {
 		function onClick() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();

@@ -13,8 +13,9 @@ import {
 	MediaUpload,
 	RichTextToolbarButton,
 	MediaUploadCheck,
+	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
-
+import type { EditImageProps, InlineImageUIProps } from '../types';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const name = 'core/image';
@@ -23,10 +24,12 @@ const title = __( 'Inline image' );
 /**
  * Extracts the image ID from the className attribute.
  *
- * @param {Object} activeObjectAttributes The attributes of the active object.
- * @return {number|undefined} The extracted image ID or undefined if not found.
+ * @param activeObjectAttributes The attributes of the active object.
+ * @return The extracted image ID or undefined if not found.
  */
-function getCurrentImageId( activeObjectAttributes ) {
+function getCurrentImageId(
+	activeObjectAttributes: EditImageProps[ 'activeObjectAttributes' ]
+): number | undefined {
 	if ( ! activeObjectAttributes?.className ) {
 		return undefined;
 	}
@@ -53,13 +56,21 @@ export const image = {
 	edit: Edit,
 };
 
-function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
-	const { style, alt } = activeObjectAttributes;
+function InlineUI( {
+	value,
+	onChange,
+	activeObjectAttributes,
+	contentRef,
+}: InlineImageUIProps ) {
+	const style = activeObjectAttributes?.style;
+	const alt = activeObjectAttributes?.alt;
+
 	const width = style?.replace( /\D/g, '' );
 	const [ editedWidth, setEditedWidth ] = useState( width );
 	const [ editedAlt, setEditedAlt ] = useState( alt );
 	const hasChanged = editedWidth !== width || editedAlt !== alt;
 	const popoverAnchor = useAnchor( {
+		// eslint-disable-next-line react-hooks/refs
 		editableContentElement: contentRef.current,
 		settings: image,
 	} );
@@ -82,7 +93,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 							style: editedWidth
 								? `width: ${ editedWidth }px;`
 								: '',
-							alt: editedAlt,
+							alt: editedAlt ?? '',
 						},
 					};
 
@@ -105,7 +116,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					/>
 					<WCTextareaControl
 						label={ __( 'Alternative text' ) }
-						value={ editedAlt }
+						value={ editedAlt ?? '' }
 						onChange={ ( newAlt ) => {
 							setEditedAlt( newAlt );
 						} }
@@ -153,13 +164,23 @@ function Edit( {
 	isObjectActive,
 	activeObjectAttributes,
 	contentRef,
-} ) {
+}: EditImageProps ) {
 	return (
 		<MediaUploadCheck>
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ getCurrentImageId( activeObjectAttributes ) }
-				onSelect={ ( { id, url, alt, width: imgWidth } ) => {
+				onSelect={ ( {
+					id,
+					url,
+					alt,
+					width: imgWidth,
+				}: {
+					id: number;
+					url: string;
+					alt: string;
+					width: number;
+				} ) => {
 					onChange(
 						insertObject( value, {
 							type: name,
@@ -176,7 +197,7 @@ function Edit( {
 					);
 					onFocus();
 				} }
-				render={ ( { open } ) => (
+				render={ ( { open }: { open: () => void } ) => (
 					<RichTextToolbarButton
 						icon={ inlineImage }
 						title={ isObjectActive ? __( 'Replace image' ) : title }

@@ -4,8 +4,10 @@ import {
 	RichTextToolbarButton,
 	RichTextShortcut,
 	__unstableRichTextInputEvent,
+	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
 import { formatItalic } from '@wordpress/icons';
+import type { FormatEditWithVisibilityProps } from '../types';
 
 const name = 'core/italic';
 const title = __( 'Italic' );
@@ -15,13 +17,19 @@ export const italic = {
 	title,
 	tagName: 'em',
 	className: null,
-	edit( { isActive, value, onChange, onFocus, isVisible = true } ) {
+	edit( {
+		isActive,
+		value,
+		onChange,
+		onFocus,
+		isVisible = true,
+	}: FormatEditWithVisibilityProps ) {
 		function onToggle() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 

@@ -1,7 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import { toggleFormat } from '@wordpress/rich-text';
+// @ts-expect-error Block Editor not fully typed yet.
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import { button } from '@wordpress/icons';
+import type { FormatEditProps } from '../types';
 
 const name = 'core/keyboard';
 const title = __( 'Keyboard input' );
@@ -11,7 +13,7 @@ export const keyboard = {
 	title,
 	tagName: 'kbd',
 	className: null,
-	edit( { isActive, value, onChange, onFocus } ) {
+	edit( { isActive, value, onChange, onFocus }: FormatEditProps ) {
 		function onToggle() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 		}

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+// @ts-expect-error Block Editor not fully typed yet.
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import {
 	TextControl,
@@ -10,6 +11,11 @@ import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
 import { language as languageIcon } from '@wordpress/icons';
+import type {
+	LanguageEditProps,
+	InlineLanguageUIProps,
+	LanguageFormat,
+} from '../types';
 
 const name = 'core/language';
 const title = __( 'Language' );
@@ -24,9 +30,9 @@ export const language = {
 		dir: 'dir',
 	},
 	edit: Edit,
-};
+} satisfies LanguageFormat;
 
-function Edit( { isActive, value, onChange, contentRef } ) {
+function Edit( { isActive, value, onChange, contentRef }: LanguageEditProps ) {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const togglePopover = () => {
 		setIsPopoverVisible( ( state ) => ! state );
@@ -60,14 +66,20 @@ function Edit( { isActive, value, onChange, contentRef } ) {
 	);
 }
 
-function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
+function InlineLanguageUI( {
+	value,
+	contentRef,
+	onChange,
+	onClose,
+}: InlineLanguageUIProps ) {
 	const popoverAnchor = useAnchor( {
+		// eslint-disable-next-line react-hooks/refs
 		editableContentElement: contentRef.current,
 		settings: language,
 	} );
 
 	const [ lang, setLang ] = useState( '' );
-	const [ dir, setDir ] = useState( 'ltr' );
+	const [ dir, setDir ] = useState< 'ltr' | 'rtl' >( 'ltr' );
 
 	return (
 		<Popover

@@ -6,6 +6,7 @@ import {
 	CheckboxControl,
 } from '@wordpress/components';
 import { Stack, VisuallyHidden } from '@wordpress/ui';
+import type { CSSClassesSettingProps } from '../types';
 
 /**
  * CSSClassesSettingComponent
@@ -14,19 +15,23 @@ import { Stack, VisuallyHidden } from '@wordpress/ui';
  * is shown when the toggle is enabled or when there is already a value. When
  * toggled off and a value exists, it resets the value to an empty string.
  *
- * @param {Object}   props          - Component props.
- * @param {Object}   props.setting  - Setting configuration object.
- * @param {Object}   props.value    - Current link value object.
- * @param {Function} props.onChange - Callback when value changes.
+ * @param props          - Component props.
+ * @param props.setting  - Setting configuration object.
+ * @param props.value    - Current link value object.
+ * @param props.onChange - Callback when value changes.
  */
-const CSSClassesSettingComponent = ( { setting, value, onChange } ) => {
-	const hasValue = value ? value?.cssClasses?.length > 0 : false;
+const CSSClassesSettingComponent = ( {
+	setting,
+	value,
+	onChange,
+}: CSSClassesSettingProps ) => {
+	const hasValue = !! value?.cssClasses?.length;
 	const [ isSettingActive, setIsSettingActive ] = useState( hasValue );
 	const instanceId = useInstanceId( CSSClassesSettingComponent );
 	const controlledRegionId = `css-classes-setting-${ instanceId }`;
 
 	// Sanitize user input: replace commas with spaces, collapse repeated spaces, and trim
-	const handleSettingChange = ( newValue ) => {
+	const handleSettingChange = ( newValue: string | undefined ) => {
 		const sanitizedValue =
 			typeof newValue === 'string'
 				? newValue.replace( /,/g, ' ' ).replace( /\s+/g, ' ' ).trim()