Блок карточка. Gutenberg. Bootstrap 4.

Этот блок представляет так называемую «карточку» в терминологии bootstrap. Bootstrap выбран только для примера, чтобы добавить разнообразия в код. И присвоить больше классов непосредственно в код блока.
Стилизовать блок стилями не составит большого труда и с этим справится любой мало-мальски знающий css верстальщик.
Блок создан на основе шаблона, называемого почти везде в уроках как «Custom «Card» Block». Там в принципе все просто. Единственная проблема – это загрузка рисунка. Не то что проблема, просто надо вникнуть. Или тщательно перенести код шаблона в свой.
Разработчики сами говорят, что все это еще в стадии разработки и вполне может все поменяться.
На мой взгляд, весь код блока слишком запутанный и «отягощенный». Вполне можно было бы и проще. Но как говорится «Маємо те, що маємо».
Еще для некоторой тренировки, в настройки блока добавлено текстовое поле для ввода ссылки для кнопки. То есть кнопка в карточке является ссылкой.
Небольшие пояснения по коду.

Index.php стандартный. Загружаем в него все, что нужно как и в ранее рассмотренных блоках.
Код скрипта немного усложнится.
Добавляем новые переменные, то бишь компоненты.

var TextControl = wp.components.TextControl;
var PanelBody = wp.components.PanelBody;
var el = element.createElement;
var RichText = editor.RichText;
var MediaUpload = editor.MediaUpload;
  • TextControl – поле ввода ссылки
  • PanelBody – панель настроек блока
  • RichText – поле ввода текста
  • MediaUpload – загрузка рисунка

В атрибуты тоже добавляем данные для новых компонентов. Атрибуты, конечно, надо изучить и понять. Они ключевые здесь. Я пока не совсем понимаю все. Но тщательное и скрупулезное «copy-paste» поможет с этим справится.

mediaURL: {
     type: 'string',
     source: 'attribute',
     selector: 'img',
     attribute: 'src',
url: { type: 'string',  },

Далее начинается стандартный код в виде двух функций edit и save. То есть, то, что мы видим в редакторе и на сайте соответственно.
Приводить его здесь, опять же, нет смысла. Он достаточно линейный. Как все заметили, так и по порядку и размечаем.
Единственное, что здесь добавляется поле ввода ссылки и в функции сохранения его прописывать не надо.
Поле присутствует только в функции edit. Размещаем панель и туда помещаем текстовое поле. Все просто, только напрягает огромное количество скобок и с ними надо не ошибиться. Если не особо в этом разбираешься, то поможет только внимательность.

return[!!props.isSelected && el(
      wp.editor.InspectorControls, { },
      el( PanelBody, {
      title: i18n.__( 'Customize Button' ),
      initialOpen: true, }, ),
       el(
       TextControl, {
       label: i18n.__('Button Url'),
       value: attributes.url,
       onChange: function(value) {
       props.setAttributes({
       url: value, });},}),),

Не знаю, как это произошло, но блок работает.

Изначально созданный блок перестал работать при переходе на новую версию Вордпресс.

Причина оказалась в ссылке. Оказалось, что вордпресс стал добавлять к ссылке, открывающемся в новом окне новый атрибут. Автоматом. Избавиться от этого можно только переходом на старый редактор.

rel="noreferrer noopener"

Пришлось добавить это в код. Вообще такая ошибка ищется легко. В панели инструментов браузера выводится сообщение о несоответствии блока в редакторе и конечного результата в браузере. Остается только сравнить и привести в соответствие.

Наконец то что то полезное. Блок подсветки кода

Оставьте свой комментарий