Anpassade fält är ett sätt att tilldela extra information till webbplatsens innehåll. Dessa bitar av information brukar kallas metadata.

Metadata är information om information. I WordPress fall så är det information som är kopplad till inlägg, användare, kommentarer och termer.

Med tanke på metadatans många-till-en-förhållande i WordPress så är dina alternativ ganska obegränsade. Du kan ha så många metauppgifter som du vill, och där kan du lagra nästan vad som helst.

– Plugin Handbook

Här är några exempel på metadata som du kan bifoga till ett inlägg med hjälp av anpassade fält:

  • De geografiska koordinaterna för en plats eller en fastighet
  • Datum för en händelse
  • ISBN eller författare till en bok
  • Dagens humör hos författaren till inlägget

Och det finns många fler.

WordPress erbjuder tyvärr inget enkelt sätt att lägga till och hantera anpassade fält. I den klassiska redigeraren så visas anpassade fält exempelvis i en ruta som är placerad längst ner på sidan, under inläggsredigeraren.

Anpassade fält i den klassiska redigeraren.
Anpassade fält i den klassiska redigeraren.

Anpassade fält är som standard inaktiverade i Gutenberg, men du kan visa dem genom att välja motsvarande objekt i inläggsinställningarna.

Lägg till panelen för anpassade fält i blockredigeraren.
Lägg till panelen för anpassade fält i blockredigeraren.

Det finns tyvärr inget sätt att visa metadata på frontend utan att använda ett plugin eller smutsa ner händerna med kod.

Om du är en användare så hittar du flera utmärkta plugins som gör jobbet åt dig. Men du kanske är en utvecklare och vill få ut mer av WordPress anpassade fält? Exempelvis integrera dem sömlöst i blockredigeraren och visa dem på frontend av din WordPress-webbplats med hjälp av ett anpassat Gutenberg-block? Då är du på rätt plats.

Om du undrar hur man använder WordPress anpassade fält på bästa möjliga sätt, både i Gutenberg och den klassiska redigeraren för WordPress-utvecklare, är det snabba svaret ”Skapa ett plugin som både fungerar för den klassiska redigeraren och Gutenberg”.

Men oroa dig inte för mycket. Om det är lite knepigt att skapa ett plugin för att hantera anpassade fält i båda redigerarna så ska vi försöka göra processen så enkel som möjligt. Snart så har du koll på de koncept som vi kommer att diskutera i den här artikeln. Då kommer du exempelvis att få de färdigheter som behövs för att hantera anpassade metafält i Gutenberg och bygga alla typer av webbplatser.

Obs: Innan du gör något så måste du se till att du har en uppdaterad version av Node.js på din dator

Med detta sagt, här är vår översikt:

Skapa en blockplugin med det officiella verktyget create-block

Det första steget är att skapa ett nytt plugin med alla filer och beroenden som behövs för att registrera en ny blocktyp. Med blockpluginet så kan du enkelt skapa en anpassad blocktyp för hantering och visning av anpassad metadata.

För att skapa en ny blocktyp så använder vi det officiella verktyget create-block. För en detaljerad översikt över hur du använder create block-verktyget så kan du exempelvis läsa vår tidigare artikel om utveckling av Gutenberg-block.

Öppna ditt kommandoradsverktyg, navigera till plugins-katalogen på din WordPress-utvecklingswebbplats och kör följande kommando:

npx @wordpress/create-block

När du blir tillfrågad så lägger du till följande uppgifter:

  • Den mallvariant som ska användas för det här blocket: dynamisk
  • Den blocknamn som används för identifiering (även namnet på utdatamappen): metadata-block
  • Det interna namnområdet för blocknamnet (något unikt för dina produkter): meta-fält
  • Titeln för blocket: Metafält
  • Den korta beskrivningen av blocket (valfritt): Blockbeskrivning
  • Dashicon för att göra det lättare att identifiera ditt block (valfritt): bok
  • Kategorinamnet för att hjälpa användarna att bläddra och upptäcka ditt block: widgets
  • Vill du anpassa WordPress-pluginet?: Ja/Nej

