Використовуйте модальне спливаюче вікно, щоб додати додаткові атрибути за допомогою registerBlockFormat
Ми розглянули Застосування форматів до вмісту вашої публікації за допомогою registerFormatType. Але що, якщо ми хочемо додати додаткові кольори до нашої маркерної ручки?
У цьому посібнику ми розширимо те, над чим працювали раніше, і додамо модальне спливаюче вікно, яке дозволить нам вибрати колір підсвічування.
Зауважте, що в цьому модальному спливаючому вікні може міститися будь-яка кількість елементів, у тому числі спеціальні значки, зображення чи навіть поля форми.
Увесь код, який використовується в цьому підручнику, можна знайти в безкоштовному плагіні Highlighter.
Застосування типу формату за допомогою плагіна Highlighter.
У відео вище показано плагін Highlighter, наш тип формату та спливаюче вікно в дії. Переходимо до нього.
передумови
- Прочитайте посібник «Створення плагіна для редактора блоків WordPress» (Gutenberg), щоб почати створювати плагін.
- Дотримуйтеся вказівок у статті Форматування вмісту публікації за допомогою registerFormatType.
- За бажанням завантажте безкоштовний плагін «Highlighter» із GitHub і перегляньте файл
/src/formats/highlight-colours.js
Створіть Modal
Щоб створити модальне спливаюче вікно, ми будемо використовувати стан, щоб визначити, натиснуто кнопку чи ні. Для цього імпортуйте useStateз '@wordpress/element'.
У компоненті кнопки, над інструкцією return, ми збираємося використовувати це для встановлення початкового стану та створення наших функцій встановлення стану.
// State to show popover.
const [ showPopover, setShowPopover ] = useState( false );
Потім ми збираємося змінити подію натискання кнопки, щоб встановити стан.
onClick={() => {
setShowPopover( true );
} }
Тепер, коли стан встановлено, ми можемо використовувати це для запуску спливаючого повідомлення. Спочатку імпортуйте URLPopoverкомпонент із '@wordpress/block-editor'. Потім у операторі return під кнопкою додайте умовний оператор, який приймає showPopoverзмінну та відображає URLPopover.
return (<>
<RichTextToolbarButton
icon='edit'
onClick={() => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
...
</URLPopover>) }
</>) Зверніть увагу, що ми обернули два компоненти порожніми тегами <></>. Вони служать меті <Fragment>тегу та дозволяють відображати два компоненти JSX без виведення розмітки на зовнішній інтерфейс.
Додайте модальний спливаючий вміст
Оскільки це плагін підсвічування, ми збираємося імпортувати ColorPaletteз '@wordpress/block-editor'нього та розмістити його в модальному спливаючому вікні.
<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
onChange={ (color) => {
setShowPopover( false );
if (color) {
onChange(
applyFormat( value, {
type: name,
attributes: { style: `background-color: ${color};` },
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>
Наведений вище код використовуватиме стандартну палітру кольорів у спливаючому вікні. Щоб додати власні кольори, знадобиться більше роботи.
Кодекс повністю
Щоб продемонструвати, як ми додаємо власні кольори до палітри, можливо, найкраще показати повний код. Ви також можете завантажити цей файл разом із останніми оновленнями з Github.
import { ColorPalette, RichTextToolbarButton, URLPopover } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { applyFormat, registerFormatType, toggleFormat, useAnchorRef } from '@wordpress/rich-text';
import '../style.scss';
const name = 'wholesome/highlighter';
const cssClass = 'wholesome-highlight';
const HighlighterButton = (props) => {
const { contentRef, isActive, onChange, value } = props;
const { activeFormats } = value;
const anchorRef = useAnchorRef( { ref: contentRef, value } );
const highlighterIcon = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2186 3.31061C13.7838 2.89252 13.0834 2.89708 12.6543 3.32078L9.22512 6.70711C9.17494 6.75668 9.13068 6.80978 9.09236 6.86558L7.36613 8.57021L11.393 12.4419L16.362 7.50771L16.6812 7.1925C17.1103 6.76879 17.1056 6.08638 16.6708 5.66828L14.2186 3.31061Z" fill="black"/>
<path d="M6.81914 9.10588L10.8041 12.9457L9.79592 13.9391C9.42424 14.3053 8.84982 14.3575 8.42039 14.0938L7.83675 13.8883L7.01822 14.6819L5.03321 12.7381L5.86163 11.9349L5.67624 11.454C5.39121 11.0373 5.43547 10.4692 5.811 10.0992L6.81914 9.10588Z" fill="black"/>
<path d="M5.11329 13.6189L6.13911 14.5945L5.70907 15L4 14.592L5.11329 13.6189Z" fill="black"/>
</svg>;
const [ showPopover, setShowPopover ] = useState( false );
const [ activeColor, setActiveColor ] = useState( false );
const colors = [
{ name: 'Yellow', color: '#fff300' },
{ name: 'Green', color: '#79fe0c' },
{ name: 'Blue', color: '#4af1f2' },
{ name: 'Purple', color: '#df00ff' },
{ name: 'Red', color: '#ff2226' },
{ name: 'Orange', color: '#ff7b19' },
{ name: 'Pink', color: '#ff70c5' },
];
const getActiveColor = () => {
const formats = activeFormats.filter( format => name === format['type'] );
if (formats.length > 0) {
const format = formats[0];
const { attributes, unregisteredAttributes } = format;
let atts = unregisteredAttributes;
if (attributes && attributes.length) {
atts = attributes;
}
if (! atts) {
if (activeColor) {
return { backgroundColor: activeColor };
}
return;
}
if (atts.hasOwnProperty('class')) {
const parts = atts.class.split( '--' );
const colorName = parts[ parts.length - 1 ];
const selectedColor = colors.filter( item => colorName === item.name.toLowerCase() )[0];
return { backgroundColor: selectedColor.color };
} else if (atts.hasOwnProperty('style')) {
const { style } = atts;
const parts = style.split( ': ' );
const selectedColor = parts[ parts.length - 1 ].replace( ';', '' );
return { backgroundColor: selectedColor };
}
}
};
return (<>
<RichTextToolbarButton
icon={
<>
<Icon icon={ highlighterIcon } />
{ isActive && (<span
className="format-library-text-color-button__indicator"
style={ getActiveColor() }
/>) }
</>
}
key={ isActive? 'text-color': 'text-color-not-active' }
name={ isActive? 'text-color': undefined }
onClick={ () => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
anchorRef={ anchorRef }
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
colors={ colors }
onChange={ (color) => {
setShowPopover( false );
setActiveColor( color );
if (color) {
const selectedColor = colors.filter( item => color === item.color );
const attributes = {};
if (selectedColor.length) {
attributes.class = `${cssClass}--${selectedColor[0].name.toLowerCase()}`;
} else {
attributes.style = `background-color: ${color};`;
}
onChange(
applyFormat( value, {
type: name,
attributes,
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>) }
</>) };
registerFormatType(
name, {
className: cssClass,
edit: HighlighterButton,
tagName: 'mark',
title: __( 'Highlight', 'wholesome-highlighter' ),
}
);
Обов’язково встановіть кольори для своїх користувацьких кольорів у /src/style.scssфайлі, і ось у вас є формат маркера з кольоровою палітрою.
.wholesome-highlight {
&.wholesome-highlight--yellow {
background-color: #fff300;
}
&.wholesome-highlight--green {
background-color: #79fe0c;
}
&.wholesome-highlight--blue {
background-color: #4af1f2;
}
&.wholesome-highlight--purple {
background-color: #df00ff;
}
&.wholesome-highlight--red {
background-color: #ff2226;
}
&.wholesome-highlight--orange {
background-color: #ff7b19;
}
&.wholesome-highlight--pink {
background-color: #ff70c5;
}
}
Вибраний колір значка маркера
- Додайте бічну панель блоку за допомогою InspectorControls
- Подивіться на використання мета-полів публікації в блоках Гутенберга
- Подивіться на використання параметрів і налаштувань у блоках Гутенберга
- Подивіться на створення сторінки параметрів і налаштувань за допомогою компонентів Gutenberg