Brugerdefinerede felter giver mulighed for at tildele ekstra oplysninger til webstedsindhold. Disse oplysninger er normalt kendt som metadata.

Metadata er oplysninger om oplysninger. I WordPress’ tilfælde er det oplysninger, der er forbundet med indlæg, brugere, kommentarer og vilkår.

I betragtning af metadatas mange-til-en-forholdet i WordPress er dine muligheder temmelig ubegrænsede. Du kan have så mange metaindstillinger, som du ønsker, og du kan gemme stort set hvad som helst derinde.

—Plugin Handbook

Her er nogle eksempler på metadata, du kan vedhæfte til et indlæg ved hjælp af brugerdefinerede felter:

  • De geografiske koordinater for et sted eller en fast ejendom
  • Datoen for en begivenhed
  • ISBN-nummeret eller forfatteren til en bog
  • Dagens humør hos forfatteren af indlægget

Og der er mange flere.

Ud af boksen giver WordPress ikke en nem måde at tilføje og administrere brugerdefinerede felter på. I den klassiske editor vises brugerdefinerede felter i en boks, der er placeret nederst på siden, under indlægseditoren.

Brugerdefinerede felter i den klassiske editor.
Brugerdefinerede felter i den klassiske editor.

I Gutenberg er brugerdefinerede felter som standard deaktiveret, men du kan vise dem ved at vælge det tilsvarende element i indlægsindstillingerne.

Tilføjelse af panelet med brugerdefinerede felter til blokredigeringsprogrammet.
Tilføjelse af panelet med brugerdefinerede felter til blokredigeringsprogrammet.

Desværre er der ingen måde at vise metadata på frontend på uden at bruge et plugin eller få hænderne beskidte med kode.

Hvis du er bruger, kan du finde flere fremragende plugins, der gør jobbet for dig derude. Men hvis du er udvikler og ønsker at få mere ud af WordPress tilpassede felter, integrere dem problemfrit i blokredigeringsprogrammet og vise dem på frontend af dit WordPress-websted ved hjælp af en tilpasset Gutenberg-blok, så er du kommet til det rette sted.

Så hvis du spekulerer på, hvad der er den bedste måde at bruge WordPress-brugerdefinerede felter på både i Gutenberg og den klassiske editor for WordPress-udviklere, er det hurtige svar “at skabe et plugin, der fungerer både til den klassiske editor og Gutenberg”.

Men du skal ikke bekymre dig for meget. Hvis det kan være lidt tricky at skabe et plugin til at administrere brugerdefinerede felter i begge editorer, vil vi forsøge at gøre processen så ligetil som muligt. Når du forstår de koncepter, som vi vil diskutere i denne artikel, vil du få de nødvendige færdigheder til at administrere brugerdefinerede metafelter i Gutenberg og bygge alle slags websteder.

Bemærk: Før du gør noget, skal du sikre dig, at du har en opdateret version af Node.js på din computer.

Når det er sagt, er her vores oversigt:

Opret et blokplugin med det officielle create-block-værktøj

Det første skridt er at oprette et nyt plugin med alle de filer og afhængigheder, der er nødvendige for at registrere en ny blok-type. Block-plugin’et vil give dig mulighed for nemt at oprette en brugerdefineret bloktype til administration og visning af brugerdefinerede metadata.

For at oprette en ny bloktype bruger vi det officielle create-block-værktøj. Du kan få en detaljeret oversigt over, hvordan du bruger create-block-værktøjet, i vores tidligere artikel om udvikling af Gutenberg-blokke.

Åbn dit kommandolinjeværktøj, naviger til plugins-mappen på dit WordPress-udviklingswebsted, og kør følgende kommando:

npx @wordpress/create-block

Når du bliver bedt om det, skal du tilføje følgende oplysninger:

  • Den skabelonvariant, der skal bruges til denne blok: dynamic
  • Den blok, der anvendes til identifikation (også navnet på outputmappen): metadata-block
  • Det interne navnerum for bloknavnet (noget unikt for dine produkter): meta-fields
  • Visningstitlen for din blok: Meta Fields
  • Den korte beskrivelse af din blok (valgfrit): Blokbeskrivelse (valgfri)
  • Dashiconet for at gøre det lettere at identificere din blok (valgfrit ): bog
  • Kategorinavnet for at hjælpe brugerne med at gennemse og finde din blok: Widgets
  • Ønsker du at tilpasse WordPress-plugin’et? Ja/Nej

