Как создавать собственные блоки Гутенберга в 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, чтобы безопасно экспериментировать с вашим живым сайтом!

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

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

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

10 распространенных ошибок WordPress и решения для их исправления

Для инструмента, которому принадлежит 50-процентная доля рынка всей системы управления контентом (CMS), WordPress стал собственным стандартом. Но, как и любой инструмент, вы можете время от...

Отличие UPDS от FlowCrawler для Instantcms

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

Основы продвижения сайта в 2019 году, принципы и методы, от А до Я

С каждым наступившим годом все меняется в области SEO. Мы пытаемся узнать новые тренды и секреты продвижения сайта, а ведь зачастую могут они лишь...

Настройка my.cnf для стабильной работы Mysql

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

Полный справочник команд для Putty / SSH / Unix / Linux

В этом материале полный набор справочник команд для Putty при входе через SSH. Putty это бесплатное программное обеспечение, которое работает как клиент для разных...

Файл .htaccess подробное описание, где находится, настройка и оптимизация

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

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

10 причин открытия интернет-магазина для малого и среднего бизнеса

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

10 плагинов WordPress для создания форума: настройка, описание и управление

Онлайн форумы или доски объявлений безумно популярны среди пользователей всех видов, уровней знаний и интересов. Просто подумай об этом. У вас есть вопрос об...

Улучшения и дополнения в WordPress 5.5 (Возможности и скриншоты)

Выпущена бета-версия WordPress 5.5, выход которой запланирован на 11 августа 2020 года. Это будет второй по значимости выпуск WordPress в этом году, и он...

Jetpack 8.7 добавляет функцию развертывания Tweetstorm, улучшает настройку поиска

Jetpack 8.7 был выпущен на этой неделе с потрясающей новой функцией, которая позволяет пользователям «развернуть» твитторм и опубликовать его в посте. Функция работает внутри блока Tweet. После...

Обзор улучшений и изменений в редакторе Gutenberg 8.5

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

Установка, настройка, оформление темы Woodmart – учимся ставить на сайт

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