diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 1c4dc4c1df5bff..da0c31db88e5eb 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -93,7 +93,7 @@ function BlockListBlock( {
toggleSelection,
index,
enableAnimation,
- __experimentalWrapper: Wrapper,
+ __experimentalCallback: wrapperCallback,
} ) {
// In addition to withSelect, we should favor using useSelect in this
// component going forward to avoid leaking new props to the public API
@@ -198,8 +198,8 @@ function BlockListBlock( {
);
}
- if ( Wrapper ) {
- blockEdit = { blockEdit };
+ if ( wrapperCallback ) {
+ blockEdit = wrapperCallback( blockEdit );
}
const value = {
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 9e5e8f8457337e..ffc435ba365e8f 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -28,7 +28,7 @@ function BlockList(
className,
rootClientId,
renderAppender,
- __experimentalItemWrapper,
+ __experimentalItemCallback,
__experimentalTagName = 'div',
__experimentalAppenderTagName,
__experimentalPassedProps = {},
@@ -111,7 +111,9 @@ function BlockList(
isDropTarget &&
orientation === 'horizontal',
} ) }
- __experimentalWrapper={ __experimentalItemWrapper }
+ __experimentalCallback={
+ __experimentalItemCallback
+ }
/>
);
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 162089e36f43e3..38586d617bbee0 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -260,7 +260,7 @@ export class BlockList extends Component {
parentWidth,
marginVertical = styles.defaultBlock.marginTop,
marginHorizontal = styles.defaultBlock.marginLeft,
- __experimentalItemWrapper,
+ __experimentalItemCallback,
} = this.props;
return (
);
}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index efdbd0fe4c4937..027a3a354a2c10 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -40,7 +40,7 @@ function UncontrolledInnerBlocks( props ) {
const {
clientId,
allowedBlocks,
- __experimentalItemWrapper: itemWrapper,
+ __experimentalItemCallback: itemCallback,
template,
templateLock,
forwardedRef,
@@ -94,7 +94,7 @@ function UncontrolledInnerBlocks( props ) {
{ ...props }
ref={ forwardedRef }
rootClientId={ clientId }
- __experimentalItemWrapper={ itemWrapper }
+ __experimentalItemCallback={ itemCallback }
className={ classes }
/>
);
@@ -159,8 +159,10 @@ ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
ForwardedInnerBlocks.Content = withBlockContentContext(
- ( { BlockContent, __experimentalItemWrapper } ) => (
-
+ ( { BlockContent, __experimentalItemCallback } ) => (
+
)
);
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index a4b1f332367d8a..b3d7c82f642580 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -49,7 +49,7 @@ function UncontrolledInnerBlocks( props ) {
marginHorizontal,
horizontalAlignment,
filterInnerBlocks,
- __experimentalItemWrapper,
+ __experimentalItemCallback,
} = props;
const block = useSelect(
@@ -83,7 +83,7 @@ function UncontrolledInnerBlocks( props ) {
onAddBlock={ onAddBlock }
onDeleteBlock={ onDeleteBlock }
filterInnerBlocks={ filterInnerBlocks }
- __experimentalItemWrapper={ __experimentalItemWrapper }
+ __experimentalItemCallback={ __experimentalItemCallback }
/>
);
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index eb32cba025dc01..50f43268b3a9e9 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -27,7 +27,12 @@ function GroupEdit( { attributes, className, clientId } ) {
: () =>
}
__experimentalTagName="div"
- __experimentalItemWrapper="section"
+ __experimentalItemCallback={ ( item ) => (
+ <>
+
+
You can do cool/weird stuff like this now.
+ >
+ ) }
__experimentalPassedProps={ {
className: 'wp-block-group__inner-container',
} }
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
index 75470483201449..06dce74ffac557 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -9,7 +9,14 @@ export default function save( { attributes } ) {
return (
-
+
(
+ <>
+
+ You can do cool/weird stuff like this now.
+ >
+ ) }
+ />
);
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 5e691f648b2443..31d962fed5a7ea 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -31,10 +31,12 @@ import BlockContentProvider from '../block-content-provider';
/**
* @typedef {Object} WPBlockSerializationOptions Serialization Options.
*
- * @property {boolean} isInnerBlocks Whether we are serializing
- * inner blocks.
- * @property {WPElement} [__experimentalWrapper] Wrapper for block. (Outside of
- * comment delimiters.)
+ * @property {boolean} isInnerBlocks Whether we are serializing
+ * inner blocks.
+ * @property {WPElement} [__experimentalCallback] Callback to define HTML
+ * surrounding block, outside of
+ * the comment delimiters. Used
+ * by InnerBlocks API.
*/
/**
@@ -319,7 +321,7 @@ export function getCommentDelimitedContent(
*/
export function serializeBlock(
block,
- { isInnerBlocks = false, __experimentalWrapper: Wrapper } = {}
+ { isInnerBlocks = false, __experimentalCallback: wrapperCallback } = {}
) {
const blockName = block.name;
const saveContent = getBlockContent( block );
@@ -346,11 +348,9 @@ export function serializeBlock(
);
}
- if ( Wrapper ) {
+ if ( wrapperCallback ) {
return renderToString(
-
- { unwrappedContent }
-
+ wrapperCallback( { unwrappedContent } )
);
}
return unwrappedContent;
diff --git a/packages/blocks/src/block-content-provider/index.js b/packages/blocks/src/block-content-provider/index.js
index c8e1952743d6a4..450c3edf314d48 100644
--- a/packages/blocks/src/block-content-provider/index.js
+++ b/packages/blocks/src/block-content-provider/index.js
@@ -33,11 +33,11 @@ const { Consumer, Provider } = createContext( () => {} );
* @return {WPComponent} Element with BlockContent injected via context.
*/
const BlockContentProvider = ( { children, innerBlocks } ) => {
- const BlockContent = ( { __experimentalItemWrapper } ) => {
+ const BlockContent = ( { __experimentalItemCallback } ) => {
// Value is an array of blocks, so defer to block serializer
const html = serialize( innerBlocks, {
isInnerBlocks: true,
- __experimentalWrapper: __experimentalItemWrapper,
+ __experimentalCallback: __experimentalItemCallback,
} );
// Use special-cased raw HTML tag to avoid default escaping