wordpress - 如何在 Gutenberg 的核心列表块的 ToolbarGroup 中添加一个额外的按钮？

Question

我对编辑 Gutenberg 核心块是 100% 的新手。但是这个周末我认为是时候深入研究编辑古腾堡核心块了。我已经使用以下代码成功添加了一个额外的 RichTextToolbarButton。

import { compose, ifCondition } from '@wordpress/compose';
import { registerFormatType } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { withSelect } from '@wordpress/data';

const MyCustomButton = ( props ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Sample output"
            onClick={ () => {
                console.log( 'toggle format' );
            } }
        />
    );
};
 
const ConditionalButton = compose(
    withSelect( function ( select ) {
        return {
            selectedBlock: select( 'core/editor' ).getSelectedBlock(),
        };
    } ),
    ifCondition( function ( props ) {
        return (
            props.selectedBlock && props.selectedBlock.name === 'core/paragraph'
        );
    } )
)( MyCustomButton );
 
registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
    edit: ConditionalButton,
} );

这很好用！但现在我正在尝试添加一个额外的“列表类型”按钮。现在我被困住了。

在下图中，您可以看到我尝试做的事情。我想知道如何在这里添加一个额外的选项，以及如何找出用于将按钮添加到现有 ToolbarGroup 的代码。

我只是不知道在哪里看，WordPress 文档在这个主题上也不是很有帮助。他们使用了很多不起作用的例子，而且对我来说不够具体。

我已经从 wordpress-development 目录下载了 JavaScript 包。我查看了以@wordpress 开头的包名称。在块库包中，我知道所有从 WordPress 5.0 发布的已注册核心块都已添加。所以我查看了 list/edit.js 文件。

在此文件中，我可以看到以下代码将当前存在的按钮广告到此列表块：

const controls = ( { value, onChange, onFocus } ) => (
        <>
            <RichTextShortcut
                type="primary"
                character="["
                onUse={ () => {
                    onChange( outdentListItems( value ) );
                } }
            />
            <RichTextShortcut
                type="primary"
                character="]"
                onUse={ () => {
                    onChange( indentListItems( value, { type: tagName } ) );
                } }
            />
            <RichTextShortcut
                type="primary"
                character="m"
                onUse={ () => {
                    onChange( indentListItems( value, { type: tagName } ) );
                } }
            />
            <RichTextShortcut
                type="primaryShift"
                character="m"
                onUse={ () => {
                    onChange( outdentListItems( value ) );
                } }
            />
            <BlockControls group="block">
                <ToolbarButton
                    icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
                    title={ __( 'Unordered' ) }
                    describedBy={ __( 'Convert to unordered list' ) }
                    isActive={ isActiveListType( value, 'ul', tagName ) }
                    onClick={ () => {
                        onChange( changeListType( value, { type: 'ul' } ) );
                        onFocus();

                        if ( isListRootSelected( value ) ) {
                            setAttributes( { ordered: false } );
                        }
                    } }
                />
                <ToolbarButton
                    icon={
                        isRTL() ? formatListNumberedRTL : formatListNumbered
                    }
                    title={ __( 'Ordered' ) }
                    describedBy={ __( 'Convert to ordered list' ) }
                    isActive={ isActiveListType( value, 'ol', tagName ) }
                    onClick={ () => {
                        onChange( changeListType( value, { type: 'ol' } ) );
                        onFocus();

                        if ( isListRootSelected( value ) ) {
                            setAttributes( { ordered: true } );
                        }
                    } }
                />
                <ToolbarButton
                    icon={ isRTL() ? formatOutdentRTL : formatOutdent }
                    title={ __( 'Outdent' ) }
                    describedBy={ __( 'Outdent list item' ) }
                    shortcut={ _x( 'Backspace', 'keyboard key' ) }
                    isDisabled={ ! canOutdentListItems( value ) }
                    onClick={ () => {
                        onChange( outdentListItems( value ) );
                        onFocus();
                    } }
                />
                <ToolbarButton
                    icon={ isRTL() ? formatIndentRTL : formatIndent }
                    title={ __( 'Indent' ) }
                    describedBy={ __( 'Indent list item' ) }
                    shortcut={ _x( 'Space', 'keyboard key' ) }
                    isDisabled={ ! canIndentListItems( value ) }
                    onClick={ () => {
                        onChange( indentListItems( value, { type: tagName } ) );
                        onFocus();
                    } }
                />
            </BlockControls>
        </>
    );

但是如何向这个 ButtonGroup 添加一个额外的 ToolbarButton？

已经感谢你们的帮助！

标签： wordpresswordpress-gutenberggutenberg-blocks