Lad os tage et øjeblik til at gennemgå disse detaljer og forsøge at forstå, hvor de bruges.

  • Den blok slug, der bruges til identifikation, definerer pluginets mappenavn og tekstdomæne.
  • Det interne navnerum for bloknavnet definerer blokens interne navnerum og funktionspræfiks, der bruges i hele pluginets kode.
  • Visningstitlen for din blok definerer plugin-navnet og det bloknavn, der bruges i editorgrænsefladen.

Opsætningen kan tage et par minutter. Når processen er afsluttet, får du en liste over de tilgængelige kommandoer.

Block plugin er installeret med succes.
Block plugin er installeret med succes.

Før du går videre til næste afsnit, skal du i dit kommandolinjeværktøj navigere til din plugin-mappe og køre følgende kommandoer:

cd metadata-block
npm start

Du er klar til at bygge din kode. Det næste skridt er at redigere pluginets primære PHP-fil for at bygge en metaboks til Classic Editor.

Så før du går videre til næste afsnit, skal du installere og aktivere plugin‘et Classic Editor.

Åbn derefter skærmen Plugins, og aktiver det nye plugin Meta Fields.

Aktiver plugins.
Aktiver plugins.

Tilføj et metafelt til den klassiske editor

I forbindelse med Classic Editor er en metaboks en beholder med formularelementer til indtastning af specifikke oplysninger, f.eks. indlægsforfatter, tags, kategorier osv.

Ud over de indbyggede metabokse kan plugin-udviklere tilføje et vilkårligt antal brugerdefinerede metabokse for at inkludere HTML-formularelementer (eller ethvert HTML-indhold), hvor plugin-brugere kan indtaste plugin-specifikke data.

WordPress API indeholder nyttige funktioner til nemt at registrere brugerdefinerede metabokse for at inkludere alle de HTML-elementer, som dit plugin skal bruge for at fungere.

For at komme i gang skal du føje følgende kode til PHP-filen for det plugin, du lige har oprettet:

// 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 registrerer en ny metaboks, mens callback-funktionen opbygger den HTML, der skal indsættes i metaboksen. Vi vil ikke dykke dybere ned i dette emne, da det ligger uden for rammerne af vores artikel, men du kan finde alle de detaljer, du har brug for, her, her og her.

Det næste skridt er at oprette en funktion, der gemmer de data, der er indtastet af indlægsforfatteren, hver gang save_post hook’en udløses (se Developer Resources):

// 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' );

Igen, tjek online-dokumentationen for detaljer. Her vil vi blot påpege understregningstegnet (_), der går forud for metanøglen. Dette fortæller WordPress at skjule nøglerne til disse brugerdefinerede felter fra listen over tilgængelige brugerdefinerede felter som standard og gør dine brugerdefinerede felter kun synlige i din brugerdefinerede metaboks.

Billedet nedenfor viser, hvordan den brugerdefinerede metaboks ser ud i den klassiske editor:

En brugerdefineret metaboks i den klassiske editor.
En brugerdefineret metaboks i den klassiske editor.

Hvis du nu deaktiverer plugin’et Classic Editor og kontrollerer, hvad der sker i blok-editoren, vil du se, at metaboksen stadig vises og fungerer, men ikke helt på den måde, du måske forventer.

Vores mål er at skabe et system til håndtering af metadata, der er knyttet til blogindlæg eller brugerdefinerede indlægstyper, som integreres problemfrit i blokredigeringsprogrammet. Derfor vil den kode, der er vist indtil videre, kun være nødvendig for at sikre bagudkompatibilitet med den klassiske editor.

Så før vi går videre, fortæller vi WordPress at fjerne den brugerdefinerede metaboks fra blokeditoren ved at tilføje __back_compat_meta_box -flaget til add_meta_box -funktionen (se også Meta Box Compatibility Flags og Bagudkompatibilitet).

Lad os gå tilbage til callback-funktionen, der registrerer metaboksen, og ændre den som følger:

