@wordpress/block-editor 15.18.1-next.v.202604201441.0 → 15.19.0

package/src/components/provider/index.js

@@ -8,6 +8,7 @@ import {
 	MediaUploadProvider,
 	store as uploadStore,
 	detectClientSideMediaSupport,
+	isHeicCanvasSupported,
 } from '@wordpress/upload-media';
 
 /**
@@ -38,6 +39,17 @@ let hasLoggedFallback = false;
  */
 let isClientSideMediaEnabledCache = null;
 
+/**
+ * Cached result of whether HEIC-only canvas processing should be enabled.
+ */
+let isHeicCanvasEnabledCache = null;
+
+/**
+ * HEIC MIME types that should be routed through the upload-media pipeline
+ * when in HEIC-only mode.
+ */
+const HEIC_MIME_TYPES = [ 'image/heic', 'image/heif' ];
+
 /**
  * Checks if client-side media processing should be enabled.
  *
@@ -85,6 +97,44 @@ function shouldEnableClientSideMediaProcessing() {
 	return true;
 }
 
+/**
+ * Checks if HEIC-only canvas processing should be enabled.
+ *
+ * Returns true when:
+ * 1. Full client-side processing is NOT available (otherwise it handles HEIC already)
+ * 2. The server has set the __heicUploadSupport flag
+ * 3. The browser supports createImageBitmap + OffscreenCanvas (e.g. Safari)
+ *
+ * @return {boolean} Whether HEIC-only canvas processing should be enabled.
+ */
+function shouldEnableHeicCanvasProcessing() {
+	if ( isHeicCanvasEnabledCache !== null ) {
+		return isHeicCanvasEnabledCache;
+	}
+
+	// If full client-side processing is enabled, it already handles HEIC.
+	if ( shouldEnableClientSideMediaProcessing() ) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	if ( ! window.__heicUploadSupport ) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	if (
+		typeof isHeicCanvasSupported !== 'function' ||
+		! isHeicCanvasSupported()
+	) {
+		isHeicCanvasEnabledCache = false;
+		return false;
+	}
+
+	isHeicCanvasEnabledCache = true;
+	return true;
+}
+
 /**
  * Upload a media file when the file upload button is activated
  * or when adding a file to the editor via drag & drop.
@@ -128,6 +178,92 @@ function mediaUpload(
 	} );
 }
 
+/**
+ * Upload interceptor for HEIC-only mode.
+ *
+ * Routes HEIC files through the upload-media pipeline for canvas-based
+ * conversion, while passing non-HEIC files to the original mediaUpload
+ * function for standard server-side processing.
+ *
+ * @param {WPDataRegistry} registry
+ * @param {Object}         settings          Block editor settings.
+ * @param {Object}         $3                Parameters object passed to the function.
+ * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param {Object}         $3.additionalData Additional data to include in the request.
+ * @param {Array<File>}    $3.filesList      List of files.
+ * @param {Function}       $3.onError        Function called when an error happens.
+ * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
+ * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
+ * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ */
+function heicMediaUpload(
+	registry,
+	settings,
+	{
+		allowedTypes,
+		additionalData = {},
+		filesList,
+		onError = noop,
+		onFileChange,
+		onSuccess,
+		onBatchSuccess,
+	}
+) {
+	const files = Array.from( filesList );
+	const heicFiles = files.filter( ( file ) =>
+		HEIC_MIME_TYPES.includes( file.type )
+	);
+	const otherFiles = files.filter(
+		( file ) => ! HEIC_MIME_TYPES.includes( file.type )
+	);
+
+	// When the batch contains both HEIC and non-HEIC files, coordinate
+	// onBatchSuccess so it fires only after *both* paths have completed.
+	const hasBothPaths =
+		heicFiles.length > 0 && otherFiles.length > 0 && settings?.mediaUpload;
+	let pathsRemaining = hasBothPaths ? 2 : 1;
+	const coordinatedBatchSuccess = hasBothPaths
+		? () => {
+				pathsRemaining--;
+				if ( pathsRemaining <= 0 ) {
+					onBatchSuccess?.();
+				}
+		  }
+		: onBatchSuccess;
+
+	// Route HEIC files through the upload-media pipeline.
+	if ( heicFiles.length > 0 ) {
+		void registry.dispatch( uploadStore ).addItems( {
+			files: heicFiles,
+			onChange: onFileChange,
+			onSuccess: ( attachments ) => {
+				settings?.[ mediaUploadOnSuccessKey ]?.( attachments );
+				onSuccess?.( attachments );
+			},
+			onBatchSuccess: coordinatedBatchSuccess,
+			onError: ( error ) =>
+				onError(
+					typeof error === 'string' ? error : error?.message ?? ''
+				),
+			additionalData,
+			allowedTypes,
+		} );
+	}
+
+	// Pass non-HEIC files to the original server-side upload function.
+	if ( otherFiles.length > 0 && settings?.mediaUpload ) {
+		settings.mediaUpload( {
+			allowedTypes,
+			additionalData,
+			filesList: otherFiles,
+			onError,
+			onFileChange,
+			onSuccess,
+			onBatchSuccess: coordinatedBatchSuccess,
+		} );
+	}
+}
+
 /**
  * Calls useBlockSync as a child of SelectionContext.Provider so that the
  * hook can read selection state from the context provided by this tree
@@ -152,6 +288,9 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const isClientSideMediaEnabled =
 			shouldEnableClientSideMediaProcessing();
+		const isHeicCanvasEnabled = shouldEnableHeicCanvasProcessing();
+		const useUploadMediaPipeline =
+			isClientSideMediaEnabled || isHeicCanvasEnabled;
 
 		// Nested providers (e.g. from useBlockPreview) inherit settings
 		// where mediaUpload has already been replaced with the
@@ -162,16 +301,17 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const settings = useMemo( () => {
 			if (
-				isClientSideMediaEnabled &&
+				useUploadMediaPipeline &&
 				_settings?.mediaUpload &&
 				! isMediaUploadIntercepted
 			) {
-				// Create a new object so that the original props.settings.mediaUpload is not modified.
-				const interceptor = mediaUpload.bind(
-					null,
-					registry,
-					_settings
-				);
+				// Choose the right interceptor:
+				// - Full mode: all uploads go through upload-media pipeline.
+				// - HEIC-only mode: only HEIC files go through, rest use legacy path.
+				const uploadFn = isClientSideMediaEnabled
+					? mediaUpload
+					: heicMediaUpload;
+				const interceptor = uploadFn.bind( null, registry, _settings );
 				interceptor.__isMediaUploadInterceptor = true;
 				return {
 					..._settings,
@@ -182,6 +322,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		}, [
 			_settings,
 			registry,
+			useUploadMediaPipeline,
 			isClientSideMediaEnabled,
 			isMediaUploadIntercepted,
 		] );
@@ -258,7 +399,7 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// overwrite the store's server-side function with the
 		// interceptor, causing uploads to loop instead of reaching
 		// the server.
-		if ( isClientSideMediaEnabled && ! isMediaUploadIntercepted ) {
+		if ( useUploadMediaPipeline && ! isMediaUploadIntercepted ) {
 			return (
 				<MediaUploadProvider
 					settings={ mediaUploadSettings }

package/src/components/responsive-block-control/label.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { _x, sprintf } from '@wordpress/i18n';
 
 export default function ResponsiveBlockControlLabel( {
@@ -27,7 +27,10 @@ export default function ResponsiveBlockControlLabel( {
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
-			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
+			<VisuallyHidden
+				id={ `rbc-desc-${ instanceId }` }
+				render={ <span /> }
+			>
 				{ accessibleLabel }
 			</VisuallyHidden>
 		</>

package/src/components/rich-text/event-listeners/index.js

@@ -36,7 +36,6 @@ const allEventListeners = [
 export function useEventListeners( props ) {
 	const propsRef = useRef( props );
 	useInsertionEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		propsRef.current = props;
 	} );
 	const refEffects = useMemo(

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -8,6 +8,7 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../../store';
 import { addActiveFormats } from '../utils';
 import { getPasteEventData } from '../../../utils/pasting';
 
@@ -25,6 +26,7 @@ export default ( props ) => ( element ) => {
 			__unstableEmbedURLOnPaste,
 			preserveWhiteSpace,
 			pastePlainText,
+			registry,
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
@@ -116,11 +118,23 @@ export default ( props ) => ( element ) => {
 
 		if ( typeof content === 'string' ) {
 			pasteInline( content );
-		} else if ( content.length > 0 ) {
-			if ( onReplace && isEmpty( value ) ) {
-				onReplace( content, content.length - 1, -1 );
-			}
+			return;
+		}
+
+		if ( ! content.length || ! onReplace || ! isEmpty( value ) ) {
+			return;
 		}
+
+		// Record an intermediate paragraph-with-URL state so a single undo
+		// after the URL → block transformation restores the pasted link.
+		if ( mode === 'BLOCKS' ) {
+			pasteInline( html );
+			registry
+				.dispatch( blockEditorStore )
+				.__unstableMarkLastChangeAsPersistent();
+		}
+
+		onReplace( content, content.length - 1, -1 );
 	}
 
 	const { defaultView } = element.ownerDocument;

package/src/hooks/block-bindings.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -103,13 +103,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					Use a div element to make the ToolsPanelHiddenInnerWrapper
 					toggle the visibility of this help text automatically.
 				*/ }
