Block Designer – Create Custom Blocks for Gutenberg Editor

Description

Gestalten Sie Ihre eigenen individuellen Blöcke für den WordPress Gutenberg Block Editor, ohne eine einzige Zeile Code zu schreiben.

Schnellste Methode, um einen eigenen Block für Gutenberg zu erstellen
✔ Unglaublich einfach und intuitiv zu benutzen
✔ Ihre individuellen Blöcke sind vollständig WYSIWYG (kein Formular)

Martin Sauter:
⭐⭐⭐⭐⭐ Der bisher beste visuelle Block Creator
Wenn Sie Lazy Blocks oder Genesis Custom Blocks ausprobiert haben und eine visuellere Methode suchen, um individuelle Blöcke zu erstellen und zu benutzen, dann ist dies das Plugin für Sie: Einen individuellen Block zu erstellen funktioniert sehr ähnlich wie einen Beitrag im Gutenberg Block Editor aufzubauen (man muss nichts programmieren), und die Nutzung Ihres Blocks ist reines WYSIWYG (kein Formular).
> Original-Bewertung

Tutorial (Adressblock für Gutenberg erstellen):

Tutorial auf YouTube öffnen

Live-Vorschau

Neuste Version hier testen:
> > > LIVE PREVIEW öffnen < < <

Verfügbare Elemente

  • HTML-Element
  • Symbol
  • Statischer Text
  • Bearbeitbares Bild
  • Bearbeitbarer Link
  • Bearbeitbarer Text mit Formatierungen
  • Innere Blöcke

Verfügbare Styles

  • Anzeigemodus (block, flex, inline-block, inline, none)
  • Flex (direction, reverse, align, justify, gap, wrap)
  • Flex Child (shrink, grow, align self)
  • Abstände (margin, padding)
  • Grösse (width, height, min-width, min-height, max-width, max-height)
  • Überlauf (visible, hidden, scroll, auto)
  • Typografie (font-weight, font-style, font-size, line-height, color, text-align, text-decoration)
  • Rahmen (radius, style, width, color)
  • Hintergrund (color, linear-gradient, radial-gradient)
  • Effekte (box-shadow)

So funktioniert es

  1. Gestalten Sie Ihren Block

    Zuerst gestalten Sie Ihren Block im Block Designer mit verschiedenen HTML-Elementen und Styles.

    Sie können Bereiche definieren, wo Autoren im WordPress Block Editor Bilder und Texte einfügen können.

    Nachdem Sie Ihren Block gestaltet haben, müssen Sie ihn nur noch aktivieren und speichern.

  2. Ihren Block benutzen

    Falls Sie Ihren Block aktiviert und gespeichert haben, finden Sie ihn im Block-Inserter des WordPress Block Editors.

    Fügen Sie ihn genau so ein, wie Sie das von Standardblöcken her kennen.

    Falls Sie Bereiche definiert haben, wo ein Autor Eingaben machen kann, dann können Sie nun Ihren Content erfassen.

    Speichern Sie Ihre Seite bzw. Ihren Beitrag und freuen Sie sich am Resultat auf Ihrer Website 😉

Screenshots

  • Das ist die Übersicht über alle Blöcke, die Sie erstellt haben.
  • Das ist die Ansicht bei der Gestaltung Ihres eigenen Blocks.
  • Im WordPress Block Editor können Sie sich jederzeit eine Vorschau Ihres Blocks anzeigen lassen, indem Sie den Mauszeiger auf dem Blocksymbol platzieren.
  • Nutzen Sie Ihren Block so oft Sie möchten.

Reviews

24. Januar 2023
With its intuitive interface and many customizable options, I was able to easily create my own blocks for the Gutenberg editor and make my WordPress website more appealing. The support is fast and helpful. I highly recommend it to anyone who wants to make their WordPress sites more customized. 5 stars!
19. September 2022
If you have tried Lazy Blocks or Genesis Custom Blocks and are looking for a more visual way to both create and use custom blocks, this plugin is for you: Creating a custom block is very much like building a post in the Gutenberg block editor (no coding required), and using your custom block is completely WYSIWYG (no form).
Read all 3 reviews

Contributors & Developers

