Aggiungi controlli alla barra laterale dei blocchi principali e di terze parti con filtri e componenti di ordine superiore
Nella nostra ultima guida abbiamo esaminato l’ aggiunta InspectorControlsai nostri blocchi personalizzati per consentirci di utilizzare i controlli nella barra laterale dei blocchi. In questa guida ci baseremo su questo e aggiungeremo un controllo di attivazione/disattivazione alla barra laterale dei blocchi di tutti i nostri blocchi, inclusi i blocchi principali e di terze parti che stiamo utilizzando.
In questa guida creeremo la funzionalità "blocco bozza" presente nel mio plug-in Wholesome Publishing.
Prerequisiti
- Ho seguito la guida Creazione di un plug-in per l’editor di blocchi di WordPress (Gutenberg).
- Ho seguito la guida Aggiungi una barra laterale al tuo blocco WordPress personalizzato con InspectorControls
Preparativi per questa guida
Se hai seguito la guida Aggiungi una barra laterale, ottimo. Ma ora dovrò chiederti di annullare le modifiche che hai apportato al passaggio 4 di quella guida (il Draft Block Toggle), perché estrapoleremo quella funzionalità e la applicheremo a tutti i nostri blocchi.
Se non hai seguito quella guida, assicurati di seguirla prima fino al passaggio 4, poiché questa guida segue direttamente da quella.
Crea componenti di ordine superiore
I componenti di ordine superiore (HoC) vengono utilizzati in React per avvolgere un componente esistente e passare funzionalità o oggetti di scena a quel componente. Si chiamano HoC perché sono inseriti nel DOM prima del componente esistente, oppure si potrebbe dire in un ‘Ordine Superiore’.
Creeremo due nuovi HoC, quindi crea una nuova cartella nel tuo plugin chiamato componentse crea i seguenti due file:
/components/withInspectorControls.js/components/withIsBlockDraft.js
con Controlli dell’ispettore
Apri /components/withInspectorControls.jse aggiungi il seguente codice:
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' );
Potresti riconoscere questo codice dal passaggio 4 della guida della barra laterale. È praticamente lo stesso codice, a parte il fatto che lo abbiamo racchiuso in createHigherOrderComponent.
createHigherOrderComponentCi consente di accedere a questa BlockEditè la funzione di modifica originale del blocco che questo componente avvolgerà. Scopriremo come questo viene passato quando creeremo i filtri a breve.
withIsBlockDraft
Apri /components/withIsBlockDraft.jse incolla il codice seguente:
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' );
Questo createHigherOrderComponentci consente di accedere BlockListBlockche ci consente di passare gli attributi nel wrapper del blocco dell’editor. Lo stiamo usando qui per impostare una classe ‘draft-block’ sul wrapper se l’interruttore Draft Block è stato impostato. Questo ricrea ciò che avevamo precedentemente aggiunto al metodo di modifica nel passaggio 4 della Guida della barra laterale.
Ancora una volta abbiamo bisogno di impostare un filtro per BlockListBlockpassare a questo controllo.
Imposta i filtri
Nella parte superiore del /src/index.jsfile aggiungi quanto segue:
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Dovremmo proprio pensare di modificare la struttura del nostro plugin in modo che il codice che registra il blocco venga importato da un altro file, ma per semplicità utilizzeremo lo stesso file.
Filtra gli attributi
Nello stesso file aggiungi il seguente codice:
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
Questo filtro aggiunge attributi aggiuntivi a tutti i blocchi nella build. In teoria potremmo filtrarlo in modo che sia solo per determinati blocchi, ma non lo faremo per il nostro esempio.
Se volessimo limitare questo filtro a determinati blocchi, potremmo farlo in questo modo:
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Filtra i controlli dell’ispettore
Aggiungi il seguente codice al /src/index.jsfile:
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Qui BlockEditfiltriamo in modo che passi questo al nostro HoC che abbiamo creato in precedenza.
Se volessimo limitare questo filtro a determinati blocchi, faremmo quanto segue all’interno dell’HoC :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Filtra il BlockListBlock
Infine aggiungiamo il filtro per il nostro BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Ancora una volta, se vuoi limitare questo blocco puoi farlo all’interno dell’HoC.
Aggiungi PHP e SCSS
Aggiungi quanto segue per /editor.scssrendere carino il nostro banner Draft (questo può essere fatto molto meglio, ma questo è solo un esempio).
.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;
}
}
}
Aggiungi quanto segue al file radice del plugin (nel nostro caso 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 );
Ciò interromperà l’output dei blocchi di bozze sul frontend.
Vederlo in azione
Ricorda di compilare npm starte ora possiamo impostare qualsiasi tipo di blocco su un blocco draft:
Impostazione e disinserimento dei blocchi bozza
- Dai un’occhiata alla creazione di blocchi figlio nidificati con il
InnerBlockscomponente - Dai un’occhiata all’utilizzo dei meta-campi post nei blocchi di Gutenberg
- Prova ad aggiungere controlli alla barra laterale del post