-				<Text as="div" variant="muted">
+				<WCText as="div" variant="muted">
 					<p>
 						{ __(
 							'Attributes connected to custom fields or other dynamic data.'
 						) }
 					</p>
-				</Text>
+				</WCText>
 			</ToolsPanel>
 		</InspectorControls>
 	);

package/src/hooks/custom-css.js

@@ -1,18 +1,11 @@
-/**
- * WordPress dependencies
- */
 import { useEffect, useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
-import { useBlockEditingMode } from '../components/block-editing-mode';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
+import { useBlockEditingMode } from '../components/block-editing-mode';
 import InspectorControls from '../components/inspector-controls';
 import AdvancedPanel, {
 	validateCSS,

package/src/layouts/flex.js

@@ -23,7 +23,8 @@ import {
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import {
 	BlockControls,
 	JustifyContentControl,
@@ -147,15 +148,12 @@ export default {
 		// falling back to '0.5em' for backwards compatibility.
 		let fallbackGapValue = '0.5em';
 		if ( globalBlockGapValue ) {
-			// Process the global gap value to handle preset values
-			const processedGlobalGap = getGapCSSValue(
-				globalBlockGapValue,
-				'0.5em'
-			);
-			// Use the column gap value (second value if two values exist)
-			const gapParts = processedGlobalGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'0.5em';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,

package/src/layouts/grid.js

@@ -21,7 +21,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
@@ -143,10 +144,12 @@ export default {
 		// If the gap value has both top and left (separated by space), use the left value for horizontal calculations.
 		let fallbackGapValue = '1.2rem';
 		if ( globalBlockGapValue ) {
-			const processedGap = getGapCSSValue( globalBlockGapValue, '0.5em' );
-			const gapParts = processedGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'1.2rem';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,

package/src/private-apis.js

@@ -50,6 +50,7 @@ import {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	openMediaEditorModalKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -59,8 +60,8 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
-import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
-import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+import NoteIconSlotFill from './components/collab/note-icon-slot';
+import NoteIconToolbarSlotFill from './components/collab/note-icon-toolbar-slot';
 import HTMLElementControl from './components/html-element-control';
 import {
 	useBlockElementRef,
@@ -124,8 +125,8 @@ lock( privateApis, {
 	BlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	sectionRootClientIdKey,
-	CommentIconSlotFill,
-	CommentIconToolbarSlotFill,
+	NoteIconSlotFill,
+	NoteIconToolbarSlotFill,
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
@@ -133,6 +134,7 @@ lock( privateApis, {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	openMediaEditorModalKey,
 	useBlockElement,
 	useBlockElementRef,
 	LinkPicker,

package/src/store/actions.js

@@ -88,6 +88,12 @@ export const validateBlocksToTemplate =
 /**
  * A block selection object.
  *
+ * This type is duplicated to avoid creating circular dependencies.
+ *
+ * @see {import("@wordpress/block-editor/src/store/selectors").WPBlockSelection}
+ * @see {import("@wordpress/core-data/src/types").WPBlockSelection}
+ * @see {import("@wordpress/editor/src/store/selectors").WPBlockSelection}
+ *
  * @typedef {Object} WPBlockSelection
  *
  * @property {string} clientId     A block client ID.
@@ -1770,9 +1776,9 @@ export const insertBeforeBlock =
 		const rootClientId = select.getBlockRootClientId( clientId );
 
 		const blockIndex = select.getBlockIndex( clientId );
-		const directInsertBlock = rootClientId
-			? select.getDirectInsertBlock( rootClientId )
-			: null;
+		const { defaultBlock: directInsertBlock } = rootClientId
+			? select.getBlockListSettings( rootClientId ) ?? {}
+			: {};
 
 		if ( ! directInsertBlock ) {
 			return dispatch.insertDefaultBlock( {}, rootClientId, blockIndex );
@@ -1809,9 +1815,9 @@ export const insertAfterBlock =
 		const rootClientId = select.getBlockRootClientId( clientId );
 
 		const blockIndex = select.getBlockIndex( clientId );
-		const directInsertBlock = rootClientId
-			? select.getDirectInsertBlock( rootClientId )
-			: null;
+		const { defaultBlock: directInsertBlock } = rootClientId
+			? select.getBlockListSettings( rootClientId ) ?? {}
+			: {};
 
 		if ( ! directInsertBlock ) {
 			return dispatch.insertDefaultBlock(

package/src/store/private-keys.js

@@ -12,3 +12,4 @@ export const isNavigationOverlayContextKey = Symbol(
 );
 export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );
+export const openMediaEditorModalKey = Symbol( 'openMediaEditorModal' );

package/src/store/reducer.js

@@ -292,7 +292,6 @@ const withBlockTree =
 					false
 				);
 				break;
-			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				newState.tree = new Map( newState.tree );
 				action.clientIds.forEach( ( clientId ) => {
@@ -421,63 +420,37 @@ const withBlockTree =
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
 	let markNextChangeAsNotPersistent = false;
-	let explicitPersistent;
 
 	return ( state, action ) => {
-		let nextState = reducer( state, action );
-
-		let nextIsPersistentChange;
-		if ( action.type === 'SET_EXPLICIT_PERSISTENT' ) {
-			explicitPersistent = action.isPersistentChange;
-			nextIsPersistentChange = state.isPersistentChange ?? true;
-		}
+		const nextState = reducer( state, action );
 
-		if ( explicitPersistent !== undefined ) {
-			nextIsPersistentChange = explicitPersistent;
-			return nextIsPersistentChange === nextState.isPersistentChange
-				? nextState
-				: {
-						...nextState,
-						isPersistentChange: nextIsPersistentChange,
-				  };
-		}
+		const wasMarkedAsNotPersistent = markNextChangeAsNotPersistent;
+		markNextChangeAsNotPersistent =
+			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
 
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
-			markNextChangeAsNotPersistent;
+			wasMarkedAsNotPersistent;
 
 		// Defer to previous state value (or default) unless changing or
 		// explicitly marking as persistent.
 		if ( state === nextState && ! isExplicitPersistentChange ) {
-			markNextChangeAsNotPersistent =
-				action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
-
-			nextIsPersistentChange = state?.isPersistentChange ?? true;
-			if ( state.isPersistentChange === nextIsPersistentChange ) {
+			if ( state.isPersistentChange !== undefined ) {
 				return state;
 			}
-
-			return {
-				...nextState,
-				isPersistentChange: nextIsPersistentChange,
-			};
+			return { ...nextState, isPersistentChange: true };
 		}
 
-		nextState = {
-			...nextState,
-			isPersistentChange: isExplicitPersistentChange
-				? ! markNextChangeAsNotPersistent
-				: ! isUpdatingSameBlockAttribute( action, lastAction ),
-		};
+		const isPersistentChange = isExplicitPersistentChange
+			? ! wasMarkedAsNotPersistent
+			: ! isUpdatingSameBlockAttribute( action, lastAction );
 
 		// In comparing against the previous action, consider only those which
 		// would have qualified as one which would have been ignored or not
 		// have resulted in a changed state.
 		lastAction = action;
-		markNextChangeAsNotPersistent =
-			action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
 
-		return nextState;
+		return { ...nextState, isPersistentChange };
 	};
 }
 
@@ -897,7 +870,6 @@ export const blocks = pipe(
 				return newState;
 			}
 
-			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				// Avoid a state change if none of the block IDs are known.
 				if ( action.clientIds.every( ( id ) => ! state.get( id ) ) ) {

package/src/store/selectors.js

@@ -51,6 +51,12 @@ const { isContentBlock } = unlock( blocksPrivateApis );
 /**
  * A block selection object.
  *
+ * This type is duplicated to avoid creating circular dependencies.
+ *
+ * @see {import("@wordpress/block-editor/src/store/actions").WPBlockSelection}
+ * @see {import("@wordpress/core-data/src/types").WPBlockSelection}
+ * @see {import("@wordpress/editor/src/store/selectors").WPBlockSelection}
+ *
  * @typedef {Object} WPBlockSelection
  *
  * @property {string} clientId     A block client ID.

package/src/store/test/reducer.js

@@ -2196,6 +2196,45 @@ describe( 'state', () => {
 					expect( state.isPersistentChange ).toBe( true );
 				} );
 
+				it( 'should flag only the next change as not persistent', () => {
+					let original = deepFreeze(
+						blocks( undefined, {
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									clientId: 'kumquat',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						} )
+					);
+					original = blocks( original, {
+						type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT',
+					} );
+
+					const nextState = blocks( original, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+						attributes: {
+							updated: true,
+						},
+					} );
+
+					expect( nextState.isPersistentChange ).toBe( false );
+
+					// A subsequent change should revert to persistent.
+					const subsequentState = blocks( nextState, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+						attributes: {
+							other: true,
+						},
+					} );
+
+					expect( subsequentState.isPersistentChange ).toBe( true );
+				} );
+
 				it( 'should retain reference for same state, same persistence', () => {
 					const original = deepFreeze(
 						blocks( undefined, {

package/src/utils/dom.js

@@ -80,14 +80,14 @@ export function rectUnion( rect1, rect2 ) {
  * @param {Element} element Element.
  * @return {boolean} Whether the element is visible.
  */
-function isElementVisible( element ) {
+export function isElementVisible( element ) {
 	const viewport = element.ownerDocument.defaultView;
 	if ( ! viewport ) {
 		return false;
 	}
 
-	// Check for <VisuallyHidden> component.
-	if ( element.classList.contains( 'components-visually-hidden' ) ) {
+	// Check for <VisuallyHidden> components.
+	if ( element.hasAttribute( 'data-visually-hidden' ) ) {
 		return false;
 	}