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 ) => ( + <> +
{ 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 (
- + ( + <> +
{ item }
+

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