Låt oss ta en stund för att granska dessa detaljer och försöka förstå var de används.

  • Blocket slug som används för identifiering definierar pluginets mappnamn och textdomän
  • Det interna namnområdet för blocknamnet definierar blockets interna namnområde och funktionsprefix som används i hela pluginets kod.
  • Visningstiteln för ditt block definierar pluginets namn och det blocknamn som används i redigeringsgränssnittet.

Inställningen kan ta ett par minuter. När processen är klar så får du en lista över tillgängliga kommandon.

Block-pluginet har installerats framgångsrikt.
Block-pluginet har installerats framgångsrikt.

Innan du går vidare till nästa avsnitt så ska du navigera till plugin-mappen i ditt kommandoradsverktyg och köra följande kommandon:

cd metadata-block
npm start

Du är redo att bygga din kod. Nästa steg är att redigera pluginets huvudsakliga PHP-fil för att bygga en metaruta för den Klassiska redigeraren.

Så innan du går vidare till nästa avsnitt ska du installera och aktivera pluginet Klassisk Redigerare.

Öppna sedan skärmen Plugins och aktivera det nya pluginet Meta Fields.

Aktivera plugins.
Aktivera plugins.

Lägg till en metaruta i den klassiska redigeraren

I den klassiska redigeraren så är en metaruta en container med formulärelement för att skriva in specifik information, exempelvis inläggsförfattare, taggar, kategorier osv.

Förutom de inbyggda metarutorna så kan utvecklare av plugins lägga till ett obegränsat antal anpassade metarutor för att inkludera HTML-formulärelement (eller annat HTML-innehåll) där pluginens användare kan skriva in plugin-specifika uppgifter.

WordPress API tillhandahåller användbara funktioner för att enkelt registrera anpassade metarutor så att de inkluderar alla de HTML-element som ditt plugin behöver för att fungera.

För att komma igång så lägger du till följande kod i PHP-filen för det plugin som du just har skapat:

// register meta box
function meta_fields_add_meta_box(){
	add_meta_box(
		'meta_fields_meta_box', 
		__( 'Book details' ), 
		'meta_fields_build_meta_box_callback', 
		'post',
		'side',
		'default'
	 );
}

// build meta box
function meta_fields_build_meta_box_callback( $post ){
	  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );
	  $title = get_post_meta( $post->ID, '_meta_fields_book_title', true );
	  $author = get_post_meta( $post->ID, '_meta_fields_book_author', true );
	  ?>
	  <div class="inside">
	  	  <p><strong>Title</strong></p>
		  <p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>	
		  <p><strong>Author</strong></p>
		  <p><input type="text" id="meta_fields_book_author" name="meta_fields_book_author" value="<?php echo esc_attr( $author ); ?>" /></p>
	  </div>
	  <?php
}
add_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );

Funktionen add_meta_box registrerar en ny metaruta, medan callback-funktionen bygger upp den HTML som ska injiceras i metarutan. Vi kommer inte att djupdyka mer i det här ämnet eftersom det ligger utanför ramen för vår artikel, men du hittar alla detaljer som du behöver här, här och här.

Nästa steg är att skapa en funktion som sparar de uppgifter som har matats in av inläggsförfattaren varje gång som save_post –kroken blir utlöst (se Utvecklingsresurser):

// save metadata
function meta_fields_save_meta_box_data( $post_id ) {
	if ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )
		return;
	if ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )
		return;
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
		return;
	if ( ! current_user_can( 'edit_post', $post_id ) )
		return;

	if ( ! isset( $_POST['meta_fields_book_title'] ) )
		return;
	if ( ! isset( $_POST['meta_fields_book_author'] ) )
		return;

	$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
	$author = sanitize_text_field( $_POST['meta_fields_book_author'] );

	update_post_meta( $post_id, '_meta_fields_book_title', $title );
	update_post_meta( $post_id, '_meta_fields_book_author', $author );
}
add_action( 'save_post', 'meta_fields_save_meta_box_data' );

