С помощью этой серии практических материалов я хочу показать вам, насколько далеко продвинулось развитие WordPress. В 2024 году разработчик WordPress в первую очередь является frontend-разработчиком, который должен хорошо разбираться в HTML/CSS, React, особенностях WordPress, а также PHP, чтобы самостоятельно писать backend для создаваемых блоков. Признайтесь, вы думали, что это просто работа с кнопками в Elementor, не так ли? 🙂
Редактор блоков WordPress (Gutenberg) значительно преобразил процесс создания и редактирования контента на сайтах WordPress, предоставив разработчикам мощные инструменты для создания настраиваемых и функциональных блоков. В этом руководстве мы создадим свой собственный компонент «Список задач», который позволит пользователям создавать списки задач и отправлять данные на сервер при изменении статуса задач.
Основные элементы блока
Создаваемый нами блок будет состоять из нескольких ключевых элементов:
- RichText: Компонент, позволяющий пользователям вводить и редактировать текст внутри блока.
- InspectorControls: Панель, предоставляющая настройки и элементы управления для блока в редакторе.
- CheckboxControl: Элемент управления, используемый для пометки задач как выполненных.
- useState: Хук, управляющий состоянием задач внутри блока.
- fetch API: Используется для отправки данных задач на сервер.
Каждый блок создается как отдельный плагин, который можно повторно использовать в других проектах на WordPress. Это позволяет легко интегрировать созданный блок в любые другие сайты на WordPress.
Настройка окружения для разработки
Прежде чем приступить к созданию компонента, важно убедиться, что ваше окружение для разработки настроено правильно. Вам понадобятся следующие инструменты для разработки блока:
- WordPress: Убедитесь, что ваша версия WordPress — 5.0 или выше, так как редактор блоков был введен в этой версии.
- Node.js и npm: Необходимы для работы с JavaScript и управления зависимостями.
- WP-CLI (опционально): Инструмент командной строки для работы с WordPress, который может упростить разработку.
Установка Node.js и npm
Если Node.js и npm еще не установлены на вашем компьютере, загрузите и установите их с официального сайта Node.js.
После установки выполните следующие команды, чтобы убедиться, что все установлено правильно:
node -v
npm -vЕсли команды возвращают версии, значит, все работает правильно.
Создание блока «Список задач»
Чтобы ускорить процесс создания блока, вы можете использовать команду, которая автоматически сгенерирует всю структуру проекта, включая конфигурации и файлы.
Шаг 1: Создание блока через команду
Откройте терминал и выполните следующую команду, чтобы автоматически создать блок «Список задач»:
npx @wordpress/create-block@latest todo-listЭта команда выполнит следующие шаги:
- Инициализация проекта: Команда создаст новую директорию с именем
todo-list, содержащую все необходимые файлы и структуру для блока. - Установка зависимостей: Все необходимые пакеты, такие как
@wordpress/scripts, будут установлены автоматически. - Создание файловой структуры: Структура будет включать папки
srcиbuild, а также файлindex.jsс базовым кодом для блока. - Настройка block.json: Этот файл будет создан с базовой конфигурацией, определяющей блок «Список задач».
Файловая структура и описание
После выполнения команды будет создана следующая структура проекта:
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md- src/index.js
Файл index.js в папке src содержит весь исходный код вашего блока. Здесь реализована логика блока, включая его внешний вид и взаимодействие с пользователем. Основные части кода включают регистрацию блока с помощью функции registerBlockType, настройку атрибутов и определение функций для редактирования и сохранения блока.
Пример содержимого index.js:
import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, CheckboxControl } from '@wordpress/components';
registerBlockType('todo-plugin/todo-list', {
title: 'Список задач',
icon: 'list-view',
category: 'widgets',
attributes: {
tasks: {
type: 'array',
default: [],
},
},
edit({ attributes, setAttributes }) {
const { tasks } = attributes;
const [taskText, setTaskText] = useState('');
const addTask = () => {
if (taskText) {
const newTasks = [...tasks, { text: taskText, done: false }];
setAttributes({ tasks: newTasks });
setTaskText('');
sendTasksToServer(newTasks);
}
};
const toggleTaskDone = (index) => {
const newTasks = tasks.map((task, i) =>
i === index ? { ...task, done: !task.done } : task
);
setAttributes({ tasks: newTasks });
sendTasksToServer(newTasks);
};
const sendTasksToServer = (tasks) => {
fetch('/wp-json/todo/v1/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ tasks }),
});
};
return (
<div>
<InspectorControls>
<PanelBody title="Задачи">
{tasks.map((task, index) => (
<CheckboxControl
key={index}
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
))}
</PanelBody>
</InspectorControls>
<div>
<RichText
tagName="p"
value={taskText}
onChange={(text) => setTaskText(text)}
placeholder="Введите новую задачу"
/>
<button onClick={addTask}>Добавить задачу</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<CheckboxControl
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
</li>
))}
</ul>
</div>
);
},
save({ attributes }) {
const { tasks } = attributes;
return (
<ul>
{tasks.map((task, index) => (
<li key={index}>
<RichText.Content
tagName="span"
value={task.text}
style={{ textDecoration: task.done ? 'line-through' : 'none' }}
/>
</li>
))}
</ul>
);
},
});- build
Папка build предназначена для хранения скомпилированных файлов. После сборки проекта с помощью команды npm run build готовый к использованию файл index.js будет размещен в этой папке и использоваться WordPress для отображения и работы блока.
- block.json
Файл block.json содержит метаданные для вашего блока. В нем определяются имя блока, категория, иконка, необходимые для его работы скрипты и стили. Этот файл необходим для регистрации блока в WordPress.
Пример содержимого block.json:
{
"apiVersion": 2,
"name": "todo-plugin/todo-list",
"title": "Список задач",
"category": "widgets",
"icon": "list-view",
"description": "Настраиваемый блок списка задач.",
"keywords": [ "todo", "tasks", "list" ],
"version": "1.0.0",
"textdomain": "todo-list",
"editorScript": "file:./build/index.js"
}- package.json
Файл package.json содержит информацию о проекте и его зависимостях. Он управляет установкой и использованием пакетов, необходимых для разработки и сборки блока. Этот файл создается автоматически при инициализации проекта и обновляется по мере добавления новых зависимостей.
Пример содержимого package.json:
{
"name": "todo-list",
"version": "1.0.0",
"description": "Пользовательский блок для списка задач",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.0.0"
}
}- README.md
Файл README.md содержит описание проекта, инструкции по установке и использованию, а также другую важную информацию, которая может понадобиться разработчикам или пользователям. Этот файл полезен для документирования проекта.
Сборка проекта
После внесения изменений в код, выполните сборку проекта, чтобы получить готовый к использованию файл для WordPress:
npm run build
Команда build скомпилирует ваш код и разместит его в папке build.
Регистрация блока в WordPress
Теперь, когда блок готов, его нужно зарегистрировать в WordPress. Для этого добавьте следующий код в файл вашего плагина или темы:
function todo_plugin_register_block() {
wp_register_script(
'todo-list-editor-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
register_block_type( 'todo-plugin/todo-list', array(
'editor_script' => 'todo-list-editor-script',
) );
}
add_action( 'init', 'todo_plugin_register_block' );
Этот код зарегистрирует ваш блок в WordPress и добавит скомпилированный JavaScript-файл.
Заключение
Использование команды npx @wordpress/create-block@latest значительно ускоряет процесс создания нового блока для редактора блоков WordPress. В этом руководстве мы рассмотрели, как создать блок «Список задач», который позволяет пользователям создавать списки задач и управлять их выполнением, с отправкой данных на сервер. Этот компонент можно расширить, добавляя новые функции и улучшая взаимодействие с пользователем, что открывает широкие возможности для кастомизации вашего сайта на WordPress.
Добавить комментарий