diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index ab5014ffaf7b9e..b0caeb46a3061a 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/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 = { blockEdit }; } - if ( renderCallback ) { - block = renderCallback( block ); - } - return ( diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 1b077577e19b68..48acece1a9fa66 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/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 - } /> ); 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 1e000487913bdc..5ca59b622f0ec7 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/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 ( ); } diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 027a3a354a2c10..668c6c5e89a07e 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/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 } ) => ); /** 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 b3d7c82f642580..433ad8c2b4ee77 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,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 } /> ); diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index 7f293844a86145..feb4cef07cffb0 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/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, diff --git a/packages/block-editor/src/components/use-block-drop-zone/test/index.js b/packages/block-editor/src/components/use-block-drop-zone/test/index.js index 7cc220e5ce9c38..c0aac7b5827d92 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/test/index.js +++ b/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'; diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js index edcfc6008a0c1c..886a1ad69b6138 100644 --- a/packages/blocks/src/api/serializer.js +++ b/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( { unwrappedContent } ) - ); - } - return unwrappedContent; + const blockType = getBlockType( blockName ); + const saveAttributes = getCommentAttributes( blockType, block.attributes ); + return getCommentDelimitedContent( blockName, saveAttributes, saveContent ); } /** diff --git a/packages/blocks/src/block-content-provider/index.js b/packages/blocks/src/block-content-provider/index.js index e1171ca345b526..60b6dd947f4d8f 100644 --- a/packages/blocks/src/block-content-provider/index.js +++ b/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 { html };