From 3edf2003c5098e8588f50afa8c7e70659b144831 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 12 Oct 2026 12:29:45 +0200 Subject: [PATCH 1/2] React 19 types: migrate away from MutableRefObject --- .../src/hooks/use-copy-to-clipboard/index.ts | 4 ++-- .../dataviews/src/hooks/use-infinite-scroll.ts | 4 ++-- .../rich-text-control/format-edit.tsx | 4 ++-- .../components/collaborators-overlay/index.tsx | 2 +- .../grid/src/shared/use-item-exit-animation.ts | 4 +--- .../image-editor/react/components/cropper.tsx | 16 +--------------- 6 files changed, 9 insertions(+), 25 deletions(-) diff --git a/packages/compose/src/hooks/use-copy-to-clipboard/index.ts b/packages/compose/src/hooks/use-copy-to-clipboard/index.ts index a24be9dcf9f4ff..92f5db9d4c2d78 100644 --- a/packages/compose/src/hooks/use-copy-to-clipboard/index.ts +++ b/packages/compose/src/hooks/use-copy-to-clipboard/index.ts @@ -1,5 +1,5 @@ import { useRef, useLayoutEffect } from '@wordpress/element'; -import type { MutableRefObject, RefCallback } from 'react'; +import type { RefObject, RefCallback } from 'react'; import useRefEffect from '../use-ref-effect'; /** @@ -60,7 +60,7 @@ export function restoreFocus( trigger: Element ): void { * @param value * @return A ref to assign to the target element. */ -function useUpdatedRef< T >( value: T ): MutableRefObject< T > { +function useUpdatedRef< T >( value: T ): RefObject< T > { const ref = useRef< T >( value ); useLayoutEffect( () => { ref.current = value; diff --git a/packages/dataviews/src/hooks/use-infinite-scroll.ts b/packages/dataviews/src/hooks/use-infinite-scroll.ts index 17b56f60f36881..4712b109e54590 100644 --- a/packages/dataviews/src/hooks/use-infinite-scroll.ts +++ b/packages/dataviews/src/hooks/use-infinite-scroll.ts @@ -18,7 +18,7 @@ import type { View } from '../types'; */ function captureAnchorElement( container: HTMLElement, - anchorElementRef: React.MutableRefObject< { + anchorElementRef: React.RefObject< { posinset: number; viewportOffset: number; scrollTop: number; @@ -69,7 +69,7 @@ type UseInfiniteScrollProps = { totalItems: number; totalPages: number; }; - containerRef: React.MutableRefObject< HTMLDivElement | null >; + containerRef: React.RefObject< HTMLDivElement | null >; setVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >; }; diff --git a/packages/editor/src/components/collab-sidebar/rich-text-control/format-edit.tsx b/packages/editor/src/components/collab-sidebar/rich-text-control/format-edit.tsx index 9c21dbf324e5b5..ff9f8d04cfe99a 100644 --- a/packages/editor/src/components/collab-sidebar/rich-text-control/format-edit.tsx +++ b/packages/editor/src/components/collab-sidebar/rich-text-control/format-edit.tsx @@ -1,4 +1,4 @@ -import type { ComponentType, MutableRefObject } from 'react'; +import type { ComponentType, RefObject } from 'react'; import { getActiveFormat, getActiveObject } from '@wordpress/rich-text'; import type { RichTextValue } from '@wordpress/rich-text'; @@ -22,7 +22,7 @@ type EditProps = { onChange: ( value: RichTextValue ) => void; onFocus: () => void; value: RichTextValue; - forwardedRef: MutableRefObject< HTMLElement | undefined >; + forwardedRef: RefObject< HTMLElement | undefined >; isVisible: boolean; }; diff --git a/packages/editor/src/components/collaborators-overlay/index.tsx b/packages/editor/src/components/collaborators-overlay/index.tsx index ff7c0788ce62f3..7dbc25874ca473 100644 --- a/packages/editor/src/components/collaborators-overlay/index.tsx +++ b/packages/editor/src/components/collaborators-overlay/index.tsx @@ -30,7 +30,7 @@ export function CollaboratorsOverlay( { { ( { containerRef, }: { - containerRef: React.MutableRefObject< HTMLElement | null >; + containerRef: React.RefObject< HTMLElement | null >; } ) => ( | null; - childrenCacheRef: React.MutableRefObject< - Map< string, React.ReactElement > - >; + childrenCacheRef: React.RefObject< Map< string, React.ReactElement > >; }; type UseItemExitAnimationResult = { diff --git a/packages/media-editor/src/image-editor/react/components/cropper.tsx b/packages/media-editor/src/image-editor/react/components/cropper.tsx index eecd1ec038afc4..cd73d161321f68 100644 --- a/packages/media-editor/src/image-editor/react/components/cropper.tsx +++ b/packages/media-editor/src/image-editor/react/components/cropper.tsx @@ -967,23 +967,9 @@ function CropperInner( }; } - // Forward the root element to the consumer's ref. - const setContainerRef = useCallback( - ( element: HTMLDivElement | null ) => { - if ( typeof ref === 'function' ) { - ref( element ); - } else if ( ref ) { - ( - ref as React.MutableRefObject< HTMLDivElement | null > - ).current = element; - } - }, - [ ref ] - ); - return (
Date: Mon, 12 Oct 2026 13:51:49 +0200 Subject: [PATCH 2/2] Add changelog entries --- packages/compose/CHANGELOG.md | 4 ++++ packages/dataviews/CHANGELOG.md | 1 + packages/grid/CHANGELOG.md | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 6073f365c37116..310b5a9b9973e6 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -6,6 +6,10 @@ - Raise the minimum required Node.js version to `>=22.13.0`, for stable `require(esm)` support ([#84313](https://github.com/WordPress/gutenberg/pull/84313)). +### Internal + +- Use the `RefObject` React type instead of `MutableRefObject` which is deprecated in React 19 types ([#84550](https://github.com/WordPress/gutenberg/pull/84550)). + ## 8.10.0 (2026-10-07) ### Bug Fixes diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index bb22ee31e18a05..051b4ae159bac3 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -17,6 +17,7 @@ ### Internal - Update Ariakit to 0.4.41 ([#84539](https://github.com/WordPress/gutenberg/pull/84539)). +- Use the `RefObject` React type instead of `MutableRefObject` which is deprecated in React 19 types ([#84550](https://github.com/WordPress/gutenberg/pull/84550)). ## 20.0.0 (2026-10-07) diff --git a/packages/grid/CHANGELOG.md b/packages/grid/CHANGELOG.md index 50bb2ff6913c91..a460a6c7fca3de 100644 --- a/packages/grid/CHANGELOG.md +++ b/packages/grid/CHANGELOG.md @@ -6,6 +6,10 @@ - Raise the minimum required Node.js version to `>=22.13.0`, for stable `require(esm)` support ([#84313](https://github.com/WordPress/gutenberg/pull/84313)). +### Internal + +- Use the `RefObject` React type instead of `MutableRefObject` which is deprecated in React 19 types ([#84550](https://github.com/WordPress/gutenberg/pull/84550)). + ## 0.9.0 (2026-10-07) ### Breaking Changes