Редактор блоків Gutenberg, впроваджений у WordPress 5.0, дозволяє користувачам створювати контент за допомогою блоків. Кастомні блоки Gutenberg дозволяють додати унікальний функціонал та елементи дизайну до вашого сайту на WordPress. У цьому посібнику ми пройдемо процес створення кастомного блоку Gutenberg з нуля.
Передумови
Перед початком роботи переконайтеся, що у вас є:
Встановлення WordPress
Базові знання JavaScript і React
Встановлені Node.js і npm
Зручний хостинг для ваших сайтів на WordPress
Так, це хвилинка реклами в тексті. Але корисної! Ну і мені хотілось би, щоб ви побачили :)
Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.
А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.
Крок 1: Налаштуйте середовище розробки
Спочатку нам потрібно налаштувати середовище розробки. Відкрийте ваш термінал і перейдіть до каталогу теми або плагіна WordPress.
cd wp-content/themes/your-theme
Створіть новий каталог для вашого кастомного блоку:
mkdir custom-block
cd custom-block
Ініціалізуйте новий проект npm:
npm init -y
Встановіть необхідні пакети:
npm install @wordpress/scripts --save-dev
Крок 2: Створіть файли блоку
Всередині каталогу custom-block створіть папку src та додайте два файли: block.js і editor.css.
mkdir src
touch src/block.js src/editor.css
Крок 3: Зареєструйте кастомний блок
Редагуйте файл block.js для реєстрації вашого кастомного блоку:
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import './editor.css';
registerBlockType('custom/block', {
title: 'Custom Block',
icon: 'smiley',
category: 'common',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p',
},
},
edit({ attributes, setAttributes }) {
const { content } = attributes;
return (
<RichText
tagName="p"
value={content}
onChange={(content) => setAttributes({ content })}
placeholder="Write your custom block content..."
className="custom-block"
/>
);
},
save({ attributes }) {
const { content } = attributes;
return <RichText.Content tagName="p" value={content} className="custom-block" />;
},
});
Крок 4: Додайте стилі для блоку редактора
Редагуйте файл editor.css, щоб додати стилі для вашого блоку в редакторі:
.custom-block {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
Крок 5: Збірка блоку
Створіть файл webpack.config.js в каталозі custom-block:
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaultConfig,
entry: './src/block.js',
output: {
path: __dirname,
filename: 'block.js',
},
};
Додайте скрипт збірки до вашого файлу package.json:
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
}
Запустіть скрипт збірки:
npm run build
Крок 6: Підключіть скрипти блоку в WordPress
Наостанок підключіть ваші кастомні скрипти блоку у вашій темі або плагіні. Додайте наступний код у файл functions.php вашої теми або основний файл вашого плагіна:
function enqueue_custom_block_assets() {
wp_enqueue_script(
'custom-block',
get_template_directory_uri() . '/custom-block/block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(get_template_directory() . '/custom-block/block.js')
);
wp_enqueue_style(
'custom-block-editor',
get_template_directory_uri() . '/custom-block/src/editor.css',
array(),
filemtime(get_template_directory() . '/custom-block/src/editor.css')
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_assets');
Висновок
Створення кастомних блоків Gutenberg у WordPress дозволяє додавати унікальні функції та стилі на ваш сайт. Використовуючи цей посібник, ви навчитеся налаштовувати середовище розробки, реєструвати кастомний блок, додавати стилі та підключати скрипти блоку. Експериментуйте з різними ідеями блоків і покращуйте функціональність вашого сайту на WordPress!
