Создание пользовательских блоков Гутенберга для WordPress

Создание пользовательских блоков Gutenberg для WordPress не должно быть сложным. Фактически, с небольшим количеством кода вы можете создавать свои собственные пользовательские блоки без использования плагина. Gutenberg — новый редактор для WordPress, который позволяет создавать пользовательские блоки для вашего контента. Блоки — это строительные блоки вашего контента в Гутенберге. Их можно использовать для добавления текста, изображений, видео и многого другого. Чтобы создать пользовательский блок , вам понадобится текстовый редактор, например WordPress Code Editor, или плагин, например Block Lab. Если у вас есть текстовый редактор, вы можете создать новый файл в каталоге вашей темы или плагина. Первое, что вам нужно сделать, это создать тип блока. Тип блока — это набор настроек, определяющих поведение блока. Для этого вам нужно использовать функцию register_block_type. Когда у вас есть тип блока, вы можете зарегистрировать его в WordPress. Эта функция будет принимать два аргумента: имя типа вашего блока и объект, содержащий настройки для вашего блока. После того, как вы зарегистрировали свой тип блока, вы можете начать добавлять в него поля. Поля — это настройки, которые контролируют внешний вид и поведение вашего блока. Чтобы добавить поле к вашему типу блока, вам нужно использовать функцию add_field. После того, как вы добавили все нужные поля в свой тип блока, вы можете зарегистрировать его в WordPress. Вот и все! Вы создали собственный блок Gutenberg для WordPress.

Редактор блоков Gutenberg был одним из усовершенствований WordPress 5.0. Редактор Gutenberg делит содержимое на блоки, которые легко переупорядочивают. Большинство разработчиков не смогут создавать блоки с собственным дизайном, потому что им не хватает навыков React. Сообщество разработчиков WordPress отреагировало на это разработкой инструментов, отвечающих требованиям React/JavaScript. Блоки в Block Lab создаются в три этапа: добавление их в админку, их копирование и вставка, а затем их экспорт. API также можно использовать для создания пользовательских элементов управления для вашего блока. Это может быть не так много, но это даст вам представление о том, что вы можете сделать с пользовательским блоком Гутенберга.

Чтобы сделать блок, нам нужно создать новый файл с именем block-notification-bar.php, который содержит заголовок (Панель уведомлений) и три поля. В ответ на этот файл появится сообщение с уведомлением, в котором нам будет предложено разместить наш пользовательский шаблон блока в нашей теме. Перед загрузкой файла убедитесь, что он сохранен и загружен на ваш веб-сервер. Теперь для нас создан пользовательский блок. Все, что имеет значение, это то, что вы достигли этой цели. У нас есть много вариантов, если мы хотим расширить то, что мы уже создали. Значки, кнопки и возможность ссылки на другой пост или страницу — это лишь некоторые из функций, которые можно добавить. Все эти возможности могут быть достигнуты с помощью Block Lab, а также других плагинов, упомянутых выше.

Плагин пользовательских блоков WordPress

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

Вы можете легко создавать записи и страницы с помощью WordPress, добавляя элементы контента и макета в виде блоков. WordPress предлагает широкий спектр блоков в конфигурации по умолчанию. Однако вы можете захотеть создать пользовательский блок для выполнения конкретной задачи. Этот урок проведет вас через этапы создания совершенно уникального блока. Первый шаг — вставить три поля в блок отзывов. Нажмите кнопку «Добавить поле», чтобы начать заполнение первого поля. Второй шаг — создать шаблон блока, который точно определит, как будут отображаться данные.

Третий шаг — стилизовать разметку вывода блока, щелкнув вкладку CSS. Загрузив шаблоны вручную, вы можете создать свой собственный блок. В этом случае PHP — лучший способ взаимодействия с вашими пользовательскими полями блока. Просто загрузите шаблон редактора в свою тему, используя метод загрузки. Для начала просмотрите свой пользовательский блок. Прежде чем вы сможете просмотреть свой HTML/CSS, вы должны предоставить некоторые тестовые данные. Создайте веб-сайт WordPress, специально созданный с помощью блока Gutenberg.

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

