Pierwsze pytanie, jakie możesz mieć, brzmi „dlaczego miałbym tworzyć niestandardowe pola meta za pomocą edytora bloków (Gutenberg)?", nadal możesz implementować meta pola za pomocą PHP i dodawać kontrolki do bloku, posta, a nawet niestandardowego paska bocznego w Gutenbergu.
Jest kilka powodów, dla których możesz chcieć to zrobić, w tym:
- Niektóre bloki mają złożone ustawienia, a wyświetlanie meta pola w trybie edycji może ułatwić korzystanie z nich przez klienta
- Ponieważ możesz chcieć zmienić pewien aspekt układu posta, taki jak nagłówek. Możesz ukryć pole tytułu posta i zastąpić je niestandardowym polem meta u góry strony i mieć możliwość kontrolowania wszystkich powiązanych z nim meta postów
- Ponieważ możesz użyć szablonów blokowych, aby umieścić niestandardowe pola meta tam, gdzie chcesz, aby miały więcej sensu w kontekście
- Ponieważ możesz zastosować tę naukę do innych aspektów rozwoju edytora bloków (Gutenberg)
W tym przewodniku zamierzamy rozwinąć to, co już zbudowaliśmy w naszym przewodniku Post Meta Fields. Możesz użyć atrybutów blokowych, jednak ze względu na charakter pól meta, w tym przewodniku użyjemy pól meta post.
Warunki wstępne
- Zapoznaj się z tworzeniem wtyczek do WordPress Gutenberg
- Poznaj dynamiczne bloki i renderowanie po stronie serwera
- Zapoznaj się z używaniem post meta pól w WordPress Gutenberg
Ponieważ korzystamy z przewodnika Post Meta Fields, będziemy już używać register_metado utworzenia naszego meta pola post, upewniając się, że ustawiliśmy wartość show_in_resttrue, a także ustawiliśmy źródło naszego atrybutu JavaScript na metai zdefiniowaliśmy klucz meta.
Pozostaje tylko zaimplementować interfejs.
Edytuj /src/edit.jsplik, zastępując @wordpress/componentsimport następującym:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Następnie zastąp blok Edytuj kod następującym:
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>
);
}
Mamy teraz Panel, a PanelBodyi TextControl. Zauważ, że dodałem admin-pluginsdo parametru ikona, PanelBodyaby zachować spójność z ikoną wtyczki.
Zastosuj style
Zastąp SCSS /src/editor.scssnastępującym:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Jeśli używasz niestandardowego Meta Boxa utworzonego w Gutenbergu, polecam umieszczenie go z szablonem blokowym, jednak możesz go wstawić w normalny sposób, w ten sposób:
Korzystanie z niestandardowego Meta Boxa Gutenberga
Po utworzeniu meta pola nie ma ograniczeń co do tego, co możesz do niego dodać. Cała biblioteka komponentów WordPress Gutenberg React jest dostępna dla Ciebie, wraz z ogromną biblioteką zewnętrznych komponentów React (zobacz mój artykuł na temat dodawania select2 do swojego projektu ).
Poniższy przykład jest wierzchołkiem góry lodowej tego, co możesz osiągnąć:
Niestandardowe Meta Box z dodatkowymi polami Meta
Aby to zbudować, oto kod, którego potrzebujesz:
Zarejestruj swoje meta pola postu w PHP
Otwórz główny plik PHP wtyczki (w tym przypadku wholesome-plugin.php) i zaktualizuj plik register_metadodany w poprzednim przewodniku w następujący sposób:
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' );
Zaktualizuj atrybuty JavaScript
Otwórz /src/index.jsi zastąp atrybuty, które dodaliśmy w poprzednim przewodniku, następującymi:
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',
},
},
Importuj komponenty
Edytuj /src/edit.jsplik, zastępując @wordpress/componentsimport następującym:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Zaktualizuj metodę edycji
Kontynuuj edycję /src/edit.jspliku, zastępując Editblok kodu następującym:
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>
);
}
Dodaj trochę SCSS
Na koniec otwórz /src/editor.scssplik i zastąp jego zawartość następującym:
.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;
}
}
- Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą
InnerBlockskomponentu - Zobacz, jak używać ustawień do przechowywania danych w tabeli opcji w Gutenberg