Lisage filtrite ja kõrgema järgu komponentidega juhtelemendid põhi- ja kolmanda osapoole ploki külgribale
Viimases juhendis vaatlesime kohandatud plokkide lisamistInspectorControls, et saaksime kasutada ploki külgribal olevaid juhtelemente. Selles juhendis lähtume sellest ja lisame kõigi meie plokkide, sealhulgas kõigi kasutatavate põhi- ja kolmanda osapoole plokkide ploki külgribale lülitusnupu.
Selles juhendis kavatseme luua "mustandploki" funktsiooni, mis sisaldub minu Wholesome Publishingi pistikprogrammis.
Eeldused
- Olete järginud WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise juhendit
- Olete järginud juhendit InspectorControlsi abil kohandatud WordPressi blokki külgriba lisamine
Selle juhendi jaoks valmistumine
Kui olete järginud külgriba lisamise juhendit, on suurepärane. Kuid nüüd pean ma paluma teil selle juhendi 4. sammus tehtud muudatused tagasi võtta (Draft Block Toggle), sest me ekstrapoleerime selle funktsiooni ja rakendame seda kõikidele oma plokkidele.
Kui te ei ole seda juhendit järginud, järgige seda kõigepealt kuni 4. sammuni, kuna see juhend järgneb otse sellele juhisele.
Looge kõrgema järgu komponente
Kõrgema järgu komponente (HoC) kasutatakse Reactis olemasoleva komponendi ümber mähkimiseks ja funktsioonide või rekvisiitide edastamiseks sellele komponendile. Neid nimetatakse HoC-deks, kuna need sisestatakse DOM-i enne olemasolevat komponenti või võib öelda "kõrgemas järjekorras".
Loome kaks uut HoC-d, seega looge oma pistikprogrammis uus kaust nimega componentsja looge järgmised kaks faili:
/components/withInspectorControls.js/components/withIsBlockDraft.js
InspectorControlsiga
Avage /components/withInspectorControls.jsja lisage järgmine kood:
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' );
Võite selle koodi ära tunda külgriba juhendi 4. sammust. See on peaaegu sama kood, välja arvatud see, et oleme selle pakkinud createHigherOrderComponent.
See createHigherOrderComponentvõimaldab meil juurde pääseda BlockEditsellele komponendile pakendatava ploki algsele redigeerimisfunktsioonile. Kuidas see edasi antakse, avastame peagi filtreid luues.
withIsBlockDraft
Avage /components/withIsBlockDraft.jsja kleepige järgmine kood:
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' );
See createHigherOrderComponentvõimaldab meil juurdepääsu, BlockListBlockmis võimaldab meil edastada atribuute redaktoriploki ümbrisesse. Me kasutame seda siin, et määrata ümbrisesse klassi ‘mustandplokk’, kui lüliti Mustandplokk on seatud. See taasloob selle, mida olime varem külgriba juhendi 4. sammus redigeerimismeetodile lisanud .
Jällegi peame seadistama filtri, et BlockListBlocksellesse juhtelementi edastada.
Seadistage filtrid
Faili ülaossa /src/index.jslisage järgmine tekst:
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Peaksime tõesti mõtlema oma pistikprogrammi struktuuri muutmisele nii, et ploki registreeriv kood imporditaks teisest failist, kuid lihtsuse huvides kasutame sama faili.
Filtreerige atribuudid
Lisage samasse faili järgmine kood:
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
See filter lisab kõikidele järgu plokkidele täiendavaid atribuute. Teoreetiliselt võiksime seda filtreerida nii, et see oleks ainult teatud plokkide jaoks, kuid me ei kavatse seda oma näite puhul teha.
Kui sooviksime seda filtrit teatud plokkidega piirata, saaksime seda teha järgmiselt:
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Filtreerige InspectorControls
/src/index.jsLisage failile järgmine kood :
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Siin filtreerime BlockEditnii, et see edastaks selle meie varem loodud HoC-le.
Kui sooviksime piirata seda filtrit teatud plokkidega, teeme HoC -s järgmist :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Filtreerige BlockListBlock
Lõpuks lisame filtri meie jaoks BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Jällegi, kui soovite seda plokki piirata, saate seda teha HoC-s.
Lisage PHP ja SCSS
Lisage sellele järgmine, /editor.scsset muuta meie mustandibänner kena välja (seda saab teha palju paremini, kuid see on vaid näide).
.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;
}
}
}
Lisage pistikprogrammi juurfaili (meie puhul 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 );
See peatab mustandiplokkide väljundi esiservas.
Nähes seda tegevuses
Ärge unustage kompileerida npm startja nüüd saame määrata mis tahes tüüpi ploki mustandiplokiks:
Mustandiplokkide seadistamine ja tühistamine