wp-block-development
WordPress Gutenberg Blocks erstellen
Die Entwicklung von WordPress-Blocks erfordert das Verständnis komplexer Metadaten, Registrierungsmuster und Asset-Management. Diese Fähigkeit bietet Expertenanleitung zum Erstellen, Konfigurieren und Warten von Gutenberg-Blocks mit modernen WordPress-Mustern und Tooling.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「wp-block-development」。 Create a new dynamic block called 'Query Posts' that displays a list of recent posts.
預期結果:
- Step 1: Scaffold with @wordpress/create-block --variant=dynamic
- Step 2: Update block.json with apiVersion: 3 and render: 'render.php'
- Step 3: Create render.php with get_block_wrapper_attributes()
- Step 4: Query posts using WP_Query and loop through results
- Step 5: Test in editor with SCRIPT_DEBUG enabled
正在使用「wp-block-development」。 My block attributes are not saving after I changed the HTML structure.
預期結果:
- Check: Ensure attribute source/selector matches new HTML structure
- If markup changed, add a deprecated version with old save function
- Consider using comment delimiter JSON for more stable attribute storage
- Avoid the deprecated meta attribute source for new attributes
正在使用「wp-block-development」。 How do I add frontend-only JavaScript to my block?
預期結果:
- Use viewScript for traditional scripts, viewScriptModule for ES modules
- Add the script handle to block.json under viewScript or viewScriptModule
- The script only loads on the frontend, not in the block editor
- For Interactivity API, prefer viewScriptModule with data-wp-* directives
安全審計
安全This is a documentation-only skill providing WordPress block development guidance. All 212 static findings are FALSE POSITIVES: markdown backticks flagged as shell commands, documentation URLs flagged as external network calls, and benign filesystem scanning in list_blocks.mjs for locating block.json files. No malicious code execution, no credential access, no data exfiltration patterns detected.
中風險問題 (1)
風險因素
⚡ 包含腳本 (1)
品質評分
你能建構什麼
WordPress-Plugins erstellen
Neue Block-Plugins mit @wordpress/create-block für Einreichungen im WordPress-Plugin-Verzeichnis scaffolden.
Blocks zu Themes hinzufügen
Benutzerdefinierte Blocks in Themes mit block.json-Metadaten und PHP-Registrierungsmustern registrieren.
Dynamische Blocks erstellen
Serverseitig gerenderte Blocks mit render.php für dynamische Inhalte wie Queries, Menüs und Auth-States erstellen.
試試這些提示
Create a new static block called 'my-custom-block' in a new plugin using @wordpress/create-block with TypeScript support.
My block is showing 'Invalid block' error after changing the save function. Help me add proper deprecation support.
Convert my static block to use dynamic rendering with render.php that fetches data from WP_Query.
Migrate my block to apiVersion 3 for WordPress 6.9 iframe editor compatibility. Check that all styles load correctly.
最佳實務
- Immer apiVersion 3 in block.json für WordPress 6.9+-Kompatibilität verwenden
- register_block_type_from_metadata gegenüber register_block_type bevorzugen
- Beim Ändern des gespeicherten Markups deprecated-Versionen hinzufügen, um Inhaltsbrüche zu vermeiden
避免
- Block-Name nach dem Release ändern (bricht bestehende Inhaltsreferenzen)
- Gespeichertes Markup ändern, ohne deprecated-Versionen hinzuzufügen
- Veraltete 'meta' Attributquelle für neue Attribute verwenden