Steuern Sie das Blockdesign über das EditorPlus WordPress Plugin

Letzte Woche, als ich die letzten Änderungen an einer Überprüfung seines Gutenberg Forms-Projekts vornahm, bereitete Munir Kamal die Einführung einer anderen Art von WordPress-Plugin für den Blockeditor vor. Dieser hieß EditorPlus und würde ein Designsystem für Blöcke erstellen. Kamal und sein Team gaben der Version 1.0 in aller Stille den letzten Schliff und veröffentlichten das Plugin einige Tage später im WordPress-Plugin-Repository.

Im Gegensatz zu vielen anderen Plugins, die benutzerdefinierte Blöcke erstellen, um bestimmte Designergebnisse zu erzielen, bietet EditorPlus Benutzern die Flexibilität, ihre Seiten mit dem anzupassen, was sie zur Hand haben. Es fügt jedem der vorhandenen Blöcke von WordPress eine Reihe von Designoptionen hinzu. Am Frontend hinterlässt es einen geringen Fußabdruck, indem es nur das CSS ausgibt, das für diese Seite im laufenden Betrieb erforderlich ist.

Das Beste an diesem Plugin ist derzeit vielleicht, dass es die Grundlage für viele designbezogene Funktionen legt, die wahrscheinlich ein dauerhaftes Zuhause in Gutenberg und schließlich im Kern von WordPress finden werden. Das Gutenberg-Team kann Ideen ausleihen, iterieren und verbessern. Das experimentelle Polsterkontrollland haben wir bereits in Gutenberg 8.3 gesehen. Es wäre sinnvoll, dass das Entwicklungsteam später zusätzliche Designkontrollen durchführt. Das Gute daran, dass diese Kontrollen zuerst in Plugins von Drittanbietern eingeführt werden, ist, dass das Team sehen kann, wie Benutzer darauf reagieren, und ein Gefühl dafür bekommt, ob sie direkt in Gutenberg arbeiten würden, bevor sie sich zu irgendetwas verpflichten.

EditorPlus hat keinen Mangel an Leckereien für diejenigen, die viel Gestaltungsfreiheit haben möchten, ohne Code zu berühren. Im Wesentlichen ist das Plugin ein CSS-Editor, ohne dass CSS-Kenntnisse erforderlich sind. Es bietet Endbenutzern über Blockoptionen Optionen für die am häufigsten benötigten CSS-Funktionen. Es ist ein Spielplatz für diejenigen, die gerne am Design basteln und leistungsfähig genug sind, um einzigartige Layouts zu erstellen, ohne die Website im Frontend aufzublähen.

So funktioniert EditorPlus

Nach der Aktivierung des EditorPlus-Plug-ins können Endbenutzer sofort mit der Nutzung seiner Optionen beginnen, indem sie zum Post- oder Seiten-Editor wechseln. Nach dem Einfügen eines Blocks stellt das Plugin die folgenden acht Registerkarten unter dem Blockoptionen-Panel zur Verfügung (jedem ist ein + -Symbol vorangestellt):

• Grenze
• Box Schatten
• Dimensionierung
• Hintergrund
• Rand
• Polsterung
• Grenzradius
• Extras

Diese Registerkarten werden derzeit nur für die zentralen WordPress-Blöcke und nicht für Plug-in-Blöcke von Drittanbietern angezeigt. Abgesehen von der Registerkarte „Extras“ entspricht jede Registerkarte ihren CSS-Gegenstücken. Die Registerkarte „Extras“ bietet eine erweiterte „Anzeige“-Option, mit der Benutzer den display des Block-Wrapping-Elements in CSS ändern können. Diese Option wird am besten fortgeschrittenen Benutzern überlassen. Es bietet auch eine Übergangsoption, die gut mit Hover-Stilen funktionieren würde.

Jede der Registerkarten für Blockoptionen hat auch mysteriöse „R“- und „H“-Schaltflächen. Mit der Schaltfläche „R“ können Benutzer reaktionsschnelle Optionen aktivieren, was bedeutet, dass sie Blockstile basierend auf Desktop-, Tablet- und mobilen Bildschirmen ändern können. Mit der Schaltfläche „H“ können Benutzer das Design basierend auf dem Mauszeigerstatus ändern.

