Вопрос или проблема
Я создал пользовательские блоки для темы моего клиента, и я хочу, чтобы заголовок блока отображался после его добавления, чтобы они могли видеть, какие блоки были использованы. Таким образом, они знают, как в дальнейшем воспроизводить макеты.
Это возможно?
Я хочу, чтобы заголовок блока отображался после его добавления, чтобы они могли видеть, какие блоки были использованы.
Эта информация уже доступна и отображается в нескольких местах, например
При наведении курсора на блок:
В боковой панели, когда блок выбран:
В панели навигации внизу:
И выделен в выпадающем меню навигации блоков:
Если цель состоит в том, чтобы воспроизвести макет, вы можете настроить шаблон для этого типа записи при вызове register_post_type, чтобы он был предварительно заполнен, и они просто внесли изменения по своему усмотрению. Вы даже можете настроить их как заполнители или зафиксировать доступные макеты и блоки.
Вы также можете скопировать и вставить блоки все сразу с другой страницы. Просто удерживайте Shift и нажмите, чтобы выбрать несколько блоков, затем скопируйте и вставьте. Также есть ссылка “Копировать все содержимое” в меню из трех точек в правом верхнем углу.
Вы также можете использовать плагины, такие как плагин редактирования сайта от Automattic и другие, чтобы предоставить предзаполненные варианты.
Ответ или решение
Да, добавление заголовка пользовательского блока Gutenberg на экран редактирования возможно и может быть реализовано с помощью определенных методов. Давайте рассмотрим, как это можно сделать, чтобы ваши клиенты могли видеть, какие блоки были использованы, что упростит процесс воссоздания макетов.
1. Визуализация заголовка блока после добавления
Как вы уже заметили, текущая версия редактора Gutenberg предоставляет несколько способов идентификации блоков, таких как отображение информации о блоках при наведении курсора, в боковой панели и в хлебных крошках. Тем не менее, отображение заголовка блока непосредственно на экране редактирования может потребовать некоторой дополнительной настройки.
2. Использование JavaScript для кастомизации блока
Чтобы отобразить заголовок блока в интерфейсе редактирования, вы можете воспользоваться хуками и фильтрами WordPress. Один из подходов – использование хука registerBlockType для определения вашего блока и добавление функции, которая будет отвечать за отображение заголовка:
import { registerBlockType } from '@wordpress/blocks';
import { Fragment } from '@wordpress/element';
registerBlockType('namespace/block-name', {
title: 'Custom Block Title',
// другие параметры блока
// Включаем JavaScript для визуализации заголовка
edit: (props) => {
return (
<Fragment>
<h2>{props.attributes.title}</h2>
{/* Ваш контент блока */}
</Fragment>
);
},
save: (props) => {
return (<h2>{props.attributes.title}</h2>);
},
});3. Шаблоны и предустановленные блоки
Если вашим клиентам необходимо воссоздавать определенные макеты, рассмотрите вариант установки заранее определенного шаблона для этого типа поста с использованием функции register_post_type. Вы можете создать шаблон, который автоматически заполнит блоки, и их нужно будет лишь немного настроить под конкретные задачи.
4. Использование плагинов
Существует ряд популярных плагинов для WordPress, таких как Site Editing Plugin от Automattic, которые предлагают пользователям предустановленные варианты блоков и макетов. Рассмотрите возможность их использования, если ваши клиенты не знакомы с Gutenberg.
5. Копирование и вставка блоков
Для упрощения процесса редактирования, ваши клиенты могут также использовать функцию копирования и вставки блоков. Они могут выделить несколько блоков одновременно, удерживая клавишу Shift, и затем пересечь их на другую страницу или запись. Есть также опция «Копировать все содержимое» в меню, которая может быть полезна.
Заключение
Добавление заголовка пользовательского блока на экран редактирования Gutenberg действительно возможно, и это может значительно облегчить жизнь пользователям. Используя JavaScript и стандартные функции WordPress, вам удастся создать интуитивно понятный интерфейс, который будет полезен вашим клиентам. Не забывайте, что правильное обучение пользователей и предоставление рекомендаций по использованию интерфейса также поможет им научиться воссоздавать макеты с минимальными усилиями.