Reusable blocks: prevent infinite recursion

packages/block-editor/src/components/warning/style.scss

@@ -14,7 +14,7 @@
 		line-height: $default-line-height;
 		font-family: $default-font;
 		font-size: $default-font-size;
-		color: $gray-900;
+		color: $gray-900 !important;
 		margin: 0;
 	}
 

packages/block-library/src/block/edit.js

@@ -29,8 +29,12 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 /**
  * Internal dependencies
  */
+import useNoRecursiveRenders from './use-no-recursive-renders';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
+	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
+		ref
+	);
 	const { isMissing, hasResolved } = useSelect(
 		( select ) => {
 			const persistedBlock = select( coreStore ).getEntityRecord(
@@ -83,6 +87,16 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	const blockProps = useBlockProps();
 
+	if ( hasAlreadyRendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Block cannot be rendered inside itself.' ) }
+				</Warning>
+			</div>
+		);
+	}
+
 	if ( isMissing ) {
 		return (
 			<div { ...blockProps }>
@@ -104,28 +118,30 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	}
 
 	return (
-		<div { ...blockProps }>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						onClick={ () => convertBlockToStatic( clientId ) }
-					>
-						{ __( 'Convert to regular blocks' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			</BlockControls>
-			<InspectorControls>
-				<PanelBody>
-					<TextControl
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-					/>
-				</PanelBody>
-			</InspectorControls>
-			<div className="block-library-block__reusable-block-container">
-				{ <div { ...innerBlocksProps } /> }
+		<RecursionProvider>
+			<div { ...blockProps }>
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => convertBlockToStatic( clientId ) }
+						>
+							{ __( 'Convert to regular blocks' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+				<InspectorControls>
+					<PanelBody>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+						/>
+					</PanelBody>
+				</InspectorControls>
+				<div className="block-library-block__reusable-block-container">
+					{ <div { ...innerBlocksProps } /> }
+				</div>
 			</div>
-		</div>
+		</RecursionProvider>
 	);
 }

packages/block-library/src/block/index.php

@@ -13,6 +13,8 @@
  * @return string Rendered HTML of the referenced block.
  */
 function render_block_core_block( $attributes ) {
+	static $seen_refs = array();
+
 	if ( empty( $attributes['ref'] ) ) {
 		return '';
 	}
@@ -22,6 +24,21 @@ function render_block_core_block( $attributes ) {
 		return '';
 	}
 
+	if ( in_array( $attributes['ref'], $seen_refs, true ) ) {
+		trigger_error(
+			sprintf(
+				// translators: %s is the user-provided title of the reusable block.
+				__( 'Could not render Reusable Block <strong>%s</strong>: blocks cannot be rendered inside themselves.' ),
+				$reusable_block->post_title
+			),
+			E_USER_WARNING
+		);
+
+		return '[block rendering halted]';
+	}
+
+	$seen_refs[] = $attributes['ref'];
+
 	if ( 'publish' !== $reusable_block->post_status || ! empty( $reusable_block->post_password ) ) {
 		return '';
 	}

packages/block-library/src/block/test/use-no-recursive-renders.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+// Mimics a block's Edit component, such as ReusableBlockEdit, which is capable
+// of calling itself depending on its `ref` attribute.
+function Edit( { attributes: { ref } } ) {
+	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
+		ref
+	);
+
+	if ( hasAlreadyRendered ) {
+		return <div className="wp-block__reusable-block--halted">Halt</div>;
+	}
+
+	return (
+		<RecursionProvider>
+			<div className="wp-block__reusable-block">
+				{ ref === 'SIMPLE' && <p>Done</p> }
+				{ ref === 'SINGLY-RECURSIVE' && (
+					<Edit attributes={ { ref } } />
+				) }
+				{ ref === 'MUTUALLY-RECURSIVE-1' && (
+					<Edit attributes={ { ref: 'MUTUALLY-RECURSIVE-2' } } />
+				) }
+				{ ref === 'MUTUALLY-RECURSIVE-2' && (
+					<Edit attributes={ { ref: 'MUTUALLY-RECURSIVE-1' } } />
+				) }
+			</div>
+		</RecursionProvider>
+	);
+}
+
+/**
+ * Internal dependencies
+ */
+import useNoRecursiveRenders from '../use-no-recursive-renders';
+
+describe( 'useNoRecursiveRenders', () => {
+	it( 'allows a single block to render', () => {
+		const { container } = render(
+			<Edit attributes={ { ref: 'SIMPLE' } } />
+		);
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block' )
+		).toHaveLength( 1 );
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block--halted' )
+		).toHaveLength( 0 );
+	} );
+
+	it( 'allows equal but sibling blocks to render', () => {
+		const { container } = render(
+			<Fragment>
+				<Edit attributes={ { ref: 'SIMPLE' } } />
+				<Edit attributes={ { ref: 'SIMPLE' } } />
+			</Fragment>
+		);
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block' )
+		).toHaveLength( 2 );
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block--halted' )
+		).toHaveLength( 0 );
+	} );
+
+	it( 'prevents a block from rendering itself', () => {
+		const { container } = render(
+			<Fragment>
+				<Edit attributes={ { ref: 'SINGLY-RECURSIVE' } } />
+			</Fragment>
+		);
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block' )
+		).toHaveLength( 1 );
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block--halted' )
+		).toHaveLength( 1 );
+	} );
+
+	it( 'prevents mutual recursion between two blocks', () => {
+		const { container } = render(
+			<Fragment>
+				<Edit attributes={ { ref: 'MUTUALLY-RECURSIVE-1' } } />
+			</Fragment>
+		);
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block' )
+		).toHaveLength( 2 );
+		expect(
+			container.querySelectorAll( '.wp-block__reusable-block--halted' )
+		).toHaveLength( 1 );
+	} );
+} );

packages/block-library/src/block/use-no-recursive-renders.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useMemo,
+} from '@wordpress/element';
+
+const RenderedRefsContext = createContext( [] );
+
+export default function useNoRecursiveRenders( ref ) {
+	const previouslyRenderedRefs = useContext( RenderedRefsContext );
+	const hasAlreadyRendered = previouslyRenderedRefs.includes( ref );
+	const newRenderedRefs = useMemo( () => [ ...previouslyRenderedRefs, ref ], [
+		ref,
+		previouslyRenderedRefs,
+	] );
+	const Provider = useCallback(
+		( { children } ) => (
+			<RenderedRefsContext.Provider value={ newRenderedRefs }>
+				{ children }
+			</RenderedRefsContext.Provider>
+		),
+		[ newRenderedRefs ]
+	);
+	return [ hasAlreadyRendered, Provider ];
+}