WordPress – популярная система управления контентом, предлагающая гибкую и расширяемую среду для создания веб-сайтов. С появлением редактора Gutenberg разработчики могут создавать собственные блоки для улучшения качества редактирования. В этой статье мы рассмотрим несколько способов создания пользовательского блока в WordPress с помощью npm, менеджера пакетов для JavaScript.

Метод 1: использование инструмента командной строки Create-Guten-Block (CGB).
Create-Guten-Block (CGB) — это инструмент командной строки, который обеспечивает оптимизированный рабочий процесс для создания пользовательских блоков Гутенберга. Чтобы начать, выполните следующие действия:

Шаг 1. Установите инструмент CGB глобально, выполнив следующую команду:

npm install create-guten-block -g

Шаг 2. Создайте новый блок с помощью инструмента CGB:

create-guten-block my-block

Это создаст новую структуру блока со всеми необходимыми файлами и конфигурациями.

Метод 2: создание пользовательского блока с нуля
Если вы предпочитаете более практический подход, вы можете создать собственный блок с нуля. Вот шаги:

Шаг 1. Установите новый плагин блокировки WordPress:

mkdir my-block
cd my-block
npm init

Шаг 2. Установите необходимые зависимости:

npm install @wordpress/scripts @wordpress/block-editor --save-dev

Шаг 3. Создайте собственный файл JavaScript блока (например, my-block.js):

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
registerBlockType('my-block/my-block', {
  title: 'My Custom Block',
  icon: 'smiley',
  category: 'common',
  edit: () => <RichText />,
  save: () => <RichText.Content />,
});

Шаг 4. Создайте ресурсы блока:

npx wp-scripts build

Метод 3: использование внешних библиотек
WordPress обеспечивает гибкость для создания пользовательских блоков с использованием внешних библиотек, таких как React или Vue.js. Вот пример использования React:

Шаг 1. Установите необходимые зависимости:

npm install @wordpress/scripts @wordpress/block-editor react react-dom --save

Шаг 2. Создайте собственный файл JavaScript блока (например, my-block.js):

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import React from 'react';
const MyBlock = () => <RichText />;
registerBlockType('my-block/my-block', {
  title: 'My Custom Block',
  icon: 'smiley',
  category: 'common',
  edit: MyBlock,
  save: () => null,
});

Шаг 3. Создайте блочные ресурсы:

npx wp-scripts build

В этой статье мы рассмотрели различные методы создания пользовательского блока в WordPress с помощью npm. Мы рассмотрели использование инструмента командной строки Create-Guten-Block, создание блока с нуля и использование внешних библиотек, таких как React. Эти методы предоставляют разработчикам различные возможности для создания пользовательских блоков, адаптированных к их конкретным требованиям. Используя npm и редактор Gutenberg, разработчики WordPress могут улучшить возможности редактирования и расширить функциональность своих веб-сайтов.