创建自定义渲染附加器按钮以添加内部块

时间：2020-05-30 作者：Siddharth Thevaril

InnerBlock的文档有一个属性renderAppender 可用于添加自定义按钮。在示例中：

// Fully custom
<InnerBlocks
    renderAppender={ () => (
        <button className="bespoke-appender" type="button">Some Special Appender</button>
    ) }
/>

单击“自定义”按钮时不执行任何操作。如何在单击自定义按钮时打开块选择器菜单？

2 个回复

最合适的回答,由SO网友:Sally CJ 整理而成

因此，我的回答如下：How to open the block picker menu via a custom button. 一、 e.不使用InnerBlocks.ButtonBlockAppender. :)

如何在单击“自定义”按钮时打开“块选择器”菜单？

没有“标准”函数（如alert()) 只需调用即可打开“块选择器”菜单；但是，您可以将按钮包装在Inserter component (wp.blockEditor.Inserter) 叫它onToggle 单击按钮的方法/功能。

下面是一个基于ButtonBlockAppender （使用的基本组件InnerBlocks.ButtonBlockAppender) 对于Gutenberg插件8.2.1版。

// WordPress dependencies.
import { Inserter, InnerBlocks } from \'@wordpress/block-editor\';
import { IconButton } from \'@wordpress/components\';
import { registerBlockType } from \'@wordpress/blocks\';

function MyButtonBlockAppender( { rootClientId } ) {
    return (
        <Inserter
            rootClientId={ rootClientId }
            renderToggle={ ( { onToggle, disabled } ) => (
                <IconButton
                    className="my-button-block-appender"
                    onClick={ onToggle }
                    disabled={ disabled }
                    label="Add a Block"
                    icon="plus"
                />
            ) }
            isAppender
        />
    );
}

registerBlockType( \'my-plugin/my-block\', {
    title: \'My Block\',
    category: \'common\',

    edit( { className, clientId } ) {
        return (
            <div className={ className }>
                Click the button to add your 1st image/paragraph.
                <InnerBlocks
                    allowedBlocks={ [ \'core/image\', \'core/paragraph\' ] }
                    renderAppender={ () => (
                        <MyButtonBlockAppender rootClientId={ clientId } />
                    ) }
                />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

正如我所说，这是一个简化的例子。你可以复制原稿ButtonBlockAppender 组件并对其进行修改以定制您的需求。

快乐的编码！

SO网友:Welcher

风俗renderAppenders 要求您自己创建插入块的所有功能。这是我不久前创建的一个只允许插入单个块的代码，您可以根据需要修改代码。

/**
 * WordPress Imports
 */
const { createBlock } = wp.blocks;
const { Button } = wp.components;
const { withSelect, withDispatch } = wp.data;
const { compose } = wp.compose;
const { __ } = wp.i18n;


/**
 * Custom Appender meant to be used when there is only one type of block that can be inserted to an InnerBlocks instance.
 *
 * @param buttonText
 * @param onClick
 * @param clientId
 * @param allowedBlock
 * @param innerBlocks
 * @param {Object} props
 */
const SingleBlockTypeAppender = ( { buttonText = __( \'Add Item\' ), onClick, clientId, allowedBlock, innerBlocks, ...props } ) => {
    return(
        <Button onClick={ onClick } { ...props} >
            {buttonText}
        </Button>
    );
};


export default compose( [
    withSelect( ( select, ownProps ) => {
        return {
            innerBlocks: select( \'core/block-editor\' ).getBlock( ownProps.clientId ).innerBlocks
        };
    } ),
    withDispatch( ( dispatch, ownProps ) => {
        return {
            onClick() {
                const newBlock = createBlock( ownProps.allowedBlock );
                dispatch( \'core/block-editor\' ).insertBlock( newBlock, ownProps.innerBlocks.length, ownProps.clientId );
            }
        };
    } )
] )( SingleBlockTypeAppender );

然后，您可以这样使用它：

<InnerBlocks
    renderAppender={
        () =>
            <SingleBlockTypeAppender
                isDefault
                isLarge
                buttonText="Add Block"
                allowedBlock="block/slug"
                clientId={ this.props.clientId }
            />
    }
/>

希望这有帮助！

小码农CODE

创建自定义渲染附加器按钮以添加内部块

相关推荐