Esimene küsimus, mis teil võib tekkida, on "miks peaksin looma kohandatud metakaste plokiredaktoriga (Gutenberg)?", saate siiski rakendada metakaste PHP-ga ja lisada juhtelemente plokile, postitusele või isegi kohandatud külgribale. Gutenbergis.
On mõned põhjused, miks võiksite seda teha, sealhulgas:
- Mõnel plokil on keerulised sätted ja metakasti vaatamine redigeerimisrežiimis võib muuta selle kasutamise kliendi jaoks lihtsamaks
- Sest võib-olla soovite muuta postituse teatud paigutuse aspekti, näiteks päist. Saate peita postituse pealkirja välja ja asendada selle lehe ülaosas kohandatud metakastiga ning juhtida kogu sellega seotud postituse metat
- Kuna saate kasutada plokimalle, et paigutada kohandatud metakastid soovitud kohta, nii et need on kontekstis mõistlikumad
- Kuna saate seda õpet rakendada plokiredaktori (Gutenbergi) arendamise muude aspektide puhul
Selles juhendis laiendame seda, mida oleme oma Post Meta Fieldsi juhendis juba koostanud. Võite kasutada plokiatribuute, kuid metakastide olemuse tõttu kasutame selles juhendis posti metavälju.
Eeldused
- Olge tuttav WordPressi Gutenbergi pistikprogrammide loomisega
- Olge tuttav dünaamiliste plokkide ja serveripoolse renderdamisega
- Olge tuttav WordPressi Gutenbergi postituste metaväljade kasutamisega
Kuna me järgime Post Meta Fields’i juhendit, on Will juba kasutanud register_metameie postituse metavälja loomiseks, tagades, et oleme seadnud show_in_restväärtusele Tõene ja oleme ka oma JavaScripti atribuudi allika metamääranud ja metavõtme määratlenud.
Jääb vaid liides rakendada.
Redigeerige /src/edit.jsfaili, asendades @wordpress/componentsimpordi järgmisega:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Seejärel asendage koodi muutmise plokk järgmisega:
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>
);
}
Meil on nüüd Panel, a PanelBodyja a TextControl. Pange tähele, et olen lisanud admin-pluginsikooni parameetri, PanelBodyet see oleks kooskõlas pistikprogrammi ikooniga.
Rakendage stiile
Asendage SCSS /src/editor.scssjärgmisega:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Kui kasutate Gutenbergis loodud kohandatud metaboksi, soovitaksin selle paigutada plokimalliga, kuid saate selle sisestada tavalisel viisil, näiteks järgmiselt:
Gutenbergi kohandatud metaboksi kasutamine
Kui olete oma metakasti loonud, pole sellele lisatavale piiranguid. Teile on saadaval kogu WordPressi Gutenberg Reacti komponentide teek koos suure hulga väliste Reacti komponentide teegiga (vt minu artiklit Select2 lisamise kohta oma projekti ).
Järgmine näide on jäämäe tipp selle kohta, mida saate saavutada:
Kohandatud metakast täiendavate metaväljadega
Selle loomiseks on siin vajalik kood:
Registreerige oma postituste metaväljad PHP-s
Avage pistikprogrammi PHP juurfail (antud juhul wholesome-plugin.php) ja värskendage register_metaeelmises juhendis lisatud faili järgmisega:
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' );
Värskendage JavaScripti atribuute
Avage /src/index.jsja asendage eelmises juhendis lisatud atribuudid järgmistega:
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',
},
},
Importige komponendid
Redigeerige /src/edit.jsfaili, asendades @wordpress/componentsimpordi järgmisega:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Värskendage redigeerimismeetodit
Jätkake faili redigeerimist /src/edit.js, asendades Editkoodiploki järgmisega:
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>
);
}
Lisage veidi SCSS-i
Lõpuks avage /src/editor.scssfail ja asendage selle sisu järgmisega:
.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;
}
}