La prima domanda che potresti avere è "perché dovrei creare meta box personalizzati con Block Editor (Gutenberg)?", Puoi comunque implementare meta box con PHP e aggiungere controlli al blocco, al post o anche a una barra laterale personalizzata a Gutenberg.
Ci sono alcuni motivi per cui potresti volerlo fare, tra cui:
- Alcuni blocchi hanno impostazioni complesse e la visualizzazione di una meta box in modalità di modifica può semplificarne l’utilizzo per un client
- Perché potresti voler cambiare un certo aspetto del layout del post, come l’intestazione. Puoi nascondere il campo del titolo del post e sostituirlo con un meta box personalizzato nella parte superiore della pagina ed essere in grado di controllare tutti i meta del post che si riferiscono ad esso
- Perché puoi utilizzare i modelli di blocco per posizionare i meta box personalizzati dove preferisci, in modo che abbiano più senso nel contesto
- Perché puoi applicare questo apprendimento ad altri aspetti dello sviluppo dell’editor di blocchi (Gutenberg).
In questa guida espanderemo ciò che abbiamo già costruito nella nostra guida Post Meta Fields. Puoi utilizzare gli attributi di blocco, tuttavia, a causa della natura dei meta box, in questa guida utilizzeremo i meta campi dei post.
Prerequisiti
- Familiarizzare con la creazione di plugin per WordPress Gutenberg
- Familiarizzare con i blocchi dinamici e il rendering lato server
- Acquisire familiarità con l’utilizzo dei meta-campi post in WordPress Gutenberg
Poiché stiamo seguendo la guida ai post meta campi, avremo già utilizzato register_metaper creare il nostro meta campo post, assicurandoci di aver impostato show_in_restsu true e avremo anche impostato l’origine del nostro attributo JavaScript metae definito la meta chiave.
Non resta che implementare l’interfaccia.
Modifica il /src/edit.jsfile, sostituendo l’ @wordpress/componentsimportazione con quanto segue:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Quindi sostituire il blocco di codice Modifica con quanto segue:
export default function Edit( { attributes, setAttributes }) {
const { blockText } = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
label={ __( 'Example Meta', 'wholesome-plugin') }
help={ __( 'This is an example meta field.', 'wholesome-plugin') }
onChange={ (blockText) => setAttributes( { blockText }) }
value={ blockText }
/>
</PanelBody>
</Panel>
</div>
);
}
Ora abbiamo a Panel, a PanelBodye a TextControl. Nota che ho aggiunto il admin-pluginsparametro icon PanelBodyper mantenerlo coerente con l’icona del plugin.
Applica gli stili
Sostituire l’SCSS /src/editor.scsscon quanto segue:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Se stai utilizzando un Meta Box personalizzato creato in Gutenberg, ti consiglio di posizionarlo con un modello di blocco, tuttavia puoi inserirlo normalmente in questo modo:
Utilizzo di una Meta Box personalizzata Gutenberg
Dopo aver creato la tua meta box, non c’è limite a ciò che puoi aggiungere in essa. L’intera libreria dei componenti di WordPress Gutenberg React è a tua disposizione, insieme a una vasta libreria di componenti React esterni (vedi il mio articolo sull’aggiunta di select2 al tuo progetto ).
Il seguente esempio è la punta dell’iceberg di ciò che puoi ottenere:
Meta box personalizzata con meta campi aggiuntivi
Per costruirlo, ecco il codice che ti serve:
Registra i tuoi meta campi post in PHP
Apri il file PHP di root del plugin (in questo caso wholesome-plugin.php) e aggiorna quello register_metache abbiamo aggiunto nella guida precedente con quanto segue:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_select',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_2',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_text_3',
[
'auth_callback' => '__return_true',
'default' => '',
'show_in_rest' => true,
'single' => true,
'type' => 'string',
]
);
register_meta(
'post',
'_wholesomecode_wholesome_plugin_example_toggle',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Aggiorna gli attributi JavaScript
Apri /src/index.jse sostituisci gli attributi che abbiamo aggiunto nella guida precedente con i seguenti:
attributes: {
exampleSelect: {
meta: '_wholesomecode_wholesome_plugin_example_select',
source: 'meta',
},
exampleText: {
meta: '_wholesomecode_wholesome_plugin_example_text',
source: 'meta',
},
exampleText2: {
meta: '_wholesomecode_wholesome_plugin_example_text_2',
source: 'meta',
},
exampleText3: {
meta: '_wholesomecode_wholesome_plugin_example_text_3',
source: 'meta',
},
exampleToggle: {
meta: '_wholesomecode_wholesome_plugin_example_toggle',
source: 'meta',
},
},
Importa i componenti
Modifica il /src/edit.jsfile, sostituendo l’ @wordpress/componentsimportazione con quanto segue:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Aggiorna il metodo di modifica
Continua a modificare il /src/edit.jsfile, sostituendo Editil blocco di codice con il seguente:
export default function Edit( { attributes, setAttributes }) {
const {
exampleSelect,
exampleText,
exampleText2,
exampleText3,
exampleToggle,
} = attributes;
return (<div { ...useBlockProps() }>
<Panel>
<PanelBody
title={ __( 'Example Meta Box', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select','wholesome-plugin') }
onChange={ (exampleSelect) => setAttributes( { exampleSelect }) }
options={ [
{
label: __( 'Please Select...', 'wholesome-plugin' ),
value: '',
},
{
label: __( 'Option 1', 'wholesome-plugin' ),
value: 'option-1',
},
{
label: __( 'Option 2', 'wholesome-plugin' ),
value: 'option-2',
},
] }
value={ exampleSelect }
/>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => setAttributes( { exampleText }) }
value={ exampleText }
/>
<PanelRow>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => setAttributes( { exampleText2 }) }
value={ exampleText2 }
/>
<TextControl
help={ __( 'This control is inline.', 'wholesome-plugin') }
label={ __( 'Example Text 3', 'wholesome-plugin') }
onChange={ (exampleText3) => setAttributes( { exampleText3 }) }
value={ exampleText3 }
/>
</PanelRow>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => setAttributes( { exampleToggle }) }
/>
</PanelBody>
</Panel>
</div>
);
}
Aggiungi alcuni SCSS
Infine apri il /src/editor.scssfile e sostituisci il suo contenuto con il seguente:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
.components-base-control {
margin-bottom: 1rem;
select {
height: 2rem;
min-height: 2rem;
}
}
p {
all: unset;
}
}
- Dai un’occhiata alla creazione di blocchi figlio nidificati con il
InnerBlockscomponente - Dai un’occhiata all’utilizzo delle impostazioni per memorizzare i dati nella tabella delle opzioni in Gutenberg