Question

我在这里遵循本教程-https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/format-api/

第1步-注册新格式，可以正常运行，我可以在控制台中看到我的新格式类型

第2步-我已将代码添加到my-custom-format.js中以使按钮出现，并按照指示将相应的wp-element和wp-editor包添加到了PHP文件中的依赖关系数组中。

php文件

<?php
/**
 * Plugin Name: My custom format
 */

function my_custom_format_script_register() {
    wp_register_script(
        'my-custom-format-js',
        plugins_url( 'my-custom-format.js', __FILE__ ),
        array( 'wp-element', 'wp-editor', 'wp-rich-text',  )
    );
}
add_action( 'init', 'my_custom_format_script_register' );

function my_custom_format_enqueue_assets_editor() {
    wp_enqueue_script( 'my-custom-format-js' );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_format_enqueue_assets_editor' );

JS文件

( function( wp ) {
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
        }
    );
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-custom-format/sample-output' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: MyCustomButton,
        }
    );
} )( window.wp );

我是否需要安装@ wordpress / rich-text模块才能使其正常工作？

古腾堡将富文本按钮添加到编辑器，按钮不出现

0 个答案: