Редактор Gutenberg стал стандартом создания контента в WordPress, но при активном использовании часто возникает необходимость оптимизировать и ускорить процесс редактирования блоков. В этой статье мы рассмотрим конкретные методы оптимизации работы с Gutenberg: от настройки пользовательских блоков до применения полезных плагинов и написания собственного кода для автоматизации рутинных задач.
Почему важна оптимизация работы с Gutenberg
Гутенберг — это мощный инструмент, но в больших и сложных проектах время на редактирование контента может значительно увеличиваться из-за большого количества блоков, отсутствия удобных шаблонов и повторяющихся операций. Оптимизация позволяет:
- Сократить время на создание и редактирование страниц.
- Уменьшить количество ошибок при работе с блоками.
- Автоматизировать рутинные задачи.
- Повысить удобство и производительность для контент-менеджеров.
Использование пользовательских блоков для ускорения редактирования
Создание пользовательских блоков — один из самых эффективных способов оптимизации. Вместо того, чтобы вручную собирать контент из стандартных блоков, вы можете создать собственный блок с нужными настройками и шаблонами.
Пример создания простого пользовательского блока с использованием JavaScript и React в WordPress:
wpeditor_register_block = () => {
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
registerBlockType('wpeditor/custom-block', {
title: 'WPEditor Кастомный блок',
icon: 'edit',
category: 'common',
attributes: {
content: { type: 'string', source: 'html', selector: 'p' }
},
edit: (props) => {
const { attributes: { content }, setAttributes } = props;
return (
wp.element.createElement(RichText, {
tagName: 'p',
value: content,
onChange: (content) => setAttributes({ content }),
placeholder: 'Введите текст...'
})
);
},
save: (props) => {
const { attributes: { content } } = props;
return wp.element.createElement(RichText.Content, { tagName: 'p', value: content });
}
});
};
window.addEventListener('load', wpeditor_register_block);Такой блок позволяет создавать повторяющиеся элементы с одинаковой структурой, экономя время на каждый новый материал.
Плагины для улучшения работы с Gutenberg
Существует ряд плагинов, которые помогают оптимизировать и ускорить работу с редактором. Рассмотрим несколько полезных:
- Advanced Custom Fields (ACF) — позволяет создавать гибкие поля и на их основе строить собственные блоки. Это ускоряет процесс создания контента с нестандартными элементами.
- Reusable Blocks Extended — расширяет возможности стандартных повторно используемых блоков, облегчая управление ими.
- Editor Plus — добавляет дополнительные стили и настройки для блоков, позволяя быстрее оформлять контент без дополнительных CSS.
- Clearfy Pro — оптимизирует работу сайта, включая улучшения в редакторе Gutenberg для более плавной работы.
Все эти плагины можно найти и скачать с wpshop.ru.
Автоматизация с помощью PHP: фильтры и хуки для Gutenberg
Для более тонкой настройки редактора и автоматизации можно использовать хуки WordPress, которые влияют на поведение блоков и редактора в целом.
Отключение ненужных блоков
Если в проекте не нужны некоторые стандартные блоки, их можно убрать, чтобы не загромождать интерфейс. Это ускорит выбор нужного блока и снизит нагрузку на редактор.
function wpeditor_disable_unused_gutenberg_blocks( $allowed_blocks ) {
return [
'core/paragraph',
'core/image',
'core/heading',
// Добавьте нужные блоки
];
}
add_filter( 'allowed_block_types_all', 'wpeditor_disable_unused_gutenberg_blocks' );Добавление шаблонов блоков для страниц и записей
Можно создавать шаблоны, которые будут автоматически подставляться при создании новой записи или страницы — это ускорит наполнение контентом.
function wpeditor_register_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = [
[ 'core/heading', [ 'placeholder' => 'Заголовок статьи' ] ],
[ 'core/paragraph', [ 'placeholder' => 'Основной текст...' ] ],
[ 'core/image', [] ]
];
}
add_action( 'init', 'wpeditor_register_block_template' );Такой шаблон позволяет создавать единый формат материала, что особенно полезно при работе с большим количеством контента.
Оптимизация производительности редактора
Для ускорения работы Gutenberg важно следить за количеством подключаемых скриптов и стилей, а также использовать кеширование.
Рекомендуется использовать плагины кэширования и оптимизации, например, Clearfy Pro, который умеет оптимизировать ассеты и отключать ненужные скрипты.
Также можно отключить загрузку скриптов редактора на фронтенде, если они не нужны:
function wpeditor_dequeue_gutenberg_assets() {
if ( ! is_admin() ) {
wp_dequeue_script( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library' );
}
}
add_action( 'wp_enqueue_scripts', 'wpeditor_dequeue_gutenberg_assets', 100 );Советы по улучшению UX редактора Gutenberg
Чтобы сделать работу с редактором еще удобнее, можно:
- Использовать горячие клавиши для быстрого добавления и изменения блоков.
- Создавать и использовать повторно шаблоны блоков и страницы.
- Добавлять пользовательские стили в редактор, чтобы видеть контент как на фронтенде.
Например, добавление пользовательских стилей в редактор:
function wpeditor_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpeditor_add_editor_styles' );Файл custom-editor-style.css должен содержать CSS, который повторяет стили сайта, чтобы визуально редактор соответствовал фронтенду.
Заключение
Оптимизация процесса редактирования блоков Gutenberg — это важный шаг к повышению эффективности работы с WordPress. Использование пользовательских блоков, шаблонов, правильных плагинов и хуков позволяет существенно сократить время на создание контента и улучшить пользовательский опыт. Рекомендуем применять комплексный подход: настраивать редактор под задачи проекта, использовать автоматизацию и следить за производительностью сайта.