useInnerBlocksProps: Make dropZoneElement private

packages/block-editor/src/components/block-list/index.js

@@ -28,7 +28,7 @@ import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { LayoutProvider, defaultLayout } from './layout';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
-import { useInnerBlocksProps } from '../inner-blocks';
+import { usePrivateInnerBlocksProps } from '../inner-blocks';
 import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
@@ -91,7 +91,7 @@ function Root( { className, ...settings } ) {
 			delayedBlockVisibilityUpdates();
 		} );
 	}, [] );
-	const innerBlocksProps = useInnerBlocksProps(
+	const innerBlocksProps = usePrivateInnerBlocksProps(
 		{
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
@@ -113,14 +113,24 @@ function Root( { className, ...settings } ) {
 	);
 }
 
-export default function BlockList( settings ) {
+export function PrivateBlockList( settings ) {
 	return (
 		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
 			<Root { ...settings } />
 		</BlockEditContextProvider>
 	);
 }
 
+export default function BlockList( settings ) {
+	// Strip `dropZoneElement` as it is currently a private API.
+	const strippedSettings = { ...settings, dropZoneElement: undefined };
+	return (
+		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+			<Root { ...strippedSettings } />
+		</BlockEditContextProvider>
+	);
+}
+
 function Items( {
 	placeholder,
 	rootClientId,

packages/block-editor/src/components/inner-blocks/index.js

@@ -153,26 +153,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
 	);
 } );
 
-/**
- * This hook is used to lightly mark an element as an inner blocks wrapper
- * element. Call this hook and pass the returned props to the element to mark as
- * an inner blocks wrapper, automatically rendering inner blocks as children. If
- * you define a ref for the element, it is important to pass the ref to this
- * hook, which the hook in turn will pass to the component through the props it
- * returns. Optionally, you can also pass any other props through this hook, and
- * they will be merged and returned.
- *
- * @param {Object} props   Optional. Props to pass to the element. Must contain
- *                         the ref if one is defined.
- * @param {Object} options Optional. Inner blocks options.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
- */
-export function useInnerBlocksProps( props = {}, options = {} ) {
+export function usePrivateInnerBlocksProps( props = {}, options = {} ) {
 	const {
 		__unstableDisableLayoutClassNames,
 		__unstableDisableDropZone,
-		__unstableDropZoneElement,
+		dropZoneElement, // This prop is treated as private as it is overridden in `useInnerBlocksProps`.
 	} = options;
 	const {
 		clientId,
@@ -214,7 +199,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
-		dropZoneElement: __unstableDropZoneElement,
+		dropZoneElement,
 		rootClientId: clientId,
 	} );
 
@@ -252,6 +237,27 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	};
 }
 
+/**
+ * This hook is used to lightly mark an element as an inner blocks wrapper
+ * element. Call this hook and pass the returned props to the element to mark as
+ * an inner blocks wrapper, automatically rendering inner blocks as children. If
+ * you define a ref for the element, it is important to pass the ref to this
+ * hook, which the hook in turn will pass to the component through the props it
+ * returns. Optionally, you can also pass any other props through this hook, and
+ * they will be merged and returned.
+ *
+ * @param {Object} props   Optional. Props to pass to the element. Must contain
+ *                         the ref if one is defined.
+ * @param {Object} options Optional. Inner blocks options.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
+ */
+export function useInnerBlocksProps( props = {}, options = {} ) {
+	// Strip `dropZoneElement` as it is currently a private API.
+	const strippedOptions = { ...options, dropZoneElement: undefined };
+	return usePrivateInnerBlocksProps( props, strippedOptions );
+}
+
 useInnerBlocksProps.save = getInnerBlocksProps;
 
 // Expose default appender placeholders as components.

packages/block-editor/src/private-apis.js

@@ -15,6 +15,7 @@ import { useShouldContextualToolbarShow } from './utils/use-should-contextual-to
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
+import { PrivateBlockList } from './components/block-list';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
@@ -56,4 +57,5 @@ lock( privateApis, {
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,
+	PrivateBlockList,
 } );

packages/edit-post/src/components/visual-editor/index.js

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { PostTitle, store as editorStore } from '@wordpress/editor';
 import {
-	BlockList,
 	BlockTools,
 	store as blockEditorStore,
 	__unstableUseTypewriter as useTypewriter,
@@ -36,6 +35,7 @@ const {
 	useLayoutClasses,
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
+	PrivateBlockList: BlockList,
 } = unlock( blockEditorPrivateApis );
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
@@ -411,7 +411,7 @@ export default function VisualEditor( { styles } ) {
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								layout={ blockListLayout }
-								__unstableDropZoneElement={
+								dropZoneElement={
 									// When iframed, pass in the html element of the iframe to
 									// ensure the drop zone extends to the edges of the iframe.
 									isToBeIframed

packages/edit-site/src/components/block-editor/site-editor-canvas.js

@@ -8,9 +8,9 @@ import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import {
-	BlockList,
 	BlockTools,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
@@ -35,6 +35,8 @@ const LAYOUT = {
 	alignments: [],
 };
 
+const { PrivateBlockList: BlockList } = unlock( blockEditorPrivateApis );
+
 export default function SiteEditorCanvas() {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
@@ -134,7 +136,7 @@ export default function SiteEditorCanvas() {
 													isTemplateTypeNavigation,
 											}
 										) }
-										__unstableDropZoneElement={
+										dropZoneElement={
 											// Pass in the html element of the iframe to ensure that
 											// the drop zone extends to the very edges of the iframe,
 											// even if the template is shorter than the viewport.