Кастомні блоки Gutenberg. Створюємо простий блок з редагуванням текста
Gutenberg – це редактор блоків WordPress, який представляє модульний підхід до зміни всього сайту. Зазвичай, ми використовуємо його як звичайний редактор текстів постів на тих блоках, які є «з коробки». Але також можливо створити свій блок навіть зі складним функціоналом і використовувати його потім по всьому сайту. Цей пост я створив, як невелику стартову шпаргалку, тому що документація по цій темі на сайті WordPress трохи заплутана та скупа.
Створимо простий блок зі своїм дизайном, який буде включати в себе заголовок, опис і кнопку з посиланням.
І попередньо зазначу, що кастомні блоки створюються як плагіни. Це робиться для того, щоб при зміні теми не пропадав контент, який використовує такі блоки. Також в вас має бути встановлено node.js та npm. Останній встановиться автоматично разом з нодою.
Отже, робимо наступним чином.
1. Нам потрібно відкрити термінал і перейти в папку plugins:
cd wp-content/plugins/ |
Далі вводимо команду, яка створить базову структуру:
npx @wordpress/create-block my-plugin |
my-plugin – слаг нашого плагіна, і він має бути унікальним. Якщо слаг не задавати, то його та інши данні плагіна потрібно буде ввести на запит скрипта.
В результаті ми отримаємо в папці plugins папку нового плагіна my-plugin з базовою структурою,. Цей блок вже буде нормально працювати, але функціонал його вкрай обмежений. Він виводить тількі одну фразу «My Plugin – hello from the editor!» без можливості її редагування.
/build - скомпільовані CSS та JS /node_modules /src block.json - метадані блока edit.js - компонент редагування блока editor.scss - стилі для консолі index.js - компонент реєстрації блока save.js - компонент зберігання блока style.scss - стилі для фронтенда .editorconfig .gitignore my-plugin.php - основний фал плагіна package-lock.json package.json readme.txt
Як і в будь-якому плагіні, нам потрібно преглянути та змінити данні в корневих файлах my-plugin.php та readme.txt.
Далі працюємо в папці src.
2. Відкриваємо src/block.json та створюємо потрібні змінні:
....
"attributes": {
"title": {
"type": "string",
"default": "Lorem ipsum..."
},
"description": {
"type": "string",
"default": "Lorem ipsum..."
},
"btn": {
"type": "string",
"default": "<a href='#'>More...</a>"
}
},
.... |
3. Відкриваємо src/edit.js. Цей файл призначений для виводу і редагуванню блока безпосередньо в адмінці. Вичіщаємо там коментарі, щоб наш код був більш простим і зрозумілим.
Імпортуємо компонент RichText, який нам потрібен для редагування текстів.
.... import { RichText, useBlockProps } from '@wordpress/block-editor'; .... |
І формуємо блоки в функції Edit. Весь код файлу буде виглядати так:
import { __ } from '@wordpress/i18n'; import { RichText, useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit({ attributes, setAttributes }) { return ( <div { ...useBlockProps() }> <RichText tagName="h2" className="my-plugin__title" value={ attributes.title } onChange={ ( title ) => setAttributes( { title } ) } placeholder={ 'Lorem ipsum...' } /> <RichText tagName="div" className="my-plugin__description" value={ attributes.description } onChange={ ( description ) => setAttributes( { description } ) } placeholder={ 'Lorem ipsum...' } /> <div className='my-plugin__btn--wrap'> <RichText tagName="div" className="my-plugin__btn" value={ attributes.btn } onChange={ ( btn ) => setAttributes( { btn } ) } placeholder={ '<a href="#">More</a>' } /> </div> </div> ); } |
3. Відкриваємо файл src/save.js і формуємо вивід на фронті. Повний код файла:
import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save({ attributes }) { return ( <div { ...useBlockProps.save() }> <RichText.Content tagName="h2" className="my-plugin__title" value={ attributes.title } /> <RichText.Content tagName="div" className="my-plugin__description" value={ attributes.description } /> <div className='get-guide__btn--wrap'> <RichText.Content tagName="div" className="my-plugin__btn" value={ attributes.btn } /> </div> </div> ); } |
4. Нам залишолось тільки додати відповідні стилі в файлах SCSS:
- editor.scss – стилі для бекенду
- style.scss – стилі для фронтенду
Тут є нюанс – беграунд картинкою дає помилку при компіляції. Тому, якщо в нас є подібний стиль, то його потрібно виносити в окремий файл css і підключати через my-plugin.php.
4. Додатково ми можемо створити для нашого блоку окрему іконку. Мені подобається вариант додати svg у файл src/index.js таким чином:
import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; import metadata from './block.json'; registerBlockType( metadata.name, { icon: { src: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" focusable="false"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"></path> </svg> }, edit: Edit, save, } ); |
Але можно просто змінити іконку на якусь іншу «стандартну» в файлі src/block.json:
... "icon": "smiley", ...
Також додатково можна створити власну категорію блоків наступним чином
add_filter( 'block_categories_all' , function( $categories ) { $categories[] = array( 'slug' => 'my-blocks-blocks', 'title' => 'My blocks' ); return $categories; }, 10, 2 ); |
яку потім вказуємо у тому ж файлі src/block.json:
.... "category": "my-blocks-blocks", ....
Немає коментарів.