Создать блок React Гутенберга

Есть несколько способов создать блок Гутенберга в React. Первый способ — использовать CLI-инструмент create-guten-block. Это создаст для вас новый блок Гутенберга. Чтобы использовать этот метод, на вашем компьютере должны быть установлены Node.js и npm. После установки этих зависимостей вы можете создать новый блок Gutenberg, выполнив следующую команду: create-guten-block my-block Это создаст новый каталог с именем my-block со всеми необходимыми файлами для блока Gutenberg. Второй способ создать блок Гутенберга в React — использовать пакет @wordpress/block-editor. Этот пакет включает вспомогательную функцию createBlock, которую можно использовать для создания блоков Гутенберга. Чтобы использовать этот метод, вам необходимо установить в свой проект пакет @wordpress/block-editor. Установив пакет, вы можете создать новый блок Гутенберга, выполнив следующий код: import { createBlock } from '@wordpress/block-editor'; createBlock('мой-блок/мой-блок', { название: 'Мой блок', категория: 'общий', } ); Это создаст новый блок под названием my-block в общей категории. Третий способ создать блок Гутенберга в React — использовать функцию wp.blocks.createBlock . Эта функция является частью JavaScript API WordPress и может использоваться для создания блоков Гутенберга. Чтобы использовать этот метод, вам нужно будет включить в свой проект пакет wp-api-request. После того, как вы установили пакет, вы можете создать новый блок Gutenberg, выполнив следующий код: import { wp } from 'wp'; wp.blocks.createBlock('мой-блок/мой-блок', { название: 'Мой блок', категория: 'общие', } ); Это создаст новый блок под названием my-block в общей категории.

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

React прост в использовании в пользовательских темах

React — отличная библиотека для создания пользовательских интерфейсов с помощью JavaScript. WordPress использует его для работы нового редактора Gutenberg , а также для экрана администратора виджета и последних обновлений возможностей редактирования контента сайта. Поскольку React уже встроен в WordPress, его легко использовать в пользовательских темах.

Гутенберг Создать пользовательский блок кнопок

Gutenberg create custom button block — очень полезный инструмент для создания пользовательских кнопок для вашего сайта. С помощью этого инструмента вы можете легко создавать привлекательные и функциональные кнопки. Это отличный способ добавить индивидуальности вашему сайту и выделить его среди остальных.

В этом уроке вы узнаете, как сделать свой первый простой блок в популярном приложении. Наше приложение WordPress @create-block — это официальный инструмент, который позволяет нам быстро генерировать код Javascript/PHP/CSS. В интерактивном режиме вы можете настроить свой блок в несколько шагов. Когда вы только изучаете Гутенберга, это может быть чрезвычайно полезно. Если вы уже сформировали блок, теперь вы можете получить доступ к вновь созданному каталогу через редактор кода. Структура блочного плагина соответствует нынешнему состоянию (на момент написания этого руководства). Мы подробно рассмотрим каждый файл и его использование в этом модуле.

Флаг командной строки — это распространенный метод указания параметров для программ командной строки. Прежде чем использовать флаги, замените значения в каталоге флагов теми, которые вы хотите использовать. Таблица стилей, которая будет поставлена ​​в очередь или применена в редакторе. Подробно обсуждаются основные детали плагина. WordPress отображает информацию о плагине по умолчанию. Чтобы сообщить Git, какие файлы следует игнорировать при создании проекта с контролем версий, необходимо включить файл Gitignore A. Репозиторий содержит информацию. Config позволяет разработчикам поддерживать единый стиль кодирования в нескольких проектах.

Разработка плагина WordPress Gutenberg

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

