Jump to content

Open Club  ·  3 members

WordPress
WordPress

save-Funktion eines Blocks ändern

Recommended Posts

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.

View the full article

Share this post


Link to post
Share on other sites

Support

Support

Please enter your display name

×
×
  • Create New...

Important Information

This website uses cookies and shit. Deal with it or GTFO!