Switch to callback-based API.

Edit implementation: <InnerBlocks __experimentalItemCallback={ ( item ) => <div>{ item }</div> } /> Save implementation: <InnerBlocks.Content __experimentalItemCallback={ ( item ) => <div>{ item }</div> } />
WordPress · Aug 5, 2020 · b1c0e08 · b1c0e08
1 parent 87f98c3
commit b1c0e08
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 26 deletions.
diff --git 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 = <Wrapper>{ blockEdit }</Wrapper>;
+	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
@@ -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
+							}
 						/>
 					</AsyncModeProvider>
 				);

diff --git 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 (
 			<BlockListItem
@@ -280,7 +280,7 @@ export class BlockList extends Component {
 				onCaretVerticalPositionChange={
 					this.onCaretVerticalPositionChange
 				}
-				__experimentalWrapper={ __experimentalItemWrapper }
+				__experimentalCallback={ __experimentalItemCallback }
 			/>
 		);
 	}

diff --git 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 __experimentalItemWrapper={ __experimentalItemWrapper } />
+	( { BlockContent, __experimentalItemCallback } ) => (
+		<BlockContent
+			__experimentalItemCallback={ __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
@@ -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
@@ -27,7 +27,12 @@ function GroupEdit( { attributes, className, clientId } ) {
 						: () => <InnerBlocks.ButtonBlockAppender />
 				}
 				__experimentalTagName="div"
-				__experimentalItemWrapper="section"
+				__experimentalItemCallback={ ( item ) => (
+					<>
+						<section>{ item }</section>
+						<p>You can do cool/weird stuff like this now.</p>
+					</>
+				) }
 				__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
@@ -9,7 +9,14 @@ export default function save( { attributes } ) {
 	return (
 		<Tag>
 			<div className="wp-block-group__inner-container">
-				<InnerBlocks.Content __experimentalItemWrapper="section" />
+				<InnerBlocks.Content
+					__experimentalItemCallback={ ( item ) => (
+						<>
+							<section>{ item }</section>
+							<p>You can do cool/weird stuff like this now.</p>
+						</>
+					) }
+				/>
 			</div>
 		</Tag>
 	);

diff --git 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(
-			<Wrapper>
-				<RawHTML>{ unwrappedContent }</RawHTML>
-			</Wrapper>
+			wrapperCallback( <RawHTML>{ unwrappedContent }</RawHTML> )
 		);
 	}
 	return unwrappedContent;

diff --git 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