jsnajdr · Sep 24, 2026 · Sep 24, 2026 · Sep 24, 2026 · Sep 24, 2026 · Mamaduka
@@ -7,7 +7,7 @@ import {
 	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
 import { formatBold } from '@wordpress/icons';
-import type { FormatEditWithVisibilityProps } from '../types';
+import type { FormatEditProps } from '../types';
 
 const name = 'core/bold';
 const title = __( 'Bold' );
@@ -23,7 +23,7 @@ export const bold = {
 		onChange,
 		onFocus,
 		isVisible = true,
-	}: FormatEditWithVisibilityProps ): React.ReactNode {
+	}: FormatEditProps ): React.ReactNode {
 		function onToggle() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 		}

@@ -9,13 +9,32 @@ import { Link, Stack } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { insertObject, useAnchor } from '@wordpress/rich-text';
+import type { RichTextValue } from '@wordpress/rich-text';
 import {
 	MediaUpload,
 	RichTextToolbarButton,
 	MediaUploadCheck,
 	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
-import type { EditImageProps, InlineImageUIProps } from '../types';
+import type { FormatEditProps } from '../types';
+
+/**
+ * The attributes the `core/image` format registers.
+ */
+interface ImageFormatAttributes {
+	className?: string;
+	style?: string;
+	url?: string;
+	alt?: string;
+}
+
+interface InlineImageUIProps {
+	value: RichTextValue;
+	onChange: ( value: RichTextValue ) => void;
+	activeObjectAttributes: ImageFormatAttributes;
+	contentRef: React.RefObject< HTMLElement >;
+}
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const name = 'core/image';
@@ -28,9 +47,9 @@ const title = __( 'Inline image' );
  * @return The extracted image ID or undefined if not found.
  */
 function getCurrentImageId(
-	activeObjectAttributes: EditImageProps[ 'activeObjectAttributes' ]
+	activeObjectAttributes: ImageFormatAttributes
 ): number | undefined {
-	if ( ! activeObjectAttributes?.className ) {
+	if ( ! activeObjectAttributes.className ) {
 		return undefined;
 	}
 
@@ -62,8 +81,8 @@ function InlineUI( {
 	activeObjectAttributes,
 	contentRef,
 }: InlineImageUIProps ) {
-	const style = activeObjectAttributes?.style;
-	const alt = activeObjectAttributes?.alt;
+	const style = activeObjectAttributes.style;
+	const alt = activeObjectAttributes.alt;
 
 	const width = style?.replace( /\D/g, '' );
 	const [ editedWidth, setEditedWidth ] = useState( width );
@@ -164,7 +183,7 @@ function Edit( {
 	isObjectActive,
 	activeObjectAttributes,
 	contentRef,
-}: EditImageProps ) {
+}: FormatEditProps ) {
 	return (
 		<MediaUploadCheck>
 			<MediaUpload

@@ -7,7 +7,7 @@ import {
 	// @ts-expect-error Block Editor not fully typed yet.
 } from '@wordpress/block-editor';
 import { formatItalic } from '@wordpress/icons';
-import type { FormatEditWithVisibilityProps } from '../types';
+import type { FormatEditProps } from '../types';
 
 const name = 'core/italic';
 const title = __( 'Italic' );
@@ -23,7 +23,7 @@ export const italic = {
 		onChange,
 		onFocus,
 		isVisible = true,
-	}: FormatEditWithVisibilityProps ) {
+	}: FormatEditProps ) {
 		function onToggle() {
 			onChange( toggleFormat( value, { type: name, title } ) );
 		}

@@ -10,12 +10,28 @@ import {
 import { Stack } from '@wordpress/ui';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
+import type { RichTextValue } from '@wordpress/rich-text';
 import { language as languageIcon } from '@wordpress/icons';
-import type {
-	LanguageEditProps,
-	InlineLanguageUIProps,
-	LanguageFormat,
-} from '../types';
+import type { FormatEditProps } from '../types';
+
+interface LanguageFormat {
+	name: string;
+	title: string;
+	tagName: string;
+	className: null;
+	attributes: {
+		lang: string;
+		dir: string;
+	};
+	edit: ( props: FormatEditProps ) => React.ReactNode;
+}
+
+interface InlineLanguageUIProps {
+	value: RichTextValue;
+	onChange: ( value: RichTextValue ) => void;
+	contentRef: React.RefObject< HTMLElement >;
+	onClose: () => void;
+}
 
 const name = 'core/language';
 const title = __( 'Language' );
@@ -32,7 +48,7 @@ export const language = {
 	edit: Edit,
 } satisfies LanguageFormat;
 
-function Edit( { isActive, value, onChange, contentRef }: LanguageEditProps ) {
+function Edit( { isActive, value, onChange, contentRef }: FormatEditProps ) {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const togglePopover = () => {
 		setIsPopoverVisible( ( state ) => ! state );

@@ -6,7 +6,15 @@ import {
 	CheckboxControl as WCCheckboxControl,
 } from '@wordpress/components';
 import { Stack, VisuallyHidden } from '@wordpress/ui';
-import type { CSSClassesSettingProps } from '../types';
+
+/**
+ * Props for the Link UI's "Additional CSS class(es)" setting.
+ */
+export interface CSSClassesSettingProps {
+	setting: { id: string; title: string };
+	value?: { cssClasses?: string };
+	onChange: ( newValue: { cssClasses?: string } ) => void;
+}
 
 /**
  * CSSClassesSettingComponent

@@ -21,7 +21,13 @@ import { speak } from '@wordpress/a11y';
 import type { RichTextValue } from '@wordpress/rich-text';
 import InlineLinkUI from './inline';
 import { isValidHref } from './utils';
-import type { EditLinkProps, OpenedBy } from '../types';
+import type { LinkFormatAttributes } from './utils';
+import type { FormatEditProps } from '../types';
+
+interface OpenedBy {
+	el: HTMLElement;
+	action: 'click' | null;
+}
 
 const name = 'core/link';
 const title = __( 'Link' );
@@ -34,7 +40,7 @@ function Edit( {
 	onFocus,
 	contentRef,
 	isVisible = true,
-}: EditLinkProps ) {
+}: FormatEditProps ) {
 	const [ addingLink, setAddingLink ] = useState( false );
 
 	// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
@@ -205,7 +211,11 @@ function Edit( {
 					stopAddingLink={ stopAddingLink }
 					onFocusOutside={ onFocusOutside }
 					isActive={ isActive }
-					activeAttributes={ activeAttributes }
+					// The toolbar hands over an untyped attribute bag; these
+					// are the ones `core/link` registers.
+					activeAttributes={
+						activeAttributes as LinkFormatAttributes
+					}
 					value={ value }
 					onChange={ onChange }
 					contentRef={ contentRef }

@@ -23,13 +23,31 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import type { RichTextValue } from '@wordpress/rich-text';
 import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
+import type { LinkFormatAttributes } from './utils';
 import { link as settings } from './index';
 import CSSClassesSettingComponent from './css-classes-setting';
-import type {
-	InlineLinkUIProps,
-	LinkValue,
-	CSSClassesSettingProps,
-} from '../types';
+import type { CSSClassesSettingProps } from './css-classes-setting';
+
+interface LinkValue {
+	url?: string;
+	type?: string;
+	id?: string | number;
+	opensInNewTab?: boolean;
+	nofollow?: boolean;
+	title?: string;
+	cssClasses?: string;
+}
+
+interface InlineLinkUIProps {
+	isActive: boolean;
+	activeAttributes: LinkFormatAttributes;
+	value: RichTextValue;
+	onChange: ( newValue: RichTextValue ) => void;
+	onFocusOutside: () => void;
+	stopAddingLink: () => void;
+	contentRef: React.RefObject< HTMLElement >;
+	focusOnMount?: 'firstElement' | false;
+}
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,

@@ -11,7 +11,54 @@ import {
 	isValidFragment,
 } from '@wordpress/url';
 import type { RichTextValue, RichTextFormat } from '@wordpress/rich-text';
-import type { LinkFormat, LinkFormatOptions } from '../types';
+
+/**
+ * The attributes carried on an active `core/link` format.
+ */
+export type LinkFormatAttributes = {
+	url: string;
+	type?: string;
+	id?: string;
+	target?: string;
+	rel?: string;
+	class?: string;
+};
+
+export interface LinkFormat {
+	type: 'core/link';
+	attributes: LinkFormatAttributes;
+}
+
+/**
+ * The options accepted by `createLinkFormat`.
+ */
+export interface LinkFormatOptions {
+	/**
+	 * The href of the link.
+	 */
+	url: string;
+	/**
+	 * The type of the link.
+	 */
+	type?: string;
+	/**
+	 * The ID of the link.
+	 */
+	id?: string;
+	/**
+	 * Whether this link will open in a new window.
+	 */
+	opensInNewWindow?: boolean;
+	/**
+	 * Whether this link is marked as no follow relationship.
+	 */
+	nofollow?: boolean;
+	/**
+	 * The CSS classes to apply to the link.
+	 */
+	cssClasses?: string;
+}
+
 /**
  * Check for issues with the provided href.
  *

@@ -7,25 +7,40 @@ import {
 	getTextContent,
 	useAnchor,
 } from '@wordpress/rich-text';
+import type { RichTextValue } from '@wordpress/rich-text';
 // @ts-expect-error Block Editor not fully typed yet.
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
 import { ValidatedInputControl, Link } from '@wordpress/ui';
 import { math as icon } from '@wordpress/icons';
-import type { InlineMathUIProps, EditMathProps } from '../types';
+import type { FormatEditProps } from '../types';
+
+interface InlineMathUIProps {
+	value: RichTextValue;
+	onChange: ( value: RichTextValue ) => void;
+	activeObjectAttributes: Record< string, string >;
+	contentRef: React.RefObject< HTMLElement >;
+	/**
+	 * Resolves once `@wordpress/latex-to-mathml` has loaded; undefined until then.
+	 */
+	latexToMathML?: (
+		latex: string,
+		options?: { displayMode?: boolean }
+	) => string;
+}
 
 const name = 'core/math';
 const title = __( 'Math' );
 
 function InlineUI( {
 	value,
 	onChange,
-	activeAttributes,
+	activeObjectAttributes,
 	contentRef,
 	latexToMathML,
 }: InlineMathUIProps ) {
 	const [ latex, setLatex ] = useState(
-		activeAttributes?.[ 'data-latex' ] || ''
+		activeObjectAttributes[ 'data-latex' ] || ''
 	);
 	const [ error, setError ] = useState< string | null >( null );
 	const formRef = useRef< HTMLFormElement >( null );
@@ -119,7 +134,7 @@ function Edit( {
 	isObjectActive,
 	activeObjectAttributes,
 	contentRef,
-}: EditMathProps ) {
+}: FormatEditProps ) {
 	const [ latexToMathML, setLatexToMathML ] =
 		useState<
 			( latex: string, options?: { displayMode?: boolean } ) => string
@@ -139,7 +154,7 @@ function Edit( {
 			// the button toggles back to the exact text it was created from.
 			// Keep the restored text selected so it can be edited or
 			// re-marked right away.
-			const latex = activeObjectAttributes?.[ 'data-latex' ] || '';
+			const latex = activeObjectAttributes[ 'data-latex' ] || '';
 			newValue = insert( value, latex );
 			newValue.start = newValue.end - latex.length;
 		} else {
@@ -181,7 +196,7 @@ function Edit( {
 				<InlineUI
 					value={ value }
 					onChange={ onChange }
-					activeAttributes={ activeObjectAttributes }
+					activeObjectAttributes={ activeObjectAttributes }
 					contentRef={ contentRef }
 					latexToMathML={ latexToMathML }
 				/>

@@ -4,15 +4,14 @@ import type { RichTextValue } from '@wordpress/rich-text';
 // @ts-expect-error Block Editor not fully typed yet.
 import { RichTextShortcut } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
-import type {
-	NonBreakingSpaceEditProps,
-	NonBreakingSpacePopoverAnchorProps,
-} from '../types';
+import type { FormatEditProps } from '../types';
 
 const name = 'core/non-breaking-space';
 const title = __( 'Non breaking space' );
 
-function PopoverAnchor( { contentRef }: NonBreakingSpacePopoverAnchorProps ) {
+function PopoverAnchor( {
+	contentRef,
+}: Pick< FormatEditProps, 'contentRef' > ) {
 	const popoverAnchor = useAnchor( {
 		// eslint-disable-next-line react-hooks/refs
 		editableContentElement: contentRef.current,
@@ -33,7 +32,7 @@ export const nonBreakingSpace = {
 	title,
 	tagName: 'span',
 	className: 'non-breaking-space',
-	edit( { value, onChange, contentRef }: NonBreakingSpaceEditProps ) {
+	edit( { value, onChange, contentRef }: FormatEditProps ) {
 		function addNonBreakingSpace() {
 			onChange( insert( value, '\u00a0' ) );
 		}