Сбой проверки блока Гутенберга (отсутствует атрибут) - PullRequest
Новая
       13

Сбой проверки блока Гутенберга (отсутствует атрибут)

1 голос
/ 30 мая 2019

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

Я прочитал несколько похожих вопросов, но не получил полезных ответов: - Блок Wordpress Гутенберга - Ошибка проверки блока Гутенберга - Ошибка проверки блока Гутенберга (дети не ожидаются)

Моя проблема в деталях:

Когда я добавляю блок в свой контент, он выглядитотлично, также, если я сохраняю сообщение, я вижу виджет, как и ожидалось.

Проблема в том, что когда я редактирую существующую статью, блок разрушается: https://ibb.co/6vHRcXC

Код выглядит хорошо,Я вижу это в редакторе кода: https://ibb.co/tDMGnPY

Обновляя статью, виджет все еще работает на веб-интерфейсе.

Консоль показывает это предупреждение, сопровождаемое несколькими ошибками: https://ibb.co/Gk80skq

Похоже, что идентификатор атрибута отсутствует в сгенерированном коде , но я не понимаю, почему.

Я попытался изменить имя этого атрибута ( в случае [data-ид] было зарезервированным словом ), но ничего не изменилось.

Я попытался изменить значение этого атрибута ( Мне нужно, чтобы оно было целым числом, но я попытался добавить префиксы в верхнем и нижнем регистре и подчеркивания ), и ничего не изменилось.

Немного контекста: Мне нужен уникальный идентификатор для каждого блока, созданного с помощью Gutenberg , нет места для повторов в ширину , и мне нужно перенести этот идентификатор в функцию JavaScript на внешнем интерфейсе..Пожалуйста, скажите мне, что я делаю неправильно, и если есть другой способ сделать это.

Это полный исходный код JavaScript моего блока Гутенберга: 

(function () {

    let iconSvg = wp.element.createElement('svg', {width: 20, height: 20},
        wp.element.createElement('path', {d: "M10,0C4.478,0,0,4.478,0,10c0,5.521,4.478,10,10,10c5.521,0,10-4.479,10-10C20,4.478,15.521,0,10,0zM5.039,9.226c-0.786,0-1.425,0.765-1.425,1.705H2.576c0-1.512,1.104-2.742,2.462-2.742s2.463,1.23,2.463,2.742H6.463C6.463,9.991,5.825,9.226,5.039,9.226z M10,18.049c-3.417,0-6.188-2.41-6.188-5.382h12.375C16.188,15.639,13.418,18.049,10,18.049zM16.387,10.931c0-0.94-0.639-1.705-1.426-1.705c-0.785,0-1.424,0.765-1.424,1.705h-1.039c0-1.512,1.105-2.742,2.463-2.742s2.463,1.23,2.463,2.742H16.387z"})
    );

    wp.blocks.registerBlockType('plugin-name/gutenberg-block', {
        title: 'CustomBlockName',
        icon: iconSvg,
        category: 'widgets',

        edit: (props) => {
            // @TODO: we need a unique ID for each block!
            this.myId = props.attributes.itemId || Math.floor(Math.random() * 8388607); /// Medium int max value is 8388607;

            props.setAttributes(
                {
                    itemId: myId
                }
            );

            return wp.element.createElement(
                'div',
                {},
                [
                    wp.element.createElement(
                        'div',
                        {},
                        [
                            wp.element.createElement(
                                'img',
                                {
                                    src: PluginNameGutenbergBlock.preview_image
                                }
                            )
                        ]
                    )
                ]
            );
        },

        save: (props) => {
            let dataId = props.attributes.itemId;

            return wp.element.createElement(
                'div',
                {},
                [
                    wp.element.createElement(
                        'div',
                        {
                            class: 'plugin-name-outer'
                        },
                        [
                            wp.element.createElement(
                                'div',
                                {
                                    'class': 'plugin-name-container-async gutenberg-block',
                                    'data-id': dataId,
                                    'data-type': PluginNameGutenbergBlock.item_type
                                },
                                wp.element.createElement(
                                    'div',
                                    {
                                        'class': 'plugin-name-' + PluginNameGutenbergBlock.use_template
                                    },         {},
                                    [
                                        wp.element.createElement(
                                            'img',
                                            {
                                                src: PluginNameGutenbergBlock.loader_url
                                            }
                                        )
                                    ]
                                )
                            )
                        ]
                    )
                ]
            );
        }
    });

}());

1 Ответ

0 голосов
/ 05 июня 2019

Я понял свою ошибку, поэтому я публикую этот ответ в надежде помочь другим людям.

Когда я создаю новый блок, я сначала генерирую случайное значение для атрибута data-id: 

/// Inside edit function
this.myId = props.attributes.itemId || Math.floor(Math.random() * 8388607); /// Medium int max value is 8388607;

Затем я устанавливаю это значение в общем props объекте: 

/// Inside edit function
props.setAttributes(
    {
        itemId: myId
    }
);

Затем, когда я сохраняю блок, я только что создал скрипт, чтобы найти сгенерированное значение: 

/// Inside save function
let dataId = props.attributes.itemId;

Итак, создание блока работает хорошо, но когда я открываю существующее сообщение, мой сценарий не смог найти сохраненное значение, поэтому значение dataId внутри функции save было undefined, а атрибут data-id скучал. Это разница между сохраненным блоком и сгенерированным блоком .

Отсутствующей частью был блок attributes, который считывает значения из сохраненного кода и делает их доступными внутри функций edit и save.

Вот мое решение: 

wp.blocks.registerBlockType('plugin-name/gutenberg-block', {
    title: 'CustomBlockName',
    icon: iconSvg,
    category: 'widgets',
    attributes: {                                         /// <--- this block was missing
        myId: {                                           /// <--- this is the name of the property
            type: 'string',                               /// <--- this is the type
            source: 'attribute',                          /// <--- this is where is located the value I want
            default: Math.floor(Math.random() * 8388607), /// <--- this is a default value for new blocks
            selector: 'div.gutenberg-block',              /// <--- this is a selector for an element in saved block
            attribute: 'data-id'                          /// <--- this is the name of the attribute that contains desired value
        },
    },
    edit: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    },
    save: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    }
});
...