// 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)
	 );
}

Gem plugin-filen, og gå tilbage til din WordPress-administrator. Nu bør du ikke længere se den brugerdefinerede metaboks i blokeditoren. Hvis du i stedet genaktiverer den klassiske editor, vil din brugerdefinerede metaboks dukke op igen.

Tilføj brugerdefinerede metafelter til Gutenberg-blokeditor (tre muligheder)

I vores tidligere artikler om udvikling af Gutenberg-blokke gav vi detaljerede oversigter over editoren, dens dele, og hvordan du udvikler statiske blokke og dynamiske blokke.

Som vi nævnte, tager vi i denne artikel et skridt videre og diskuterer, hvordan du tilføjer brugerdefinerede metafelter til blogindlæg.

Der er flere måder at gemme og bruge indlægsmetadata på i Gutenberg. Her vil vi dække følgende:

Opret en brugerdefineret blok til at gemme og vise brugerdefinerede metafelter

I dette afsnit viser vi dig, hvordan du opretter og administrerer brugerdefinerede metafelter fra en dynamisk blok. Ifølge Block Editor Handbook er et indlægsmetafelt “et WordPress-objekt, der bruges til at gemme ekstra data om et indlæg”, og vi skal først registrere et nyt metafelt, før vi kan bruge det.

Registrer brugerdefinerede metafelter

Før du registrerer et brugerdefineret metafelt, skal du sikre dig, at den indlægstype, der skal bruge det, understøtter brugerdefinerede felter. Når du registrerer et brugerdefineret metafelt, skal du desuden indstille parameteren show_in_rest til true.

Nu tilbage til plugin-filen. Tilføj følgende kode:

