Skip to content

Files

Latest commit

fabiankaegyfabiankaegy
migrate CustomBlockAppender to TypeScript
Jun 17, 2024
69a08ee · Jun 17, 2024

History

History

custom-block-appender

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
index.tsx
index.tsx
Jun 17, 2024
readme.md
readme.md
Jul 28, 2023

readme.md

CustomBlockAppender

This component is passed to an InnerBlocks instance to as it's renderAppender to provide a customized button that opens the Block Inserter.

Usage

import { CustomBlockAppender } from '@10up/block-components';
const MyComponent = ({clientId}) => {
 <InnerBlocks
  renderAppender={() => (
   <CustomBlockAppender
    className="custom-classname"
    rootClientId={clientId}
    icon="heavy-plus"
    isTertiary
    showTooltip
    label={__('Insert Accordion content', '10up-block-library')}
   />
  )}
 />
}

Advanced Usage

The following will ensure the render appender button will only show if the parent block or an inner block is currently selected.

import { CustomBlockAppender, useHasSelectedInnerBlock } from '@10up/block-components';
import { useSelect } from '@wordpress/data';
const MyComponent = ({clientId, isSelected}) => {

    const hasSelectedInnerBlock = useHasSelectedInnerBlock();

    <InnerBlocks
        renderAppender={ () => {
            return (
                ( isSelected || hasSelectedInnerBlock ) &&
                <CustomBlockAppender
                    className="custom-classname"
                    rootClientId={clientId}
                    icon="heavy-plus"
                    isTertiary
                    showTooltip
                    label={__('Insert Accordion content', '10up-block-library')}
                />
            )
        }
    />
}

Props

Name Type Default Description
rootClientId string '' Client it of the block
buttonText string '' Text to display in the button
icon string 'plus' Icon to display.
..buttonProps object null' Any other props passed are spread onto the internal Button component.