Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Выпущен WordPress 5.0 , а вместе с ним и новый блочный редактор Gutenberg. Из коробки он упакован в приличный набор блоков, которые вы можете использовать на своих страницах и постах. Однако, поскольку это WordPress, всегда есть место для дополнительных пользовательских функций.

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

Примечание. При тестировании редактора Gutenberg или создании пользовательских блоков обязательно внесите изменения в промежуточную или локальную среду, например Local by Flywheel. Нажмите здесь, чтобы узнать больше о тестировании WordPress 5.0!

В этой статье я расскажу немного подробнее о текущем состоянии редактора блоков. Затем я расскажу, как создавать новые блоки вручную, и познакомлю вас с парой плагинов, которые могут упростить процесс. Давайте доберемся до этого!

Пользовательские блоки для редактора WordPress

Конечно, блоки являются центральными в функциональности нового редактора. Идея состоит в том, что вы можете добавлять блоки куда угодно и располагать их, используя строки и столбцы. Вот как выглядит редактор без макияжа:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Вот что вы увидите, когда добавите новый блок в одну из своих публикаций или страниц:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

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

Конечно, набор доступных вам блоков со временем обязательно увеличится. Ядро WordPress добавит новые элементы, а разработчики плагинов заполнят пробелы (как они обычно делают). Фактически, уже есть несколько плагинов, которые добавляют новые блоки в редактор блоков, включая атомарные блоки и наращиваемые .

Однако, если есть определенный блок, который вы хотели бы использовать, но не можете найти, у вас есть только один вариант – создание пользовательского блока, который вы можете использовать с редактором Гутенберга.

Как вручную создать пользовательские блоки (в 2 этапа)

Block API редактора Gutenberg – это инструмент, который вам нужен. В этом разделе я помогу вам настроить новый плагин для добавления блока в ваш редактор. Для этого вам понадобятся всего два файла (и немного кода).

Шаг 1: Создайте плагин для вызова ваших файлов блоков

Самый простой способ создать пользовательский блок Gutenberg Editor – это создать плагин, который «ставит в очередь» или вызывает ваши скрипты блока, и добавляет их в редактор.

Для начала зайдите на ваш сайт через SFTP с помощью клиента, такого как FileZilla . Как только вы войдете, перейдите в rootпапку WordPress и в wp-content/pluginsкаталог. Внутри вы найдете папки для всех плагинов на вашем сайте:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Теперь щелкните правой кнопкой мыши в любом месте внутри каталога и создайте новую папку. Я позвоню моему test-block, но ваш может иметь отношение к вам:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Откройте папку, создайте новый файл plugin.php (которому можно дать более подходящее имя), затем откройте пустой файл и добавьте следующий код:

<?php
/**
 * Plugin Name: Test Plugin
 * Author: John Doe
 * Version: 1.0.0
 */
 
function loadMyBlock() {
  wp_enqueue_script(
    'my-new-block',
    plugin_dir_url(__FILE__) . 'test-block.js',
    array('wp-blocks','wp-editor'),
    true
  );
}
  
add_action('enqueue_block_editor_assets', 'loadMyBlock');

Шаг 2: Зарегистрируйте свой блок и настройте его атрибутыКроме того, функция также включает две зависимости скрипта – wp-blocksи wp-editor. Первый из них обрабатывает регистрацию блоков среди других функций, тогда как wp-редактор включает в себя несколько основных компонентов, которые вам могут понадобиться, например Rich Text.Это создает функцию для постановки в очередь вашего скрипта блока test-block.js, в данном случае. Конечно, этот файл еще не существует (но скоро будет).

Когда файл PHP готов, самое время настроить test-block.jsфайл JavaScript. Создайте этот файл в том же каталоге плагинов, что и plugin.php:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Когда файл будет готов, откройте его с помощью текстового редактора и подготовьтесь к кодированию! Этот пример – очень простой блок, позволяющий добавить текстовое поле с рамкой на ваши страницы:

 

/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
 
wp.blocks.registerBlockType('brad/border-box', {
  title: 'Simple Box',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {type: 'string'},
    color: {type: 'string'}
  },
 
/* This configures how the content and color fields will work, and sets up the necessary elements */
 
  edit: function(props) {
    function updateContent(event) {
      props.setAttributes({content: event.target.value})
    }
    function updateColor(value) {
      props.setAttributes({color: value.hex})
    }
    return React.createElement(
      "div",
      null,
      React.createElement(
        "h3",
        null,
        "Simple Box"
      ),
      React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
      React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
    );
  },
  save: function(props) {
    return wp.element.createElement(
      "h3",
      { style: { border: "3px solid " + props.attributes.color } },
      props.attributes.content
    );
  }
})

После сохранения test-block.jsфайла активируйте плагин из WordPress:Как видите, здесь используется JavaScript с React для настройки всего. Я также добавил пару комментариев к коду, но в итоге он регистрирует и настраивает базовые атрибуты блока. После начального раздела я настроил способ работы полей. Этот пример включает текстовое поле и палитру цветов для границы.

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Затем откройте Редактор блоков и добавьте новый блок, чтобы проверить, как он отображается:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Вот как выглядит интерфейс блока:

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

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

