Custom Blocks für WordPress Gutenberg Editor erstellen

Kommentare

Durch den Einsatz von Blöcken soll es einfacher werden WordPress Blogs und Seiten individuell zu gestalten. Und das wir Blöcke als Vorlagen speichern können, um selbst erstellte Elemente öfter zu verwenden, klingt erstmal recht nützlich. Doch sobald es etwas spezieller wird, reichen die normal verfügbaren Standard-Blöcke nicht aus. Es fehlen Funktionen und Optionen damit der ganze Blockkram auch in der Praxis hilft. Und dafür müssen wir eigene Custom Blocks erstellen.

Mit Lazy Blocks geht fast alles

Lazy Blocks ist ein WordPress Plugin mit dem ihr eigene Custom Blocks visuell erstellen könnt. Das heißt, ihr braucht so gut wie keine Programmierkenntnisse zum erstellen von eigenen Blöcken für den Gutenberg Editor.

Und wenn ihr solche Kenntnisse habt, könnt ihr Lazy Blocks zum Zeitsparen als „Framework“ nutzen.

Funktionen von Lazy Blocks

Kurz gefasst könnt ihr bestimmen was in eurem Block als Inhalt hinzugefügt werden kann und wie die Inhalte ausgegeben werden.

LazyBlocks Features
Welche Inputmöglichkeiten es für Nutzer gibt, seht ihr in dem Screenshot unter Block Controls.

Durch Handlebars ist es dann möglich diese Eingaben im HTML Output des Blocks zu integrieren. Beispiel: <span class=“custom-block“>{{textfeld}}</span>.

Oder ein YouTube Lazy Loader mit Rich Snippets als Block?

<div class="lazy-youtube-wrapper">
 <div class="lazy-youtube" data-embed="{{youtube_id}}">
  <div class="play-button"></div>
  <script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "{{name}}",
  "description": "{{description}}",
  "thumbnailUrl": "https://img.youtube.com/vi/{{youtube_id}}/sddefault.jpg",
  "uploadDate": "{{upload_date}}",
  "duration": "PT{{duration_m}}M{{duration_s}}S",
  "contentUrl": "http://www.youtube.com/watch?v={{youtube_id}}",
  "embedUrl": "http://www.youtube.com/v/{{youtube_id}}?autohide=1&version=3"
  }
  </script>
 </div>
</div>

JavaScript und CSS gehen natürlich auch einfach inline, macht aber mehr Sinn an anderer Stelle einzubinden. Mit Eingabe strukturierter Daten für Rich Snippets, könnte der Block dann so im Editor aussehen:

Ein Custom Block für Lazyload YouTube Videos. Mit Eingabe von strukturierten Daten für Rich Snippets.

Das verwendete Handlebars kann zudem if / else, truncate, vergleichen ( ==, ===, !=, !==, <, >, <=, >=, &&, ||), rechnen (+ – * / %) und date_i18n.

Es ist auch möglich Shortcodes, sogar Blöcke von anderen Plugins in eurem Custom Block einzufügen. Block in Block also.

Und wenn ihr PHP beherrscht, schreibt ihr die Ausgabe des Blocks halt in PHP und könnt alles in eure Blöcke bauen, was WordPress und PHP hergeben.

Mehr über Lazy Blocks

Der oder die macher von Lazy Blocks nennt bzw. nennen sich _nK. Wer genau dahinter steckt, konnte ich nicht in Erfahrung bringen. Und das wirkt schon etwas meh in Bezug auf Zuverlässigkeit und Vetrauen vom Plugin.

Dem gegenüber steht das Profil auf ThemeForest: Eliteauthor, volle 5 Sterne bei 375 Bewertungen und über 7.800 Verkäufe seit November 2013.

Links zum Plugin:

WordPress hat beim Gutenberg Update gepennt

Mit einem Plugin wie Lazy Blocks kann jeder eigene Blöcke für den Gutenberg Editor erstellen. Und dann wird die ganze Block-Geschichte auch richtig stark. Kleinanzeigen, Inserate, Reviews, Rezepte. Mir fallen spontan zig Dinge ein die wir komplett vorformatiert als Block speichern und wiederverwenden können.

Das ist die garnicht so schlechte Idee hinter den Blöcken.

So ein Blockcomposer muss in den WordPress Kern

Und doch braucht es ein Plugin um wie beschrieben für jedermann zu funktionieren. Ein Plugin mit Funktionen, die in den WordPress Kern gehören!

Für einen visuellen Blockeditor, lassen sich Tutoriale für Blocks schreiben die jeder versteht. Bilder und Codesnippets mit Erläuterung, Copy+Pasta und fertig.

Die jetzige Alternative sind Plugins für Blöcke. Und da hat jeder Block mehrere Ordner und Dateien die alles zumüllen. Ich will garnicht wissen wie viele Kopien von FontAwesome oder Scripten in manchen WordPress Verzeichnissen liegen, weil jemand Blöcke von verschiedenen Entwicklern haben möchte…

WordPress voll unvollständig im Trend

Aber unfertige Produkte auf den Markt zu werfen ist ja jetzt modern. Spielehersteller verkaufen ihre Erweiterungen die ein Spiel vervollständigen einfach als DLC und bei Software gibt es Premium Features.

Neben Premim Themes und Premium Plugins für WordPress, können wir jetzt auch endlich Geld ausgeben für Premium Blocks. Welch eine Meisterleistung.


Wie findest du den Beitrag?

Da dir der Beitrag gefallen hat...

Folge mir doch bei Twitter oder Instagram!

Oh.. das ist ja blöd gelaufen.

Helf mir den Beitrag zu verbessern!

Schreibe einen Kommentar

Twittern
Pin
Teilen
Reddit
WhatsApp