Додайте елементи керування до бічної панелі ядра та стороннього блоку за допомогою фільтрів і компонентів вищого порядку
У нашому останньому посібнику ми розглядали додавання InspectorControlsдо наших спеціальних блоків, щоб ми могли використовувати елементи керування на бічній панелі блоків. У цьому посібнику ми розглянемо це й додамо перемикач на бічній панелі всіх наших блоків, включаючи будь-які основні та сторонні блоки, які ми використовуємо.
У цьому посібнику ми збираємося створити функцію «чернетки блоку», яка представлена в моєму плагіні Wholesome Publishing.
передумови
- Дотримуйтесь посібника «Створення плагіна для редактора блоків WordPress» (Gutenberg).
- Дотримуйтесь посібника «Додати бічну панель до свого спеціального блоку WordPress за допомогою InspectorControls ».
Підготовка до цього посібника
Якщо ви дотримувалися посібника «Додати бічну панель », чудово. Але тепер я маю попросити вас скасувати зміни, які ви внесли на кроці 4 цього посібника (перемикач чернетки блоку), тому що ми збираємося екстраполювати цю функціональність і застосувати її до всіх наших блоків.
Якщо ви не дотримувалися цього посібника, будь ласка, переконайтеся, що ви виконали його до кроку 4, оскільки цей посібник є прямим продовженням цього.
Створення компонентів вищого порядку
Компоненти вищого порядку (HoC) використовуються в React для обгортання існуючого компонента та передачі функціональних можливостей або реквізитів цьому компоненту. Їх називають HoC, тому що вони вставляються в DOM перед існуючим компонентом, або, можна сказати, у «вищому порядку».
Ми збираємося створити два нових HoC, тому створіть нову папку у своєму плагіні під назвою componentsта створіть наступні два файли:
/components/withInspectorControls.js/components/withIsBlockDraft.js
з InspectorControls
Відкрийте /components/withInspectorControls.jsта додайте наступний код:
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default createHigherOrderComponent( (BlockEdit) => {
return (props) => {
const {
attributes: {
isBlockDraft,
},
setAttributes,
} = props;
return (<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( 'Block Display Settings', 'wholesome-plugin') }
icon="visibility"
initialOpen={ false }
>
<ToggleControl
label={ __( 'Set Block as Draft', 'wholesome-plugin') }
checked={ isBlockDraft }
onChange={ (isBlockDraft) => setAttributes( { isBlockDraft }) }
help={ __( 'If the block is set to draft it will not show on the front end.',
'wholesome-plugin') }
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControls' );
Ви можете впізнати цей код із кроку 4 посібника з бічної панелі. Це практично той самий код, за винятком того, що ми загорнули його в createHigherOrderComponent.
createHigherOrderComponentДозволяє нам отримати доступ до цієї BlockEditоригінальної функції редагування блоку, який буде обгортати цей компонент. Незабаром ми дізнаємося, як це передається, коли створимо фільтри.
withIsBlockDraft
Відкрийте /components/withIsBlockDraft.jsта вставте наступний код:
import { createHigherOrderComponent } from '@wordpress/compose';
export default createHigherOrderComponent( (BlockListBlock) => {
return (props) => {
const { attributes } = props;
const { isBlockDraft } = attributes;
return <BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } />;
};
}, 'withIsBlockDraft' );
Це createHigherOrderComponentдозволяє нам отримати доступ, BlockListBlockякий дозволяє передавати атрибути в оболонку блоку редактора. Ми використовуємо його тут, щоб встановити клас «чорновий блок» для оболонки, якщо встановлено перемикач «Чернетки блоку». Це відтворює те, що ми раніше додали до методу редагування на кроці 4 посібника з бічної панелі.
Знову ж таки, нам потрібно налаштувати фільтр, який BlockListBlockбуде передано в цей елемент керування.
Налаштуйте фільтри
У верхній частині /src/index.jsфайлу додайте наступне:
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Нам дійсно слід подумати про зміну структури нашого плагіна, щоб код, який реєструє блок, імпортувався з іншого файлу, але для простоти ми будемо використовувати той самий файл.
Фільтруйте атрибути
У цьому ж файлі додайте такий код:
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
Цей фільтр додає додаткові атрибути до всіх блоків збірки. Теоретично ми могли б відфільтрувати це лише для певних блоків, але ми не будемо цього робити для нашого прикладу.
Якщо ми хочемо обмежити цей фільтр певними блоками, ми могли б зробити це так:
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Фільтруйте InspectorControls
Додайте наступний код до /src/index.jsфайлу:
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Тут ми фільтруємо BlockEdit, щоб він передавав це до нашого HoC, який ми створили раніше.
Якби ми хотіли обмежити цей фільтр певними блоками, ми б зробили наступне в HoC :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Фільтруйте BlockListBlock
Нарешті, давайте додамо фільтр для нашого BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Знову ж таки, якщо ви хочете обмежити цей блок, ви можете зробити це всередині HoC.
Додайте PHP і SCSS
Додайте наступне, /editor.scssщоб наш чернетковий банер виглядав гарно (це можна зробити набагато краще, але це лише приклад).
.editor-styles-wrapper {
.draft-block {
border-bottom: 1px dotted #cfcfcf;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
margin-top: 3em;
&::before {
background: #cfcfcf;
background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);
background-size: 8.49px 8.49px;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
border-top: 1px solid #cfcfcf;
color: black;
content: 'Draft Block';
display: block;
font-family: monospace;
font-size: 1rem;
left: 0;
padding-left: 5px;
position: absolute;
top: -27px;
width: 100%;
}
opacity: .4;
&.is-selected {
opacity: .8;
}
}
}
Додайте наступне до кореневого файлу плагіна (у нашому випадку wholesome-plugin.php).
function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {
if (is_admin()) {
return $pre_render;
}
if (isset( $block['attrs']) &&
isset( $block['attrs']['isBlockDraft']) &&
$block['attrs']['isBlockDraft']) {
return false;
}
return $pre_render;
}
add_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );
Це призупинить виведення чернеток блоків на зовнішній інтерфейс.
Побачивши це в дії
Не забудьте скомпілювати за допомогою npm start, і тепер ми можемо встановити будь-який тип блоку як блок чернетки:
Встановлення та скасування чернеткових блоків
- Подивіться на створення вкладених дочірніх блоків за допомогою
InnerBlocksкомпонента - Подивіться на використання пост мета-полів у блоках Гутенберга
- Спробуйте додати елементи керування на бічну панель публікації