Gutenberg basiert ja (leider) auf React. Ich programmiere aber schon seit Jahren viel lieber mit Vue.js 2. Zwar habe ich mich damit abgefunden Blöcke für den Block Editor aka Gutenberg in React zu schreiben (wobei man nur sehr begrenzt eigentlich React verwendet, eher noch JSX), aber trotzdem verwende ich für einige Blöcke Vue.js. Im Fronend kein Problem, aber eine Vorschau im Block Editor angezeigt zu bekommen, inkl. Änderungen an den Attributen, war eine echte Herausforderung.
Weiterlesen „Vue.js Components im WordPress Block Editor / Gutenberg anzeigen“Schlagwort: Gutenberg
Gutenberg ist der neue Editor von WordPress der mit Version 5.0 seinen Einzug in den Core gefeiert hat. Ich sehe die Entwicklung sehr positiv und habe bereits wenige Tage nach dem Release Anfang Dezember 2018 mein Projekt Travel-Dealz.de auf Gutenberg umgestellt.
Um den internen Anforderungen gerecht zu werden, musste ich viele selber gebastelte Plugins auf Gutenberg vorbereiten. Auch viele Workarounds sind leider immer noch an der Tagesordnung.
Meine Erfahrung, Tipps und Tricks mit Gutenberg teile ich hier mit Euch!
WordPress 5.5: Standard Block Vorlagen (Patterns) entfernen
Mit WordPress 5.5 sind endlich die Block Patterns, auf Deutsch Block Vorlagen, in den Core eingezogen. Damit könnt ihr Patterns = Vorlagen für mehrere Blöcke in z.B. der functions.php in eurem Theme erstellen und den Nutzer im Block Editor bereitstellen.
WordPress liefert auch standardmäßig ein paar Beispiele mit. Wem diese Beispiele nicht zusagen, muss die Patterns ebenfalls über die functions.php entfernen.
Weiterlesen „WordPress 5.5: Standard Block Vorlagen (Patterns) entfernen“Standardeinstellungen von WordPress Blöcken ändern
Fast jeder WordPress Block für den Block Editor (Gutenberg) verfügt über Einstellungen. Zum Beispiel, ob ein Bild zentriert, in weiter Breite oder sogar voller Breite angezeigt werden soll oder ob der Link im Button in einem neuen Fenster geöffnet werden soll.
Diese Einstellungen für einen Block werden i.d.R. als Attribut abgespeichert und haben auch immer einen Standardwert. Nicht immer passt dieser Standardwert allerdings in meinen Workflow und jedes Mal, wenn ich den Wert bearbeite, wächst bei mir die Motivation die Standardeinstellung zu ändern. Zum Glück kann man das mit ein bisschen JavaScript schnell überschreiben.
Weiterlesen „Standardeinstellungen von WordPress Blöcken ändern“Interne Link Suche im WordPress Block Editor erweitern (für Kategorien, Schlagwörter…)
Vor den Umstieg auf den Block Editor aka Gutenberg habe ich im Classic Editor das Plugin Better Internal Link Search verwendet, um im Link-Dialog nicht nur nach internen Beiträgen und Seiten zu suchen, sondern auch nach Kategorien, Schlagwörtern und weiteren Terms. Leider unterstützt das Plugin aber nicht den Block Editor und die Autoren haben wohl auch das Interesse an dem Plugin verloren (letztes Update vor 4 Jahren).
Die Suche z. B. nach Kategorien, Schlagwörtern (zusammengefasst Terms genannt) lässt sich aber recht einfach umsetzen, weil man den WP_REST_Search_Handler recht einfach erweitern kann:
Block Editor Gallery-Block mit Lightbox ausstatten (WordPress/Gutenberg)
Mir gefällt der standardmäßig mitgelieferte Gallery-Block von Gutenberg sehr gut. So gut, dass ich eigentlich keinen Grund sehe, auf ein extra Gallery-Plugin zu setzte. Leider gibt es ein großes Manko: Standardmäßig wird keine Lightbox mitgeliefert. Die vielen schönen Bilder wollen die Besucher natürlich gerne im Vollbild anschauen und das ist sonst nur mit viel vor und zurück klicken möglich.
Weiterlesen „Block Editor Gallery-Block mit Lightbox ausstatten (WordPress/Gutenberg)“Die Subscribe-Funktion des WordPress Block Editors (Gutenberg) richtig nutzen
Der Block Editor von WordPress, auch als Gutenberg bekannt, ist komplett in JavaScript bzw. mit React geschrieben. WordPress ist vor allem so ein mächtiges CMS geworden, weil man als Entwickler das Verhalten für Actions & Filter sehr einfach seinen Bedürfnissen anpassen kann. Das ist meiner Meinung nach beim Block Editor etwas auf der Strecke geblieben. Zwar gibt es einige Filter, für Actions muss man aber auf die subscribe()-Funktion zurückgreifen.
WordPress: Hierarchische Taxonomies wie Tags eingeben
WordPress bietet für Custom Taxonomies die Möglichkeit diese hierarchische anzuordnen. Das heißt, man kann für jeden Term wie bei einer Kategorie ein übergeordneten Term festlegen.
Wir nutzen bei Travel-Dealz hierarchische Taxonomies für Reiseziele. Und von diesen haben wir über 1.000 angelegt. Diese sind nach Kontinent → Land → Stadt angeordnet.
Gutenberg-Button standardmäßig im neuen Tab öffnen lassen
Der Button-Block von Gutenberg ist sehr praktisch um Call to Action-Buttons zu erstellen. Allerdings wird der hinterlegte Link, wie alle Links in Gutenberg, standardmäßig im selben Tab geöffnet. Standardmäßig hätte ich aber gerne den Button in einem neuen Tab geöffnet.
Weiterlesen „Gutenberg-Button standardmäßig im neuen Tab öffnen lassen“Gutenberg-Button im neuen Tab öffnen
Der Button-Block in Gutenberg ist wirklich sehr praktisch. Keine Shortcodes mehr um eigentlich einem <a> nur eine Klasse zu verpassen. Leider hat er meiner Meinung einen riesigen Konstruktionsfehler (bisher): Der Link wird immer im selben Tab geöffnet. Möchte man den Besucher über den Button zu einer anderen Website leiten und dabei die Seite in einem neuen Tab öffnen targt="_blank", geht das bisher nicht. Man kann kein Link Target angeben. Alle Button-Links werden im selben Tab geöffnet.