В предыдущем блоге мы узнали о том, как работают функции edit и save. Они описывают структуру внешнего вида блока. Однако они вернули только простые абзацы. В этом блоге мы узнаем, как можно изменить структуру блока, когда пользователь меняет блок.
Состояние блока:
Чтобы добиться динамического изменения структуры блока, когда пользователь изменяет блок, state of a block сохраняется в сеансе редактирования как простой объект JavaScript.
Каждый раз, когда блок обновляется, вызывается функция редактирования.
Атрибуты:
Чтобы снова извлечь объект JavaScript из сохраненного содержимого сообщения и повторно использовать его, мы используем attribute property. типа блока. Они предоставляют механизм для сопоставления сохраненной разметки с представлением блока в JavaScript.
Источники атрибутов:
Источники атрибутов помогают извлекать значения атрибутов блока из сохраненного содержимого сообщения. Они помогают сопоставить сохраненную разметку с представлением блока в JavaScript. Если attribute source не указан, атрибут будет сохранен (и прочитан) в разделителе комментариев блока.
hpq: источники атрибутов - это расширенный набор функций, предоставляемых hpq, небольшой библиотекой, используемой для синтаксического анализа и запроса HTML-разметки в форме объекта.
Вы можете использовать разные типы источников атрибутов. Например children, attribute, text, html, query, meta
Пример атрибутов source: 'meta'
registerBlockType( 'myguten-block/test-block', {
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p'
},
},
Когда вы определяете эти атрибуты в registerBlockType (), они передаются edit() и save()
source: ‘children’ означает, что он будет искать текст внутри селектора <p>
Как вы используете его в своей функции редактирования:
edit( props ) {let { attributes , setAttributes, className } = props;function onChange( event ) { setAttributes( { author: event.target.value } ); } return <p onChange={ onChange }/>{ attributes.content }</p>; },
После сохранения в базе данных его можно извлечь с помощью props.attributes
save: ( props ) => {
console.log( 'save-props', props );
return (
<p>{ props.attributes.content } </p>
);
}
Разделитель комментариев
Сохраняя данные в комментариях HTML, мы будем знать, что не нарушим остальной HTML в документе, что браузеры должны его игнорировать, и что мы могли бы упростить наш подход к синтаксическому анализу документа.
Давайте создадим атрибут,
registerBlockType( 'myguten-block/test-block', {
title: 'Basic Example',
icon: 'smiley',
category: 'layout',
attributes: {
contentStyle: {
type: 'object',
default: {
color: 'black',
textAlign: 'left'
}
}
},
}
Когда мы не указываем источник в атрибуте contentStyle, данные сохраняются в разделителе комментариев. И его можно извлечь в функции save с помощью props.attributes.contentStyle.
Преимущества использования разделителя комментариев
- В то время как атрибуты HTML сложно правильно проанализировать, комментарии довольно легко описываются начальным
<!-- followed by anything except -- until the first -->. Эта простота и вседозволенность означает, что синтаксический анализатор может быть реализован несколькими способами без необходимости правильного понимания HTML. - Мы можем использовать литералы JSON внутри комментария.
- Эти явные границы также защищают повреждение в одном блоке от перетекания в другие блоки или запятнения всего документа.
Компоненты Гутенберга
Поскольку многие блоки имеют одно и то же сложное поведение, доступны повторно используемые компоненты, чтобы упростить реализацию edit функции вашего блока. Распространенные из них:
- Богатый текст
- BlockControls
- Выравнивание
- Осмотреть
- Цветовая палитра
Вы можете найти компоненты в репозитории Gutenberg git
https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/
Компонент 1-RichText
Вместо того, чтобы создавать узлы DOM с помощью createElement(), мы можем инкапсулировать это поведение с помощью Components. Компоненты обеспечивают возможность повторного использования и позволяют скрыть сложность в их автономных единицах. Есть ряд доступных компонентов. Поговорим об одном из них, который называется RichText компонент. Его можно рассматривать как элемент textarea, который позволяет редактировать расширенное содержимое, включая жирный шрифт, курсив, гиперссылки и т. Д.
Вы можете найти компонент RichText, определенный в https://github.com/WordPress/gutenberg/blob/master/packages /block-editor/src/components/rich-text/index.js
Не забудьте добавить wp-editor в массив зависимостей зарегистрированных дескрипторов скрипта при вызове wp_register_script.
Возвращаемое значение registerBlockType ()
Если вы console log( results ), что возвращает registerBlockType (), вы получите:
attributes:
className: {type: "string"}
__proto__: Object
category: "layout"
edit: ƒ edit(props)
icon: {src: "smiley"}
name: "myguten-block/test-block"
save: ƒ save()
title: "Basic Example"
Реквизиты
Если вы console.log( props ) внутри edit () и когда вы что-то редактируете, вы получаете следующие данные в реквизитах
// Result for console.log( props ); attributes: content: ["h"] __proto__: Object className: "wp-block-myguten-block-test-block" clientId: "be406ad0-a7e6-45ca-b47d-5ff44673b280" insertBlocksAfter: ƒ () isSelected: true isSelectionEnabled: true mergeBlocks: ƒ () name: "myguten-block/test-block" onReplace: ƒ () setAttributes: ƒ () toggleSelection: ƒ ()
2-BlockControls и AlignmentToolbar
Если возвращаемое значение функции edit вашего типа блока включает элемент BlockControls, эти элементы управления будут отображаться на панели инструментов выбранного блока. Это покажет, что ряд кнопок управления может отображаться на панели инструментов над выбранным блоком.
Компонент 3-Inspect и ColorPalette
Инспектор используется для отображения редко используемых настроек или настроек, требующих больше места на экране.
Если вы включите элемент InspectorControls в возвращаемое значение функции edit вашего типа блока, добавьте в него некоторое содержимое, эти элементы управления и содержимое будут отображаться в области инспектора.
Давайте добавим ColorPalette компонент внутри него. Мы хотим добиться того, чтобы, когда пользователь выбирает любой цвет на палитре, цвет текста нашего настраиваемого блока должен измениться на этот.
https://github.com/imranhsayed/myguten-block/tree / инспектор-контроль-компонент
Ядро WordPress:
Вы можете найти основные файлы JavaScript Gutenberg в репозитории Gutenberg Git https://github.com/WordPress/gutenberg/.
Например, registerBlockType () находится в https://github.com/WordPress/ gutenberg / blob / master / packages / blocks / src / api / registration.js .
Кроме того, вы можете найти компоненты в репозитории Gutenberg git
https://github.com/WordPress/gutenberg / blob / master / packages / block-editor / src / components /
