npm - @wordpress/block-editor - Versions diffs - 14.6.0 → 14.7.1-next.082ed6819.0 - Mend

@wordpress/block-editor 14.6.0 → 14.7.1-next.082ed6819.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (332) hide show

package/src/components/iframe/index.js CHANGED Viewed

@@ -20,6 +20,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
+	useReducedMotion,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -121,6 +122,7 @@ function Iframe( {
 		};
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
+	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -130,6 +132,7 @@ function Iframe( {
 		useResizeObserver();
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
+	const prefersReducedMotion = useReducedMotion();
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -191,6 +194,22 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
+			// Prevent clicks on links from navigating away. Note that links
+			// inside `contenteditable` are already disabled by the browser, so
+			// this is for links in blocks outside of `contenteditable`.
+			iFrameDocument.addEventListener( 'click', ( event ) => {
+				if ( event.target.tagName === 'A' ) {
+					event.preventDefault();
+					// Appending a hash to the current URL will not reload the
+					// page. This is useful for e.g. footnotes.
+					const href = event.target.getAttribute( 'href' );
+					if ( href.startsWith( '#' ) ) {
+						iFrameDocument.defaultView.location.hash =
+							href.slice( 1 );
+					}
+				}
+			} );
 		}
 		node.addEventListener( 'load', onLoad );
@@ -252,6 +271,19 @@ function Iframe( {
 		containerWidth
 	);
+	const frameSizeValue = parseInt( frameSize );
+	const maxWidth = 750;
+	const scaleValue =
+		scale === 'auto-scaled'
+			? ( Math.min( containerWidth, maxWidth ) - frameSizeValue * 2 ) /
+			  scaleContainerWidth
+			: scale;
+	const prevScaleRef = useRef( scaleValue );
+	const prevFrameSizeRef = useRef( frameSizeValue );
+	const prevClientHeightRef = useRef( /* Initialized in the useEffect. */ );
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -272,6 +304,7 @@ function Iframe( {
 <html>
 	<head>
 		<meta charset="utf-8">
+		<base href="${ window.location.origin }">
 		<script>window.frameElement._load()</script>
 		<style>
 			html{
@@ -303,47 +336,176 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
-	const zoomOutAnimationClassnameRef = useRef( null );
-	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
-	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
-	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
-	// number of dependencies.
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if (
+			! iframeDocument ||
+			// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here
+			// instead of the dependency array to appease the linter.
+			( scaleValue === 1 ) === ( prevScaleRef.current === 1 )
+		) {
 			return;
 		}
-		const handleZoomOutAnimationClassname = () => {
-			clearTimeout( zoomOutAnimationClassnameRef.current );
+		// Unscaled height of the current iframe container.
+		const clientHeight = iframeDocument.documentElement.clientHeight;
+		// Scaled height of the current iframe content.
+		const scrollHeight = iframeDocument.documentElement.scrollHeight;
+		// Previous scale value.
+		const prevScale = prevScaleRef.current;
+		// Unscaled size of the previous padding around the iframe content.
+		const prevFrameSize = prevFrameSizeRef.current;
+		// Unscaled height of the previous iframe container.
+		const prevClientHeight = prevClientHeightRef.current ?? clientHeight;
+		// We can't trust the set value from contentHeight, as it was measured
+		// before the zoom out mode was changed. After zoom out mode is changed,
+		// appenders may appear or disappear, so we need to get the height from
+		// the iframe at this point when we're about to animate the zoom out.
+		// The iframe scrollTop, scrollHeight, and clientHeight will all be
+		// accurate. The client height also does change when the zoom out mode
+		// is toggled, as the bottom bar about selecting the template is
+		// added/removed when toggling zoom out mode.
+		const scrollTop = iframeDocument.documentElement.scrollTop;
+		// Step 0: Start with the current scrollTop.
+		let scrollTopNext = scrollTop;
+		// Step 1: Undo the effects of the previous scale and frame around the
+		// midpoint of the visible area.
+		scrollTopNext =
+			( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) /
+				prevScale -
+			prevClientHeight / 2;
+		// Step 2: Apply the new scale and frame around the midpoint of the
+		// visible area.
+		scrollTopNext =
+			( scrollTopNext + clientHeight / 2 ) * scaleValue +
+			frameSizeValue -
+			clientHeight / 2;
+		// Step 3: Handle an edge case so that you scroll to the top of the
+		// iframe if the top of the iframe content is visible in the container.
+		// The same edge case for the bottom is skipped because changing content
+		// makes calculating it impossible.
+		scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
+		// This is the scrollTop value if you are scrolled to the bottom of the
+		// iframe. We can't just let the browser handle it because we need to
+		// animate the scaling.
+		const maxScrollTop =
+			scrollHeight * ( scaleValue / prevScale ) +
+			frameSizeValue * 2 -
+			clientHeight;
+		// Step 4: Clamp the scrollTopNext between the minimum and maximum
+		// possible scrollTop positions. Round the value to avoid subpixel
+		// truncation by the browser which sometimes causes a 1px error.
+		scrollTopNext = Math.round(
+			Math.min(
+				Math.max( 0, scrollTopNext ),
+				Math.max( 0, maxScrollTop )
+			)
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top',
+			`${ scrollTop }px`
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top-next',
+			`${ scrollTopNext }px`
+		);
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
-			iframeDocument.documentElement.classList.add(
+		function onZoomOutTransitionEnd() {
+			// Remove the position fixed for the animation.
+			iframeDocument.documentElement.classList.remove(
 				'zoom-out-animation'
 			);
-			zoomOutAnimationClassnameRef.current = setTimeout( () => {
-				iframeDocument.documentElement.classList.remove(
-					'zoom-out-animation'
+			// Update previous values.
+			prevClientHeightRef.current = clientHeight;
+			prevFrameSizeRef.current = frameSizeValue;
+			prevScaleRef.current = scaleValue;
+			// Set the final scroll position that was just animated to.
+			// Disable reason: Eslint isn't smart enough to know that this is a
+			// DOM element. https://github.com/facebook/react/issues/31483
+			// eslint-disable-next-line react-compiler/react-compiler
+			iframeDocument.documentElement.scrollTop = scrollTopNext;
+		}
+		let raf;
+		if ( prefersReducedMotion ) {
+			// Hack: Wait for the window values to recalculate.
+			raf = iframeDocument.defaultView.requestAnimationFrame(
+				onZoomOutTransitionEnd
+			);
+		} else {
+			iframeDocument.documentElement.addEventListener(
+				'transitionend',
+				onZoomOutTransitionEnd,
+				{ once: true }
+			);
+		}
+		return () => {
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top'
+			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scroll-top-next'
+			);
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+			if ( prefersReducedMotion ) {
+				iframeDocument.defaultView.cancelAnimationFrame( raf );
+			} else {
+				iframeDocument.documentElement.removeEventListener(
+					'transitionend',
+					onZoomOutTransitionEnd
 				);
-			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+			}
 		};
+	}, [ iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion ] );
-		handleZoomOutAnimationClassname();
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
+	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
+	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
+	// number of dependencies.
+	useEffect( () => {
+		if ( ! iframeDocument ) {
+			return;
+		}
-		return () => {
-			handleZoomOutAnimationClassname();
+		if ( isZoomedOut ) {
+			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		} else {
+			// HACK: Since we can't remove this in the cleanup, we need to do it here.
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		}
+		return () => {
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
 	}, [ iframeDocument, isZoomedOut ] );
 	// Calculate the scaling and CSS variables for the zoom out canvas
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if ( ! iframeDocument ) {
 			return;
 		}
-		const maxWidth = 750;
 		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
 		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
 		// when the canvas area becomes larger due to sidebars closing. This is a known but
@@ -354,11 +516,7 @@ function Iframe( {
 		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'auto-scaled'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
-						scaleContainerWidth
-				: scale
+			scaleValue
 		);
 		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
@@ -384,27 +542,29 @@ function Iframe( {
 		);
 		return () => {
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-content-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-container-width'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale-container-width'
-			);
+			// HACK: Skipping cleanup because it causes issues with the zoom out
+			// animation. More refactoring is needed to fix this properly.
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-scale'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-frame-size'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-content-height'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-inner-height'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-container-width'
+			// );
+			// iframeDocument.documentElement.style.removeProperty(
+			// 	'--wp-block-editor-iframe-zoom-out-scale-container-width'
+			// );
 		};
 	}, [
-		scale,
+		scaleValue,
 		frameSize,
 		iframeDocument,
 		iframeWindowInnerHeight,

package/src/components/inserter/block-patterns-explorer/pattern-list.js CHANGED Viewed

@@ -85,10 +85,10 @@ function PatternList( {
 				return true;
 			}
 			if ( selectedCategory === 'uncategorized' ) {
-				const hasKnownCategory = pattern.categories.some(
-					( category ) =>
+				const hasKnownCategory =
+					pattern.categories?.some( ( category ) =>
 						registeredPatternCategories.includes( category )
-				);
+					) ?? false;
 				return ! pattern.categories?.length || ! hasKnownCategory;
 			}
@@ -151,9 +151,6 @@ function PatternList( {
 				{ hasItems && (
 					<>
 						<BlockPatternsList
-							shownPatterns={
-								pagingProps.categoryPatternsAsyncList
-							}
 							blockPatterns={ pagingProps.categoryPatterns }
 							onClickPattern={ onClickPattern }
 							isDraggable={ false }

package/src/components/inserter/block-patterns-tab/index.js CHANGED Viewed

@@ -79,7 +79,6 @@ function BlockPatternsTab( {
 								onInsert={ onInsert }
 								rootClientId={ rootClientId }
 								category={ category }
-								showTitlesAsTooltip={ false }
 							/>
 						</div>
 					) }

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

@@ -17,7 +17,6 @@ import {
 	__experimentalText as Text,
 	FlexBlock,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
@@ -31,10 +30,9 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
-import { store as blockEditorStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
 const noop = () => {};
@@ -45,10 +43,6 @@ export function PatternCategoryPreviews( {
 	category,
 	showTitlesAsTooltip,
 } ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId,
@@ -86,6 +80,13 @@ export function PatternCategoryPreviews( {
 					return true;
 				}
+				if (
+					category.name === starterPatternsCategory.name &&
+					pattern.blockTypes?.includes( 'core/post-content' )
+				) {
+					return true;
+				}
 				if ( category.name === 'uncategorized' ) {
 					// The uncategorized category should show all the patterns without any category...
 					if ( ! pattern.categories ) {
@@ -171,18 +172,15 @@ export function PatternCategoryPreviews( {
 			</VStack>
 			{ currentCategoryPatterns.length > 0 && (
 				<>
-					{ isZoomOutMode && (
-						<Text
-							size="12"
-							as="p"
-							className="block-editor-inserter__help-text"
-						>
-							{ __( 'Drag and drop patterns into the canvas.' ) }
-						</Text>
-					) }
+					<Text
+						size="12"
+						as="p"
+						className="block-editor-inserter__help-text"
+					>
+						{ __( 'Drag and drop patterns into the canvas.' ) }
+					</Text>
 					<BlockPatternsList
 						ref={ scrollContainerRef }
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
 						blockPatterns={ pagingProps.categoryPatterns }
 						onClickPattern={ onClickPattern }
 						onHover={ onHover }

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js CHANGED Viewed

@@ -14,6 +14,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
+	starterPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
@@ -67,6 +68,13 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if (
+			filteredPatterns.some( ( pattern ) =>
+				pattern.blockTypes?.includes( 'core/post-content' )
+			)
+		) {
+			categories.unshift( starterPatternsCategory );
+		}
 		if (
 			filteredPatterns.some(
 				( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user

package/src/components/inserter/block-patterns-tab/utils.js CHANGED Viewed

@@ -25,6 +25,11 @@ export const myPatternsCategory = {
 	label: __( 'My patterns' ),
 };
+export const starterPatternsCategory = {
+	name: 'core/starter-content',
+	label: __( 'Starter content' ),
+};
 export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	const isUserPattern = pattern.name.startsWith( 'core/block' );
 	const isDirectoryPattern =

package/src/components/inserter/category-tabs/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -35,14 +35,13 @@ function CategoryTabs( {
 	const selectedTabId = selectedCategory ? selectedCategory.name : null;
 	const [ activeTabId, setActiveId ] = useState();
 	const firstTabId = categories?.[ 0 ]?.name;
-	useEffect( () => {
-		// If there is no active tab, make the first tab the active tab, so that
-		// when focus is moved to the tablist, the first tab will be focused
-		// despite not being selected
-		if ( selectedTabId === null && ! activeTabId && firstTabId ) {
-			setActiveId( firstTabId );
-		}
-	}, [ selectedTabId, activeTabId, firstTabId, setActiveId ] );
+	// If there is no active tab, make the first tab the active tab, so that
+	// when focus is moved to the tablist, the first tab will be focused
+	// despite not being selected
+	if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+		setActiveId( firstTabId );
+	}
 	return (
 		<Tabs

package/src/components/inserter/hooks/use-block-types-state.js CHANGED Viewed

@@ -94,7 +94,12 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 				destinationClientId
 			);
 		},
-		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
+		[
+			getClosestAllowedInsertionPoint,
+			rootClientId,
+			onInsert,
+			createErrorNotice,
+		]
 	);
 	return [ items, categories, collections, onSelectItem ];

package/src/components/inserter/hooks/use-patterns-paging.js CHANGED Viewed

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { useMemo, useState, useEffect } from '@wordpress/element';
-import { useAsyncList, usePrevious } from '@wordpress/compose';
+import { usePrevious } from '@wordpress/compose';
 import { getScrollContainer } from '@wordpress/dom';
 const PAGE_SIZE = 20;
-const INITIAL_INSERTER_RESULTS = 5;
 /**
  * Supplies values needed to page the patterns list client side.
@@ -42,9 +41,6 @@ export default function usePatternsPaging(
 			pageIndex * PAGE_SIZE + PAGE_SIZE
 		);
 	}, [ pageIndex, currentCategoryPatterns ] );
-	const categoryPatternsAsyncList = useAsyncList( categoryPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
 	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
 	const changePage = ( page ) => {
 		const scrollContainer = getScrollContainer(
@@ -68,7 +64,6 @@ export default function usePatternsPaging(
 	return {
 		totalItems,
 		categoryPatterns,
-		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,

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

@@ -159,11 +159,6 @@ function InserterSearchResults( {
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
-	const currentShownPatterns = useAsyncList(
-		currentShownBlockTypes.length === filteredBlockTypes.length
-			? filteredBlockPatterns
-			: EMPTY_ARRAY
-	);
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
@@ -190,7 +185,6 @@ function InserterSearchResults( {
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">
 				<BlockPatternsList
-					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onClickPattern }
 					onHover={ onHoverPattern }

package/src/components/inserter-draggable-blocks/index.js CHANGED Viewed

@@ -29,6 +29,15 @@ const InserterDraggableBlocks = ( {
 		blocks,
 	};
+	const blocksContainMedia =
+		blocks.filter(
+			( block ) =>
+				( block.name === 'core/image' ||
+					block.name === 'core/audio' ||
+					block.name === 'core/video' ) &&
+				( block.attributes.url || block.attributes.src )
+		).length > 0;
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -63,7 +72,7 @@ const InserterDraggableBlocks = ( {
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;
 				event.dataTransfer.setData(
-					'text/html',
+					blocksContainMedia ? 'default' : 'text/html',
 					serialize( parsedBlocks )
 				);
 			} }

package/src/components/inspector-controls/README.md CHANGED Viewed

@@ -116,6 +116,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -208,6 +209,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			<InspectorAdvancedControls>
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {

package/src/components/inspector-controls/slot.js CHANGED Viewed

@@ -34,14 +34,14 @@ export default function InspectorControlsSlot( {
 		);
 		group = __experimentalGroup;
 	}
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill?.name );
 	const motionContextValue = useContext( MotionContext );
 	const computedFillProps = useMemo(
 		() => ( {
-			...( fillProps ?? {} ),
+			...fillProps,
 			forwardedContext: [
 				...( fillProps?.forwardedContext ?? [] ),
 				[ MotionContext.Provider, { value: motionContextValue } ],
@@ -50,7 +50,7 @@ export default function InspectorControlsSlot( {
 		[ motionContextValue, fillProps ]
 	);
-	if ( ! Slot ) {
+	if ( ! slotFill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
@@ -59,6 +59,8 @@ export default function InspectorControlsSlot( {
 		return null;
 	}
+	const { Slot } = slotFill;
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>

package/src/components/inspector-controls-tabs/position-controls-panel.js CHANGED Viewed

@@ -53,9 +53,7 @@ const PositionControlsPanel = () => {
 };
 const PositionControls = () => {
-	const fills = useSlotFills(
-		InspectorControlsGroups.position.Slot.__unstableName
-	);
+	const fills = useSlotFills( InspectorControlsGroups.position.name );
 	const hasFills = Boolean( fills && fills.length );
 	if ( ! hasFills ) {