Neben den schon von PHP bekannten Hooks (Action und Filter), gibt es in nun auch eine API um Erweiterungen für den Editor zu erstellen.

Slot / Fill

Die JS Plugins API basiert auf Slots, die mit sogenannten Fills erweitert werden können. Unter Slots versteht man erweiterbare Bereiche, denen UI Elemente hinzugefügt werden können. Beispiele für Slots im Editor sind Einträge in Menüs, Buttons in der Toolbar, Elemente in der Sidebar oder zusätzliche Sidebars.

Man kann also eigene React Komponenten erstellen und diese an den jeweiligen Slots rendern lassen. Ein Slot kann dabei mehrere Fills enthalten.

Beispiel Post Status Panel

Zuerst wird mit Hilfe der Funktion createSlotFill ein Fill und ein Slot erstellt (Zeile 3). In Zeile 5 – 11 wird der Fill definiert. Jeder Fill wird mit einem PanelRow Element umgeben und kann eine Klasse als Parameter entgegen nehmen.

import { createSlotFill, PanelRow } from '@wordpress/components';

export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );

const PluginPostStatusInfo = ( { children, className } ) => (
	<Fill>
		<PanelRow className={ className }>
			{ children }
		</PanelRow>
	</Fill>
);

PluginPostStatusInfo.Slot = Slot;

export default PluginPostStatusInfo;

An der Stelle, an der dieser Slot gerendert wird, importiert man diese Komponente. PluginPostStatusInfo.Slot enthält eine Funktion, die ausgeführt wird, sobald ein Fill gerendert wird. In diesem Fall die weiteren Komponenten der Sidebar. Die registrierten Fills werden in Zeile 14 mit Hilde von { fills } ausgegeben.

import PluginPostStatusInfo from '../plugin-post-status-info';

... 

<PluginPostStatusInfo.Slot>
	{ ( fills ) => (
		<Fragment>
			<PostVisibility />
			<PostSchedule />
			<PostFormat />
			<PostSticky />
			<PostPendingStatus />
			<PostAuthor />
			{ fills }
			<PostTrash />
		</Fragment>
	) }
</PluginPostStatusInfo.Slot>

...

Plugin registrieren

const { registerPlugin } = wp.plugins;
registerPlugin( name: string, settings: Object )

Um ein eigenes Plugin zu registrieren wird die Funktion registerPlugin aus dem Paket Plugins verwendet.

Als name wird ein eindeutiger Bezeichner übergeben, um das Plugin zu identifizieren. Das setting Objekt enthält ein optionales Icon für das UI (Dies ist nicht für alle Plugins nötig) und eine React Komponente mit den UI Elementen, die hinzugefügt werden sollen.

const { PluginPostStatusInfo } = wp.editPost;
const { registerPlugin } = wp.plugins;

const MyPluginPostStatusInfo = () => (
	<PluginPostStatusInfo
		className="my-plugin-post-status-info"
	>
		My post status info
	</PluginPostStatusInfo>
);

registerPlugin( 'my-plugin-post-status-info', {
	render: MyPluginPostStatusInfo,
} );

Die Render-Komponente im Settings-Objekt enthält einen oder mehrere Fills, in diesem Beispiel das PluginPostStatusInfo Element. Dieses Element enthält den Inhalt (hier: „My post status info„), der in den Slot gerendert werden soll.