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.

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
);
Code-Sprache: JavaScript (javascript)

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.