Revert "InnerBlocks: introduce prop to specify render callback for ea…

…ch block. (#24232)" (#25196)

This reverts commit 48c4fb9.

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

@@ -93,7 +93,6 @@ function BlockListBlock( {
 	toggleSelection,
 	index,
 	enableAnimation,
-	__experimentalRenderCallback: renderCallback,
 } ) {
 	// In addition to withSelect, we should favor using useSelect in this
 	// component going forward to avoid leaking new props to the public API
@@ -241,10 +240,6 @@ function BlockListBlock( {
 		block = <Block.div { ...wrapperProps }>{ blockEdit }</Block.div>;
 	}
 
-	if ( renderCallback ) {
-		block = renderCallback( block );
-	}
-
 	return (
 		<BlockListBlockContext.Provider value={ memoizedValue }>
 			<BlockCrashBoundary onError={ onBlockError }>

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

@@ -28,7 +28,6 @@ function BlockList(
 		className,
 		rootClientId,
 		renderAppender,
-		__experimentalItemCallback,
 		__experimentalTagName = 'div',
 		__experimentalAppenderTagName,
 		__experimentalPassedProps = {},
@@ -111,9 +110,6 @@ function BlockList(
 									isDropTarget &&
 									orientation === 'horizontal',
 							} ) }
-							__experimentalRenderCallback={
-								__experimentalItemCallback
-							}
 						/>
 					</AsyncModeProvider>
 				);

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

@@ -265,7 +265,6 @@ export class BlockList extends Component {
 			parentWidth,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
-			__experimentalItemCallback,
 		} = this.props;
 		return (
 			<BlockListItem
@@ -285,7 +284,6 @@ export class BlockList extends Component {
 				onCaretVerticalPositionChange={
 					this.onCaretVerticalPositionChange
 				}
-				__experimentalRenderCallback={ __experimentalItemCallback }
 			/>
 		);
 	}

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

@@ -40,7 +40,6 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
-		__experimentalItemCallback: itemCallback,
 		template,
 		templateLock,
 		forwardedRef,
@@ -94,7 +93,6 @@ function UncontrolledInnerBlocks( props ) {
 			{ ...props }
 			ref={ forwardedRef }
 			rootClientId={ clientId }
-			__experimentalItemCallback={ itemCallback }
 			className={ classes }
 		/>
 	);
@@ -159,11 +157,7 @@ ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
 ForwardedInnerBlocks.Content = withBlockContentContext(
-	( { BlockContent, __experimentalItemCallback } ) => (
-		<BlockContent
-			__experimentalItemCallback={ __experimentalItemCallback }
-		/>
-	)
+	( { BlockContent } ) => <BlockContent />
 );
 
 /**

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

@@ -49,7 +49,6 @@ function UncontrolledInnerBlocks( props ) {
 		marginHorizontal,
 		horizontalAlignment,
 		filterInnerBlocks,
-		__experimentalItemCallback,
 	} = props;
 
 	const block = useSelect(
@@ -83,7 +82,6 @@ function UncontrolledInnerBlocks( props ) {
 			onAddBlock={ onAddBlock }
 			onDeleteBlock={ onDeleteBlock }
 			filterInnerBlocks={ filterInnerBlocks }
-			__experimentalItemCallback={ __experimentalItemCallback }
 		/>
 	);
 

packages/block-editor/src/components/use-block-drop-zone/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,6 +39,11 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 	let candidateDistance;
 
 	elements.forEach( ( element, index ) => {
+		// Ensure the element is a block. It should have the `wp-block` class.
+		if ( ! element.classList.contains( 'wp-block' ) ) {
+			return;
+		}
+
 		const rect = element.getBoundingClientRect();
 		const [ distance, edge ] = getDistanceToNearestEdge(
 			position,
@@ -126,16 +126,7 @@ export default function useBlockDropZone( {
 
 	useEffect( () => {
 		if ( position ) {
-			// Get the root elements of blocks inside the element, ignoring
-			// InnerBlocks item wrappers and the children of the blocks.
-			const blockElements = difference(
-				Array.from( element.current.querySelectorAll( '.wp-block' ) ),
-				Array.from(
-					element.current.querySelectorAll(
-						':scope .wp-block .wp-block'
-					)
-				)
-			);
+			const blockElements = Array.from( element.current.children );
 
 			const targetIndex = getNearestBlockIndex(
 				blockElements,

packages/block-editor/src/components/use-block-drop-zone/test/index.js

@@ -83,6 +83,22 @@ describe( 'getNearestBlockIndex', () => {
 		expect( result ).toBeUndefined();
 	} );
 
+	it( 'returns `undefined` if the elements do not have the `wp-block` class', () => {
+		const nonBlockElements = [
+			{ classList: createMockClassList( 'some-other-class' ) },
+		];
+		const position = { x: 0, y: 0 };
+		const orientation = 'horizontal';
+
+		const result = getNearestBlockIndex(
+			nonBlockElements,
+			position,
+			orientation
+		);
+
+		expect( result ).toBeUndefined();
+	} );
+
 	describe( 'Vertical block lists', () => {
 		const orientation = 'vertical';
 

packages/blocks/src/api/serializer.js

@@ -6,12 +6,7 @@ import { isEmpty, reduce, isObject, castArray, startsWith } from 'lodash';
 /**
  * WordPress dependencies
  */
-import {
-	Component,
-	RawHTML,
-	cloneElement,
-	renderToString,
-} from '@wordpress/element';
+import { Component, cloneElement, renderToString } from '@wordpress/element';
 import { hasFilter, applyFilters } from '@wordpress/hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -26,16 +21,10 @@ import {
 import { normalizeBlockType } from './utils';
 import BlockContentProvider from '../block-content-provider';
 
-/** @typedef {import('@wordpress/element').WPElement} WPElement */
-
 /**
  * @typedef {Object} WPBlockSerializationOptions Serialization Options.
  *
- * @property {boolean}   isInnerBlocks
- * Whether we are serializing inner blocks.
- * @property {WPElement} [__experimentalRenderCallback]
- * Callback to define HTML surrounding block, outside of the comment
- * delimiters. Used by InnerBlocks API.
+ * @property {boolean} isInnerBlocks Whether we are serializing inner blocks.
  */
 
 /**
@@ -318,41 +307,20 @@ export function getCommentDelimitedContent(
  *
  * @return {string} Serialized block.
  */
-export function serializeBlock(
-	block,
-	{ isInnerBlocks = false, __experimentalRenderCallback: renderCallback } = {}
-) {
+export function serializeBlock( block, { isInnerBlocks = false } = {} ) {
 	const blockName = block.name;
 	const saveContent = getBlockContent( block );
 
-	// Serialized block content before wrapping it with an InnerBlocks item
-	// wrapper.
-	let unwrappedContent;
-
 	if (
 		blockName === getUnregisteredTypeHandlerName() ||
 		( ! isInnerBlocks && blockName === getFreeformContentHandlerName() )
 	) {
-		unwrappedContent = saveContent;
-	} else {
-		const blockType = getBlockType( blockName );
-		const saveAttributes = getCommentAttributes(
-			blockType,
-			block.attributes
-		);
-		unwrappedContent = getCommentDelimitedContent(
-			blockName,
-			saveAttributes,
-			saveContent
-		);
+		return saveContent;
 	}
 
-	if ( renderCallback ) {
-		return renderToString(
-			renderCallback( <RawHTML>{ unwrappedContent }</RawHTML> )
-		);
-	}
-	return unwrappedContent;
+	const blockType = getBlockType( blockName );
+	const saveAttributes = getCommentAttributes( blockType, block.attributes );
+	return getCommentDelimitedContent( blockName, saveAttributes, saveContent );
 }
 
 /**

packages/blocks/src/block-content-provider/index.js

@@ -33,12 +33,9 @@ const { Consumer, Provider } = createContext( () => {} );
  * @return {WPComponent} Element with BlockContent injected via context.
  */
 const BlockContentProvider = ( { children, innerBlocks } ) => {
-	const BlockContent = ( { __experimentalItemCallback } ) => {
+	const BlockContent = () => {
 		// Value is an array of blocks, so defer to block serializer
-		const html = serialize( innerBlocks, {
-			isInnerBlocks: true,
-			__experimentalRenderCallback: __experimentalItemCallback,
-		} );
+		const html = serialize( innerBlocks, { isInnerBlocks: true } );
 
 		// Use special-cased raw HTML tag to avoid default escaping
 		return <RawHTML>{ html }</RawHTML>;