Återigen, kolla in online-dokumentationen för detaljer. Vi vill bara nämna de understrykningstecken (_) som föregår metanyckeln. Detta säger till WordPress att dölja nycklarna för dessa anpassade fält från listan över standarmässigt tillgängliga anpassade fält. Det gör även att dina anpassade fält endast syns i din anpassade metaruta.

Bilden nedan visar hur den anpassade metarutan ser ut i Klassisk redigerare:

En anpassad metaruta i den klassiska redigeraren.
En anpassad metaruta i den klassiska redigeraren.

Pröva nu att inaktivera pluginet Klassisk redigerare och kontrollera vad som händer i blockredigeraren. Då ser du att metarutan fortfarande visas och fungerar, men inte exakt på det sätt som du kanske förväntar dig.

Vårt mål är att skapa ett system för att hantera metadata som är kopplade till blogginlägg eller anpassade inläggstyper som integreras sömlöst i blockredigeraren. Av denna anledning så kommer den kod som visats hittills endast att behövas för att säkerställa bakåtkompatibilitet med den klassiska redigeraren.

Så innan vi går vidare ska vi tala om för WordPress att ta bort den anpassade metaboxen från blockredigeraren genom att lägga till flaggan __back_compat_meta_box till funktionen add_meta_box (se även Flaggor för metaboxkompatibilitet och bakåtkompatibilitet).

Låt oss nu gå tillbaka till callback-funktionen som registrerar metarutan och ändra den enligt följande:

// register meta box
function meta_fields_add_meta_box(){
	add_meta_box(
		'meta_fields_meta_box', 
		__( 'Book details' ), 
		'meta_fields_build_meta_box_callback', 
		'post', 
		'side',
		'default',
		// hide the meta box in Gutenberg
		array('__back_compat_meta_box' => true)
	 );
}

Spara plugin-filen och gå tillbaka till din WordPress-administratör. Nu bör du inte längre se den anpassade metarutan i blockredigeraren. Om du istället återaktiverar den klassiska redigeraren så kommer din anpassade metaruta att dyka upp igen.

Lägg till anpassade metafält i Gutenbergs blockredigerare (tre alternativ)

I våra tidigare artiklar om utveckling av Gutenberg-block så gav vi detaljerade översikter över redigeraren, dess delar och hur man utvecklar statiska block och dynamiska block.

Som vi nämnde tidigare så är det tänkt att den här artikeln tar allt ett steg längre och diskuterar hur du lägger till anpassade metafält till blogginlägg.

Det finns flera sätt att lagra och använda postmetadata i Gutenberg. Här kommer vi att gå igenom följande:

Skapa ett anpassat block för att lagra och visa anpassade metafält

I det här avsnittet så visar vi hur du skapar och hanterar anpassade metafält från ett dynamiskt block. Enligt Blockredigerarens handbok så är ett postmetafält ”ett WordPress-objekt som används för att lagra extra data om ett inlägg” och vi måste först registrera ett nytt metafält innan vi kan använda det.

Registrera anpassade metafält

Innan du registrerar ett anpassat metafält så måste du se till att den inläggstyp som ska använda detta har stöd för anpassade fält. När du registrerar ett anpassat metafält så bör du dessutom ställa in parametern show_in_rest till true.

Nu återgår vi till plugin-filen. Lägg till följande kod:

/**
 * Register the custom meta fields
 */
function meta_fields_register_meta() {

    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];

    foreach( $metafields as $metafield ){
        // Pass an empty string to register the meta key across all existing post types.
        register_post_meta( '', $metafield, array(
            'show_in_rest' => true,
            'type' => 'string',
            'single' => true,
            'sanitize_callback' => 'sanitize_text_field',
            'auth_callback' => function() { 
                return current_user_can( 'edit_posts' );
            }
        ));
    }  
}
add_action( 'init', 'meta_fields_register_meta' );

register_post_meta registrerar en metanyckel för de angivna inläggstyperna. I koden ovan så har vi registrerat två anpassade metafält för alla inläggstyper som är registrerade på din webbplats och som stöder anpassade fält. Mer information finns i funktionsreferensen.

