Каждый тип блока в редакторе WordPress может иметь несколько вариантов стиля. Некоторые типы блоков уже имеют параметры стиля, такие как кнопки и кавычки.
Я покажу вам, как добавлять и удалять параметры стиля из блоков.
Стили блоков позволяют авторам легко изменять внешний вид блока без какого-либо кода. При редактировании блока с доступными стилями нажмите на значок "преобразовать" в левом верхнем углу, чтобы изменить стили.
Вот варианты стиля, доступные в моей теме для блока цитат:
Технически это просто CSS-классы, добавленные в блок. Используя пользовательский интерфейс Block Styles для предварительного просмотра и выбора различных стилей, вашим клиентам не нужно будет запоминать конкретные имена классов.
Вы можете добавить стили блоков к любому типу блоков в Gutenberg: core blocks и custom blocks from plugins. См. мою заметку внизу о поиске имени блока, чтобы вы могли прикрепить к нему свои пользовательские стили.
Добавление скрипта в Редактор
Нам нужно будет создать файл JavaScript в вашей теме или плагине и загрузить его в Редактор блоков. Вы можете использовать такой хук как enqueue_block_editor_assets для загрузки ресурсов в Редактор блоков. Он работает так же, как и при wp_enqueue_scripts загрузке активов во фронтэнд сайта.
Создайте пустой editor.js файл в каталоге /your-theme/assets/js/. Затем добавьте следующее в файл functions.php вашей темы:
/**
* Gutenberg scripts and styles
* @link https://www.billerickson.net/block-styles-in-gutenberg/
*/
function be_gutenberg_scripts() {
wp_enqueue_script(
'be-editor',
get_stylesheet_directory_uri() . '/assets/js/editor.js',
array( 'wp-blocks', 'wp-dom' ),
filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );
Добавление Стилей Блоков
Я работаю над сайтом с двумя стилями заголовков.
В мой файл editor.js я добавляю варианты стиля ”Default“ и ”Alternate":
wp.domReady( () => {
wp.blocks.registerBlockStyle( 'core/heading', [
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'alt',
label: 'Alternate',
}
]);
} );
При выборе стиля, к блоку применяется класс .is-style-{name}. Таким образом, в моей таблице стилей h2 { } есть мой стиль по умолчанию и h2.is-style-alt { } мой альтернативный стиль.
Зачем регистрировать стиль по умолчанию?
Селектор стиля блока позволяет выбрать, какой стиль вы хотите применить, но не позволяет отменить выбор после того, как вы выбрали стиль. Если вы зарегистрируете только один стиль, а затем выберете его для блока, нет никакого способа снять этот параметр стиля блока и вернуться к стилю по умолчанию.
Я регистрирую дополнительную опцию стиля под названием "Default” или "Regular", но не добавляю никаких конкретных стилей для этой опции стиля. Когда пользователь выбирает стиль «по умолчанию» для h2, он использует h2 {} стиль, а не более конкретный h2.is-style-default{ }.
Если вы добавите isDefault: true стиль, то он будет помечен как активный для блоков, которые еще не имеют указанного стиля.
Удаление стилей блоков
При стилизации кнопок в Редакторе блоков Гутенберга я обычно не хочу использовать стандартные для WordPress параметры стиля: rounded, square и outline.
Вы можете использовать unregisterBlockStyle для удаления существующих блочных стилей из блока. Добавьте следующий код в файл editor.js описанный выше:
wp.domReady( () => {
wp.blocks.unregisterBlockStyle(
'core/button',
[ 'default', 'outline', 'squared', 'fill' ]
);
} );
Я часто удаляю значения по умолчанию, а затем загружаю свои собственные параметры стиля кнопок:
wp.domReady( () => {
wp.blocks.unregisterBlockStyle(
'core/button',
[ 'default', 'outline', 'squared', 'fill' ]
);
wp.blocks.registerBlockStyle(
'core/button',
[
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'full',
label: 'Full Width',
}
]
);
} );
Вы также можете полностью удалить блоки из редактора.
Список имен блоков
Вам нужно знать Полное имя блока, чтобы присоединять или удалять стили из него. Вот список всех основных блоков по состоянию на WordPress 5.4 (исключая все встраиваемые):
- core/archives
- core/audio
- core/button
- core/buttons
- core/calendar
- core/categories
- core/classic
- core/code
- core/column
- core/columns
- core/cover
- core/file
- core/latest-comments
- core/latest-posts
- core/legacy-widget
- core/gallery
- core/group
- core/heading
- core/html
- core/image
- core/list
- core/media-text
- core/more
- core/navigation
- core/navigation-link
- core/nextpage
- core/paragraph
- core/preformatted
- core/pullquote
- core/quote
- core/rss
- core/search
- core/separator
- core/shortcode
- core/social-link
- core/social-links
- core/spacer
- core/subhead
- core/table
- core/tag-cloud
- core/text-columns
- core/verse
- core/video
- core/widget-area
Поиск названия блока
Простой способ найти имя блока заключается в том, чтобы вставить блок на страницу, а затем вывести экранированную версию post_content, чтобы увидеть, что хранится.
Я использую ea_pp() ниже (код здесь), но вы также можете использовать print_r().
/**
* Display Post Blocks
*
*/
function ea_display_post_blocks() {
global $post;
ea_pp( esc_html( $post->post_content ) );
}
add_action( 'wp_footer', 'ea_display_post_blocks' );
