Гутенберг добавляет в редактор кнопку форматированного текста, кнопка не появляется - PullRequest
Новая
       71

Гутенберг добавляет в редактор кнопку форматированного текста, кнопка не появляется

0 голосов
/ 03 марта 2019

Я следую инструкциям здесь - https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/format-api/

Шаг 1 - зарегистрируйте новый формат, все работает нормально, и я вижу мой новый тип формата в консоли

Шаг 2 -Я добавил код в my-custom-format.js, чтобы кнопка появилась, и добавил соответствующие пакеты wp-element и wp-editor в массив зависимостей в файле PHP в соответствии с инструкциями.

php file

<?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, чтобы это работало?

...