“Block Designer – Create Custom Blocks for Gutenberg Editor” is open source software. The following people have contributed to this plugin.

Contributors

“Block Designer – Create Custom Blocks for Gutenberg Editor” has been translated into 3 locales. Thank you to the translators for their contributions.

Translate “Block Designer – Create Custom Blocks for Gutenberg Editor” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.10.0 – 2023-11-01

  • Make block content translatable via WPML plugin

1.9.5 – 2023-07-12

  • Added help text about adding custom CSS classes

1.9.4 – 2023-07-12

  • Fix small style implementation issue

1.9.3 – 2023-04-09

  • Fix small compatibility issue with WP 6.2

1.9.2 – 2023-04-09

  • Fix small compatibility issues with WP 6.2

1.9.1 – 2022-11-02

  • Fix small compatibility issue with WP 6.1

1.9.0 – 2022-10-04

  • Fix issue with theme style switch
  • Make the plugin translatable
  • Optimize various small things

1.8.2 – 2022-09-29

  • Kleines Problem beim Einfügen behoben

1.8.1 – 2022-09-29

  • Kleines Problem beim Kopieren, Ausschneiden und Einfügen behoben

1.8.0 – 2022-09-29

  • Bessere Methode für das Kopieren, Ausschneiden und Einfügen implementiert

1.7.5 – 2022-09-28

  • Problem beim Kopieren eines bearbeitbaren Links, der anderen bearbeitbare Elemente enthält, behoben

1.7.4 – 2022-09-16

  • Zwei kleine Probleme im Site Editor behoben

1.7.3 – 2022-09-16

  • Behoben: Style-Einstellungen für Tablet und Mobile hatten keine Wirkung im Backend

1.7.2 – 2022-09-15

  • Behoben: Vorschau der Übersicht funktionierte in Multisite-Installationen nicht

1.7.1 – 2022-09-15

  • Behoben: Canvas funktionierte in Multisite-Installationen nicht

1.7.0 – 2022-09-13

  • Unterstützung der Block-Ausrichtung «Weite Breite» und «Gesamte Breite»
  • Neues Element «Bearbeitbarer Link» («authorlink»)

1.6.5 – 2022-08-30

  • Problem beim Kopieren, Ausschneiden und Löschen von Elementen behoben

1.6.4 – 2022-08-25

  • Problem mit Safari behoben

1.6.3 – 2022-08-24

  • Zwei kleine Probleme behoben

1.6.2 – 2022-08-23

  • Kleines Problem behoben

1.6.1 – 2022-08-22

  • Verschiedene kleine Probleme behoben

1.6.0 – 2022-08-17

  • Indikator anzeigen, wenn Styles gesetzt sind
  • Neues Element «Symbol» («Icon»)

1.5.1 – 2022-08-10

  • Anpassung für ältere PHP-Versionen

1.5.0 – 2022-08-10

  • CSS-Klassen statt Style-Attribute verwenden
  • Responsive Styles für Desktop, Tablet und Mobile hinzugefügt

1.4.0 – 2022-07-31

  • Drag-and-drop im Elementebaum hinzufügen

1.3.1 – 2022-07-26

  • Behoben: BD stürzte ab, wenn ein neuer Block gespeichert wurde, während ein Element angewählt war

1.3.0 – 2022-07-25

  • Unterstützung für zahlreiche weitere HTML-Tags hinzugefügt
  • Unterstützung für individuelle HTML-Attribute hinzugefügt
  • Kleine Optimierungen

1.2.1 – 2022-07-20

  • Behoben: Höhe des Canvas war zu gross
  • Behoben: Berechtigungsproblem

1.2.0 – 2022-07-19

  • Optionen zum Ändern der Canvas-Ansicht hinzugefügt

1.1.1 – 2022-07-17

  • Einstellmöglichkeiten für box-shadow optimiert, um verschiedene Einheiten zu unterstützen

1.1.0 – 2022-07-16

  • Optionen für Hintergrundverläufe hinzugefügt
  • Optionen für box-shadow hinzugefügt
  • Feedback-Möglichkeit hinzugefügt

1.0.1 – 2022-07-16

  • Behoben: Höhe des Canvas war zu gering für Firefox

1.0.0 – 2022-07-15

  • Erste Version