From 8bca4048963c1f734ab6a76411384bc632f9fbe3 Mon Sep 17 00:00:00 2001 From: Stephanie Walters <23455618+PypWalters@users.noreply.github.com> Date: Fri, 14 Jul 2023 13:24:13 -0400 Subject: [PATCH 1/4] Add additional example for render appender component usage --- components/custom-block-appender/readme.md | 33 ++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/components/custom-block-appender/readme.md b/components/custom-block-appender/readme.md index 9e3f6698..c567db98 100644 --- a/components/custom-block-appender/readme.md +++ b/components/custom-block-appender/readme.md @@ -22,6 +22,39 @@ const MyComponent = ({clientId}) => { } ``` +## Advanced Usage +The following will ensure the render appender button will only show if the parent block or an inner block is currently selected. + +```js +import { CustomBlockAppender } from '@10up/block-components'; +import { useSelect } from '@wordpress/data'; +const MyComponent = ({clientId, isSelected}) => { + + const { hasSelectedInnerBlock } = useSelect( ( select ) => { + const { hasSelectedInnerBlock } = select( 'core/block-editor' ); + return { + hasSelectedInnerBlock: hasSelectedInnerBlock + }; + } ); + + { + return ( + ( isSelected || hasSelectedInnerBlock( clientId, true ) ) && + + ) + } + /> +} +``` + ## Props | Name | Type | Default | Description | From 4d22a8d628b995a10717a777999ba489340333f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Fri, 28 Jul 2023 10:54:43 +0200 Subject: [PATCH 2/4] Update components/custom-block-appender/readme.md --- components/custom-block-appender/readme.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/components/custom-block-appender/readme.md b/components/custom-block-appender/readme.md index c567db98..ef308fab 100644 --- a/components/custom-block-appender/readme.md +++ b/components/custom-block-appender/readme.md @@ -30,12 +30,7 @@ import { CustomBlockAppender } from '@10up/block-components'; import { useSelect } from '@wordpress/data'; const MyComponent = ({clientId, isSelected}) => { - const { hasSelectedInnerBlock } = useSelect( ( select ) => { - const { hasSelectedInnerBlock } = select( 'core/block-editor' ); - return { - hasSelectedInnerBlock: hasSelectedInnerBlock - }; - } ); + const hasSelectedInnerBlock = useHasSelectedInnerBlock(); { From 29908e40e2f1cfabd012a6ff2dc2b32b7080d812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Fri, 28 Jul 2023 10:54:48 +0200 Subject: [PATCH 3/4] Update components/custom-block-appender/readme.md --- components/custom-block-appender/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/custom-block-appender/readme.md b/components/custom-block-appender/readme.md index ef308fab..083c2d19 100644 --- a/components/custom-block-appender/readme.md +++ b/components/custom-block-appender/readme.md @@ -35,7 +35,7 @@ const MyComponent = ({clientId, isSelected}) => { { return ( - ( isSelected || hasSelectedInnerBlock( clientId, true ) ) && + ( isSelected || hasSelectedInnerBlock ) && Date: Fri, 28 Jul 2023 10:54:53 +0200 Subject: [PATCH 4/4] Update components/custom-block-appender/readme.md --- components/custom-block-appender/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/custom-block-appender/readme.md b/components/custom-block-appender/readme.md index 083c2d19..8ac32dcd 100644 --- a/components/custom-block-appender/readme.md +++ b/components/custom-block-appender/readme.md @@ -26,7 +26,7 @@ const MyComponent = ({clientId}) => { The following will ensure the render appender button will only show if the parent block or an inner block is currently selected. ```js -import { CustomBlockAppender } from '@10up/block-components'; +import { CustomBlockAppender, useHasSelectedInnerBlock } from '@10up/block-components'; import { useSelect } from '@wordpress/data'; const MyComponent = ({clientId, isSelected}) => {