У цій публікації ми дізнаємося, як додати панелі інструментів 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.blockEditorпакета.
Зауважте, що я виключив вміст усього, що ми створили InspectorControlsна попередньому кроці, щоб скоротити код.
Між рядком #37до #42знаходиться весь вміст нашої панелі інструментів (крім вирівнювання блоків, автоматично доданого supportsвластивістю, і форматування тексту, доданого нашими RichTextкомпонентами). Ми використовуємо BlockControlsдля доступу до панелі інструментів, а всередину додаємо AlignmentToolbarкомпонент.
Як ми робили кілька разів із вхідними даними, ми надаємо valueпідказку для показу збереженого значення та onChangeпідказку для оновлення нашого атрибута до AlignmentToolbarкомпонента. Атрибут, який ми будемо використовувати для збереження вибраного вирівнювання тексту, визначається як textAlignmentі має бути type 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 dashicon або SVG у проп icon. Ми можемо надати деякі інші атрибути, такі як classNameі label(з’являтиметься у підказці, якщо навести курсор на кнопку). Проп, який нас найбільше цікавить, — це, очевидно, onClickпроп, який спрацьовує, коли натискається кнопка. Тут ми можемо надати функцію і, по суті, робити все, що хочемо. Можливості безмежні й залежать від того, що ви хочете робити. У наведеному вище коді я просто консольно реєструю щось, коли натискається кнопка. У міру просування цієї серії посібників ви, ймовірно, отримаєте ідеї, як зробити так, щоб ваша спеціальна кнопка робила те, що ви хочете.
Це те, що ми зробили досі. На наступному кроці серії ми почнемо розглядати більш просунуті речі та навчимося створювати власні компоненти, щоб використовувати державні та інші переваги.