diff --git a/packages/block-editor/src/components/recursion-provider/README.md b/packages/block-editor/src/components/recursion-provider/README.md new file mode 100644 index 00000000000000..4538fd6a7d3507 --- /dev/null +++ b/packages/block-editor/src/components/recursion-provider/README.md @@ -0,0 +1,101 @@ +# RecursionProvider + +According to Gutenberg's block rendering architecture, any block type capable of recursion should be responsible for handling its own infinite loops. + +To help with detecting infinite loops on the client, the `RecursionProvider` component and the `useHasRecursion()` hook are used to identify if a block has already been rendered. + +## Usage + +```jsx +/** + * WordPress dependencies + */ +import { + __experimentalRecursionProvider as RecursionProvider, + __experimentalUseHasRecursion as useHasRecursion, + useBlockProps, + Warning, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +export default function MyRecursiveBlockEdit( { attributes: { ref } } ) { + const hasAlreadyRendered = useHasRecursion( ref ); + const blockProps = useBlockProps( { + className: 'my-block__custom-class', + } ); + + if ( hasAlreadyRendered ) { + return ( +
+ + { __( 'Block cannot be rendered inside itself.' ) } + +
+ ); + } + + return ( + + Block editing code here.... + + ); +} + +/// ... + +; +``` + +## Props + +The component accepts the following props: + +### uniqueId + +Any value that acts as a unique identifier for a block instance. + +- Type: `any` +- Required: Yes + +### children + +Components to be rendered as content. + +- Type: `Element` +- Required: Yes. + +### blockName + +Optional block name. + +- Type: `String` +- Required: No +- Default: '' + +# `useHasRecursion()` + +Used in conjunction with `RecursionProvider`, this hook is used to identify if a block has already been rendered. + +## Usage + +For example usage, refer to the example above. + +## Props + +The component accepts the following props: + +### uniqueId + +Any value that acts as a unique identifier for a block instance. + +- Type: `any` +- Required: Yes + +### blockName + +Optional block name. + +- Type: `String` +- Required: No +- Default: '' +