Ensimmäinen kysymys, joka sinulla saattaa olla, on "miksi minun pitäisi luoda mukautettuja metalaatikoita Block Editorilla (Gutenberg)?". Voit silti ottaa metalaatikot käyttöön PHP:llä ja lisätä ohjaimia lohkoon, viestiin tai jopa mukautettuun sivupalkkiin. Gutenbergissä.
On muutamia syitä, miksi saatat haluta tehdä tämän, mukaan lukien:
- Joillakin lohkoilla on monimutkaisia asetuksia, ja metalaatikon katseleminen muokkaustilassa saattaa helpottaa sen käyttöä asiakkaalle
- Koska saatat haluta muuttaa viestin tiettyä ulkoasua, kuten otsikkoa. Voit piilottaa viestin otsikkokentän ja korvata sen mukautetulla sisällönkuvauskentällä sivun yläreunassa ja hallita kaikkea siihen liittyvää viestin sisällönkuvausta
- Koska voit käyttää lohkomalleja sijoittaaksesi mukautetut metalaatikot haluamaasi paikkaan, jotta ne ovat järkevämpiä kontekstissa
- Koska voit soveltaa tätä oppimista muihin lohkoeditorin (Gutenberg) kehittämiseen
Tässä oppaassa aiomme laajentaa sitä, mitä olemme jo rakentaneet Post Meta Fields -oppaassamme. Voit käyttää block-attribuutteja, mutta metaruutujen luonteen vuoksi käytämme tässä oppaassa post-metakenttiä.
Edellytykset
- Tutustu WordPress Gutenbergin lisäosien luomiseen
- Tutustu dynaamisiin lohkoihin ja palvelinpuolen renderöintiin
- Tutustu post-metakenttien käyttöön WordPress Gutenbergissä
Koska jatkamme Post Meta Fields -opasta, on jo käyttänyt register_metapost-meta-kentän luomiseen, varmistaen, että olemme asettanut show_in_restarvoksi tosi, ja olemme myös määrittäneet JavaScript-attribuuttimme lähteen metaja määrittäneet metaavaimen.
Jäljelle jää vain käyttöliittymän toteuttaminen.
Muokkaa /src/edit.jstiedostoa ja korvaa @wordpress/componentstuonti seuraavalla:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Korvaa sitten Muokkaa koodia -lohko seuraavalla:
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>
);
}
Meillä on nyt Panel, a PanelBodyja a TextControl. Huomaa, että olen lisännyt admin-plugins-parametrin kuvakeparametriin PanelBodypitääkseni sen yhdenmukaisena laajennuskuvakkeen kanssa.
Käytä tyylejä
Korvaa SCSS /src/editor.scssseuraavalla:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Jos käytät Gutenbergissä luotua mukautettua metalaatikkoa, suosittelen sen sijoittamista lohkomalliin, mutta voit lisätä sen tavalliseen tapaan seuraavasti:
Gutenbergin mukautetun metalaatikon käyttäminen
Kun olet luonut metalaatikon, siihen lisättäville ei ole rajoituksia. Koko WordPress Gutenberg React -komponenttien kirjasto on käytettävissäsi sekä laaja ulkoisten React-komponenttien kirjasto (katso artikkelini select2:n lisäämisestä projektiisi ).
Seuraava esimerkki on jäävuoren huippu siitä, mitä voit saavuttaa:
Mukautettu metalaatikko lisämetakentillä
Tämän rakentamiseen tarvitset tässä koodin:
Rekisteröi viestimetakentät PHP:ssä
Avaa laajennuksen PHP-juuritiedosto (tässä tapauksessa wholesome-plugin.php) ja päivitä register_metaedellisessä oppaassa lisäämämme seuraavalla tavalla:
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' );
Päivitä JavaScript-attribuutit
Avaa /src/index.jsja korvaa edellisessä oppaassa lisäämämme attribuutit seuraavilla:
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',
},
},
Tuo komponentit
Muokkaa /src/edit.jstiedostoa ja korvaa @wordpress/componentstuonti seuraavalla:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Päivitä muokkaustapa
Jatka tiedoston muokkaamista /src/edit.jskorvaamalla Editkoodilohko seuraavalla:
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>
);
}
Lisää SCSS:ää
Avaa lopuksi /src/editor.scsstiedosto ja korvaa sen sisältö seuraavalla:
.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;
}
}