Skapa anpassade metaboxar med WordPress Block Editor (Gutenberg)
Den första frågan du kanske har är "varför skulle jag behöva skapa anpassade metaboxar med Block Editor (Gutenberg)?", du kan fortfarande implementera metaboxar med PHP och lägga till kontroller i blocket, inlägget eller till och med en anpassad sidofält i Gutenberg.
Det finns några anledningar till varför du kanske vill göra detta, inklusive:
- Vissa block har komplexa inställningar och att visa en metabox i redigeringsläge kan göra det lättare att använda för en klient
- Eftersom du kanske vill ändra en viss layoutaspekt av inlägget, till exempel rubriken. Du kan dölja inläggets rubrikfält och ersätta det med en anpassad metabox högst upp på sidan och kunna kontrollera all inläggsmeta som relaterar till det
- Eftersom du kan använda blockmallar för att placera de anpassade metaboxarna där du vill, så att de blir mer vettiga i sammanhanget
- Eftersom du kan tillämpa denna inlärning på andra aspekter av utvecklingen av blockredigerare (Gutenberg).
I den här guiden kommer vi att utöka det vi redan har byggt i vår Post Meta Fields-guide. Du kan använda blockattribut, men på grund av metaboxarnas natur kommer vi att använda postmetafält i den här guiden.
Förutsättningar
- Var bekant med att skapa plugins för WordPress Gutenberg
- Var bekant med dynamiska block och rendering på serversidan
- Var bekant med att använda postmetafält i WordPress Gutenberg
Eftersom vi följer efter Post Meta Fields-guiden kommer vi redan att ha använt register_metaför att skapa vårt post-metafält, vilket säkerställer att vi har ställt show_in_restin på sant och att vi också har ställt in vårt JavaScript-attributs källa till metaoch definierat meta-nyckeln.
Allt som återstår är att implementera gränssnittet.
Redigera /src/edit.jsfilen och ersätt @wordpress/componentsimporten med följande:
import { Panel, PanelBody, TextControl } from '@wordpress/components';
Byt sedan ut blocket Redigera kod med följande:
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>
);
}
Vi har nu en Panel, en PanelBodyoch en TextControl. Observera att jag har lagt admin-pluginstill parametern till ikonen för PanelBodyatt hålla den överens med plugin-ikonen.
Använd stilarna
Ersätt SCSS /src/editor.scssmed följande:
.wp-block.wp-block-wholesomecode-wholesome-plugin {
color: unset;
background: unset;
padding: unset;
p {
all: unset;
}
}
Om du använder en Custom Meta Box skapad i Gutenberg, skulle jag rekommendera att du placerar den med en blockmall, men du kan infoga den på vanligt sätt så här:
Använda en Gutenberg Custom Meta Box
När du väl har skapat din metabox finns det ingen gräns för vad du kan lägga till i den. Hela biblioteket med WordPress Gutenberg React-komponenter är tillgängligt för dig, tillsammans med ett stort bibliotek av externa React-komponenter (se min artikel om att lägga till select2 i ditt projekt ).
Följande exempel är toppen av isberget på vad du kan uppnå:
Anpassad metabox med ytterligare metafält
För att bygga detta, här är koden du behöver:
Registrera dina inläggsmetafält i PHP
Öppna root-PHP-filen för plugin-programmet (i det här fallet wholesome-plugin.php) och uppdatera den register_metavi lade till i den tidigare guiden med följande:
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' );
Uppdatera JavaScript-attributen
Öppna /src/index.jsoch ersätt attributen som vi lade till i den tidigare guiden med följande:
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',
},
},
Importera komponenterna
Redigera /src/edit.jsfilen och ersätt @wordpress/componentsimporten med följande:
import {
Panel,
PanelBody,
PanelRow,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
Uppdatera redigeringsmetoden
Fortsätt att redigera /src/edit.jsfilen och ersätt Editkodblocket med följande:
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>
);
}
Lägg till lite SCSS
Öppna slutligen /src/editor.scssfilen och ersätt dess innehåll med följande:
.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;
}
}
- Ta en titt på att skapa kapslade underordnade block med
InnerBlockskomponenten - Ta en titt på hur du använder inställningar för att lagra data i alternativtabellen i Gutenberg