В предыдущем посте мы узнали все о вариациях стиля блоков и о том, как они используются в новом редакторе WordPress 5.0 для простого переключения между предопределенными стилями.
В этом посте мы пойдем немного дальше, предоставив больше примеров, чтобы дать вам прочную основу для реализации вариаций стиля блока в ваших собственных проектах. В частности, мы создадим наш собственный блок с нуля, чтобы продемонстрировать, как добавить несколько вариантов стиля непосредственно в само определение блока. Я также покажу вам, как установить, какой стиль блока используется по умолчанию.
Затем мы рассмотрим расширение нашего блока путем добавления дополнительных вариаций стиля блока (для краткости BSV) через отдельный плагин. Как правило, вы захотите сделать это, если вам нужно расширить стили блока, но у вас нет доступа к исходному коду блока.
Мы снова будем использовать тот же подход, но на этот раз через дочернюю тему. Возможно, вы захотите сделать это, чтобы обеспечить дополнительные вариации стилей для основных блоков, чтобы они соответствовали вашим собственным стилям темы.
Так же важно, как и регистрация новых стилей, как их отменить. И есть специальная функция, которую мы будем использовать для этого.
Весь код для этого руководства доступен для загрузки с нашего репозитория GitHub справа, поэтому вам не нужно вводить код вручную, если вы просто хотите следовать.
Регистрация BSV внутри блока
Если у вас есть доступ к исходному коду блока, вы можете управлять вариациями стиля блока непосредственно внутри registerBlockType() . Давайте внимательнее посмотрим.
Во-первых, нам нужно раскрутить новый блок. На самом деле не имеет значения, что делает блок, поскольку нам просто нужно что-то, чтобы добавить наши собственные стили стиля блока. Вероятно, самый простой способ сделать это — использовать утилиту create-guten-block , которая создает новый плагин и добавляет образец блока, готовый для настройки. И делает это все из одной команды терминала!
Если вы не пользовались этой удобной утилитой раньше, вы можете посмотреть репозиторий проекта для получения дополнительной информации. Кроме того, вот специальное учебное пособие, чтобы научить вас быстро, если это необходимо.
Внутри вашей локальной папки плагинов WordPress откройте окно командной строки и введите:
|
1
|
npx create-guten-block bsv-plugin
|
Я использовал здесь имя bsv-plugin , но вы можете использовать все что угодно. Через пару минут после завершения установки введите:
|
1
2
|
cd bsv-plugin
npm start
|
Теперь мы можем отредактировать исходный код для нашего вновь созданного блока, и create-guten-block автоматически скомпилирует для нас исходный код после каждого изменения. Ницца.
Идите дальше и активируйте плагин внутри администратора WordPress и добавьте экземпляр вашего нового блока в редактор, создав новую страницу или отредактировав существующую.
Удалить стили только для редактора
Однако прежде чем идти дальше, нам просто нужно изменить способ, которым CSS ставится в очередь по умолчанию.
Пользовательский блок create-guten-block созданный для нас, включает две таблицы стилей. Один ставится в очередь в редакторе, а другой ставится в очередь в редакторе и интерфейсе пользователя. Для этого урока нам не нужны стили только для редактора, поэтому в . \ Bsv-plugin \ src \ init.php закомментируйте или удалите вызов wp_enqueue_style() в bsv_plugin_cgb_editor_assets() .
Оставаясь в init.php на мгновение, мы также должны закомментировать массив зависимостей для wp_enqueue_style() в bsv_plugin_cgb_block_assets() как по какой-то причине это в настоящее время препятствует правильному постановке в очередь стилей. В этом руководстве я использую create-guten-block v1.11.0, поэтому у вас может возникнуть или не возникнуть одна и та же проблема в зависимости от используемой версии.
Функция bsv_plugin_cgb_block_assets() теперь должна выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
|
function bsv_plugin_cgb_block_assets() {
// Styles.
wp_enqueue_style(
‘bsv_plugin-cgb-style-css’, // Handle.
plugins_url( ‘dist/blocks.style.build.css’, dirname( __FILE__ ) ) // Block style CSS.
//array( ‘wp-blocks’ ) // Dependency to include the CSS after it.
// filemtime( plugin_dir_path( __DIR__ ) . ‘dist/blocks.style.build.css’ ) // Version: filemtime — Gets file modification time.
);
} // End function bsv_plugin_cgb_block_assets().
|
Теперь, когда вы загрузите страницу, вы увидите стили блоков, которые применяются в редакторе и во внешнем интерфейсе, что мы и хотим.
Регистрация блочных вариаций стиля
Мы все настроены сейчас, чтобы добавить наш собственный CSS, что мы и сделаем в ближайшее время. Однако сначала нам нужно зарегистрировать наши вариации стиля блока.
Откройте файл. \ Bsv-plugin \ src \ block \ block.js и добавьте следующее в объект конфигурации функций registerBlockType (например, прямо под свойством keywords здесь будет работать).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
styles: [
{
name: «style1»,
label: __(«Style 1»),
isDefault: true
},
{
name: «style2»,
label: __(«Style 2»)
},
{
name: «style3»,
label: __(«Style 3»)
}
],
|
Это регистрирует три новых варианта стиля для нашего пользовательского блока. Обратите внимание, что для варианта стиля блока с именем isDefault свойство style1 имеет isDefault true . Это просто выбирает вариант стиля блока Style 1, когда вы открываете параметры блока в редакторе. На самом деле он не устанавливает классы CSS для блока, как вы могли подумать.
Когда я впервые начал работать с вариациями блочного стиля, это стало для меня камнем преткновения, и это стало источником большого замешательства. Надеемся, что в будущем свойство isDefault также вызовет добавление класса CSS в оболочку блока, что, на мой взгляд, более интуитивно понятно.
Обновите страницу редактора и откройте параметры варианта стиля, щелкнув значок в левом верхнем углу блока, чтобы увидеть три варианта стиля блока, которые мы только что определили.
Обратите внимание, как по умолчанию выбран вариант стиля блока Style 1 , который мы указали в свойстве styles выше. Выбор любого из трех вариантов стиля блока приводит к добавлению различных классов CSS в оболочку блока. Например, выбор Style 2 добавляет класс is-style-style2 .
В настоящее время ничего не происходит при выборе каждого варианта стиля блока, поэтому давайте добавим несколько основных стилей, чтобы это исправить. В. \ Bsv-plugin \ src \ block \ style.scss добавьте следующее после существующих стилей:
|
1
2
3
4
5
6
7
8
|
.wp-block-cgb-block-bsv-plugin.is-style-style2 {
background: pink;
}
.wp-block-cgb-block-bsv-plugin.is-style-style3 {
background: purple;
color: white;
}
|
Здесь мы добавляем только пользовательские стили для вариаций стилей блоков Style 2 и Style 3 , так что стили блоков по умолчанию применяются по-прежнему, даже если ни один вариант стиля блока не был специально выбран.
Как видите, наши вариации стилей блоков теперь доступны с примененными стилями. Мне очень нравится, как вы можете видеть предварительный просмотр каждого варианта стиля при наведении курсора, а также без необходимости выбирать его сначала!
Регистрация BSV через плагин
Если вы хотите добавить вариации стиля в блок, к которому у вас нет доступа к исходному коду, вы можете использовать registerBlockStyle() . Эта функция позволяет вам определять дополнительные вариации стиля для основных блоков и сторонних блоков вне registerBlockType() .
Давайте проверим это, добавив пару наших собственных вариаций стиля в основной блок кнопок. Этот блок поставляется с тремя уже определенными вариациями стиля: закругленный , контурный и квадратный .
Мы добавим еще два наших собственных стиля: Pill Shaped и Uppercase .
Однако, прежде чем мы сделаем это, нам нужен плагин для хранения нашего пользовательского кода. Я не буду подробно останавливаться на этом, так как основное внимание в этом руководстве уделяется вариациям блочного стиля, а не разработке плагинов. Если после этого у вас возникнут какие-либо проблемы, вы можете просто загрузить готовый плагин по ссылке GitHub справа.
Создайте новую папку bsv в локальной папке WordPress . \ Wp-content \ plugins и добавьте три файла:
- bsv.php
- bsv.js
- bsv.css
В bsv.php добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<?php
/*
Plugin Name: Block Style Variations
Version: 0.1
Description: Demonstrates how to add block style variations to an existing block.
Author: David Gwyer
Author URI: https://www.wpgoplugins.com
*/
// editor scripts
function bsv_editor($hook) {
wp_enqueue_script( ‘bsv_js’, plugins_url( ‘bsv.js’, __FILE__ ) );
}
add_action(‘enqueue_block_editor_assets’, ‘bsv_editor’);
// frontend and editor scripts
function bsv_frontend_editor($hook) {
wp_enqueue_style( ‘bsv_css’, plugins_url( ‘bsv.css’, __FILE__ ) );
}
add_action(‘enqueue_block_assets’, ‘bsv_frontend_editor’);
|
В bsv.js добавьте внешний код:
|
01
02
03
04
05
06
07
08
09
10
11
|
jQuery(document).ready(function($) {
wp.blocks.registerBlockStyle(«core/button», {
name: «upper-case»,
label: «Upper Case»
});
wp.blocks.registerBlockStyle(«core/button», {
name: «pill»,
label: «Pill Shaped»
});
});
|
И в bsv.css добавьте сами стили:
|
1
2
3
4
5
6
7
|
.wp-block-button.is-style-upper-case {
text-transform: uppercase;
}
.wp-block-button.is-style-pill .wp-block-button__link {
border-radius: 30px !important;
}
|
Активируйте плагин и вставьте новый экземпляр блока кнопок в редактор. Теперь вы должны увидеть две новые вариации стиля блока!
Понимание кода плагина BSV
Давайте рассмотрим, что мы только что сделали. В bsv.php файл JavaScript был поставлен в очередь через хук enqueue_block_editor_assets поэтому он загружается только в редактор администратора. Однако мы хотим, чтобы CSS загружался в редакторе и интерфейсе, поэтому для этого мы используем хук enqueue_block_assets .
Стили довольно понятны, но обратите внимание, как мы нацелены на экземпляры блоков с помощью определенных классов вариаций стилей блоков. Это дает нам простой способ выделить наш CSS для различных вариаций стиля блока.
Здесь важно обратить внимание на два вызова registerBlockStyle() . Эта функция находится в глобальном объекте wp.blocks , поэтому нам нужно явно включить префикс везде, где используется эта функция.
registerBlockStyle() принимает два аргумента. Первый — это имя блока, к которому вы хотите добавить вариацию стиля, а второй — объект конфигурации. Это точно тот же объект, с которым мы сталкивались ранее, когда добавляли вариации стиля блока непосредственно в определение блока через свойство styles .
Здесь следует отметить одну вещь: если вы добавите isDefault: true для изменения стиля блока с помощью registerBlockStyle() , оно будет проигнорировано, если изменение стиля по умолчанию уже установлено. Просто что-то, на что нужно обратить внимание, если (как и я) вы ожидаете, что оно переопределит изменение стиля по умолчанию.
Согласно документации, вы также можете отменить регистрацию варианта стиля блока с помощью unregisterBlockStyle() . Использование очень похоже на registerBlockStyle() , но вам нужно только указать имя блока и имя варианта стиля.
Так, например, чтобы отменить регистрацию варианта стиля Outline в блоке кнопок, вы можете использовать:
|
1
|
wp.blocks.unregisterBlockStyle(«core/button», «outline»);
|
Тем не менее, сейчас, похоже, есть проблема с этим. Это работает, если вы вводите вышеуказанную строку кода в окне консоли, но не всегда работает, когда используется из плагина. Надеемся, что эти вопросы будут решены в ближайшее время.
Регистрация BSV через тему
В нашем последнем примере давайте добавим еще один вариант стиля в основной блок кнопок, чтобы добавить опцию для рендеринга кнопок с градиентным цветом фона, а не просто с плоским цветом.
На этот раз мы реализуем этот новый вариант стиля с помощью дочерней темы, так как я думаю, что это будет обычным вариантом использования альтернативных стилей для блоков, которые соответствуют вашей собственной теме. (Тема также включена в загружаемый файл для этого урока, если вы не хотите создавать ее вручную.)
Я использую Twenty Nineteen в качестве родительской темы, так как она включена в WordPress 5.0, но вы можете использовать ее для любой родительской темы.
Создайте новую twentynineteen-child в вашей локальной папке WordPress . \ Wp-content \ themes и добавьте четыре файла:
- style.css
- functions.php
- tnc_bsv.js
- tnc_bsv.css
Мы не будем добавлять какие-либо конкретные стили дочерних тем в style.css , но нам нужно включить их, чтобы тема распознавалась WordPress.
В style.css добавьте:
|
1
2
3
4
5
6
7
8
9
|
/*
Theme Name: Twenty Nineteen Child
Author: David Gwyer
Author URI: https://wpgoplugins.com/
Template: twentynineteen
Version: 0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
|
Файлы JavaScript и CSS ставятся в очередь с помощью functions.php , поэтому добавьте в этот файл следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
// tnc = twenty nineteen child
// Include parent theme styles
function tnc_enqueue_parent_theme_styles() {
wp_enqueue_style( ‘parent-theme-styles’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘tnc_enqueue_parent_theme_styles’ );
function tnc_add_styles() {
wp_enqueue_style( ‘tnc-bsv-css’, get_stylesheet_directory_uri() . ‘/tnc_bsv.css’ );
}
add_action(‘enqueue_block_assets’, ‘tnc_add_styles’);
function tnc_add_scripts() {
wp_enqueue_script(
‘tnc-bsv-js’,
get_stylesheet_directory_uri() .
);
}
add_action( ‘enqueue_block_editor_assets’, ‘tnc_add_scripts’ );
|
В tnc_bsv.js добавьте код, чтобы зарегистрировать наш вариант стиля блока:
|
1
2
3
4
5
6
|
jQuery(document).ready(function($) {
wp.blocks.registerBlockStyle(«core/button», {
name: «gradient»,
label: «Gradient»
});
});
|
Наконец, CSS для нашего варианта стиля блока добавлен в tnc_bsv.css :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
.wp-block-button.is-style-gradient .wp-block-button__link {
background: linear-gradient(
to bottom,
#6db3f2 0%,
#54a3ee 50%,
#3690f0 51%,
#1e69de 100%
) !important;
}
.wp-block-button.is-style-gradient .wp-block-button__link:hover {
opacity: 0.9;
cursor: pointer;
}
|
Код почти такой же, как и плагин, который мы создали в последнем примере, чтобы добавить два новых варианта стиля блока. Все, что мы здесь делаем, это добавляем еще один, но на этот раз через дочернюю тему.
Активируйте тему, а затем добавьте блок кнопок в редактор, чтобы увидеть наше новое творение.
Возможно, вы заметили, что я обернул код JavaScript внутри оператора jQuery:
|
1
2
3
|
jQuery(document).ready(function($) {
// …
});
|
Это на самом деле не является строго необходимым. Во время тестирования код работал нормально без оболочки jQuery. Тем не менее, пока нет никаких официальных рекомендаций о том, как добавить код JavaScript, который взаимодействует с новым API редактора. В то же время, возможно, было бы целесообразно продолжать использовать описанный выше метод jQuery-оболочки, но выбор за вами.
Скачать код
Как уже упоминалось, код доступен для скачивания по ссылке GitHub в правой части страницы.
Этот репозиторий содержит тему и два плагина, которые мы разработали в этом уроке. Когда вы загрузите содержимое, вы увидите три папки. Добавьте папку twentynineteen-child в папку с темой . \ Wp-content \ themes, а две другие папки с плагинами — в папку с плагинами. \ Wp-content \ plugins .
Активируйте оба плагина и тему, чтобы сделать вариации стиля блока доступными в новом редакторе WordPress.
Вывод
Спасибо, что присоединились ко мне в этом уроке! Я надеюсь, что теперь у вас есть представление о вариациях блочного стиля. Дайте мне знать в комментариях, какие идеи вы могли бы использовать для своих собственных проектов.
Я уверен, что это будет широко используемая функция нового редактора как разработчиками плагинов, так и разработчиками тем. В частности, для разработчиков тем это дает вам широкие возможности для настройки стилей блоков в соответствии со стилями вашей темы.