Вы, наверное, слышали о Gutenberg (редактор блоков WordPress), но как приступить к созданию собственного плагина? Блоки создаются с помощью простого скрипта WordPress. Тип плагина WordPress, созданный здесь, обычно представляет собой блок, но он обеспечивает хорошую отправную точку для других в этом процессе. Сценарий создания блока можно использовать в качестве шаблона для создания собственного плагина. Вы можете легко увидеть блок в передней части WordPress, но он имеет другой вид, чтобы помочь вам привыкнуть к нему в задней части. Этот файл должен быть сгенерирован в режиме разработки только после компиляции ресурсов. /node_modules — это папка, в которой хранятся все зависящие от JavaScript параметры вашего плагина.

В этом файле можно найти предустановленные файлы, содержащие полезные среды Visual Studio Code (VDC). Вы должны убедиться, что находитесь в папке плагинов WordPress, если хотите создать плагин. В результате вы сможете просматривать этапы разработки и производства плагина. Откройте /src/save.js в вашем редакторе, чтобы заменить функцию сохранения на следующую: BlockText может быть выведен в виде строки таким образом. Следующий код должен быть добавлен в корень плагина для отображения ваших блоков в пользовательской категории блоков. Функция registerBlockType.js возвращает список категорий ваших блоков, который затем можно перекомпилировать с помощью функции registerBlockType.js плагина.

Редактор контента Гутенберга

Пользователи WordPress могут создавать, редактировать и удалять контент с помощью одностраничного приложения (SPA), построенного на React. В отличие от традиционного редактора контента, этот обеспечивает более плавный и удобный интерфейс. Если вам нужен более мощный редактор контента, приложение Gutenberg не для вас. Если вы предпочитаете более непринужденный вид, вы можете положиться на Гутенберга.

Редактор пользовательских блоков WordPress

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

Этот учебник проведет вас через процесс создания полнофункционального экземпляра пользовательского редактора блоков в WordPress. Этот редактор будет полностью встроен в настраиваемую страницу администратора WP под названием «Редактор блоков» (самым творческим образом). В нашем WordPress Plug-A-Thon мы создадим редактор. Теперь мы должны сгенерировать некоторый HTML-код на нашей пользовательской странице, используя компонент React редактора блоков. В качестве третьего аргумента мы используем строку зависимостей скрипта ($script_asset['dependencies']). Это гарантирует, что скрипты, связанные с WordPress, не будут включены в собранный пакет. Мы также должны зарегистрировать наши пользовательские стили CSS и библиотеку форматирования WordPress по умолчанию, чтобы использовать их.

Это позволяет нам использовать JavaScript для создания редактора блоков в HTML-коде страницы. Волшебство происходит, когда компонент для этого называется BlockEditor. Можно визуализировать редактор из PHP без создания глобального JS. Макет редактора построен на каркасе, как вы можете видеть здесь, в дополнение к нескольким специализированным поставщикам контекста. Block EditorProvider — самый важный компонент пакета редактора блоков WordPress. Как мы объясняли ранее, это обеспечивает новый контекст для совершенно нового редактора блоков в контексте редактирования блоков. Это достигается путем подписки на предоставленный реестр (через HOC withRegistry Provider), прослушивания событий изменения блока, определения того, остается ли изменение блока постоянным, и вызова обработчика ввода onChange при необходимости.

Наиболее интригующим компонентом является компонент BlockList, который добавляет в редактор список блоков. Стоит подробно изучить эти компоненты, поскольку они являются одними из самых сложных и сложных. Чтобы узнать больше о нашем пользовательском компоненте EditorBlock, см. следующую статью. Slot/fill реализуется с помощью нашего компонента Blockeditor (см. выше) для отображения заливки (боковой панели. InspectorFill) внутри него, которую мы впоследствии импортируем и визуализируем в реализации. В результате React позволяет нам хранить компонент проверки в своей модели DOM, одновременно отображая его в разметке в отдельном месте (например, на боковой панели). Блоки также можно найти в LocalStorage под ключом getdavesbeBlocks.

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