Hur man lägger till inläggsmetafält i Gutenberg-dokumentets sidofält

Senaste uppdateringen nov 10, 2022

Innehåll

I det här inlägget kommer vi att titta på hur man lägger till anpassade inläggsmetainställningar i Gutenbergs sidofält, på fliken "Dokument", snarare än att förlita sig på att lägga till metaboxar på det traditionella (och ärligt talat mycket mer manuella) sättet.

Om du har arbetat med WordPress ett tag innan Gutenberg var en grej, är du förmodligen bekant med att lägga till anpassad inläggsmeta med [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). Denna funktion låter dig lägga till en metabox med ditt anpassade innehåll antingen längst ner eller på sidan när du redigerar ett inlägg. Denna metod fungerar fortfarande, även i Gutenberg-redigeraren!

Det ser dock lite avigt ut jämfört med resten av Gutenbergs sidofältsinnehåll. Och för att inte nämna, du skulle behöva skriva inmatningskod manuellt (kryssruta, textinmatningar etc) med PHP och även skriva ytterligare kod för att spara dem när inlägget uppdateras. Och om du ville att dina inläggsmetainställningar skulle vara dynamiska (säg att du ville dölja ett fält om inte något annat fält var aktiverat), så måste du manuellt ställa ett skript i kö och ja, du gissade rätt, hantera den dynamiska logiken manuellt att gömma sig och visa. Allt detta är nu föråldrat och gjort enklare med den nya Javascript-baserade Gutenberg-redigeraren. Vi kan ganska enkelt göra något sånt här:

Processen

Processen är som följer:

Vi registrerar varje anpassad postmeta-nyckel vi vill lägga till i PHP med hjälp av [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(), och ställer in den som tillgänglig i WP REST API. Detta är ett nödvändigt steg för att göra inläggets meta tillgänglig i Gutenberg-redigeraren.
Vi skapar en Javascript-fil och köar den specifikt till editorn (endast).
Inuti Javascript-filen registrerar vi ett plugin [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()som säger åt det att rendera vår komponent.
Inuti den komponenten kan vi mata ut vad vi behöver. Vi kan använda WordPresss inbyggda komponenter för att enkelt rendera olika typer av inställningar. Och med hjälp av WordPress-datapaket kan vi hämta och uppdatera inläggets metavärden direkt när de ändras.

Låt oss gå rakt in i det och börja med PHP-delen; registrera inlägget meta.

Registrerar inlägg meta

För varje inläggsmeta du vill lägga till i Gutenbergs sidofält måste du registrera dig med [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). Detta är nödvändigt för att göra dem tillgängliga via WP REST API (som Gutenberg använder) och därmed tillgängliga i vårt Javascript.

I ditt temas functions.phpfil eller någon annan aktiv PHP-fil, lägg till en funktion kopplad till ‘ init‘-kroken. Inuti funktionen upprepar du a register_post_meta()för varje anpassad postmeta du vill lägga till. Funktionen tar tre argument; första parametern är inläggstypen du vill registrera meta för (ställ in som tom sträng för alla inläggstyper). Den andra parametern är meta-nyckelnamnet för din meta. Och den tredje är en rad inställningar. Det är här vi definierar att denna meta ska vara tillgänglig i WP REST API genom att sätta ‘ show_in_rest‘ på sant.

Låt oss till exempel säga att jag vill lägga till en växel på/av och en textinmatning till redigerarens sidofält. Det betyder att jag efterlyser register_post_meta()en boolesk respektive en strängvärdestyp. Jag vill också begränsa dessa inläggsmeta till enbart inläggstyp ‘inlägg’. Det skulle se ut ungefär så här:

Nu har jag en post-meta-nyckel _my_custom_booloch _my_custom_textklar och tillgänglig i Gutenberg. Jag rekommenderar att du byter namn på dem till något som är vettigt för dig.

Registrera vårt Javascript-plugin

För vårt nästa steg lägger vi till en Javascript-fil och ser till att ställa den i kö med PHP.

Tänk på att jag skriver Javascript-koden i ES6-syntax. Det betyder att jag har ställt in ett webbpaket/Babel-konfiguration för att kompilera min fil till en separat läsbar Javascript-fil för webbläsaren.

Jag har en guide om hur du ställer in detta om du är osäker på hur det fungerar:

Vi måste se till att WordPress laddar vårt skript i editorn. Vi gör detta genom att koppla en funktion till enqueue_block_editor_assetsoch anropa [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)():


add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'awp-custom-meta-plugin', 
        get_template_directory_uri(). '/assets/js/gutenberg/plugin-awp-custom-postmeta.js', 
        [ 'wp-edit-post' ],
        false,
        false
    );
} );

