@wordpress/block-library 10.1.0 → 10.2.0

package/src/file/transforms.js

@@ -11,6 +11,31 @@ import { getFilename } from '@wordpress/url';
 // Transforms bypass the default variation, so set the localized default here.
 const downloadButtonText = _x( 'Download', 'button label' );
 
+// The File → audio/video/image transforms are identical apart from the target
+// block, its media MIME type, and the src attribute name (image uses `url`).
+const toMediaTransform = ( blockName, mediaType, srcAttribute ) => ( {
+	type: 'block',
+	blocks: [ blockName ],
+	isMatch: ( { id } ) => {
+		if ( ! id ) {
+			return false;
+		}
+		const { getEntityRecord } = select( coreStore );
+		const media = getEntityRecord( 'postType', 'attachment', id, {
+			context: 'view',
+		} );
+		return !! media && media.mime_type.includes( mediaType );
+	},
+	transform: ( attributes ) => {
+		return createBlock( blockName, {
+			[ srcAttribute ]: attributes.href,
+			caption: attributes.fileName,
+			id: attributes.id,
+			anchor: attributes.anchor,
+		} );
+	},
+} );
+
 const transforms = {
 	from: [
 		{
@@ -78,66 +103,9 @@ const transforms = {
 		},
 	],
 	to: [
-		{
-			type: 'block',
-			blocks: [ 'core/audio' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'audio' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/audio', {
-					src: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/video' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'video' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/video', {
-					src: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/image' ],
-			isMatch: ( { id } ) => {
-				if ( ! id ) {
-					return false;
-				}
-				const { getEntityRecord } = select( coreStore );
-				const media = getEntityRecord( 'postType', 'attachment', id );
-				return !! media && media.mime_type.includes( 'image' );
-			},
-			transform: ( attributes ) => {
-				return createBlock( 'core/image', {
-					url: attributes.href,
-					caption: attributes.fileName,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
+		toMediaTransform( 'core/audio', 'audio', 'src' ),
+		toMediaTransform( 'core/video', 'video', 'src' ),
+		toMediaTransform( 'core/image', 'image', 'url' ),
 	],
 };
 

package/src/form/edit.js

@@ -108,7 +108,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Submissions method' ) }
 							options={ [
 								// TODO: Allow plugins to add their own submission methods.
@@ -173,7 +172,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Method' ) }
 						options={ [
 							{ label: 'Get', value: 'get' },

package/src/freeform/convert-to-blocks-button.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { rawHandler, serialize } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const ConvertToBlocksButton = ( { clientId } ) => {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const block = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<ToolbarButton
+			onClick={ () =>
+				replaceBlocks(
+					block.clientId,
+					rawHandler( { HTML: serialize( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to blocks' ) }
+		</ToolbarButton>
+	);
+};
+
+export default ConvertToBlocksButton;

package/src/freeform/edit.js

@@ -7,7 +7,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	Button,
 	Placeholder,
@@ -21,14 +21,13 @@ import { classic } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import MigrationNotice from './migration-notice';
+import ConvertToBlocksButton from './convert-to-blocks-button';
 import ModalEdit from './modal';
 
 export default function FreeformEdit( {
 	attributes,
 	setAttributes,
 	clientId,
-	onReplace,
 } ) {
 	const { content } = attributes;
 	const [ isOpen, setOpen ] = useState( false );
@@ -38,10 +37,16 @@ export default function FreeformEdit( {
 		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
 		[ clientId ]
 	);
-	const { removeBlock } = useDispatch( blockEditorStore );
 
 	return (
 		<>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -53,12 +58,6 @@ export default function FreeformEdit( {
 				</ToolbarGroup>
 			</BlockControls>
 			<div { ...useBlockProps() }>
-				{ canRemove && content && (
-					<MigrationNotice
-						content={ content }
-						onReplace={ onReplace }
-					/>
-				) }
 				{ content ? (
 					<RawHTML>{ content }</RawHTML>
 				) : (
@@ -66,21 +65,12 @@ export default function FreeformEdit( {
 						icon={ <BlockIcon icon={ classic } /> }
 						label={ __( 'Classic' ) }
 						instructions={ __(
-							'The Classic block is being phased out. It’s recommended to use other blocks for the best editing experience.'
+							'Use the classic editor to add content.'
 						) }
 					>
-						{ canRemove && (
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								onClick={ () => removeBlock( clientId ) }
-							>
-								{ __( 'Remove block' ) }
-							</Button>
-						) }
 						<Button
 							__next40pxDefaultSize
-							variant={ canRemove ? 'secondary' : 'primary' }
+							variant="primary"
 							onClick={ () => setOpen( true ) }
 						>
 							{ __( 'Edit contents' ) }

package/src/freeform/index.js

@@ -21,12 +21,4 @@ export const settings = {
 	save,
 };
 
-export const init = () => {
-	// Only expose the block in the inserter if the current post actually needs
-	// a classic block.
-	const supports = {
-		...metadata.supports,
-		inserter: !! window?.__needsClassicBlock,
-	};
-	return initBlock( { name, metadata, settings: { ...settings, supports } } );
-};
+export const init = () => initBlock( { name, metadata, settings } );

package/src/gallery/README.md

@@ -22,6 +22,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 |-----------|------|---------|-------------|
 | `images` | `array` | `[]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `.blocks-gallery-item` |
 | `ids` | `array` | `[]` | — |
+| `dynamicContent` | `object` | — | — |
 | `navigationButtonType` | `string` | `"icon"` | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `icon`, `text`, `both` |
 | `shortCodeTransforms` | `array` | `[]` | — |
 | `columns` | `number` | — | — |
@@ -46,7 +47,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
-  - `blockGap`: `["horizontal","vertical"]`
+  - `blockGap`: `{"sides":["horizontal","vertical"],"__experimentalDefault":"var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )"}`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
@@ -67,6 +68,8 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Uses context:**
 
 - `galleryId`
+- `postId`
+- `postType`
 
 **Provides context:**
 

package/src/gallery/block.json

@@ -4,7 +4,7 @@
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
-	"usesContext": [ "galleryId" ],
+	"usesContext": [ "galleryId", "postId", "postType" ],
 	"allowedBlocks": [ "core/image" ],
 	"description": "Display multiple images in a rich gallery.",
 	"keywords": [ "images", "photos" ],
@@ -61,6 +61,9 @@
 			},
 			"default": []
 		},
+		"dynamicContent": {
+			"type": "object"
+		},
 		"navigationButtonType": {
 			"type": "string",
 			"default": "icon",
@@ -139,8 +142,10 @@
 		"spacing": {
 			"margin": true,
 			"padding": true,
-			"blockGap": [ "horizontal", "vertical" ],
-			"__experimentalSkipSerialization": [ "blockGap" ],
+			"blockGap": {
+				"sides": [ "horizontal", "vertical" ],
+				"__experimentalDefault": "var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )"
+			},
 			"__experimentalDefaultControls": {
 				"blockGap": true,
 				"margin": false,

package/src/gallery/dynamic-gallery.js

@@ -0,0 +1,384 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	Notice,
+	PanelBody,
+	Placeholder,
+	SelectControl,
+	Spinner,
+	ToolbarButton,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import {
+	BlockContextProvider,
+	BlockControls,
+	useBlockEditingMode,
+	__experimentalUseBlockPreview as useBlockPreview,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { sharedIcon } from './shared-icon';
+import { Caption } from '../utils/caption';
+import { DEFAULT_ORDERBY, DEFAULT_ORDER, MAX_IMAGES } from './dynamic-source';
+
+/**
+ * Ordering options for a dynamic gallery source. Each value is a composite
+ * `"orderby/order"` string mapping to the matching `/wp/v2/media` collection
+ * params. `menu_order` is deliberately omitted — it isn't a valid REST `orderby`
+ * value, so the editor preview couldn't reproduce it (see `dynamic-source.js`).
+ */
+const ORDER_OPTIONS = [
+	{ label: __( 'Newest to oldest' ), value: 'date/desc' },
+	{ label: __( 'Oldest to newest' ), value: 'date/asc' },
+	{
+		/* translators: Label for ordering images by title in ascending order. */
+		label: __( 'A → Z' ),
+		value: 'title/asc',
+	},
+	{
+		/* translators: Label for ordering images by title in descending order. */
+		label: __( 'Z → A' ),
+		value: 'title/desc',
+	},
+];
+
+/**
+ * "Order by" control for a dynamic gallery, mirroring the Query Loop block's
+ * `OrderControl`: a single `SelectControl` whose value composites `orderby` and
+ * `order`, split apart again on change.
+ *
+ * @param {Object}   props
+ * @param {string}   props.orderby  Current `orderby` value.
+ * @param {string}   props.order    Current `order` value (`asc`/`desc`).
+ * @param {Function} props.onChange Called with `{ orderby, order }` on change.
+ */
+function OrderControl( { orderby, order, onChange } ) {
+	return (
+		<SelectControl
+			label={ __( 'Order by' ) }
+			value={ `${ orderby }/${ order }` }
+			options={ ORDER_OPTIONS }
+			onChange={ ( value ) => {
+				const [ newOrderby, newOrder ] = value.split( '/' );
+				onChange( { orderby: newOrderby, order: newOrder } );
+			} }
+		/>
+	);
+}
+
+/**
+ * The Gallery block's "Source" inspector panel.
+ *
+ * In dynamic mode it shows the resolved source, a control to convert back to
+ * individual images, and the source ordering. In static mode it offers the
+ * entry point into dynamic mode — and, since switching discards any hand-added
+ * images, owns the confirmation dialog for that one-way change. Rendered inside
+ * the block's `InspectorControls`, alongside the Settings panel.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.dynamic           The `useDynamicGallery` result.
+ * @param {Object}  props.dropdownMenuProps Shared ToolsPanel dropdown menu props.
+ * @param {boolean} props.hasImages         Whether the gallery has manually-added images.
+ */
+export function GallerySourcePanel( {
+	dynamic,
+	dropdownMenuProps,
+	hasImages,
+} ) {
+	const {
+		dynamicContent,
+		canUseDynamicSource,
+		sourceDescriptor,
+		sourceOrderby,
+		sourceOrder,
+		setSourceOrder,
+		convertToStatic,
+		enableDynamicMode,
+		resetSource,
+		isResolvingDynamic,
+		hasMoreImagesThanCap,
+		dynamicMediaTotal,
+	} = dynamic;
+	const isDynamic = !! dynamicContent;
+
+	const [ isConfirming, setIsConfirming ] = useState( false );
+
+	// Entering dynamic mode discards any hand-added images, so confirm first
+	// when there are images to lose; otherwise switch straight away.
+	function requestEnableDynamicMode() {
+		if ( hasImages ) {
+			setIsConfirming( true );
+		} else {
+			enableDynamicMode();
+		}
+	}
+
+	if ( isDynamic ) {
+		return (
+			<ToolsPanel
+				label={ __( 'Source' ) }
+				resetAll={ resetSource }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<div className="wp-block-gallery__source-settings">
+					<p className="wp-block-gallery__source-description">
+						{ sourceDescriptor?.description ??
+							__( 'Dynamic images.' ) }
+					</p>
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ convertToStatic }
+						// Guard the race where the media is still resolving:
+						// converting now would map over an incomplete (or empty)
+						// list and produce a gallery missing images.
+						disabled={ isResolvingDynamic }
+						accessibleWhenDisabled
+					>
+						{ __( 'Convert to individual images' ) }
+					</Button>
+				</div>
+				{ hasMoreImagesThanCap && (
+					<Notice
+						className="wp-block-gallery__source-notice"
+						status="warning"
+						isDismissible={ false }
+					>
+						{ sprintf(
+							/* translators: 1: number of images shown. 2: total number of matching images. */
+							__(
+								'Only the first %1$d of %2$d images will be displayed.'
+							),
+							MAX_IMAGES,
+							dynamicMediaTotal
+						) }
+					</Notice>
+				) }
+				<ToolsPanelItem
+					isShownByDefault
+					label={ __( 'Order by' ) }
+					hasValue={ () =>
+						sourceOrderby !== DEFAULT_ORDERBY ||
+						sourceOrder !== DEFAULT_ORDER
+					}
+					onDeselect={ () => setSourceOrder( undefined, undefined ) }
+				>
+					<OrderControl
+						orderby={ sourceOrderby }
+						order={ sourceOrder }
+						onChange={ ( { orderby, order } ) =>
+							setSourceOrder( orderby, order )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		);
+	}
+
+	// In static mode this panel is just an entry into dynamic mode, so hide it
+	// when there's no post type to preview against. This is intentionally
+	// stricter than the placeholder's entry button (see `edit.js`), which stays
+	// available anywhere because the source resolves at render time.
+	if ( ! canUseDynamicSource ) {
+		return null;
+	}
+
+	return (
+		<>
+			<PanelBody title={ __( 'Source' ) }>
+				<div className="wp-block-gallery__source-settings">
+					{ /*
+					 * Hardcoded on purpose: this single-source entry button (and
+					 * its confirm dialog below) is temporary. Once more sources
+					 * exist it becomes a "Choose source" select whose options read
+					 * from each source descriptor's `title`, with help text
+					 * carrying the per-source explanation this string does today.
+					 */ }
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ requestEnableDynamicMode }
+					>
+						{ __( 'Use images attached to the post' ) }
+					</Button>
+				</div>
+			</PanelBody>
+			{ isConfirming && (
+				<ConfirmDialog
+					isOpen
+					title={ __( 'Use images attached to the post?' ) }
+					__experimentalHideHeader={ false }
+					confirmButtonText={ __( 'Use attached images' ) }
+					onConfirm={ () => {
+						enableDynamicMode();
+						setIsConfirming( false );
+					} }
+					onCancel={ () => setIsConfirming( false ) }
+					size="medium"
+				>
+					{ __(
+						'The images in this gallery will be replaced, but will remain in the media library.'
+					) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+/**
+ * Renders the resolved image blocks as a read-only preview.
+ *
+ * `useBlockPreview` returns a `useDisabled` ref that makes its subtree inert, so
+ * previewed images (including any links) aren't interactive in the editor. The
+ * ref needs a real element, yet the images must stay flex children of the gallery
+ * `<figure>` and sit beside an editable caption. `display: contents` resolves
+ * this: the wrapper carries the ref but generates no box, so the image figures
+ * remain the figure's flex items and only they are disabled — the caption sibling
+ * stays editable. This relies on the gallery's image styles using descendant
+ * (not direct-child) selectors, which the box-less wrapper leaves intact.
+ *
+ * @param {Object}   props
+ * @param {Object[]} props.imageBlocks Non-persisted `core/image` blocks to preview.
+ */
+function GalleryImagesPreview( { imageBlocks } ) {
+	const { children, ref, className } = useBlockPreview( {
+		blocks: imageBlocks,
+	} );
+	return (
+		<div
+			ref={ ref }
+			className={ className }
+			style={ { display: 'contents' } }
+		>
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * Renders a dynamic-mode gallery on the canvas:
+ *
+ * - a block-toolbar control to convert back to individual images;
+ * - the gallery `<figure>` wrapper holding a non-editable preview of the
+ *   resolved media (or a placeholder while resolving / when nothing is found),
+ *   with the gallery's provided context so the previewed images inherit
+ *   gallery-wide settings;
+ * - an editable gallery-level caption, alongside the read-only preview;
+ * - the (empty) inner blocks kept mounted so the container's `allowedBlocks: []`
+ *   keeps syncing to block list settings (which blocks insertion and hides the
+ *   List View).
+ *
+ * @param {Object}   props
+ * @param {Object}   props.dynamic               The `useDynamicGallery` result.
+ * @param {Object}   props.blockProps            The gallery's `useBlockProps()` result.
+ * @param {Object}   props.innerBlocksProps      The gallery's `useInnerBlocksProps()` result.
+ * @param {Object}   props.attributes            The gallery block attributes.
+ * @param {Function} props.setAttributes         The block's `setAttributes`.
+ * @param {boolean}  props.isSelected            Whether the gallery block is selected.
+ * @param {Function} props.insertBlocksAfter     Inserts blocks after the gallery.
+ * @param {boolean}  props.isContentLocked       Whether the gallery is content-locked.
+ * @param {boolean}  props.multiGallerySelection Whether multiple galleries are selected.
+ */
+export function GalleryDynamicView( {
+	dynamic,
+	blockProps,
+	innerBlocksProps,
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	isContentLocked,
+	multiGallerySelection,
+} ) {
+	const {
+		sourceDescriptor,
+		dynamicImageBlocks,
+		galleryContext,
+		isResolvingDynamic,
+		convertToStatic,
+	} = dynamic;
+
+	// Converting to a static gallery materializes editable inner blocks, which
+	// is a structural change. Only offer it when the block is fully editable:
+	// under a content lock (e.g. inside a `contentOnly` group) the editing mode
+	// is `'contentOnly'`/`'disabled'`, where structural toolbar controls are
+	// hidden and the conversion shouldn't be possible.
+	const blockEditingMode = useBlockEditingMode();
+
+	// Empty-state copy for the preview. Framed as forward-looking ("… will appear
+	// here") rather than as an error, since the same empty result covers both a
+	// post with no matching images and a template with no post in context yet —
+	// in either case the source simply resolves to nothing right now. The per-
+	// source wording comes from the source descriptor.
+	const emptyInstructions = isResolvingDynamic
+		? __( 'Loading images…' )
+		: sourceDescriptor?.emptyMessage ??
+		  __( 'Dynamic images will appear here.' );
+
+	return (
+		<>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="other">
+					<ToolbarButton
+						onClick={ convertToStatic }
+						// Same guard as the inspector's "Convert to individual
+						// images": both call `convertToStatic`, which would map over
+						// a still-resolving (or empty) media list. (`ToolbarButton`
+						// stays focusable when disabled by default.)
+						disabled={ isResolvingDynamic }
+					>
+						{ __( 'Convert to images' ) }
+					</ToolbarButton>
+				</BlockControls>
+			) }
+			<figure { ...blockProps }>
+				{ dynamicImageBlocks.length ? (
+					<BlockContextProvider value={ galleryContext }>
+						<GalleryImagesPreview
+							imageBlocks={ dynamicImageBlocks }
+						/>
+					</BlockContextProvider>
+				) : (
+					<Placeholder
+						icon={ sharedIcon }
+						label={ __( 'Gallery' ) }
+						instructions={ emptyInstructions }
+					>
+						{ isResolvingDynamic && <Spinner /> }
+					</Placeholder>
+				) }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					showToolbarButton={
+						! multiGallerySelection && ! isContentLocked
+					}
+					className="blocks-gallery-caption"
+					label={ __( 'Gallery caption text' ) }
+					placeholder={ __( 'Add gallery caption' ) }
+				/>
+			</figure>
+			{ /*
+			 * Dynamic mode shows a preview instead of real inner blocks, but the
+			 * empty inner blocks are still rendered here for their side effect:
+			 * the `allowedBlocks: []` passed to `useInnerBlocksProps` only syncs
+			 * to block list settings while the inner blocks are mounted (via
+			 * `useNestedSettingsUpdate`). That setting is what blocks insertion
+			 * (`canInsertBlockType`) and hides the now-unusable List View
+			 * (`shouldRenderBlockListView`). With no inner blocks and no appender,
+			 * this renders no output of its own.
+			 */ }
+			{ innerBlocksProps.children }
+		</>
+	);
+}