När du är klar så öppnar du filen src/index.js för ditt blockplugin.

Registrera blocktypen på klienten

Navigera nu till mappen wp-content/plugins/metadata-block/src och öppna filen index.js:

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import metadata from './block.json';

registerBlockType( metadata.name, {
	edit: Edit,
} );

Med statiska block så skulle vi även ha sett en save-funktion. I det här fallet så saknas funktionen save eftersom vi har installerat ett dynamiskt block. Innehållet som visas på frontend kommer att genereras dynamiskt via PHP.

Skapa blocktypen

Navigera till mappen wp-content/plugins/metadata-block/src och öppna filen edit.js. Du bör se följande kod (kommentarer är borttagna):

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			{ __( 'Meta Fields – hello from the editor!', 'metadata-block' ) }
		</p>
	);
}

Här lägger du till koden för att generera blocket som ska återges i redigeraren.

Det första steget är att importera de komponenter och funktioner som behövs för att skapa blocket. Här är den fullständiga listan över beroenden:

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl, PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';

Om du har läst våra tidigare artiklar så bör du känna till många av dessa import -deklarationer. Här ska vi bara ta upp ett par av dem:

import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

När du har importerat dessa beroenden så kan du se useSelect och useEntityProp i Edit()-funktionen:

const postType = useSelect(
		( select ) => select( 'core/editor' ).getCurrentPostType(),
		[]
	);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );

Den här koden tillhandahåller aktuell postType, ett objekt med metafält (meta) och en inställningsfunktion för att uppdatera dem (setMeta).

Ersätt nu den nuvarande koden för funktionen Edit() med följande:

export default function Edit() {
	const blockProps = useBlockProps();
	const postType = useSelect(
		( select ) => select( 'core/editor' ).getCurrentPostType(),
		[]
	);
	const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
	const bookTitle = meta[ '_meta_fields_book_title' ];
	const bookAuthor = meta[ '_meta_fields_book_author' ];
	const updateBookTitleMetaValue = ( newValue ) => {
		setMeta( { ...meta, _meta_fields_book_title: newValue } );
    };
	const updateBookAuthorMetaValue = ( newValue ) => {
		setMeta( { ...meta, _meta_fields_book_author: newValue } );
	};
return ( ... );
}

Återigen:

  • Vi använde useSelect för att få fram den aktuella posttypen.
  • useEntityProp returnerar en matris med metafält och en inställningsfunktion för att ställa in nya metavärden.
  • updateBookTitleMetaValue och updateBookAuthorMetaValue är två händelsehanterare för att spara värden för metafält.

Nästa steg är att bygga JSX-koden (JavaScript XML) som returneras av Edit()-funktionen:

export default function Edit() {
	...
	return (
		<>
			<InspectorControls>
				<PanelBody 
					title={ __( 'Book Details' )}
					initialOpen={true}
				>
					<PanelRow>
						<fieldset>
							<TextControl
								label={__( 'Book title' )}
								value={ bookTitle }
								onChange={ updateBookTitleMetaValue }
							/>
						</fieldset>
					</PanelRow>
					<PanelRow>
						<fieldset>
							<TextControl
								label={ __( 'Book author' ) }
								value={ bookAuthor }
								onChange={ updateBookAuthorMetaValue }
							/>
						</fieldset>
					</PanelRow>
				</PanelBody>
			</InspectorControls>
			<div { ...blockProps }>
				<RichText 
					tagName="h3"
					onChange={ updateBookTitleMetaValue }
					allowedFormats={ [ 'core/bold', 'core/italic' ] }
					value={ bookTitle }
					placeholder={ __( 'Write your text...' ) }
				/>
				<TextControl
					label="Book Author"
					value={ bookAuthor }
					onChange={ updateBookAuthorMetaValue }
				/>
			</div>
		</>
	);
}

Komponenten RichText ger en innehållsanpassad inmatning, medan TextControl ger enkla textfält.

Vi skapade även en sidofältspanel som innehåller två inmatningsfält som ska användas i stället för de två formulärkontroller som ingår i blocket.

