From 599eb796db63e4614dee86d04b18c5cdea509a4d Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 5 Jul 2023 17:22:45 +0300 Subject: [PATCH 1/2] Block Editor: Add README for RecursionProvider --- .../components/recursion-provider/README.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 packages/block-editor/src/components/recursion-provider/README.md 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 0000000000000..105583cd76fc1 --- /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 us 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: '' + From 6ff3fa5c01b9c3bde0f9987b676c74dd04ebedfa Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 5 Jul 2023 17:34:16 +0300 Subject: [PATCH 2/2] Fix typo --- .../block-editor/src/components/recursion-provider/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/recursion-provider/README.md b/packages/block-editor/src/components/recursion-provider/README.md index 105583cd76fc1..4538fd6a7d350 100644 --- a/packages/block-editor/src/components/recursion-provider/README.md +++ b/packages/block-editor/src/components/recursion-provider/README.md @@ -74,7 +74,7 @@ Optional block name. # `useHasRecursion()` -Used in conjunction with `RecursionProvider`, this hook us used to identify if a block has already been rendered. +Used in conjunction with `RecursionProvider`, this hook is used to identify if a block has already been rendered. ## Usage