Block-Editor Inline-Formatierung: Inhalt hinzufügen/entfernen

Veröffentlicht: 27. Januar 2025 von Matze – Kommentar hinterlassen Letzte Aktualisierung: 16. Februar 2025

Durch die Inline-Formatierung im Block-Editor kannst du das Format des Inhalts innerhalb eines Blocks ändern. Normalerweise ist sie dazu gedacht, HTML vor und nach einer Textauswahl einzufügen. Da ich aber Inhalte inline hinzufügen und entfernen musste, wollte ich etwas anderes erreichen. Im Folgenden beschreibe ich, wie man mit der Inline-Formatierung des Block-Editors Inhalte richtig hinzufügen und entfernen kann.

Zuerst einmal hängt die Inline-Formatierung stark vom @wordpress/rich-text React-Paket ab. Falls du damit noch nicht gearbeitet hast, lies dir unbedingt die Dokumentation durch und erstelle idealerweise zuerst deine erste eigene Inline-Formatierung.

In meinem Beispiel ging es darum, bedingte Trennstriche hinzuzufügen, damit der Benutzer steuern kann, wo Wörter getrennt werden, ohne den Block per HTML bearbeiten zu müssen. Da hierfür ein neues Zeichen über die Inline-Formatierung eingefügt werden muss, habe ich nach einer Lösung gesucht, wie man das umsetzen kann.

Wenn du ein Inline-Format mit registerFormatType registrierst, bekommt deine edit-Funktion einen Parameter, das value-Objekt vom Typ RichTextValue. Dieses enthält den Start und das Ende einer Auswahl, den ausgewählten Text sowie ein Array mit bereits angewendeten Formatierungen.

Auswahl prüfen

Da ich ein Zeichen an der Position des Cursors hinzufügen möchte, überprüfe ich in meiner Klickfunktion der RichTextToolbarButton-Komponente zunächst mit der Methode isCollapsed, ob sich der Cursor im aktuellen Block befindet und kein Text ausgewählt ist. Genau an dieser Stelle soll mein weiches Trennzeichen eingefügt werden.

if ( ! isCollapsed( value ) ) {
	return;
}
Code-Sprache: JavaScript (javascript)

Abhängig davon, ob die Formatierung bereits aktiv ist (eine Eigenschaft, die in der edit-Funktion von registerFormatType zurückgegeben wird), füge ich entweder den bedingten Trennstrich hinzu oder entferne ihn wieder. In der Praxis füge ich allerdings kein UTF-8-Zeichen für den bedingten Trennstrich ein, da das RichTextValue-Objekt mit solchen Zeichen nicht korrekt funktioniert und sie nicht mitzählt. Stattdessen verwende ich vorerst einen normalen Bindestrich (oder Minus). In meiner registerFormatType-Funktion verwende ich eine individuelle className und setze span als tagName, sodass der Bindestrich von einem span-Element mit meiner individuellen Klasse umgeben ist.

registerFormatType( 'my-plugin-soft-hyphens/soft-hyphens', {
	className: 'my-plugin__soft-hyphen',
	edit: ToolbarButton,
	tagName: 'span',
	title: __( 'Soft Hyphen', 'my-plugin-soft-hyphens' ),
} );
Code-Sprache: JavaScript (javascript)

Inhalt hinzufügen

Zum Hinzufügen von Inhalten habe ich die insert-Methode in @wordpress/rich-text gefunden, die genau das bietet, was wir hier benötigen. Als ersten Parameter übergeben wir das RichTextValue-Objekt, als zweiten den Text, den wir hinzufügen möchten (ein -), und als dritten die Position, an der wir ihn einfügen möchten (den Startindex des RichTextValue-Objekts).

value = insert( value, '-', value.start );Code-Sprache: JavaScript (javascript)

Jetzt haben wir erfolgreich ein - hinzugefügt, aber die Textformatierung fehlt noch. Um diese ebenfalls hinzuzufügen, müssen wir zunächst sicherstellen, dass das hinzugefügte - Teil des RichTextValue-Objekts ist. Daher ändern wir die Auswahl programmatisch, indem wir 1 vom start-Index subtrahieren, da wir zuvor ein einzelnes Zeichen hinzugefügt haben:

value.start -= 1;Code-Sprache: JavaScript (javascript)

Dann schalten wir das Format normal um:

onChange(
	toggleFormat( value, {
		type: 'my-plugin/soft-hyphens',
	} )
);
Code-Sprache: JavaScript (javascript)

Inhalt entfernen

Um die Formatierung und das - wieder zu entfernen, müssen wir 1 vom start– und end-Index substrahieren, da dies die Zielposition ist, von der die Formatierung entfernt werden soll. Dafür haben wir, ähnlich wie die insert-Methode, eine remove-Methode in @wordpress/rich-text, um das - wieder zu entfernen. Dafür übergeben wir ebenfalls das RichTextValue-Objekt als ersten Parameter, value.start als zweiten und value.end + 1 als dritten, da wir zuvor ein einzelnes Zeichen hinzugefügt haben:

value = remove( value, value.start, value.end + 1 );Code-Sprache: JavaScript (javascript)

Dann entfernen wir die Formatierung normal:

onChange(
	removeFormat(
		value,
		'my-class/soft-hyphens'
	)
);
Code-Sprache: JavaScript (javascript)

- mit einem korrekten bedingten Trennzeichen ersetzen

Nachdem wir die Formatierung angewendet haben, finden wir nun folgenden Inhalt im Quellcode:

<code><span class="my-plugin__soft-hyphen">-</span></code>Code-Sprache: HTML, XML (xml)

Wie man sehen kann, ist das noch kein echtes bedingtes Trennzeichen. Um es zu ersetzen, benötigen wir etwas PHP und filtern die Blöcke über den Filter render_block:

/**
 * Replace hyphens with soft hyphens.
 * 
 * @param	string	$block_content Block content
 * @return	string Block content with replacements
 */
function my_plugin_replace_hyphens( string $block_content ): string {
	return \str_replace( '<span class="my-plugin__soft-hyphens">-</span>', '&shy;', $block_content );
}

\add_filter( 'render_block', 'my_plugin_replace_hyphens' );
Code-Sprache: PHP (php)