/**
 * 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 registrerer en metanøgle for de angivne posttyper. I koden ovenfor har vi registreret to brugerdefinerede metafelter for alle posttyper, der er registreret på dit websted, og som understøtter brugerdefinerede felter. Du kan finde flere oplysninger i funktionsreferencen.

Når det er gjort, skal du åbne filen src/index.js for dit block-plugin.

Registrer bloktypen på klienten

Naviger nu til mappen wp-content/plugins/metadata-block/src, og åbn 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 statiske blokke ville vi også have set en save funktion. I dette tilfælde mangler funktionen save, fordi vi har installeret en dynamisk blok. Det indhold, der vises på frontend, genereres dynamisk via PHP.

Opbyg bloktypen

Naviger til mappen wp-content/plugins/metadata-block/src, og åbn filen edit.js. Du bør se følgende kode (kommentarer er fjernet):

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>
	);
}

Her skal du tilføje koden til at generere den blok, der skal gengives i editoren.

Det første skridt er at importere de komponenter og funktioner, der er nødvendige for at opbygge blokken. Her er den komplette liste over afhængigheder:

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';

Hvis du har læst vores tidligere artikler, bør du være bekendt med mange af disse import -deklarationer. Her vil vi blot pege på et par af dem:

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

Når du har importeret disse afhængigheder, kan du se her, hvordan du useSelect og useEntityProp i Edit() -funktionen:

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

Denne kode giver den aktuelle postType, et objekt med metafelter (meta) og en setterfunktion til at opdatere dem (setMeta).

Udskift nu den nuværende kode for funktionen Edit() med følgende:

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 ( ... );
}

Igen:

  • Vi brugte useSelect til at få den aktuelle posttype.
  • useEntityProp returnerer et array af metafelter og en setter-funktion til at indstille nye metaværdier.
  • updateBookTitleMetaValue og updateBookAuthorMetaValue er to event handlers til at gemme værdier for metafelter.

Det næste skridt er at opbygge JSX-koden (JavaScript XML), der returneres af 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 giver et indholdsdefinerbart input, mens TextControl giver simple tekstfelter.

Vi har også oprettet et sidebar-panel med to inputfelter til brug i stedet for de to formularkontroller, der er inkluderet i blokken.

Gem filen, og gå tilbage til editoren. Tilføj blokken Meta Fields fra blokinserter og udfyld bogens titel og forfatter.

En brugerdefineret blok inklusive to brugerdefinerede metafelter
En brugerdefineret blok, der indeholder to brugerdefinerede metafelter.

Du vil bemærke, at hver gang du ændrer værdien af feltet i blokken, ændres værdien i det tilsvarende tekstfelt i sidebaren også.

Dernæst skal vi oprette den PHP-kode, der genererer den HTML, der skal gengives på frontend.

Vis blokken på frontend

Åbn PHP-hovedfilen igen i din kodeeditor, og omskriv callback-funktionen, der genererer output af blokken, som følger:

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>';
	}
}

Denne kode er ganske selvforklarende. Først bruger vi get_post_meta til at hente værdierne for de brugerdefinerede metafelter. Derefter bruger vi disse værdier til at opbygge blokindholdet. Til sidst returnerer callback-funktionen blokkens HTML-kode.

Blokken er klar til at blive brugt. Vi har med vilje holdt koden i dette eksempel så enkel som muligt, men ved hjælp af Gutenbergs native komponenter kan du bygge mere avancerede blokke og få mest muligt ud af WordPress brugerdefinerede metafelter.

En brugerdefineret blok med flere metafelter.
En brugerdefineret blok med flere metafelter.

I vores eksempel brugte vi h3 og p elementer til at bygge blokken til frontend.

Men du kan vise dataene på mange måder. Det følgende billede viser en simpel uordnet liste af metafelter.

En eksempelblok på frontend.
En eksempelblok på frontend.

Du finder den komplette kode for dette eksempel i denne offentlige gist.

Tilføjelse af en brugerdefineret metaboks til dokumentets sidebar

Den anden mulighed er at vedhæfte brugerdefinerede metafelter til indlæg ved hjælp af et plugin, der genererer et indstillingspanel i Document Sidebar.

Processen er ret lig det foregående eksempel, bortset fra at vi i dette tilfælde ikke har brug for en blok til at administrere metadata. Vi opretter en komponent til at generere et panel med et sæt kontroller i Document sidebar ved at følge disse trin:

  1. Opret et nyt blok-plugin med create-block
  2. Registrer en brugerdefineret metaboks til den klassiske editor
  3. Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta()
  4. Registrer et plugin i filen index.js
  5. Opbyg komponenten ved hjælp af indbyggede Gutenberg-komponenter

Opret et nyt blokplugin med værktøjet create-block

For at oprette et nyt blokplugin skal du følge trinene i det foregående afsnit. Du kan oprette et nyt plugin eller redigere de scripts, vi byggede i det foregående eksempel.

Registrer en brugerdefineret metaboks til den klassiske editor

Dernæst skal du registrere en brugerdefineret metaboks for at sikre bagudkompatibilitet for WordPress-websteder, der stadig bruger Classic Editor. Processen er den samme som beskrevet i det foregående afsnit.

Registrer de brugerdefinerede metafelter i hovedpluginfilen

Det næste trin er at registrere de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta(). Igen kan du følge det foregående eksempel.

Registrer et plugin i filen index.js

Når du har gennemført de foregående trin, er det tid til at registrere et plugin i index.js-filen for at gengive en brugerdefineret komponent.

Før du registrerer plugin’et, skal du oprette en mappe components i plugin’ets src-mappe. Inde i mappen components skal du oprette en ny MetaBox.js-fil. Du kan vælge det navn, som du synes er passende for din komponent. Du skal blot sørge for at følge den bedste praksis for navngivning i React.

Før du går videre, skal du installere modulet@wordpress/plugins fra dit kommandolinjeværktøj.

Stop processen (mac), installer modulet, og start processen igen:

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

Når det er gjort, skal du åbne filen index.js i dit plugin og tilføje følgende kode.

/**
 * 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';

Denne kode er ret selvforklarende. Vi vil dog gerne tage et øjeblik til at dvæle ved de to import statements for de læsere, der ikke har avancerede React-færdigheder.

Med den første import -erklæring omsluttede vi navnet på funktionen i krøllede parenteser. Med den anden import -erklæring er komponentens navn ikke omsluttet af krøllede parenteser.

Derefter skal du registrere dit plugin:

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

registerPlugin registrerer blot et plugin. Funktionen accepterer to parametre:

  • En unik streng, der identificerer plugin’et
  • Et objekt med plugin-indstillinger. Bemærk, at render -egenskaben skal angives og skal være en gyldig funktion.

Opbygning af komponenten ved hjælp af indbyggede Gutenberg-komponenter

Det er tid til at bygge vores React-komponent. Åbn filen MetaBox.js (eller hvad du nu kaldte den) og tilføj følgende import statements:

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 udfører funktionssammensætning, hvilket betyder, at resultatet af en funktion sendes videre til en anden funktion. før du kan bruge compose, skal du muligvis installere det tilsvarende modul: 
    npm install @wordpress/compose --save

    Vi vil se funktionen compose i aktion om lidt.

  • withSelect og withDispatch er to komponenter af højere orden, der giver dig mulighed for at hente eller sende data fra eller til et WordPress-lager. withSelect bruges til at injicere statsafledte props ved hjælp af registrerede selektorer, withDispatch bruges til at sende props ved hjælp af registrerede action creators.
  • PluginDocumentSettingPanel gør elementer i dokumentets sidebjælke klar (se kildekoden på Github).

Dernæst skal du oprette komponenten til at vise metabokspanelet i Document sidebar. I din MetaBox.js-fil skal du tilføje følgende kode:

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);

Lad os opdele denne kode.

  • PluginDocumentSettingPanel -elementet gør et nyt panel i dokumentets sidebar klar. Vi indstiller titlen (“Book details”) og ikonet og indstiller initialOpen til false, hvilket betyder, at panelet oprindeligt er lukket.
  • Inden for PluginDocumentSettingPanel har vi tre tekstfelter og et DateTimePicker -element, som giver brugeren mulighed for at indstille udgivelsesdatoen.
  • withSelect giver adgang til funktionen select, som vi bruger til at hente metaFields og postType. withDispatch giver adgang til funktionen dispatch, som gør det muligt at opdatere metadataværdierne.
  • Endelig giver funktionen compose os mulighed for at sammensætte vores komponent med withSelect og withDispatch komponenter af højere orden. Dette giver komponenten adgang til egenskaberne metaFields og postType og til funktionen setMetaFields.

Gem din MetaBox.js-fil, og opret et nyt indlæg på dit WordPress-udviklingswebsted, og tag et kig på Document Sidebar. Du bør se det nye panel med bogdetaljer.

Et brugerdefineret metabox-panel i Gutenberg.
Et brugerdefineret metabox-panel i Gutenberg.

Kør nu dine tests. Indstil værdierne for dine brugerdefinerede metafelter, og gem indlægget. Genindlæs derefter siden, og tjek, om de værdier, du har indtastet, er på plads.

Tilføj den blok, vi har bygget i det foregående afsnit, og tjek, om alt fungerer korrekt.

Tilføjelse af en brugerdefineret sidebar til at administrere indlægsmetadata

Hvis du har et stort antal brugerdefinerede metafelter, der skal tilføjes til dine indlæg eller brugerdefinerede indlægstyper, kan du også oprette en brugerdefineret indstillingssidebar specielt til dit plugin.

Processen er meget lig det foregående eksempel, så hvis du har forstået de trin, der blev diskuteret i det foregående afsnit, vil du ikke have nogen problemer med at bygge en brugerdefineret sidebar til Gutenberg.

Igen:

  1. Opret et nyt blok-plugin med create-block
  2. Registrer en brugerdefineret metaboks til den klassiske editor
  3. Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta()
  4. Registrer et plugin i filen index.js
  5. Opbyg komponenten ved hjælp af indbyggede Gutenberg-komponenter

Opret et nyt blokplugin med værktøjet create-block

For at oprette et nyt blokplugin skal du igen følge de trin, der er beskrevet ovenfor. Du kan oprette et nyt plugin eller redigere de scripts, der er bygget i de tidligere eksempler.

Registrer en brugerdefineret metaboks til den klassiske editor

Registrer nu en brugerdefineret metaboks for at sikre bagudkompatibilitet for WordPress-websteder, der stadig bruger den klassiske editor. Processen er den samme som beskrevet i det foregående afsnit.

Registrer de brugerdefinerede metafelter i hovedpluginfilen

Registrer de brugerdefinerede metafelter i hovedpluginfilen via funktionen register_post_meta().

Registrer et plugin i filen index.js

Opret nu en tom CustomSidebar.js-fil i din komponentmappe.

Når det er gjort, skal du ændre din index.js-fil som følger:

/**
 * 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 ovenstående kode importerer vi først komponenten CustomSidebar, og derefter fortæller vi registerPlugin -funktionen, at den skal gengive den nye komponent.

Opbygning af komponenten ved hjælp af indbyggede Gutenberg-komponenter

Åbn derefter filen CustomSidebar.js, og tilføj følgende afhængigheder:

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 bemærke, at vi importerer to nye komponenter:

  • PluginSidebar vi skal tilføje følgende nye komponenter: Vi skal tilføje et ikon til Gutenberg-værktøjslinjen, som, når der klikkes på det, viser en sidebar, herunder indholdet pakket ind i <PluginSidebar /> -elementet (komponenten er også dokumenteret på GitHub).
  • PluginSidebarMoreMenuItem renderer et menupunkt under Plugins i More Menu dropdown og kan bruges til at aktivere den tilsvarende PluginSidebar -komponent (se også på GitHub).

Nu kan du bygge din brugerdefinerede 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 sidste trin er komponentsammensætningen med withSelect og withDispatch komponenter af højere orden:

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);

Gem dine ændringer, og tjek derefter editor-grænsefladen. Hvis du åbner rullemenuen Indstillinger, vil du se et nyt punkt Metadata Sidebar under afsnittet Plugins. Hvis du klikker på det nye element, aktiveres din helt nye brugerdefinerede sidebar.

PluginSidebarMoreMenuItem-komponenten tilføjer et menupunkt under Options - Plugins.
PluginSidebarMoreMenuItem-komponenten tilføjer et menupunkt under Options – Plugins.

Det samme sker, når du klikker på bogikonet i øverste højre hjørne.

Sidebjælken Plugin Settings Sidebar.
Sidebjælken Plugin Settings Sidebar.

Gå nu tilbage til dit udviklingswebsted, og opret et nyt blogindlæg. Udfyld dine metafelter, og tilføj derefter blokken til editorens lærred. Den skal indeholde de samme metaværdier, som du indtastede i din brugerdefinerede sidebar.

Gem indlægget, og få vist siden på frontend. Du bør se dit kort med bogens titel, forfatter, forlag og udgivelsesdato.

Du finder den fulde kode for denne artikel i denne offentlige gist.

Yderligere læsning

I denne artikel har vi dækket flere emner, fra selektorer til komponenter af højere orden og meget mere. Vi har også linket de bedste ressourcer, vi har brugt som reference i hele artiklen.

Men hvis du ønsker at dykke dybere ned i disse emner, kan du også tjekke følgende yderligere ressourcer:

Gutenberg-dokumentation og officielle WordPress-ressourcer

Flere officielle ressourcer

Yderligere ressourcer fra fællesskabet

Nyttig læsning fra Kinsta-webstedet

Opsummering

I denne tredje artikel i vores serie om udvikling af Gutenberg-blokke dækkede vi nye avancerede emner, som skulle gøre det billede, der blev skitseret i tidligere artikler om udvikling af statiske og dynamiske blokke, mere komplet.

Du skulle nu være i stand til at udnytte potentialet i brugerdefinerede felter i Gutenberg og skabe mere avancerede og funktionelle WordPress-websteder.

Men der er mere. Med de færdigheder, du har fået fra vores artikler om blokudvikling, bør du også have en god idé om, hvordan du kan udvikle React-komponenter uden for WordPress. Gutenberg er jo trods alt en React-baseret SPA.

Og nu er det op til dig! Har du allerede oprettet Gutenberg-blokke, der bruger bruger tilpassede metafelter? Del dine kreationer med os i kommentarerne nedenfor.

Carlo Daniele Kinsta

Carlo er en passioneret elsker af webdesign og frontend udvikling. Han har arbejdet med WordPress i over 10 år, også i samarbejde med italienske og europæiske universiteter og uddannelsesinstitutioner. Han har skrevet snesevis af artikler og guides om WordPress, udgivet både på italienske og internationale hjemmesider samt på trykte magasiner. Du kan finde Carlo på X og LinkedIn.