Современный редактор Gutenberg в WordPress предоставляет мощные возможности для создания кастомных блоков с разнообразным контентом. Одним из востребованных типов контента является видео. В этой статье мы подробно разберём, как добавить поддержку видео в пользовательский блок Gutenberg, используя современные методы разработки и лучшие практики WordPress.
Почему важно добавить поддержку видео в кастомный Gutenberg-блок
Видео-контент сегодня играет ключевую роль в привлечении и удержании посетителей сайта. Нативная поддержка видео в блоках позволяет создавать более интерактивные и привлекательные страницы без необходимости использования сторонних плагинов или сложных манипуляций с HTML.
К тому же, правильно реализованный блок с видео повышает производительность и совместимость сайта, а также даёт больше гибкости в настройке и стилизации.
Основы создания кастомного блока с видео для Gutenberg
Для начала создадим базовый блок, который позволит загружать и отображать видео из медиатеки WordPress или вставлять ссылку внешнего видео.
Воспользуемся JavaScript и React, так как Gutenberg построен на этих технологиях. Ниже приведён упрощённый пример кода для регистрации блока.
const { registerBlockType } = wp.blocks;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;
const { Button } = wp.components;
registerBlockType('wptavern/video-block', {
title: 'Видео блок WPTavern',
icon: 'format-video',
category: 'media',
attributes: {
videoUrl: {
type: 'string',
default: ''
}
},
edit: (props) => {
const { attributes: { videoUrl }, setAttributes } = props;
const onSelectVideo = (media) => {
setAttributes({ videoUrl: media.url });
};
return (
<div className="wptavern-video-block">
{ videoUrl ? (
<video controls src={videoUrl} style={{ width: '100%' }} />
) : (
<MediaUploadCheck>
<MediaUpload
onSelect={onSelectVideo}
allowedTypes={[ 'video' ]}
render={({ open }) => (
<Button onClick={open} variant="primary">Выбрать видео</Button>
)}
/>
</MediaUploadCheck>
)}
</div>
);
},
save: (props) => {
const { attributes: { videoUrl } } = props;
return (
videoUrl ? <video controls src={videoUrl} style={{ width: '100%' }} /> : null
);
}
});Этот блок позволяет пользователю выбрать видео из медиатеки или загрузить новое, после чего видео отображается в редакторе и на фронтенде.
Добавление поддержки внешних видео сервисов и улучшение UX
Иногда необходимо не только работать с локальными файлами, но и добавлять видео с YouTube или Vimeo. Для этого можно расширить блок, добавив поле для вставки URL и рендеринг iframe.
В дополнение к MediaUpload добавим текстовое поле для вставки ссылки:
const { TextControl } = wp.components;
// В edit функции добавляем:
return (
<div className="wptavern-video-block">
{ videoUrl ? (
videoUrl.includes('youtube.com') || videoUrl.includes('vimeo.com') ? (
<iframe
width="100%"
height="360"
src={videoUrl}
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
/>
) : (
<video controls src={videoUrl} style={{ width: '100%' }} />
)
) : (
<>
<TextControl
label="URL видео с YouTube или Vimeo"
value={videoUrl}
onChange={(url) => setAttributes({ videoUrl: url })}
/>
<MediaUploadCheck>
<MediaUpload
onSelect={onSelectVideo}
allowedTypes={[ 'video' ]}
render={({ open }) => (
<Button onClick={open} variant="primary">Или выберите видео из медиатеки</Button>
)}
/>
</MediaUploadCheck>
</>
)}
</div>
);Такой подход даёт пользователю гибкость выбора источника видео.
Оптимизация загрузки видео: ленивый режим и пользовательские атрибуты
Чтобы улучшить производительность страниц, особенно с видео, важно использовать ленивую загрузку (lazy loading). Для этого в тег video и iframe можно добавить атрибут loading="lazy" и настроить дополнительные параметры, например, постеры.
Пример добавления атрибутов:
const VideoComponent = ({ videoUrl, poster }) => (
<video controls src={videoUrl} poster={poster} loading="lazy" style={{ width: '100%' }} />
);
const IframeComponent = ({ src }) => (
<iframe
width="100%"
height="360"
src={src}
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
loading="lazy"
/>
);Для добавления постера в блок можно реализовать дополнительный MediaUpload для выбора изображения, которое будет отображаться до начала воспроизведения.
Реализация кастомных настроек видео в блоке
Для более тонкой настройки видео можно добавить в блок такие опции, как автозапуск, зацикливание, скрытие элементов управления:
- Автозапуск (autoplay)
- Повтор (loop)
- Скрытие контролов (controls)
- Заглушка (poster)
Это делается через дополнительные атрибуты блока и чекбоксы в панели настройки блока.
const { InspectorControls } = wp.blockEditor;
const { PanelBody, ToggleControl } = wp.components;
// Добавляем в attributes
attributes: {
videoUrl: { type: 'string', default: '' },
autoplay: { type: 'boolean', default: false },
loop: { type: 'boolean', default: false },
controls: { type: 'boolean', default: true }
},
// В edit функции
return (
<>
<InspectorControls>
<PanelBody title="Настройки видео" initialOpen={ true }>
<ToggleControl
label="Автозапуск"
checked={autoplay}
onChange={(value) => setAttributes({ autoplay: value })}
/>
<ToggleControl
label="Зациклить видео"
checked={loop}
onChange={(value) => setAttributes({ loop: value })}
/>
<ToggleControl
label="Показывать элементы управления"
checked={controls}
onChange={(value) => setAttributes({ controls: value })}
/>
</PanelBody>
</InspectorControls>
<div className="wptavern-video-block">
{/* видео или iframe рендеринг */}
</div>
</>
);
// В save функции
return (
videoUrl ? (
<video
src={videoUrl}
autoPlay={autoplay}
loop={loop}
controls={controls}
style={{ width: '100%' }}
/>
) : null
);Использование плагина Clearfy Pro для оптимизации видео на WordPress
Для повышения скорости загрузки видео и уменьшения нагрузки на сервер стоит рассмотреть использование плагина Clearfy Pro. Этот плагин включает функции оптимизации загрузки видео, ленивой загрузки и отключения неиспользуемых скриптов, что повышает общую производительность сайта.
Интеграция кастомного блока с такими инструментами позволит достичь максимальной скорости и удобства для пользователей.
Отладка и тестирование видео-блока
После реализации блока обязательно нужно проверить его работу на разных устройствах и браузерах. Обратите внимание на:
- Корректность загрузки локальных и внешних видео
- Работу настроек (автозапуск, loop, controls)
- Производительность и влияние на скорость загрузки страницы
Для отладки используйте инструменты разработчика браузера и плагины для анализа производительности.
Заключение
Добавление поддержки видео в пользовательский блок Gutenberg — задача вполне выполнимая и полезная для многих проектов на WordPress. Используя описанные подходы, вы сможете создавать гибкие и удобные блоки с видео, которые улучшат пользовательский опыт и повысят качество контента на вашем сайте.