Jag antar att du är bekant med hur man ställer skript i kö och kan ersätta värdena med dina egna. Som andra parameter tillhandahåller jag sökvägen till byggfilen (inte källfilen). För att säkerställa att vårt skript inte laddas för tidigt, ställer jag in ‘ wp-edit-post‘ som ett beroende. Det är paketet vi behöver för att hantera post-meta.

Låt oss nu gå vidare till Javascript-delen.

Först måste vi anropa [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()och skicka vidare vår komponent för att rendera panelen i Gutenberg-dokumentets sidofält. Denna funktion finns i wp.pluginspaketet, så jag destrukturerar den överst. Jag gillar att hålla ordning på mina filer, så jag skapar en annan fil; "awp-custom-postmeta-fields.js" för att innehålla den renderade komponenten och importera den.

Att skriva vår komponent

Låt oss börja skapa en grundläggande komponent som inte gör något annat än att bara sitta där på rätt plats, så vi får det ur vägen först. För att rendera en komponent i Gutenbergs dokumentsidofält använder vi [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)komponenten. Vi kan ställa in attribut som en title, iconoch className. Och vad som än finns inuti kommer att återges i dokumentets sidofält. För nu matar jag bara ut lite text "Hej där."

Med ovanstående kod (kompilerad) får vi detta:

Grymt bra. Men vi vill lägga till några ingångar. Men för att kunna koppla dessa ingångar med vår anpassade postmeta måste vi komponera vår komponent med komponenterna av högre ordning withSelect(för att hämta postmetavärdena) och withDispatch(för att uppdatera postmetavärdena). Det kan tyckas lite komplicerat om du inte har arbetat med komponenter av högre ordning tidigare, men när du väl lindar huvudet runt det är det ganska enkelt.

Vi måste först ändra vårt exportuttalande. Istället för att bara returnera vår komponent ensam måste vi komponera den med withSelectoch withDispatch, båda i wp.datapaketet.

Inuti withSelect()har vi tillgång till den kraftfulla select()funktionen. Med hjälp av select()kan vi hämta det aktuella inläggets metavärden. Vi kan också hämta den aktuella posttypen, om vi vill. Som jag nämnde tidigare när vi registrerade inläggsmeta, kan vi begränsa inläggsmetas till en specifik inläggstyp. Om vi hämtar det aktuella inläggets inläggstyp kan vi i vår komponent se till att endast rendera vår kod om vi har rätt inläggstyp. Mer om det senare.

I withDispatch()kan vi definiera funktioner som vi kan köra i vår komponent. Vi gör en funktion som kommer att använda dispatch()för att uppdatera inläggets meta.

Låt oss ändra exportuttalandet till detta:

Vi måste också destrukturera dessa från följande paket i toppen av filen:


const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;

Med detta har vår AWP_Custom_Pluginkomponent tillgång till tre nya rekvisita; postMetasom innehåller alla inläggsmetavärden till det aktuella inlägget; postTypesom innehåller det aktuella inläggets inläggstyp; och slutligen funktionen setPostMeta()vi gjorde i withDispatch()som kommer att uppdatera inläggets meta.

Så i vår komponentdefinition kan vi destrukturera dessa tre nya rekvisita;

Och nu kan vi lägga till några ingångar till vår rendering, se till att de visar det aktuella värdet och att de uppdaterar inläggets meta i händelsen vid ändring. Jag registrerade en boolean och en sträng, så som ett exempel lägger jag till en ToggleControlför en växling och en enkel TextControlför en textinmatning.

Om du är osäker på de inbyggda komponenterna i WordPress har jag en helt gratis e-bok som täcker i stort sett de flesta komponenter som finns tillgängliga i Gutenberg- inklusive vilka rekvisita vi kan ställa in för var och en.

Här är ett exempel på hur vår komponent kan se ut:

Vid linjen #9-10och #16-17vi hittar de kritiska delarna. Vi ställer in ingångarnas aktuella värde till postMeta.<your meta key here>och i deras onChange-händelse kör vi funktionen setPostMeta( { <your meta key here>: ... } )till det nya uppdaterade värdet.

Till sist ett ord om hur du begränsar din komponent till en specifik inläggstyp. I vår withSelect()passerar vi den aktuella postens inläggstyp i rekvisiten postType. Allt vi behöver göra i vår komponent är att jämföra detta värde med en posttyp och returnera null om det inte matchar:

Och det är allt! Vår kod bör nu fungera. Slutresultatet borde vara något i stil med:

Slutlig kod

Registrera inläggsmeta och köa Javascript-filen:

De två Javascript-filerna:

Inspelningskälla: awhitepixel.com