Spara filen och gå tillbaka till redigeraren. Lägg till blocket Meta Fields från blockinfogaren och fyll i bokens titel och författare.

Ett anpassat block som innehåller två anpassade metafält.
Ett anpassat block som innehåller två anpassade metafält.

Du kommer att märka att när du ändrar värdet på fältet i blocket så ändras även värdet i motsvarande textfält i sidofältet.

Därefter så måste vi skapa PHP-koden som genererar HTML-koden som ska visas på frontend.

Visa blocket på frontend

Öppna PHP-huvudfilen igen i din kodredigerare och skriv om callback-funktionen som genererar blockets utdata på följande sätt:

function meta_fields_metadata_block_block_init() {
	register_block_type(
		__DIR__ . '/build',
		array(
			'render_callback' => 'meta_fields_metadata_block_render_callback',
		)
	);
}
add_action( 'init', 'meta_fields_metadata_block_block_init' );

function meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {
	
	$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );
	$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );
    
	$output = "";

	if( ! empty( $book_title ) ){
		$output .= '<h3>' . esc_html( $book_title ) . '</h3>';
	}
	if( ! empty( $book_author ) ){
		$output .= '<p>' . __( 'Book author: ' ) . esc_html( $book_author ) . '</p>';
	}
	if( strlen( $output ) > 0 ){
		return '<div ' . get_block_wrapper_attributes() . '>' . $output . '</div>';
	} else {
		return '<div ' . get_block_wrapper_attributes() . '>' . '<strong>' . __( 'Sorry. No fields available here!' ) . '</strong>' . '</div>';
	}
}

Den här koden är ganska självförklarande. Vi använder först get_post_meta för att hämta värdena för de anpassade metafälten. Sedan så använder vi dessa värden för att bygga upp blockets innehåll. Slutligen så returnerar callback-funktionen blockets HTML-uppgifter.

Blocket är redo att användas. Vi har avsiktligt hållit koden i det här exemplet så enkel som möjligt. Med hjälp av Gutenberg’s inhemska komponenter så kan du dock bygga mer avancerade block och få ut så mycket som möjligt av WordPress anpassade metafält.

Ett anpassat block som innehåller flera metafält.
Ett anpassat block som innehåller flera metafält.

I vårt exempel så använde vi elementen h3 och p för att bygga blocket för frontend.

Men du kan visa data på många olika sätt. Följande bild visar en enkel oordnad lista med metafält.

Ett exempel på ett block på frontend.
Ett exempel på ett block på frontend.

Du hittar den fullständiga koden för det här exemplet i den här offentliga gist.

Lägga till en anpassad metafältruta i dokumentets sidofält

Det andra alternativet är att fästa anpassade metafält till inlägg med hjälp av ett plugin som genererar en inställningsruta i dokument-sidofältet.

Processen är ganska lik det föregående exemplet, förutom att vi i det här fallet inte kommer att behöva ett block för att hantera metadata. Vi kommer att skapa en komponent för att generera en panel som innehåller en uppsättning kontroller i sidofältet för dokument enligt följande steg:

  1. Skapa ett nytt blockplugin med create-block
  2. Registrera en anpassad metaruta för Klassisk redigerare
  3. Registrera de anpassade metafälten i den huvudsakliga plugin-filen via funktionen register_post_meta()
  4. Registrera ett plugin i filen index.js
  5. Bygg komponenten med hjälp av inbyggda Gutenberg-komponenter

Skapa en ny blockplugin med verktyget create-block

För att skapa ett nytt blockplugin så följer du stegen i föregående avsnitt. Du kan skapa ett nytt plugin eller redigera de skript som vi byggde i det föregående exemplet.

Registrera en anpassad metaruta för den klassiska redigeraren

Därefter så måste du registrera en anpassad metaruta för att säkerställa bakåtkompatibilitet för WordPress-webbplatser som fortfarande använder Klassisk redigerare. Processen är densamma som beskrivs i föregående avsnitt.

Registrera de anpassade metafälten i den huvudsakliga plugin-filen

