В предыдущем посте мы узнали все о вариациях стилей блоков и о том, как они используются в новом редакторе WordPress 5.0 для простого переключения между предопределенными стилями.

В этом посте мы пойдем немного дальше, предоставив больше примеров, чтобы дать вам прочную основу для реализации вариаций стиля блока в ваших собственных проектах. В частности, мы создадим наш собственный блок с нуля, чтобы продемонстрировать, как добавить несколько вариантов стиля непосредственно в само определение блока. Я также покажу вам, как установить, какой стиль блока используется, поскольку по умолчанию также рассматривается.

Затем мы рассмотрим расширение нашего блока путем добавления дополнительных вариаций стиля блока (для краткости BSV) через отдельный плагин. Обычно вы хотели бы сделать это, если вам нужно расширить стили блока, но у вас нет доступа к исходному коду блока.

Тот же подход будет использоваться снова, но на этот раз через дочернюю тему. Возможно, вы захотите сделать это, чтобы предоставить дополнительные вариации стилей для основных блоков, чтобы они соответствовали вашим собственным стилям темы.

Так же важно, как и регистрация новых стилей, так же, как и их не регистрировать. И есть специальная функция, которую мы будем использовать для этого.

Весь код для этого руководства доступен для загрузки нашего репозитория GitHub справа, поэтому вам не нужно вводить код вручную, если вы просто хотите следовать.

Регистрация BSV внутри блока

Если у вас есть доступ к исходному коду блока, вы можете управлять вариациями стиля блока непосредственно внутри registerBlockType (). Давайте внимательнее посмотрим.

Во-первых, нам нужно раскрутить новый блок. На самом деле не имеет значения, что делает блок, поскольку нам просто нужно что-то добавить, чтобы добавить наши собственные вариации стиля блока. Вероятно, самый простой способ сделать это — использовать утилиту create-guten-block, которая создает новый плагин и добавляет образец блока, готовый для настройки. И делает это все из одной команды терминала!

Если вы не пользовались этой удобной утилитой ранее, вы можете посмотреть репозиторий проекта для получения дополнительной информации. Кроме того, вот специальное учебное пособие, чтобы научить вас быстро, если это необходимо.

В Вашем местном WordPress папка плагина откройте окно командной строки и войдите:

npx create-guten-block bsv-plugin

Я использовал bsv-плагин здесь для названия, но вы можете использовать все что угодно. Через пару минут после завершения установки введите:

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 () теперь должна выглядеть так:

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 (например, прямо под свойством ключевых слов здесь будет работать).

styles: [
{
name: «style1»,
label: __(«Style 1»),
isDefault: true
},
{
name: «style2»,
label: __(«Style 2»)
},
{
name: «style3»,
label: __(«Style 3»)
}
],

Это регистрирует три новых варианта стиля для нашего пользовательского блока. Обратите внимание, что для варианта стиля блока с именем style1 свойство isDefault имеет значение true. Это просто выбирает вариант стиля блока Style 1, когда вы открываете параметры блока в редакторе. На самом деле он не устанавливает классы CSS для блока, как вы могли подумать.

Когда я впервые начал работать с вариациями блочного стиля, это стало для меня камнем преткновения, и это стало источником путаницы. Надеемся, что в будущем свойство isDefault также вызовет добавление класса CSS в оболочку блока, которая, на мой взгляд, более интуитивна.

Обновите страницу редактора и откройте параметры варианта стиля, щелкнув значок в левом верхнем углу блока, чтобы увидеть три варианта стиля блока, которые мы только что определили.

Обратите внимание, как по умолчанию выбран вариант стиля блока Style 1, который мы указали в свойстве styles выше. Выбор любого из трех вариантов стиля блока приводит к добавлению различных классов CSS в оболочку блока. Например, выбор Style 2 добавляет класс is-style-style2.

В настоящее время ничего не происходит при выборе каждого варианта стиля блока, поэтому давайте добавим несколько основных стилей, чтобы это исправить. В . bsv-plugin src block style.scss добавьте следующее после существующих стилей:

.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 добавьте следующий код:

<?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 добавьте внешний код:

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 добавьте сами стили:

.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 в блоке кнопок, вы можете использовать:

wp.blocks.unregisterBlockStyle(«core/button», «outline»);

Тем не менее, сейчас, похоже, есть проблема с этим. Это работает, если вы вводите вышеуказанную строку кода в окне консоли, но не всегда работает, когда используется из плагина. Надеемся, что эти проблемы будут решены в ближайшее время.

Регистрация BSV через тему

В нашем последнем примере давайте добавим еще один вариант стиля в основной блок кнопок, чтобы добавить опцию для рендеринга кнопок с градиентным цветом фона, а не просто с плоским цветом.

На этот раз мы реализуем этот новый вариант стиля с помощью дочерней темы, так как я думаю, что это будет обычным вариантом использования альтернативных стилей для блоков, которые соответствуют вашей собственной теме. (Тема также включена в загружаемый файл для этого урока, если вы не хотите создавать ее вручную.)

Я использую Twenty Nineteen в качестве родительской темы, так как она включена в WordPress 5.0, но вы можете использовать ее для любой родительской темы.

Создайте новую папку, состоящую из двадцати девяти дочерних элементов, в вашей локальной папке WordPress. wp-content themes и добавьте четыре файла:

  • style.css 
  • functions.php 
  • tnc_bsv.js
  • tnc_bsv.css

Мы не будем добавлять какие-либо конкретные стили дочерних тем в style.css, но нам нужно включить их, чтобы тема распознавалась WordPress.

В style.css добавьте:

/*
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: http://www.gnu.org/licenses/gpl-2.0.html
*/

Файлы JavaScript и CSS ставятся в очередь с помощью functions.php, поэтому добавьте в этот файл следующий код:

<?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() . ‘/tnc_bsv.js’
);
}
add_action( ‘enqueue_block_editor_assets’, ‘tnc_add_scripts’ );

В tnc_bsv.js добавьте код для регистрации нашего варианта стиля блока:

jQuery(document).ready(function($) {
wp.blocks.registerBlockStyle(«core/button», {
name: «gradient»,
label: «Gradient»
});
});

Наконец, CSS для нашего варианта стиля блока добавлен в tnc_bsv.css:

.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:

jQuery(document).ready(function($) {
// …
});

Это на самом деле не является строго необходимым. Казалось, что во время тестирования код работал без оболочки jQuery. Тем не менее, пока нет никаких официальных указаний о том, как добавить код JavaScript, который взаимодействует с новым API редактора. В то же время, возможно, было бы целесообразно продолжать использовать описанный выше метод-обертку jQuery, но выбор за вами.

Скачать код 

Как уже упоминалось, код доступен для скачивания через ссылку GitHub в правой части страницы.

Этот репозиторий содержит тему и два плагина, которые мы разработали в этом уроке. Когда вы загрузите содержимое, вы увидите три папки. Добавьте папку twentynineteen-child в папку с темой . wp-content themes и две другие папки с плагинами в папку с плагинами . wp-content plugins.

Активируйте оба плагина и тему, чтобы сделать вариации стиля блока доступными в новом редакторе WordPress.

Заключение 

Спасибо, что присоединились ко мне в этом уроке! Я надеюсь, что теперь у вас есть представление о вариациях блочного стиля. Дайте мне знать в комментариях, какие идеи вы могли бы использовать для своих собственных проектов.

Я уверен, что это будет широко используемая функция нового редактора как разработчиками плагинов, так и разработчиками тем. В частности, для разработчиков тем это дает вам широкие возможности для настройки стилей блоков в соответствии со стилями вашей темы.

Источник: code.tutsplus.com