JetBrains IDE-Plugin

Flexible Gutenberg: Toolkit für den WordPress-Blockeditor

Tippen Sie einen Block-Kommentar in HTML oder PHP und erhalten Sie Vorschläge für alle Core-Blocks samt Attributen, direkt in Ihrer JetBrains-IDE.

Kostenlos testen Preise ansehen

JetBrains-IDEs: IntelliJ IDEA · PyCharm · WebStorm · PhpStorm · und weitere JetBrains-IDEs

Autocomplete: Block-Markup und Attribute in HTML und PHP
block.json: Schema-Vervollständigung und Validierung
Browser: Durchsuchbarer Block-Katalog im Tool-Fenster

Autovervollständigung für Block-Markup

Tippen Sie <!-- wp in einer HTML- oder PHP-Datei und erhalten Sie Vorschläge für alle Core-Blocks, mit Kategorien und Beschreibungen. Nach dem Einfügen eines Blocks erhalten Sie Vorschläge für seine Attribute und deren erlaubte Werte. Blocks wie core/separator bekommen die richtige selbstschließende oder paarige Kommentarform.

Block-Browser

Das Tool-Fenster Gutenberg enthält einen durchsuchbaren Katalog aller Core-Blocks. Wählen Sie einen Block, um Beschreibung, Beispiel-Markup und Attribute zu sehen. Nutzen Sie Copy Markup, Insert at Caret oder Open Docs. Tippen ist nicht nötig.

Tool-Fenster Gutenberg mit dem Tab Blocks, dem markierten Block List, seinem Beispiel-Markup und seinen Attributen

Browser für @wordpress-Komponenten

Durchsuchen Sie die React-Komponenten von @wordpress/* im Tab Components. Jeder Eintrag hat eine Prop-Tabelle mit Typen und Beschreibungen sowie ein JSX-Snippet zum Kopieren. Insert JSX fügt die passende import-Anweisung am Dateianfang ein.

theme.json-Browser

Der Tab Theme zeigt das theme.json-Schema als Baum: settings, styles, customTemplates, templateParts und patterns. Eigenschaften tragen die Schema-Version. Das Plugin liest die $schema-URL Ihrer theme.json, um die aktive Version zu erkennen. Insert at Caret kopiert Beispiel-JSON in Ihre Datei.

Tab Theme mit dem theme.json-Schemabaum, der markierten Eigenschaft radiusSizes und ihrem Beispiel-JSON

theme.json-Vervollständigung

Öffnen Sie die theme.json und drücken Sie Ctrl+Leertaste. Das Popup listet die erlaubten Schlüssel, etwa background, button, caption, custom und gradients, jeweils mit einer kurzen Beschreibung.

Einen Block anlegen

Mit New > Gutenberg > Gutenberg Block legen Sie ein komplettes Block-Verzeichnis an. Der Dialog fragt nach Blocktyp (JS-Block oder dynamischer PHP-Block), Namespace, Slug, Titel, Kategorie, Icon und unterstützten Features. Er erzeugt block.json, index.js, edit.js und entweder save.js oder render.php, dazu editor.scss und style.scss.

Der Dialog Create Gutenberg Block mit Blocktyp, Namespace, Slug, Titel, Kategorie, Icon, Text Domain und Supports-Optionen

Einfache, transparente Preise

Starten Sie mit einer 7-Tage-Testversion. Der Kauf erfolgt über den JetBrains Marketplace.

Einzelperson

Für Solo-Entwickler

$1,90/Monat

oder $19/Jahr (17 % sparen)

Block-Autovervollständigung in HTML und PHP
Schema-Prüfung für block.json
Block- und Komponenten-Browser
theme.json-Browser
JavaScript-Gerüst für Blocks

Jetzt starten

TEAMS

Organisation

Für Teams und Unternehmen

$5,90/Monat

oder $59/Jahr (17 % sparen)

Alles aus Einzelperson
Organisationslizenz für Teams und Agenturen
Dieselbe 7-Tage-Testversion
Kauf über den JetBrains Marketplace

Jetzt starten

Studenten & Open-Source-Mitwirkende: Für einzelne Entwickler und die Open-Source-Community gibt es Sonderrabatte. Kontaktieren Sie uns.

Blocks und Themes schneller bauen

Installieren Sie Flexible Gutenberg aus dem JetBrains Marketplace und öffnen Sie ein WordPress-Theme-, Plugin- oder Block-Projekt. Es läuft in PhpStorm, IntelliJ IDEA Ultimate und WebStorm ab Version 2023.3.

Kostenlos testen