wordpress gutenberg: проверка блока не удалась для `core/image` при добавлении атрибута данных (data-id =)

Получение ошибки проверки Гутенберга при добавлении атрибута данных (используя Редактировать как HTML) в тег привязки, эта проблема возникает, когда тег привязка внутри < тег strong>figure.

Когда пользователь добавляет изображение и оборачивает это изображение ссылкой, при отправке события наш плагин сканирует содержимое сообщения и добавляет атрибут данных к ссылке, когда снова обновляет/повторно открывает страницу редактирования сообщения, консоль показывает ошибку проверки Гутенберга.

<figure class="wp-block-image size-large">
   <a href="http://affiliate.local/wp-admin/post.php?post=56662&amp;action=edit" data-lasso-id="123">
     <img src="http://affiliate.local/wp-content/uploads/2019/06/mint_2018_icon-toolbox-640x640.jpg" alt="" class="wp-image-51176"/>
   </a>
</figure>

введите здесь описание изображения введите здесь описание изображения


person Bhanwar Chaudhary    schedule 25.05.2020    source источник


Ответы (1)


После многих попыток и ошибок я получил свое решение.

wp.hooks.addFilter(
    "blocks.registerBlockType",
    "sample-plugin/plugin/attribute/data",
    (settings, name) => {
        if (name == "core/image") {
            settings.attributes = Object.assign( settings.attributes, {
                'data-id': {
                    attribute: "data-id",
                    selector: "figure > a",
                    source: "attribute",
                    type: "string",
                },
            });
        }
        return settings;
    }
);


function applyExtraClass( extraProps, blockType, attributes ) {
    if(blockType.name != 'core/image') {
        return extraProps;
    }

    try {
        let figure_props = extraProps.children.props;
        let first_child = figure_props.children[0];
        if(figure_props.children && first_child && (first_child.type == 'a')) {
            first_child.props['data-id'] = attributes["data-id"];
        }
    } catch (error) {
        console.log(error);
    }
    return extraProps;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'sample-plugin/plugin',
    applyExtraClass
);
person Bhanwar Chaudhary    schedule 06.06.2020
comment
куда мне нужно добавить этот фрагмент? - person Ayoub Bousetta; 15.06.2021