Nästa steg är att registrera de anpassade metafälten i den huvudsakliga plugin-filen via funktionen register_post_meta(). Du kan återigen följa det tidigare exemplet.

Registrera ett plugin i filen index.js

När du har genomfört de tidigare stegen så är det dags att registrera ett plugin i index.js-filen för att rendera en anpassad komponent.

Innan du registrerar pluginet så skapar du mappen Komponenter i pluginets src-mapp. I mappen Komponenter så skapar du den nya filen MetaBox.js. Du kan välja vilket namn som du tycker är bra för din komponent. Se bara till att följa bästa praxis för namngivning i React.

Innan du går vidare så installerar du pluginet@wordpress/plugins från ditt kommandoradsverktyg.

Stoppa processen (mac), installera pluginet och starta processen igen:

^C
npm install @wordpress/plugins --save
npm start

När du är klar så öppnar du filen index.js i ditt plugin och lägger till följande kod.

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
import { registerPlugin } from '@wordpress/plugins';

import MetaBox from './components/MetaBox';

Koden är ganska självförklarande. Vi vill dock stanna en stund vid de två import-satserna för de läsare som inte har avancerade React-kunskaper.

Med det första import-meddelandet så omslöt vi funktionens namn inom parenteser. I det andra import-meddelandet så är komponentens namn inte omslutet av parenteser.

Registrera sedan ditt plugin:

registerPlugin( 'metadata-plugin', {
	render: MetaBox
} );

registerPlugin registrerar helt enkelt ett plugin. Funktionen tar emot två parametrar:

  • En unik sträng som identifierar pluginet
  • Ett objekt med inställningar för pluginet. Observera att egenskapen render måste anges och vara en giltig funktion.

Bygg komponenten med hjälp av inbyggda Gutenberg-komponenter

Det är dags att bygga vår React-komponent. Öppna filen MetaBox.js (eller vad du nu kallade den) och lägg till följande importutsagor:

import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelRow, TextControl, DateTimePicker } from '@wordpress/components';
  • Funktionen compose utför funktionskomposition, vilket innebär att resultatet av en funktion skickas vidare till en annan funktion. Innan du kan använda compose så kan du behöva installera motsvarande modul: 
    npm install @wordpress/compose --save

    Om du vill använda funktionen compose så måste du först installera den aktuella modulen.

  • withSelect och withDispatch är två komponenter av högre ordning som gör att du kan hämta eller skicka data från eller till en WordPress-butik. withSelect används för att injicera tillståndslösa props med hjälp av registrerade selektorer, withDispatch används för att skicka props med hjälp av registrerade åtgärdsskapare.
  • PluginDocumentSettingPanel skapar objekt i sidofältet för dokument (se källkoden på Github).

Därefter så ska du skapa komponenten för att visa panelen med metarutan i dokument-sidofältet. Lägg till följande kod i din fil MetaBox.js:

