30 Янв
Редактор Gutenberg – это новый стандартный редактор контента для платформы WordPress. Он был внедрен в версии 5.0 и представляет собой совершенно новый подход к созданию контента в WordPress. В отличие от классического редактора, который основывается на одном текстовом поле, Gutenberg разбивает контент на маленькие блоки, каждый из которых представляет собой отдельный элемент контента, такой как абзац, заголовок, изображение, цитата и т.д. Это позволяет пользователям легко управлять макетом и внешним видом своего контента, делая его более интерактивным и богатым. Давайте узнает как происходит разработка под Gutenberg на WordPress:
Зачем разрабатывать собственные блоки?
Разработка собственных блоков для редактора Gutenberg открывает широкие возможности для улучшения функциональности и внешнего вида сайта на WordPress. Вот несколько причин, почему разработка собственных блоков может быть полезной:
- Персонализация контента: Создание собственных блоков позволяет создавать уникальные макеты и стили контента, которые соответствуют потребностям и бренду.
- Улучшенная функциональность: Путем разработки собственных блоков вы можете добавить новые функции и возможности, которых нет в стандартных блоках Gutenberg, такие как интеграция с внешними сервисами, расширенные настройки и т.д.
- Улучшенный пользовательский опыт: Создание собственных блоков позволяет вам предоставить пользователям более удобные и интуитивно понятные инструменты для создания контента, что способствует улучшению их пользовательского опыта.
- Расширение возможностей тем и плагинов: Разработка собственных блоков дает возможность расширить функциональность существующих тем и плагинов, делая ваш сайт более мощным и гибким.
- Продвижение вашего контента: Уникальные и интересные блоки могут помочь вашему контенту выделиться среди множества других сайтов, что может привлечь больше посетителей и увеличить вовлеченность аудитории.
Разработка собственных блоков для редактора Gutenberg – это мощный инструмент, который позволяет вам сделать сайт на WordPress еще более эффективным и привлекательным для ваших пользователей.
Основы блоков Gutenberg
Понимание архитектуры блоков Gutenberg
Архитектура блоков в редакторе Gutenberg базируется на принципе модульности и компонентного подхода. Каждый блок представляет собой отдельный компонент, который содержит свою структуру, стили, настройки и функциональность. Эти блоки можно комбинировать и перемещать внутри редактора, создавая разнообразные макеты контента.
Пример: Например, блок “Абзац” в Gutenberg состоит из компонента, который рендерит текстовое поле для ввода контента и позволяет пользователю применять стили к этому тексту.
Различные типы блоков и их возможности
В редакторе Gutenberg существует множество типов блоков, каждый из которых обладает уникальными возможностями и настройками. Некоторые из наиболее распространенных типов блоков включают в себя:
- Текстовые блоки (абзацы, заголовки, цитаты).
- Медиа-блоки (изображения, галереи, видео, аудио).
- Блоки макета (колонки, разделители).
- Виджеты (кнопки, списки, таблицы).
- Пользовательские блоки (разработанные сторонними разработчиками или самими пользователями).
Каждый тип блока имеет свои уникальные параметры и настройки, которые позволяют пользователям кастомизировать внешний вид и функциональность контента.
Пример: Блок “Изображение” позволяет загрузить изображение, указать его размеры, добавить подпись и применить стили.
Какие инструменты нужны для создания блоков
Для создания блоков Gutenberg требуются следующие инструменты:
- Редактор кода: Необходим для написания JavaScript и React-кода блоков.
- Node.js и npm: Используются для управления зависимостями проекта и запуска сборки.
- Create React App или аналогичный инструмент: Для быстрого настройки и создания React-приложения.
- WordPress development environment: Чтобы тестировать созданные блоки в локальной или удаленной среде WordPress.
- WordPress Gutenberg Handbook: Официальное руководство по разработке блоков Gutenberg, которое содержит документацию и примеры кода.
Пример: Вы можете использовать Create React App для создания нового проекта React, а затем установить необходимые зависимости, такие как @wordpress/scripts, для разработки блока Gutenberg. Далее, вы можете начать создавать собственные блоки, используя документацию и примеры кода из WordPress Gutenberg Handbook.
Видео урок: разработка под Gutenberg на WordPress
Исходник для стартового шаблона можно найти на репозитории. Используйте видео-инструкцию для быстрого старта, либо продолжите статью для понимания концепции разработки с полного нуля.
Создание простого блока
Начало процесса:
- Создание нового проекта: Для начала создадим новый блок с помощью
@wordpress/create-block. Напомню что у вас в системе должен быть node & npm. Если вы не устанавливали ранее create-block, то сделайте это сейчас:
npm install -g @wordpress/create-block- Теперь вы можете запустить команду чтобы сгенерировать новый блок с помощью
@wordpress/create-block. Эта команда создаст структуру проекта внутри каталогаmy-gutenberg-block. В нем вы найдете файлы и папки, необходимые для разработки блока.
npx @wordpress/create-block my-gutenberg-block
cd my-gutenberg-block- Напишем простой код, который будет выводить текст на странице. Откройте файл
src/index.jsи напишите код:
import { registerBlockType } from '@wordpress/blocks';
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
edit: () => <div>Hello, Gutenberg block!</div>,
save: () => <div>Hello, Gutenberg block!</div>,
});В этом примере мы создаем блок с заголовком “My Block“, иконкой улыбки и выводим простое сообщение “Hello, Gutenberg block!” в режимах редактирования и сохранения блока (то есть в админке и на фронт части).
- Регистрация блока. Когда мы создаем блок с помощью
@wordpress/create-block, блок автоматически регистрируется в WordPress. Регистрация блока происходит через функциюregisterBlockType, которую мы использовали в нашем файлеindex.js. WordPress автоматически обнаруживает этот блок и делает его доступным для использования в редакторе Gutenberg.
Добавление настроек блока
Давайте добавим пользовательский атрибут content, который будет хранить текст, введенный пользователем в блок:
import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
attributes: {
content: {
type: 'string',
default: 'Hello, Gutenberg block!',
},
},
edit: ({ attributes, setAttributes }) => {
const { content } = attributes;
const onChangeContent = newContent => {
setAttributes({ content: newContent });
};
return (
<div>
<TextControl
value={content}
onChange={onChangeContent}
placeholder="Enter your text..."
/>
</div>
);
},
save: ({ attributes }) => <div>{attributes.content}</div>,
});В этом примере мы определяем атрибут content для нашего блока и используем компонент TextControl для ввода текста пользователем в режиме редактирования. Мы также используем функцию setAttributes для обновления значения атрибута при изменении содержимого. В режиме сохранения блока мы выводим содержимое атрибута content.
Стилизация блока
Применение стилей к блоку с помощью CSS и inline стилей:
CSS:
- Стилизация блоков Gutenberg осуществляется так же, как и для любых других элементов веб-страницы с помощью CSS.
- Вы можете создать файл стилей (редактировать файл style) в вашем проекте и добавить правила CSS для стилизации вашего блока. Например:
.my-block {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}Затем вы можете добавить класс .my-block к вашему блоку в файле регистрации блока для применения этих стилей.
Inline стили:
- Вы также можете применить стили непосредственно к элементам блока, используя inline стили в React-компонентах (src/index.js). Например:
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
edit: () => <div style={{ backgroundColor: '#f0f0f0', padding: '20px', borderRadius: '5px' }}>Hello, Gutenberg block!</div>,
save: () => <div>Hello, Gutenberg block!</div>,
});Это может быть удобным для быстрой стилизации блока, но обычно предпочтительнее использовать внешние таблицы стилей для лучшей организации и управления стилями.
CSS-модули:
- CSS-модули предоставляют способ организации стилей, где каждый модуль имеет свою область видимости.
- Вы можете использовать CSS-модули в вашем проекте, чтобы избежать конфликтов имен и легко управлять стилями для разных компонентов блоков.
- Пример использования CSS-модулей:
/* styles.module.css */
.myBlock {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
import styles from './styles.module.css';
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
edit: () => <div className={styles.myBlock}>Hello, Gutenberg block!</div>,
save: () => <div>Hello, Gutenberg block!</div>,
});Библиотеки стилей
- Вы также можете использовать сторонние библиотеки стилей, такие как Bootstrap, Tailwind CSS или Material-UI, чтобы быстро стилизовать ваш блок с использованием готовых компонентов и классов.
- Эти библиотеки предоставляют готовые решения для создания привлекательного и адаптивного дизайна без необходимости писать много собственного CSS.
- Пример использования библиотеки стилей (например, Bootstrap):
import 'bootstrap/dist/css/bootstrap.min.css';
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
edit: () => <div className="bg-light p-4 rounded">Hello, Gutenberg block!</div>,
save: () => <div>Hello, Gutenberg block!</div>,
});Обратите внимание, что использование таких библиотек может увеличить размер вашего проекта, поэтому оцените необходимость использования их в зависимости от требований проекта.
Пример блока с простой логикой:
Вы можете создать блок, который позволяет пользователям выбирать стиль отображения определенного контента (сетка или список). Пример кода реализации подобной логики очень прост:
import { registerBlockType } from '@wordpress/blocks';
registerBlockType('my-gutenberg-block/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
edit: ({ attributes, setAttributes }) => {
const { layout } = attributes;
const onChangeLayout = newLayout => {
setAttributes({ layout: newLayout });
};
return (
<div>
<RadioControl
label="Layout"
choices={[
{
label: 'Сетка',
value: 'grid',
},
{
label: 'Список',
value: 'list',
},
]}
onChange={onChangeLayout}
value={layout}
/>
</div>
);
},
save: ({ attributes }) => {
const { layout } = attributes;
switch (layout) {
case 'grid':
return (
<div className="my-block-grid">
<div>Hello, Gutenberg block!</div>
<div>This is another block.</div>
</div>
);
case 'list':
return (
<ul className="my-block-list">
<li>Hello, Gutenberg block!</li>
<li>This is another block.</li>
</ul>
);
default:
return (
<div>Hello, Gutenberg block!</div>
);
}
},
});Заключение
Разработка собственных блоков Gutenberg – это отличный способ улучшить внешний вид и функциональность вашего сайта WordPress. С помощью собственных блоков вы можете создать уникальные макеты контента, добавить новые функции и возможности, а также повысить удобство использования для ваших посетителей.
Если вы хотите узнать больше о разработке блоков Gutenberg, я рекомендую вам пройти мой курс по WordPress FSE. Я надеюсь, что эта статья была вам полезна.
Александр Сокирка
