WordPress Gutenberg регистрирует несколько пользовательских блоков - PullRequest
Новая
       6

WordPress Gutenberg регистрирует несколько пользовательских блоков

0 голосов
/ 07 декабря 2018

Я пытаюсь создать несколько пользовательских блоков в Гутенберге.Это позволяет мне регистрироваться только по одному.

Я пытался объединить recipe_card_block() и first_block(), но это не помогает.

Оба блока работают правильно по отдельности.Если я удалю recipe_card_block(), в инсерторе появится first_block() (и наоборот).Однако, когда присутствуют оба, появится только первый.Изменение порядка их регистрации влияет на то, какой из них появляется.

Мне кажется, что они как-то перезаписывают друг друга, но я не понимаю, как это происходит.

Вот код в functions.php. 

function recipe_card_block(){
    wp_register_script(
        'recipe-card-script', // name of script
        get_template_directory_uri() . '/js/recipe-card.js', // path to script
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ) // dependencies
    );

    wp_register_style(
        'recipe-card-style',
        get_template_directory_uri() . '/css/recipe-card-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type('gadam/recipe-card', array(
        'editor_script' => 'recipe-card-script', // default script / script to define behavior within the editor
        'style'         => 'recipe-card-style' // default styles
    ) );
}
add_action( 'init', 'recipe_card_block' );

function first_block(){
    wp_register_script(
        'first-block-script', // name of script
        get_template_directory_uri() . '/js/first-block.js', // path to script
        array( 'wp-blocks', 'wp-element', 'wp-editor' ) // dependencies
    );
    // styles for editor view
    wp_register_style(
        'first-block-editor-style',
        get_template_directory_uri() . '/css/first-block-editor-style.css',
        array( 'wp-edit-blocks' )
    );
    // default styles
    wp_register_style(
        'first-block-style',
        get_template_directory_uri() . '/css/first-block-style.css',
        array( 'wp-edit-blocks' )
    );

    register_block_type('gadam/first-block', array(
        'editor_script' => 'first-block-script', // default script / script to define behavior within the editor
        'editor_style'  => 'first-block-editor-style', // styles for editor view
        'style'         => 'first-block-style' // default styles
    ) );
}
add_action( 'init', 'first_block' );

Это код в first-block.js

const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;

registerBlockType( 'gadam/first-block', {
    title: 'First Block',
    icon: 'welcome-learn-more',
    category: 'custom-blocks',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        alignment: {
            type: 'string'
        },
        fontSize: {
            type: 'number',
            default: 18
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content, alignment, fontSize } = attributes;
        const fontSizes = [
            {
                name: 'Small',
                slug: 'small',
                size: 14
            },
            {
                name: 'Normal',
                slug: 'normal',
                size: 18
            },
            {
                name: 'Large',
                slug: 'large',
                size: 24
            }
        ];

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        function onChangeFontSize( newFontSize ) {
            setAttributes( { fontSize: newFontSize } );
        }

        return (
            <Fragment>
                <BlockControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
                <InspectorControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                    <FontSizePicker
                        fontSizes={ fontSizes }
                        value={ fontSize }
                        onChange={ onChangeFontSize }
                    />
                </InspectorControls>
                <RichText
                    key="editable"
                    tagName="p"
                    className={ className }
                    style={ { textAlign: alignment, fontSize: fontSize } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </Fragment>
        );
    },

    save( { attributes } ) {
        const { content, alignment, fontSize } = attributes;
        const baseClass = 'wp-block-gadam-first-block';

        return (
            <div class="container">
                <div class={ baseClass }>
                    <RichText.Content
                        style={ { textAlign: alignment, fontSize: fontSize } }
                        value={ content }
                        tagName="p"
                    />
                </div>
            </div>
        );
    },
} );

И, наконец, это recipe-card.js

const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
const { Fragment } = wp.element;

registerBlockType( 'gadam/recipe-card', {
    title: 'Recipe Card',
    icon: 'index-card',
    category: 'custom-blocks',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        alignment: {
            type: 'string'
        },
        fontSize: {
            type: 'number',
            default: 18
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content, alignment, fontSize } = attributes;
        const fontSizes = [
            {
                name: 'Small',
                slug: 'small',
                size: 14
            },
            {
                name: 'Normal',
                slug: 'normal',
                size: 18
            },
            {
                name: 'Large',
                slug: 'large',
                size: 24
            }
        ];

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        function onChangeFontSize( newFontSize ) {
            setAttributes( { fontSize: newFontSize } );
        }

        return (
            <Fragment>
                <BlockControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
                <InspectorControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                    <FontSizePicker
                        fontSizes={ fontSizes }
                        value={ fontSize }
                        onChange={ onChangeFontSize }
                    />
                </InspectorControls>
                <RichText
                    key="editable"
                    tagName="p"
                    className={ className }
                    style={ { textAlign: alignment, fontSize: fontSize } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </Fragment>
        );
    },

    save( { attributes } ) {
        const { content, alignment, fontSize } = attributes;
        const baseClass = 'wp-block-gadam-recipe-card';

        return (
            <div class="container">
                <div class={ baseClass }>
                    <RichText.Content
                        style={ { textAlign: alignment, fontSize: fontSize } }
                        value={ content }
                        tagName="p"
                    />
                </div>
            </div>
        );
    },
} );

1 Ответ

0 голосов
/ 12 декабря 2018

Для тех, кто может столкнуться с этим в будущем:

Посмотрите на верхнюю часть двух js файлов, которые я разместил.Константы, объявленные в одном файле, являются общими для всех впоследствии зарегистрированных блоков.Итак, что происходит, когда я регистрирую first-block, константы определены.Когда я регистрирую recipe-card, он пытается определить константы в верхней части файла, но они уже определены как first-block.

. Код для recipe-card.js должен удалить константы, которые уже определеныfirst-block. 

registerBlockType( 'gadam/recipe-card', {
    title: 'Recipe Card',
    icon: 'index-card',
    category: 'custom-blocks',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        alignment: {
            type: 'string'
        },
        fontSize: {
            type: 'number',
            default: 18
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content, alignment, fontSize } = attributes;
        const fontSizes = [
            {
                name: 'Small',
                slug: 'small',
                size: 14
            },
            {
                name: 'Normal',
                slug: 'normal',
                size: 18
            },
            {
                name: 'Large',
                slug: 'large',
                size: 24
            }
        ];

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        function onChangeAlignment( newAlignment ) {
            setAttributes( { alignment: newAlignment } );
        }

        function onChangeFontSize( newFontSize ) {
            setAttributes( { fontSize: newFontSize } );
        }

        return (
            <Fragment>
                <BlockControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                </BlockControls>
                <InspectorControls>
                    <AlignmentToolbar
                        value={ alignment }
                        onChange={ onChangeAlignment }
                    />
                    <FontSizePicker
                        fontSizes={ fontSizes }
                        value={ fontSize }
                        onChange={ onChangeFontSize }
                    />
                </InspectorControls>
                <RichText
                    key="editable"
                    tagName="p"
                    className={ className }
                    style={ { textAlign: alignment, fontSize: fontSize } }
                    onChange={ onChangeContent }
                    value={ content }
                />
            </Fragment>
        );
    },

    save( { attributes } ) {
        const { content, alignment, fontSize } = attributes;
        const baseClass = 'wp-block-gadam-recipe-card';

        return (
            <div class="container">
                <div class={ baseClass }>
                    <RichText.Content
                        style={ { textAlign: alignment, fontSize: fontSize } }
                        value={ content }
                        tagName="p"
                    />
                </div>
            </div>
        );
    },
} );
...