Однако, чтобы добраться до стадии публикации, вам потребуется развить свои навыки кодирования. Например, вы захотите освежить свой JavaScript , поскольку редактор блоков широко использует этот язык. Это немного отличается от работы в основном с PHP, но вы можете сделать что-то не менее замечательное, а может и больше!

2 плагина, для создания пользовательских блоков

Изучение того, как вручную создавать пользовательские блоки, очень полезно, если вы хотите понять, как работает API блоков. Тем не менее, есть плагины WordPress, которые можно использовать для более быстрого создания блоков. Вот два главных претендента!

Block Lab

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Проще говоря, Block Lab позволяет вам создавать собственные блоки прямо из вашей панели WordPress. Плагин позволяет вам установить столько блоков, сколько вам нужно, и вы можете задать имя, категорию, значок, описание и указать, какие поля вы хотите включить для каждого из них.

Тем не менее, имейте в виду, что для настройки шаблона каждого блока вам все-таки необходимо выполнить легкое кодирование . Тем не менее, вы можете пропустить большую часть работы по регистрации каждого блока и постановке в очередь его сценария.

Lazy Blocks

Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция

Если вы вообще не хотите иметь дело с каким-либо кодом, Lazy Blocks может оказаться на вашем пути. Этот плагин позволяет создавать пользовательские блоки, используя список предварительно созданных элементов, в том числе поля текста, пароля и изображения, а также средства выбора цвета и даты.

Выбор используемых элементов достаточно широк, чтобы вы могли собрать несколько классных блоков, но если вы хотите создать что-то очень специфичное, вам, скорее всего, будет предложено более продвинутое решение.

Вывод

Если вы уже давно пользуетесь WordPress, скорее всего, вы пытались расширить функциональность Classic Editor с помощью плагинов. Создание пользовательских элементов Block Editor – похожая ситуация, только есть новые инструменты и языки, которые можно использовать. В любом случае расширение возможностей редактора может значительно упростить вашу работу, поэтому стоит изучить ваши варианты.

Вы можете свести процесс создания пользовательского блока редактора блоков к двум шагам:

  1. Создайте плагин, который вызывает JavaScript вашего блока.
  2. Используйте файл JavaScript, чтобы зарегистрировать новый блок и установить его атрибуты.

И помните, всегда используйте тестовую среду, такую ​​как Local by Flywheel, чтобы безопасно экспериментировать с вашим живым сайтом!

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

СЕГОДНЯ ЧИТАЮТ

Убираем показ ошибок на сайте при режиме работы Nginx и PHP-FPM

Столкнулся с задачей убрать ошибки при просмотре сайта, который работает в режиме nginx + php-fpm. В настройках php панели показ ошибок отключен, однако ошибки...

Яндекс начинает бороться с агрессивной рекламой на сайтах

Только недавно Google объявил, что будет контролировать уровень рекламной насыщенности через Chrome, а тут уже и Яндекс подхватил инициативу, также высказавшись о необходимости фильтрации...

Карта сайта для Instantcms – как сделать на https

Вопросы о карте сайта для Instantcms поступают очень часто. В последнее время основной вопрос - как перевести карту сайта на https. Давайте разберёмся и...

6 инструментов тестирования скорости сайта и советы по оптимизации

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

Ускорение сайта на WordPress – разгоняем максимум скорости

Итак решил немного заняться ускорением сайта на примере ok2web.ru. Для начала я сниму несколько показателей, которые определяют его скорость, далее проведу некоторые эксперименты по...

Get Filesize Shortcode плагин шортода для размера файлов WordPress

«Получить шорткод размера файла» - это простой шорткод для получения размера файла (например, PDF, JPG, PNG…) в удобочитаемом формате с использованием наибольшей единицы, в...

ПОХОЖИЕ МАТЕРИАЛЫ

Редакторы изображений Tune WP | Дополнение WPSSO для повышения резкости фото WordPress

Вы заметили, что WordPress создает уменьшенные изображения, которые кажутся немного нечеткими — совсем непохожими на красивый резкий оригинал, который вы загрузили? Причина в том, что...

Вопросы и ответы по теме Woodmart (обновляется )

Тема Woodmart одна из лучших для создания интернет магазинов на Woocommerce. Однако ничто не бывает идеальным, поэтому возникают различные проблемы с ней....

TotalContest Pro – Плагин WordPress для конкурса фото, аудио и видео

TotalContest - это мощный плагин для проведения онкурсов WordPress, предназначенный для проведения и управления конкурсами и соревнованиями на вашем сайте. Он был разработан, чтобы...

Content-visibility: новое свойство CSS, повышающее скорость и рендеринг сайта

Поддержка новых возможностей css стилей, которые появились в Chromium 85, могут быть один из самых новых свойств впечатляющих CSS для улучшения производительности загрузки страницы....

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...