save-Funktion eines Blocks ändern

Manchmal findet man einen Block für den WordPress-Block-Editor, der fast ist was man braucht, aber das in der Datenbank gespeicherte Markup müsste ein bisschen verändert werden. Dieser Beitrag zeigt, wie wir das über die Filterung der save-Funktion eines Blocks hinbekommen können.

Update vom 8. März 2019: Wie Julian in seinem Kommentar richtig bemerkt hat, muss bei der Änderung des Markups darauf geachtet werden, dass sich der Block danach für die Bearbeitungs-Ansicht immer noch alle Attribut-Werte ziehen kann.

Wenn ein Galerie-Block also zum Beispiel die Attribut-Werte für die einzelnen Bilder über ein Element mit der Klasse gallery-item ansteuert, dürft ihr diese Klasse nicht einfach entfernen, sonst gibt es einen Fehler im Editor.

Ich habe kürzlich den Container-Block vom Stackable-Plugin genutzt, war aber mit ein paar CSS-Regeln des Blocks nicht ganz glücklich. Zuerst wollte ich die komplette CSS-Datei des Plugins rausnehmen und eine geänderte Version einbinden. Dann habe ich mich aber entschieden, einfach ein für mich nutzloses Wrapper-Element aus dem Block zu entfernen, das von den ungewollten Styles genutzt wird.

Es gibt verschiedene Block-Filter, um Blöcke zu verändern – einer davon ist blocks.getSaveElement, der es erlaubt die save-Funktion zu verändern. Stackable hat ein GitHub-Repo, worüber wir uns leicht den Original-Code der save-Funktion holen können, um diesen als Ausgangspunkt für unsere Anpassungen zu nutzen.

So sieht der finale Code aus:

import {
	getColorObjectByColorValue,
	getColorClassName,
} from '@wordpress/editor'
import classnames from 'classnames'

function slugGetSaveElement( element, blockType, attributes ) {
	if ( blockType.name !== 'ugb/container' ) {
		return element;
	}

	if ( blockType.name === 'ugb/container' ) {
		const {
			className,
		} = element.props
	
		const {
			textColor,
			backgroundColor,
		} = attributes

		let hasTextColor = false,
			textColorClass = '',
			hasBackgroundColor = false,
			backgroundColorClass = '';

		const textColorObj = getColorObjectByColorValue( backgroundColors, textColor );
		const backgroundColorObj = getColorObjectByColorValue( backgroundColors, backgroundColor );

		if ( textColorObj !== undefined ) {
			hasTextColor = true;
			textColorClass = getColorClassName( 'color', textColorObj.slug );
		}

		if ( backgroundColorObj !== undefined ) {
			hasBackgroundColor = true;
			backgroundColorClass = getColorClassName( 'background-color', backgroundColorObj.slug );
		}
	
		const mainClasses = classnames(
			'ugb-container', {
				[ textColorClass ]: hasTextColor,
				[ backgroundColorClass ]: hasBackgroundColor,
			}
		)
	
		return (
			<div className={ mainClasses }>
				<div className="ugb-container__wrapper">
					<InnerBlocks.Content />
				</div>
			</div>
		)
	}
}

wp.hooks.addFilter(
	'blocks.getSaveElement',
	'slug/get-save-element',
	slugGetSaveElement
);

Zunächst testen wir auf den Block-Namen, um nur die save-Funktion des gewünschten Blocks zu verändern. Wenn wir diesen Block vorliegen haben, machen wir die folgenden Anpassungen:

  • Einen Großteil des Codes für Klassennamen und Inline-Styles habe ich entfernt, da ich ihn nicht brauche. Ersetzt habe ich ihn mit der Generierung von Klassennamen für die gewählte Text- und Hintergrundfarbe.
  • Das props-Objekt aus der Ursprungs-Funktion muss auf element.props geändert werden, und props.attributes auf attributes.
  • Ich habe das div mit der ugb-container__content-wrapper-Klasse entfernt.

Und das war’s.

Das könnte auch interessant sein

2 Kommentare zu »save-Funktion eines Blocks ändern«

  1. Julian Weiland

    Das werde ich gleich mal testen.
    Ich denke aber dass man da aufpassen muss wie man die Save Funktion verändert.
    Beim Laden von Gutenberg werden, die Daten aus dem HTML Markup geladen, was in den Attributes des Blocks definiert wird.
    Man muss sicherstellen, dass die geänderte Save Funktion das HTML Markup nur soweit verändert, dass Gutenberg die Daten noch immer parsen kann.

    Beispeiel das Attribut "text" hat den selector ".description". Wenn man diese Klasse in der Save Methode umbenennt, kann Gutenberg den Block nicht mehr richtig parsen

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.