Das Plugin packt viele Optionen auf wenig Platz. All die neuen Design-Tabs können sich zunächst etwas überwältigend anfühlen. Mit ein wenig Gebrauch ist es jedoch einfach, ein gewisses Muskelgedächtnis zu erlangen und schnell benutzerdefinierte Layouts zu sprengen.

Jede der Optionen des Plugins ist ziemlich einfach. Und wenn dies nicht der Fall ist, profitieren Sie von sofortigem Feedback über den Blockeditor.

Es gibt einige Bereiche, die sich für einige Benutzer als problematisch erweisen könnten, je nachdem, wie ihr Design bestimmte Blöcke gestaltet. Beispielsweise funktionieren die Breiteneinstellungen auf der Registerkarte „Größe“ möglicherweise nicht immer. Einige Designs fügen Blöcken eine maximale Breite hinzu, wodurch die Gesamtbreite unabhängig von der Größe eingeschränkt wird. Es ist möglich, dies über das Plugin zu überschreiben, aber Kamal hat sich entschieden, dies in Version 1.0 nicht zu tun.

Seien Sie vorsichtig mit Rändern. Abhängig vom Theme-Design kann es linke und rechte Ränder verwenden, um Inhalte zu platzieren. Selbst wenn nur ein oberer oder unterer Rand eingestellt wird, gibt das Plugin automatisch 0 für den linken und rechten Rand aus. Dies könnte das Inhaltslayout für einige Themen beschädigen.

Ein Problem, auf das ich mit dem Plugin gestoßen bin, war, dass die Stile meines aktiven Designs die Stile des Plugins im Allgemeinen außer Kraft gesetzt haben. Beispielsweise zielt das Standarddesign Twenty Twenty auf p.has-background in seinem CSS ab, um benutzerdefinierte Padding hinzuzufügen. Daher überschreibt es das CSS des EditorPlus-Plugins mit höherer Spezifität. Dieses Problem wurde erwartet, und der Plugin-Entwickler fügte eine Lösung dafür in Form eines „Wichtig“-Kontrollkästchens für jede Designoption hinzu. Wenn ein Benutzer dieses Kästchen ankreuzt, fügt er der Stilregel bei der Ausgabe !important hinzu, wodurch er die Themenstile außer Kraft setzen kann. Es ist keine 100% idiotensichere Lösung. Ihre Laufleistung kann je nach Thema variieren, sollte aber für die meisten Anwendungsfälle funktionieren.

Ich mag die Idee eines wichtigen Kontrollkästchens in der Benutzeroberfläche nicht. Es ist nichts, worüber sich ein Benutzer Sorgen machen muss. Es ist jedoch die Realität einer Welt, in der Themen und Plugins keine wirkliche Möglichkeit haben, zu kommunizieren, welche Designregeln wichtiger sind als andere. Obwohl wir dies nicht in der Benutzeroberfläche haben wollten, war es eine kluge Entscheidung, es aufzunehmen. Andernfalls hätten die Stilregeln von viel zu vielen Themes das CSS des Plugins überschrieben.

Abschließende Gedanken

Für eine Version 1.0 hat EditorPlus einen soliden Start hingelegt. In meinen Tests habe ich einige Mängel gefunden. Alle Probleme für den durchschnittlichen Benutzer werden wahrscheinlich in Form von Themenkonflikten auftreten, und diese Konflikte werden höchstwahrscheinlich um Themen herum auftreten, die eine hohe Spezifität oder !important in ihrem CSS verwenden.

Kamal macht auf der Webseite des Plugins deutlich, dass von diesem Plugin noch mehr zu erwarten ist. Ich bin mir nicht sicher, welche Funktionen er im Sinn hat, aber ich freue mich darauf, sie zu sehen. Ich würde gerne eine Textschattenoption für textbezogene Blöcke wie Überschrift und Absatz sehen. Es wäre auch schön, einige Designoptionen für die Bilder innerhalb des Galerieblocks zu sehen, anstatt nur das Umhüllungselement.

Ob Sie EditorPlus verwenden sollten, hängt davon ab, ob Sie zusätzliche Designsteuerelemente benötigen. EditorPlus richtet sich an Leute, die etwas Ähnliches wie einen leichten Seitenersteller brauchen, aber bei nativem WordPress bleiben wollen. Dieses Plugin ist ein schönes Beispiel dafür, was möglich ist, und ein guter Indikator für potenzielle Designoptionen, die eines Tages in WordPress landen könnten.