В этом посте мы узнаем, как добавить панели инструментов WordPress в наш блок, то есть для выравнивания и выравнивания блоков. Мы также научимся добавлять собственные панели инструментов с собственными кнопками для выполнения пользовательских действий.
Добавление панелей инструментов
Чтобы добавить что-то на панель инструментов для нашего блока, нам нужно обернуть то, что мы хотим, внутри компонента с именем BlockControls(from wp.blockEditor). Внутри этого компонента мы можем добавить либо один из компонентов WordPress для стандартных панелей инструментов, которые мы знаем из других блоков (например, выравнивание), либо мы можем добавить нашу собственную панель инструментов.
По умолчанию блок будет иметь панель инструментов, содержащую только значок блока (для функциональности преобразования в) и меню блока, например, для удаления блока. Мы не можем удалить их, но мы можем добавить наши собственные кнопки и панели инструментов между ними.
Однако некоторые определенные компоненты WordPress сами по себе добавляют свои собственные панели инструментов. На данный момент наш блок показывает панель инструментов для форматирования текста, которая исходит от RichTextкомпонента, который мы добавили.
Добавление панели инструментов выравнивания блоков
Панель инструментов выравнивания блоков существует практически во всех типах блоков WordPress, поэтому давайте добавим ее и в наш блок. За кулисами существует компонент, BlockAlignmentToolbarкоторый мы могли бы добавить, однако я не рекомендую этого делать. Его использование требует, чтобы вы вручную обрабатывали классы для выравнивания блоков и убеждались, что блок расширяет свою ширину в редакторе при выборе «Широкая ширина» или «Полная ширина». К счастью, WordPress сделал это действительно простым, полностью автоматическим.
PS: Активная тема должна иметь активную поддержку темы для этих двух выравниваний блоков. Вы можете добавить поддержку для них с add_theme_support('align-wide')помощью after_setup_themeкрючка.
Мы можем добавить новое свойство к нашей конфигурации объекта в registerBlockType(), называемое supports. Есть несколько других функций, но нас интересует вот что align. Мы можем либо указать align, чтобы trueдобавить все возможные выравнивания, либо предоставить массив точных выравниваний, которые мы допускаем для нашего блока.
Что дает нам это в редакторе:
Если вы хотите, например, запретить кому-либо использовать Wide Width или Full Width, вы можете предоставить массив и исключить эти два. Названия блоков выравнивания следующие: left, right, center, wideи full.
supports: {
align: ['left', 'right', 'center']
},Нужно выравнивание по умолчанию?
По умолчанию блок не получает блочного выравнивания. Если вы хотите, вы можете установить значение по умолчанию, создав атрибут с ключом align, установите тип stringи установите значение по умолчанию там. WordPress автоматически подключит этот атрибут к выравниванию блока.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},При этом всякий раз, когда создается новый блок нашего типа, выравнивание блока по умолчанию центрируется.
Беспорядок в стиле выравнивания блоков? Не наша вина
Примечание. Стиль блока по умолчанию из WordPress испортит поток содержимого вашего сообщения при использовании выравнивания блока по левому и правому краям. То же самое происходит и с другими типами блоков из WordPress, и это не только проблема нашего блока. Это вызвано добавлением float к элементу, который сворачивает родительский элемент. Поверьте мне, я пытался построить блок, чтобы избежать этой проблемы. Единственное, что я обнаружил, чтобы работать правильно, не связываясь с другими выравниваниями блоков, – это добавить стиль в редактор и настроить стиль плавающего положения.
Несмотря на это, WordPress упростил выравнивание блоков. Теперь давайте посмотрим на другие панели инструментов, которые мы можем использовать.
Добавление панели инструментов выравнивания текста
Если вам нужна панель инструментов для выравнивания текста, вы можете сделать это вместо выравнивания блока — на этой панели инструментов у нас есть только выравнивание по левому краю, по центру и по правому краю. На самом деле вы можете использовать как выравнивание текста, так и выравнивание блоков вместе — они работают по отдельности. Чтобы не путать пользователей, вы можете, например, добавить поддержку только выравнивания блоков по ширине и во всю ширину и использовать панель инструментов выравнивания текста для управления выравниванием по левому краю, по центру или по правому краю. Делая это, вы избегаете упомянутой выше проблемы с потоком блоков в редакторе. Вам решать, как вы хотите, чтобы ваш блок функционировал.
В WordPress есть компонент для вывода панели инструментов выравнивания текста, но нет автоматической обработки добавления правильных классов для фактического выравнивания контента — как внутри редактора, так и во внешнем интерфейсе (насколько я нашел, по крайней мере!). Нам нужно вручную добавить и обновить атрибут для выравнивания текста.
Добавление BlockControlsиAlignmentToolbar
Давайте, наконец, добавим BlockControlsв нашу editфункцию для вывода на панель инструментов. Компонент для выравнивания текста взят AlignmentToolbarиз wp.blockEditorpackage.
Обратите внимание, что я исключил содержимое всего, что мы создали InspectorControlsна предыдущем шаге, чтобы сократить код.
Между строками #37находится #42все содержимое нашей панели инструментов (кроме выравнивания блоков, автоматически добавляемого supportsсвойством, и форматирования текста, добавляемого нашими RichTextкомпонентами). Мы используем BlockControlsдля доступа к панели инструментов, а внутри добавляем AlignmentToolbarкомпонент.
Как мы делали несколько раз с входными данными, мы предоставляем valueреквизит для отображения сохраненного значения и onChangeреквизит для обновления нашего атрибута в AlignmentToolbarкомпоненте. Атрибут, который мы будем использовать для хранения выбранного выравнивания текста, определяется как textAlignmentи должен иметь тип string. Как обычно, вы можете указать, defaultчтобы вновь созданные блоки получали выравнивание по умолчанию.
Чтобы убедиться, что блок выводит информацию о выравнивании, а также получает правильный стиль (чтобы мы действительно видели выравнивание изменения текста) как в редакторе, так и во внешнем интерфейсе, нам нужно вручную настроить правильный класс в обертывающем div. В обоих случаях editя saveопределяю переменную, которая проверяет, attributes.textAlignmentустановлена ли она. Если это так, я создаю имя класса в соответствии со стандартами WordPress для выравнивания текста, то есть «has-text-align-(left|center|right)». С помощью этого класса WordPress применит свой стиль к нашему блоку и убедится, что наш блок визуально правильно выровнен, как в редакторе, так и во внешнем интерфейсе.
Добавление пользовательских панелей инструментов с собственными кнопками
Вы также можете добавить свои собственные кнопки на панель инструментов, чтобы делать все, что вы хотите, при нажатии на них. Для этого вам нужно добавить компонент Toolbarи внутри этого элемента добавить IconButton(оба в wp.componentsпакете). Все внутри BlockControlsконечно.
Примечание. Согласно журналу изменений WordPress Gutenberg IconButtonустарел в пользу использования Button. Однако я не могу заставить значок отображаться с помощью Buttonкомпонента независимо от того, что я делаю, даже если он должен его поддерживать. Так что на данный момент я буду использовать IconButton.
Очевидно, вы можете комбинировать несколько компонентов панели инструментов в файле BlockControls. С помощью приведенного ниже кода мы добавляем панель инструментов выравнивания текста и нашу пользовательскую панель инструментов с одной кнопкой после нее.
Компонент IconButton принимает значок панели инструментов WordPress или SVG в свойство icon. Мы можем предоставить некоторые другие реквизиты, такие как classNameи label(появится во всплывающей подсказке при наведении курсора на кнопку). Свойство, которое нас больше всего интересует, — это, очевидно, onClickсвойство, которое срабатывает при нажатии кнопки. Здесь мы можем предоставить функцию и в основном делать все, что захотим. Возможности безграничны и зависят от того, что вы хотите сделать. В приведенном выше коде я просто записываю что-то в консоль при нажатии кнопки. По мере того, как мы продвигаемся в этой серии руководств, вы, вероятно, получите некоторые идеи о том, как заставить вашу пользовательскую кнопку делать то, что вы хотите.
Это то, что мы сделали до сих пор. На следующем этапе серии мы рассмотрим более сложные вещи и узнаем, как создавать собственные компоненты для использования состояния и других преимуществ.