@wordpress/block-editor 15.17.0 → 15.18.0

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -14,7 +14,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	FlexBlock,
 } from '@wordpress/components';
 
@@ -162,23 +162,23 @@ export function PatternCategoryPreviews( {
 					/>
 				</HStack>
 				{ ! currentCategoryPatterns.length && (
-					<Text
+					<WCText
 						variant="muted"
 						className="block-editor-inserter__patterns-category-no-results"
 					>
 						{ __( 'No results found' ) }
-					</Text>
+					</WCText>
 				) }
 			</VStack>
 			{ currentCategoryPatterns.length > 0 && (
 				<>
-					<Text
+					<WCText
 						size="12"
 						as="p"
 						className="block-editor-inserter__help-text"
 					>
 						{ __( 'Drag and drop patterns into the canvas.' ) }
-					</Text>
+					</WCText>
 					<BlockPatternsList
 						ref={ scrollContainerRef }
 						blockPatterns={ pagingProps.categoryPatterns }

package/src/components/inserter/menu.js

@@ -14,7 +14,8 @@ import {
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
+import { SearchControl, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -235,7 +236,7 @@ function InserterMenu(
 				</div>
 				{ showInserterHelpPanel && (
 					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
+						<VisuallyHidden render={ <h2 /> }>
 							{ __( 'A tip for using the block editor' ) }
 						</VisuallyHidden>
 						<Tips />

package/src/components/inserter/search-results.js

@@ -3,7 +3,7 @@
  */
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';

package/src/components/inserter/style.scss

@@ -85,7 +85,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__toggle.components-button {
 	display: inline-flex;
 	align-items: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	border: none;
 	outline: none;
 	padding: 0;
@@ -482,7 +482,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-list__list-item {
 	position: relative;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	margin-bottom: $grid-unit-30;
 
 	&.is-placeholder {

package/src/components/inserter-list-item/style.scss

@@ -42,7 +42,7 @@
 	padding: $grid-unit-10;
 	align-items: stretch;
 	justify-content: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: transparent;
 	word-break: break-word;
 	@media not ( prefers-reduced-motion ) {

package/src/components/inspector-popover-header/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalSpacer as Spacer,
 	Button,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 } from '@wordpress/components';
 import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -52,7 +52,7 @@ export default function InspectorPopoverHeader( {
 					/>
 				) }
 			</HStack>
-			{ help && <Text>{ help }</Text> }
+			{ help && <WCText>{ help }</WCText> }
 		</VStack>
 	);
 }

package/src/components/link-control/link-preview.js

@@ -36,7 +36,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { unlock } from '../../lock-unlock';
 import { ViewerSlot } from './viewer-slot';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 import useRichUrlData from './use-rich-url-data';
 
@@ -164,12 +164,12 @@ export default function LinkPreview( {
 									>
 										{ value.badges.map(
 											( badge, index ) => (
-												<Badge
+												<WCBadge
 													key={ `${ badge.label }|${ badge.intent }|${ index }` }
 													intent={ badge.intent }
 												>
 													{ badge.label }
-												</Badge>
+												</WCBadge>
 											)
 										) }
 									</HStack>

package/src/components/link-control/settings.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 const noop = () => {};
 
@@ -58,7 +59,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Currently selected link settings' ) }
 			</VisuallyHidden>
 			{ theSettings }

package/src/components/link-picker/link-picker.js

@@ -5,9 +5,9 @@ import {
 	BaseControl,
 	Button,
 	Popover,
-	VisuallyHidden,
 	useBaseControlProps,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useState, useId, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

package/src/components/link-picker/link-preview.js

@@ -16,7 +16,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
  */
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 /**
  * Link preview component that displays the current link information.
@@ -67,12 +67,12 @@ export function LinkPreview( { title, url, image, badges } ) {
 								alignment="left"
 							>
 								{ badges.map( ( badge ) => (
-									<Badge
+									<WCBadge
 										key={ `${ badge.label }|${ badge.intent }` }
 										intent={ badge.intent }
 									>
 										{ badge.label }
-									</Badge>
+									</WCBadge>
 								) ) }
 							</HStack>
 						) }

package/src/components/list-view/block-select-button.js

@@ -36,7 +36,7 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { getBlockVisibilityLabel } from '../block-visibility';
 
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -136,9 +136,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Badge className="block-editor-list-view-block-select-button__anchor">
+						<WCBadge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Badge>
+						</WCBadge>
 					</span>
 				) }
 				{ isSticky && (

package/src/components/list-view/index.js

@@ -11,10 +11,8 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import {
-	__experimentalTreeGrid as TreeGrid,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {

package/src/components/list-view/style.scss

@@ -469,7 +469,7 @@ $block-navigation-max-indent: 8;
 .block-editor-list-view__expander {
 	height: $icon-size;
 	width: $icon-size;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {

package/src/components/media-placeholder/content.scss

@@ -7,7 +7,7 @@
 	min-height: 0;
 
 	&:hover {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
 }

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/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/components/url-input/style.scss

@@ -61,7 +61,7 @@ $input-size: 300px;
 	color: $gray-700;
 	display: block;
 	font-size: $default-font-size;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: $white;
 	width: 100%;
 	border: none;

package/src/components/url-popover/image-url-input-ui.js

@@ -38,7 +38,7 @@ const LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_CUSTOM = 'custom';
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
+const NEW_TAB_REL = [ 'noopener' ];
 
 const ImageURLInputUI = ( {
 	linkDestination,

package/src/components/writing-flow/use-arrow-nav.js

@@ -115,9 +115,16 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		// If it's a block and there are nested focusable nodes, skip because
-		// there are better candidates.
+		// If it's a block wrapper (not itself a contenteditable editing surface)
+		// and there are nested focusable nodes, skip because there are better
+		// candidates. We must not skip contenteditable nodes that happen to
+		// contain links or other focusable inline elements, since those are the
+		// correct navigation targets.
+		//
+		// See https://github.com/WordPress/gutenberg/pull/77474
+		// TODO: Consider fixing focus.tabbable
 		if (
+			node.contentEditable !== 'true' &&
 			getBlockClientId( node ) &&
 			focus.focusable
 				.find( node )

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/block-fields/link/index.js

@@ -18,7 +18,7 @@ import { prependHTTP } from '@wordpress/url';
 import LinkControl from '../../../components/link-control';
 import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
 
-export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_REL = 'noopener';
 export const NEW_TAB_TARGET = '_blank';
 export const NOFOLLOW_REL = 'nofollow';
 

package/src/hooks/custom-css.js

@@ -1,17 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+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 { store as noticesStore } from '@wordpress/notices';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-
-/**
- * Internal dependencies
- */
 import InspectorControls from '../components/inspector-controls';
 import AdvancedPanel, {
 	validateCSS,
@@ -69,6 +63,8 @@ function CustomCSSControl( { blockName, setAttributes, style } ) {
 	);
 }
 
+const CUSTOM_CSS_WARNING_NOTICE_ID = 'custom-css-edit-warning';
+
 function CustomCSSEdit( { clientId, name, setAttributes } ) {
 	const { style, canEditCSS } = useSelect(
 		( select ) => {
@@ -113,6 +109,31 @@ function useBlockProps( { style } ) {
 		customCSS.trim().length > 0 &&
 		validateCSS( customCSS );
 
+	const canEditCSS = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().canEditCSS,
+		[]
+	);
+
+	const { createWarningNotice } = useDispatch( noticesStore );
+
+	// Show a warning notice when the user lacks edit_css and a block has
+	// custom CSS. The fixed notice ID ensures only one notice is shown
+	// regardless of how many blocks have CSS.
+	const hasCustomCSS = !! customCSS?.trim();
+	useEffect( () => {
+		if ( ! canEditCSS && hasCustomCSS ) {
+			createWarningNotice(
+				__(
+					'This post contains blocks with custom CSS. You do not have permission to edit CSS. If you save this post, the custom CSS will be removed.'
+				),
+				{
+					id: CUSTOM_CSS_WARNING_NOTICE_ID,
+					isDismissible: true,
+				}
+			);
+		}
+	}, [ canEditCSS, hasCustomCSS, createWarningNotice ] );
+
 	const customCSSIdentifier = useInstanceId(
 		CUSTOM_CSS_INSTANCE_REFERENCE,
 		'wp-custom-css'