Patterns (unsynced): prevent infinite loops due to recursive patterns

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

@@ -3,12 +3,19 @@
  */
 import { cloneBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
+	Warning,
 	store as blockEditorStore,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { parsePatternDependencies } from './recursion-detector';
 
 const PatternEdit = ( { attributes, clientId } ) => {
 	const selectedPattern = useSelect(
@@ -32,6 +39,8 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const { getBlockRootClientId, getBlockEditingMode } =
 		useSelect( blockEditorStore );
 
+	const [ hasRecursionError, setHasRecursionError ] = useState( false );
+
 	// Duplicated in packages/edit-site/src/components/start-template-options/index.js.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
@@ -64,7 +73,14 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// This change won't be saved.
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks ) {
+		if ( ! hasRecursionError && selectedPattern?.blocks ) {
+			try {
+				parsePatternDependencies( selectedPattern );
+			} catch ( error ) {
+				setHasRecursionError( true );
+				return;
+			}
+
 			// We batch updates to block list settings to avoid triggering cascading renders
 			// for each container block included in a tree and optimize initial render.
 			// Since the above uses microtasks, we need to use a microtask here as well,
@@ -93,7 +109,8 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		}
 	}, [
 		clientId,
-		selectedPattern?.blocks,
+		hasRecursionError,
+		selectedPattern,
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceBlocks,
 		getBlockEditingMode,
@@ -103,6 +120,20 @@ const PatternEdit = ( { attributes, clientId } ) => {
 
 	const props = useBlockProps();
 
+	if ( hasRecursionError ) {
+		return (
+			<div { ...props }>
+				<Warning>
+					{ sprintf(
+						// translators: A warning in which %s is the name of a pattern.
+						__( 'Pattern "%s" cannot be rendered inside itself.' ),
+						selectedPattern?.name
+					) }
+				</Warning>
+			</div>
+		);
+	}
+
 	return <div { ...props } />;
 };
 

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

@@ -27,6 +27,8 @@ function register_block_core_pattern() {
  * @return string Returns the output of the pattern.
  */
 function render_block_core_pattern( $attributes ) {
+	static $seen_refs = array();
+
 	if ( empty( $attributes['slug'] ) ) {
 		return '';
 	}
@@ -38,6 +40,17 @@ function render_block_core_pattern( $attributes ) {
 		return '';
 	}
 
+	if ( isset( $seen_refs[ $attributes['slug'] ] ) ) {
+		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
+		// is set in `wp_debug_mode()`.
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
+
+		return $is_debug ?
+			// translators: Visible only in the front end, this warning takes the place of a faulty block. %s represents a pattern's slug.
+			sprintf( __( '[block rendering halted for pattern "%s"]' ), $slug ) :
+			'';
+	}
+
 	$pattern = $registry->get_registered( $slug );
 	$content = $pattern['content'];
 
@@ -48,11 +61,14 @@ function render_block_core_pattern( $attributes ) {
 		$content = gutenberg_serialize_blocks( $blocks );
 	}
 
+	$seen_refs[ $attributes['slug'] ] = true;
+
 	$content = do_blocks( $content );
 
 	global $wp_embed;
 	$content = $wp_embed->autoembed( $content );
 
+	unset( $seen_refs[ $attributes['slug'] ] );
 	return $content;
 }
 

packages/block-library/src/pattern/recursion-detector.js

@@ -0,0 +1,103 @@
+/**
+ * THIS MODULE IS INTENTIONALLY KEPT WITHIN THE PATTERN BLOCK'S SOURCE.
+ *
+ * This is because this approach for preventing infinite loops due to
+ * recursively rendering blocks is specific to the way that the `core/pattern`
+ * block behaves in the editor. Any other block types that deal with recursion
+ * SHOULD USE THE STANDARD METHOD for avoiding loops:
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31455
+ * @see packages/block-editor/src/components/recursion-provider/README.md
+ */
+
+/**
+ * @type {Map<string, Set<string>>}
+ */
+const patternDependencies = new Map();
+
+/**
+ * Parse a given pattern and traverse its contents to detect any subsequent
+ * patterns on which it may depend. Such occurrences will be added to an
+ * internal dependency graph. If a circular dependency is detected, an
+ * error will be thrown.
+ *
+ * @param {Object} pattern        Pattern.
+ * @param {string} pattern.name   Pattern name.
+ * @param {Array}  pattern.blocks Pattern's block list.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function parsePatternDependencies( { name, blocks } ) {
+	const queue = [ ...blocks ];
+	while ( queue.length ) {
+		const block = queue.shift();
+		for ( const innerBlock of block.innerBlocks ?? [] ) {
+			queue.unshift( innerBlock );
+		}
+		if ( block.name === 'core/pattern' ) {
+			registerDependency( name, block.attributes.slug );
+		}
+	}
+}
+
+/**
+ * Declare that pattern `a` depends on pattern `b`. If a circular
+ * dependency is detected, an error will be thrown.
+ *
+ * Exported for testing purposes only.
+ *
+ * @param {string} a Slug for pattern A.
+ * @param {string} b Slug for pattern B.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function registerDependency( a, b ) {
+	if ( ! patternDependencies.has( a ) ) {
+		patternDependencies.set( a, new Set() );
+	}
+	patternDependencies.get( a ).add( b );
+
+	if ( hasCycle( a ) ) {
+		throw new TypeError(
+			`Pattern ${ a } has a circular dependency and cannot be rendered.`
+		);
+	}
+}
+
+/**
+ * Determine if a given pattern has circular dependencies on other patterns.
+ * This will be determined by running a depth-first search on the current state
+ * of the graph represented by `patternDependencies`.
+ *
+ * @param {string}      slug           Pattern slug.
+ * @param {Set<string>} [visitedNodes] Set to track visited nodes in the graph.
+ * @param {Set<string>} [currentPath]  Set to track and backtrack graph paths.
+ * @return {boolean}                   Whether any cycle was found.
+ */
+function hasCycle( slug, visitedNodes = new Set(), currentPath = new Set() ) {
+	visitedNodes.add( slug );
+	currentPath.add( slug );
+
+	const dependencies = patternDependencies.get( slug ) ?? new Set();
+
+	for ( const dependency of dependencies ) {
+		if ( ! visitedNodes.has( dependency ) ) {
+			if ( hasCycle( dependency, visitedNodes, currentPath ) ) {
+				return true;
+			}
+		} else if ( currentPath.has( dependency ) ) {
+			return true;
+		}
+	}
+
+	// Remove the current node from the current path when backtracking
+	currentPath.delete( slug );
+	return false;
+}
+
+/**
+ * Exported for testing purposes only.
+ */
+export function clearPatternDependencies() {
+	patternDependencies.clear();
+}

packages/block-library/src/pattern/test/index.js

@@ -0,0 +1,73 @@
+/**
+ * Internal dependencies
+ */
+import {
+	parsePatternDependencies,
+	registerDependency,
+	clearPatternDependencies,
+} from '../recursion-detector';
+
+describe( 'core/pattern', () => {
+	beforeEach( () => {
+		clearPatternDependencies();
+	} );
+
+	describe( 'parsePatternDependencies', () => {
+		it( "is silent for patterns that don't require other patterns", () => {
+			const pattern = {
+				name: 'test/benign-pattern',
+				blocks: [ { name: 'core/paragraph' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( pattern );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			const pattern = {
+				name: 'test/evil-pattern',
+				blocks: [ { name: 'core/pattern', slug: 'test/evil-pattern' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( pattern );
+			} ).toThrow();
+		} );
+	} );
+
+	describe( 'registerDependency', () => {
+		it( 'is silent for patterns with no circular dependencies', () => {
+			expect( () => {
+				registerDependency( 'a', 'b' );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			expect( () => {
+				registerDependency( 'a', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches mutually-referencing patterns', () => {
+			registerDependency( 'a', 'b' );
+			expect( () => {
+				registerDependency( 'b', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches longer cycles', () => {
+			registerDependency( 'a', 'b' );
+			registerDependency( 'b', 'c' );
+			registerDependency( 'b', 'd' );
+			expect( () => {
+				registerDependency( 'd', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches any pattern depending on a tainted one', () => {
+			registerDependency( 'a', 'b' );
+			registerDependency( 'b', 'c' );
+			registerDependency( 'b', 'd' );
+			expect( () => {
+				registerDependency( 'd', 'a' );
+			} ).toThrow();
+			expect( () => {
+				registerDependency( 'e', 'd' );
+			} ).toThrow();
+		} );
+	} );
+} );