Inhalt in die obere Werkzeugleiste einfügen

Standardmäßig gibt es keine API, um einen neuen Button zur oberen Werkzeugleiste des Block-Editors hinzuzufügen. Wenn du dort demnach einen Button willst, musst du ihn manuell hinzufügen. Das bedeutet, in React, dass du Änderungen an der State abonnieren und dann deinen Inhalt an der von dir gewünschten Stelle hinzufügen musst.

So musst du als erstes alle Änderungen im aktuellen React-State abonnieren. Das heißt, immer wenn sich etwas ändert, wird deine Funktion ausgeführt:

const unsubscribe = subscribe( () => {
	// do stuff
} );
Code-Sprache: JavaScript (javascript)

Die unsubscribe-Konstante wird von der Funktion subscribe zurückgegeben und später zur Beendigung des Abonnements verwendet.

Da wir einen Button zur Werkzeugleiste hinzufügen wollen, wollen wir ihn an der richtigen Stelle hinzufügen, wenn das DOM vollständig geladen ist:

const unsubscribe = subscribe( () => {
	domReady( () => {
		const editorToolbar = document.querySelector( '.edit-post-header__toolbar .edit-post-header-toolbar__left' );
		
		if ( ! editorToolbar ) {
			return;
		}
		
		// create wrapper to fill with the button
		const buttonWrapper = document.createElement( 'div' );
		
		buttonWrapper.id = 'my-panel-button-wrapper';
		buttonWrapper.classList.add( 'my-panel-button-wrapper' );
		editorToolbar.appendChild( buttonWrapper );
		
		render(
			<button>My Button</button>,
			document.getElementById( 'my-panel-button-wrapper' )
		);
	} );
} );
Code-Sprache: JavaScript (javascript)

Hier prüfen wir zuerst, ob der linke Teil der Editor-Werkzeugleiste (mit dem Selektor .edit-post-header__toolbar .edit-post-header-toolbar__left) bereits verfügbar ist und stoppen, wenn das nicht der Fall ist.

Dann erstellen wir ein Wrapper-Element und fügen es zur Editor-Werkzeugleiste hinzu, sodass später unser eigentlicher Inhalt in diesen Container eingefügt werden kann. Diese Methode verwenden wir, weil wir sonst keine React-Komponente zur Editor-Werkzeugleiste hinzufügen können, ohne dangerouslySetInnerHTML zu verwenden.

Danach rendern wir einen individuellen Button innerhalb des erstellten Wrapper-Elements.

Da die subscribe-Funktion jedes Mal aufgerufen wird, wenn sich etwas ändert, müssen wir jetzt auch prüfen, ob das Wrapper-Element bereits existiert. Andernfalls würden wir eine unendliche Anzahl an Buttons zum Editor hinzufügen. Bevor wir also domReady aufrufen, fügen wir eine solche Prüfung hinzu und beenden das Abonnement, wenn der Button bereits existiert:

const unsubscribe = subscribe( () => {
	const wrapper = document.getElementById( 'my-panel-button-wrapper' );
	
	if ( wrapper ) {
		unsubscribe;
		
		return;
	}
	
	domReady( () => {
		const editorToolbar = document.querySelector( '.edit-post-header__toolbar .edit-post-header-toolbar__left' );
		
		if ( ! editorToolbar ) {
			return;
		}
		
		// create wrapper to fill with the button
		const buttonWrapper = document.createElement( 'div' );
		
		buttonWrapper.id = 'my-panel-button-wrapper';
		buttonWrapper.classList.add( 'my-panel-button-wrapper' );
		editorToolbar.appendChild( buttonWrapper );
		
		render(
			<button>My Button</button>,
			document.getElementById( 'my-panel-button-wrapper' )
		);
	} );
} );
Code-Sprache: JavaScript (javascript)

Da ein Button allein erst einmal keine Funktion hat, gibt es hier ein Beispiel mit einem echten Button-Element als React-Komponente mit einem Download-Icon und einem Drop-down, das beim Klick auf das Icon angezeigt wird:

import { Button, Dropdown, Tooltip } from '@wordpress/components';
import { subscribe } from '@wordpress/data';
import domReady from '@wordpress/dom-ready';
import { render } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { download } from '@wordpress/icons';

const MyContent = () => (
	<Dropdown
		renderToggle={ ( { isOpen, onToggle } ) => (
			<Tooltip
				text={ __( 'Tooltip notice', 'my-textdomain' ) }
			>
				<Button
					aria-expanded={ isOpen }
					icon={ download }
					onClick={ onToggle }
				/>
			</Tooltip>
		) }
		renderContent={ () => <div>{ __( 'My content', 'my-textdomain' ) }</div> }
	/>
);

// subscribe to add custom button to toolbar
const unsubscribe = subscribe( () => {
	const wrapper = document.getElementById( 'my-panel-button-wrapper' );
	
	if ( wrapper ) {
		unsubscribe;
		
		return;
	}
	
	domReady( () => {
		const editorToolbar = document.querySelector( '.edit-post-header__toolbar .edit-post-header-toolbar__left' );
		
		if ( ! editorToolbar ) {
			return;
		}
		
		// create wrapper to fill with the button
		const buttonWrapper = document.createElement( 'div' );
		
		buttonWrapper.id = 'my-panel-button-wrapper';
		buttonWrapper.classList.add( 'my-panel-button-wrapper' );
		editorToolbar.appendChild( buttonWrapper );
		
		render(
			<MyContent />,
			document.getElementById( 'my-panel-button-wrapper' )
		);
	} );
} );
Code-Sprache: JavaScript (javascript)

Am Ende möchte ich Aurooba Ahmed für die Code-Inspiration in ihrem QuickPost-Plugin danken.

Schreibe einen Kommentar Antworten abbrechen