const MetaBox = ( { postType, metaFields, setMetaFields } ) => {

	if ( 'post' !== postType ) return null;

	return(
		<PluginDocumentSettingPanel 
			title={ __( 'Book details' ) } 
			icon="book"
			initialOpen={ false }
		>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_title }
					label={ __( "Title" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_author }
					label={ __( "Author" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_publisher }
					label={ __( "Publisher" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<DateTimePicker
					currentDate={ metaFields._meta_fields_book_date }
					onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
					__nextRemoveHelpButton
					__nextRemoveResetButton
				/>
			</PanelRow>
		</PluginDocumentSettingPanel>
	);
}

const applyWithSelect = withSelect( ( select ) => {
	return {
		metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
		postType: select( 'core/editor' ).getCurrentPostType()
	};
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
	return {
		setMetaFields ( newValue ) {
			dispatch('core/editor').editPost( { meta: newValue } )
		}
	}
} );

export default compose([
	applyWithSelect,
	applyWithDispatch
])(MetaBox);

Låt oss dela upp den här koden.

  • ElementetPluginDocumentSettingPanel visar en ny panel i dokumentets sidofält. Vi ställer in titeln (”Book details”) för ikonen och ställer in initialOpen till false, vilket innebär att panelen är stängd från början.
  • Inom PluginDocumentSettingPanel så har vi tre textfält och ett DateTimePicker-element som gör det möjligt för användaren att ange publiceringsdatum.
  • withSelect ger tillgång till funktionen select som vi använder för att hämta metaFields och postType. withDispatch ger tillgång till funktionen dispatch, som gör det möjligt att uppdatera metadata-värdena.
  • Slutligen så gör funktionen compose det möjligt att komponera vår komponent med withSelect och withDispatch, som är komponenter av högre ordning. Detta ger komponenten tillgång till egenskaperna metaFields och postType och funktionen setMetaFields.

Spara din MetaBox.js-fil och skapa ett nytt inlägg på din WordPress-utvecklingswebbplats och ta en titt på Dokument-sidofältet. Du bör se den nya panelen för bokdetaljer.

En anpassad metabox-panel i Gutenberg.
En anpassad metabox-panel i Gutenberg.

Kör nu dina tester. Ange värdena för dina anpassade metafält och spara inlägget. Ladda sedan sidan på nytt och kontrollera om värdena som du har angett finns på plats.

Lägg till blocket som vi har byggt i föregående avsnitt och kontrollera om allt fungerar som det ska.

Lägga till ett anpassat sidofält för att hantera inläggets metadata

Du kanske har ett stort antal anpassade metafält att lägga till i dina inlägg eller anpassade inläggstyper? Då kan du exempelvis skapa ett sidofält för anpassade inställningar specifikt för ditt plugin.

Processen är mycket lik det föregående exemplet. Har du förstått de steg som diskuterades i det föregående avsnittet? Då kommer du troligtvis inte att ha några svårigheter med att bygga ett anpassat sidofält för Gutenberg.

Återigen:

  1. Skapa ett nytt blockplugin med create-block
  2. Gör en registrering av en anpassad metaruta för Klassisk redigerare
  3. Lägg till de anpassade metafälten i den huvudsakliga plugin-filen via funktionen register_post_meta()
  4. Addera ett plugin i filen index.js
  5. Bygg komponenten med hjälp av inbyggda Gutenberg-komponenter

Skapa en ny blockplugin med verktyget create-block

För att skapa ett nytt blockplugin så följer du återigen de steg som har diskuterats ovan. Du kan skapa ett nytt plugin eller redigera de skript som byggdes i de tidigare exemplen.

Registrera en anpassad metaruta för den klassiska redigeraren

Registrera nu en anpassad metaruta för att säkerställa bakåtkompatibilitet för WordPress-webbplatser som fortfarande använder Klassisk redigerare. Processen är densamma som beskrivs i föregående avsnitt.

Registrera de anpassade metafälten i den huvudsakliga plugin-filen

Gör en registrering av de anpassade metafälten i den huvudsakliga plugin-filen via funktionen register_post_meta().

Lägg till ett plugin i filen index.js

Skapa nu en tom CustomSidebar.js-fil i din komponentmapp.

När du är klar så ändrar du din index.js-fil på följande sätt:

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
import { registerPlugin } from '@wordpress/plugins';

import CustomSidebar from './components/CustomSidebar';
// import MetaBox from './components/MetaBox';

registerPlugin( 'metadata-block', {
    render: CustomSidebar
} );

Med koden ovan så importerar vi först komponenten CustomSidebar och säger sedan till funktionen registerPlugin att den nya komponenten ska återges.

Bygg komponenten med hjälp av inbyggda Gutenberg-komponenter

Öppna sedan filen CustomSidebar.js och lägg till följande beroenden:

import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress/components';

Du bör lägga märke till att vi importerar två nya komponenter:

Nu kan du bygga din anpassade komponent:

const CustomSidebar = ( { postType, metaFields, setMetaFields } ) => {
        
    if ( 'post' !== postType ) return null;

    return (
        <>
            <PluginSidebarMoreMenuItem 
                target="metadata-sidebar" 
                icon="book"
            >
                Metadata Sidebar
            </PluginSidebarMoreMenuItem>
            <PluginSidebar 
                name="metadata-sidebar" 
                icon="book" 
                title="My Sidebar"
            >
                <PanelBody title="Book details" initialOpen={ true }>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_title }
                            label={ __( "Title" ) }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_author }
                            label={ __("Author", "textdomain") }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_publisher }
                            label={ __("Publisher", "textdomain") }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <DateTimePicker
                            currentDate={ metaFields._meta_fields_book_date }
                            onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
                            __nextRemoveHelpButton
                            __nextRemoveResetButton
                        />
                    </PanelRow>
                </PanelBody>
            </PluginSidebar>
        </>
    )
}

