Inner blocks: edit/save symmetry + stabilise API (#26031)

packages/block-editor/README.md

@@ -680,6 +680,25 @@ _Returns_
 
 -   `Object`: Props to pass to the element to mark as a block.
 
+### useInnerBlocksProps
+
+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.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md>
+
+_Parameters_
+
+-   _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined.
+-   _options_ `Object`: Optional. Inner blocks options.
+
 ### useSetting
 
 Hook that retrieves the editor setting.

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

@@ -54,10 +54,7 @@ export {
 	ImageEditingProvider as __experimentalImageEditingProvider,
 } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
-export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,

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

@@ -18,10 +18,7 @@ export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
-export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,

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

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	getBlockType,
 	store as blocksStore,
-	withBlockContentContext,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
 
 /**
@@ -210,13 +210,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	};
 }
 
+useInnerBlocksProps.save = getInnerBlocksProps;
+
 // Expose default appender placeholders as components.
 ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-ForwardedInnerBlocks.Content = withBlockContentContext(
-	( { BlockContent } ) => <BlockContent />
-);
+ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

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

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
+} from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
 
 /**
@@ -189,9 +192,9 @@ const InnerBlocks = ( props ) => {
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => (
-	<BlockContent />
-) );
+useInnerBlocksProps.save = getInnerBlocksProps;
+
+InnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

packages/block-library/src/block/edit.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	InnerBlocks,

packages/block-library/src/buttons/edit.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	BlockControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	JustifyContentControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';

packages/block-library/src/buttons/save.js

@@ -6,21 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save( {
 	attributes: { contentJustification, orientation },
 } ) {
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				className: classnames( {
-					[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-					'is-vertical': orientation === 'vertical',
-				} ),
-			} ) }
-		>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save( {
+		className: classnames( {
+			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+			'is-vertical': orientation === 'vertical',
+		} ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <div { ...innerBlocksProps } />;
 }

packages/block-library/src/column/edit.js

@@ -13,7 +13,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	useSetting,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {

packages/block-library/src/column/save.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
@@ -32,14 +32,11 @@ export default function save( { attributes } ) {
 		style = { flexBasis };
 	}
 
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				className: wrapperClasses,
-				style,
-			} ) }
-		>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save( {
+		className: wrapperClasses,
+		style,
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
 }

packages/block-library/src/columns/edit.js

@@ -17,7 +17,7 @@ import {
 
 import {
 	InspectorControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,

packages/block-library/src/columns/save.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
@@ -16,9 +16,8 @@ export default function save( { attributes } ) {
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
-	return (
-		<div { ...useBlockProps.save( { className } ) }>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
 }

packages/block-library/src/comment-template/edit.js

@@ -8,7 +8,7 @@ import {
 	BlockContextProvider,
 	BlockPreview,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';

packages/block-library/src/comments-query-loop/edit.js

@@ -5,7 +5,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

packages/block-library/src/cover/edit.js

@@ -38,7 +38,7 @@ import {
 	ColorPalette,
 	useBlockProps,
 	useSetting,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,

packages/block-library/src/cover/save.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	InnerBlocks,
+	useInnerBlocksProps,
 	getColorClassName,
 	__experimentalGetGradientClass,
 	useBlockProps,
@@ -135,9 +135,11 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
-			<div className="wp-block-cover__inner-container">
-				<InnerBlocks.Content />
-			</div>
+			<div
+				{ ...useInnerBlocksProps.save( {
+					className: 'wp-block-cover__inner-container',
+				} ) }
+			/>
 		</div>
 	);
 }

packages/block-library/src/gallery/gallery.js

@@ -6,10 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';

packages/block-library/src/gallery/gallery.native.js

@@ -14,10 +14,7 @@ import styles from './gallery-styles.scss';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	BlockCaption,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-} from '@wordpress/block-editor';
+import { BlockCaption, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';

packages/block-library/src/gallery/save.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,10 +29,12 @@ export default function saveWithInnerBlocks( { attributes } ) {
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
 	} );
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
 	return (
-		<figure { ...useBlockProps.save( { className } ) }>
-			<InnerBlocks.Content />
+		<figure { ...innerBlocksProps }>
+			{ innerBlocksProps.children }
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"

packages/block-library/src/group/edit.js

@@ -6,7 +6,7 @@ import {
 	InnerBlocks,
 	useBlockProps,
 	InspectorControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';

packages/block-library/src/group/save.js

@@ -1,13 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { tagName: Tag } = attributes;
-	return (
-		<Tag { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</Tag>
-	);
+export default function save( { attributes: { tagName: Tag } } ) {
+	return <Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />;
 }

packages/block-library/src/media-text/edit.js

@@ -13,7 +13,7 @@ import { useState, useRef } from '@wordpress/element';
 import {
 	BlockControls,
 	BlockVerticalAlignmentControl,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	InspectorControls,
 	useBlockProps,
 	__experimentalImageURLInputUI as ImageURLInputUI,

packages/block-library/src/media-text/save.js

@@ -7,7 +7,7 @@ import { noop, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -95,9 +95,11 @@ export default function save( { attributes } ) {
 			>
 				{ ( mediaTypeRenders[ mediaType ] || noop )() }
 			</figure>
-			<div className="wp-block-media-text__content">
-				<InnerBlocks.Content />
-			</div>
+			<div
+				{ ...useInnerBlocksProps.save( {
+					className: 'wp-block-media-text__content',
+				} ) }
+			/>
 		</div>
 	);
 }

packages/block-library/src/navigation-submenu/edit.js

@@ -21,7 +21,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InnerBlocks,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	InspectorControls,
 	RichText,
 	__experimentalLinkControl as LinkControl,