Расширение встроенного в блок изображения редактора Гутенберга - PullRequest
Новая
       22

Расширение встроенного в блок изображения редактора Гутенберга

1 голос
/ 23 июня 2019

Я нахожусь на wodpress 5.2 с темой двадцать десять . Это означает, что есть много мест, где сгенерированный Гутенбергом контент нарушен. Я мог бы исправить многие вещи в css дочерней темы, но я хочу, чтобы внедренные изображения выглядели как старые. Я ищу короткий и простой способ унаследовать то, что предлагает встроенный блок изображения, и создать собственное изображение с такими же параметрами редактора, но слегка измененный фрагмент HTML, сгенерированный этим блоком, применяя пользовательские классы для figure и figcaption для начала.

1 Ответ

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

У вас есть два варианта (как минимум).

Создайте свой собственный блок

Вы можете получить код блока изображения на github и начать создавать свой собственныйблокировать от него, например, используя create-guten-block.Вам понадобится некоторое время (~ 1-2 часа), чтобы это заработало, потому что некоторые операторы импорта и другие вещи должны быть адаптированы, это не только копирование и удаление.

=> Используйте его, если вам нужно много настроек длячто может предложить блок изображения, и вы хотите добраться до сути создания блока, изменения функций, поведения, внешнего вида, чего угодно.

Редактирование существующего блока в фильтре

Гутенберг предлагает много новогофильтры, например, фильтр blocks.getSaveContent.extraProps.Это позволяет вам манипулировать свойствами блоков, такими как классы.

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/image') {
        return Object.assign( props, { class: 'wp-caption' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'some-custom-name/add-block-class-name',
    addBlockClassName
);
...