Det sista steget är komponentkompositionen med withSelect och withDispatch komponenter av högre ordning:

const applyWithSelect = withSelect( ( select ) => {
    return {
        metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
        postType: select( 'core/editor' ).getCurrentPostType()
    };
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
    return {
        setMetaFields ( newValue ) {
            dispatch('core/editor').editPost( { meta: newValue } )
        }
    }
} );

export default compose([
    applyWithSelect,
    applyWithDispatch
])(CustomSidebar);

Spara ändringarna och kontrollera sedan redigeringsgränssnittet. Om du öppnar rullgardinsmenyn Alternativ så ser du det nya objektet Metadata Sidebar under avsnittet Plugins. Om du klickar på det nya objektet så aktiveras ditt helt nya anpassade sidofält.

Komponenten PluginSidebarMoreMenuItem lägger till ett menyalternativ under Alternativ - Plugins.
Komponenten PluginSidebarMoreMenuItem lägger till ett menyalternativ under Alternativ – Plugins.

Samma sak händer när du klickar på bokikonen i det övre högra hörnet.

Sidofältet för plugininställningar.
Sidofältet för plugininställningar.

Gå nu tillbaka till din utvecklingswebbplats och skapa ett nytt blogginlägg. Fyll i dina metafält och lägg sedan till blocket i redigerarens canvas. Det ska innehålla samma metavärden som du skrev in i ditt anpassade sidofält.

Spara inlägget och förhandsgranska sidan i frontend. Du bör se ditt kort med boktitel, författare, förlag och publiceringsdatum.

Du hittar hela koden för den här artikeln i den här offentliga gist.

Ytterligare läsning

I den här artikeln så har vi gått igenom flera ämnen, från selektorer till komponenter av högre ordning och mycket mer. Vi har även länkat till de främsta resurserna som vi använde som referenser i hela artikeln.

Men om du vill dyka djupare i dessa ämnen så kan du även kolla in dessa ytterligare resurser:

Gutenberg-dokumentation och officiella WordPress-resurser

Fler officiella resurser

Ytterligare resurser från community

Användbar läsning från Kinsta-webbplatsen

Sammanfattning

Det här var den tredje artikeln i vår serie om utveckling av Gutenbergblock. Vi tog upp nya avancerade ämnen som bör göra bilden som skisserades i tidigare artiklar om statisk och dynamisk blockutveckling mer komplett.

Du bör nu kunna dra nytta av potentialen hos anpassade fält i Gutenberg och skapa mer avancerade och funktionella WordPress-webbplatser.

Men det finns mer. Med de färdigheter som du har fått från våra artiklar om blockutveckling så bör du även ha en god uppfattning om hur du kan utveckla React-komponenter utanför WordPress. Gutenberg är trots allt ett React-baserat SPA.

Och nu är det upp till dig! Har du redan skapat Gutenbergblock som använder anpassade metafält? Dela dina skapelser med oss i kommentarerna nedan.

Carlo Daniele Kinsta

Carlo är en passionerad älskare av webbdesign och frontend-utveckling. Han har sysslat med WordPress i över 10 år, även i samarbete med italienska och europeiska universitet och utbildningsinstitutioner. Carlo har dessutom skrivit dussintals artiklar och guider om WordPress, som är publicerade både på italienska och internationella webbplatser, samt på tryckta tidskrifter. Du hittar Carlo på X och LinkedIn.