Gutenberg: własne pole meta w panelu dokumentu 🧩

Potrzebujesz dodatkowego pola przy wpisie, np. krótkiej zajawki wyświetlanej nad treścią? W edytorze blokowym dodajesz je do panelu dokumentu w sidebarze. Dane lądują w post meta, a w szablonie wyciągasz je jednym get_post_meta() 🧩

Potrzebujesz dwóch części: rejestracji pola w PHP i panelu w JS. Bez PHP pole się nie zapisze.

Krok 1: zarejestruj pole (PHP)

function my_theme_register_entry_lead_meta() {
	register_post_meta( 'post', 'my_theme_entry_lead', array(
		'type'              => 'string',
		'single'            => true,
		'show_in_rest'      => true,
		'sanitize_callback' => 'sanitize_textarea_field',
	) );
}
add_action( 'init', 'my_theme_register_entry_lead_meta' );

• show_in_rest udostępnia pole edytorowi. Bez niego getEditedPostAttribute( 'meta' ) go nie zobaczy
• Własny typ wpisu musi obsługiwać custom-fields ('supports' => array( 'custom-fields' )), inaczej meta nie trafi do edytora
• sanitize_textarea_field usuwa znaczniki HTML: wpisane <b>lead</b> zapisze się jako lead
• Zamień my_theme na własny prefiks

Krok 2: panel w sidebarze (JS)

import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
import { TextareaControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const EntryLeadPanel = () => {
	const entryLead = useSelect( ( select ) => {
		const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
		return meta ? meta.my_theme_entry_lead : '';
	}, [] );

	const { editPost } = useDispatch( 'core/editor' );

	return (
		<PluginDocumentSettingPanel
			name="entry-lead-panel"
			title={ __( 'Entry Lead', 'my-theme' ) }
			className="entry-lead-panel"
		>
			<TextareaControl
				label={ __( 'Entry Lead', 'my-theme' ) }
				help={ __( 'Text to display prominently near the top of the post.', 'my-theme' ) }
				value={ entryLead }
				onChange={ ( value ) => editPost( { meta: { my_theme_entry_lead: value } } ) }
			/>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'entry-lead-plugin', {
	render: EntryLeadPanel,
	icon: 'edit',
} );

• Importuj PluginDocumentSettingPanel z @wordpress/editor. Wersja z @wordpress/edit-post jest przestarzała od WordPressa 6.6 i w konsoli pojawia się ostrzeżenie
• Skrypt musi trafić do edytora przez enqueue_block_editor_assets
• editPost zmienia wpis w edytorze. Zapis do bazy następuje dopiero po kliknięciu „Zaktualizuj”

Krok 3: wyświetl pole w szablonie

$entry_lead = get_post_meta( get_the_ID(), 'my_theme_entry_lead', true );

if ( $entry_lead ) {
	echo '<p class="entry-lead">' . esc_html( $entry_lead ) . '</p>';
}

Sprawdź

Otwórz wpis, w sidebarze wybierz kartę „Wpis” i znajdź panel „Entry Lead”. Wpisz tekst, kliknij „Zaktualizuj” i odśwież edytor: tekst ma zostać w polu.

Jakie pole dodałeś do swoich wpisów? Napisz w komentarzu 👏