wp-block-development
构建 WordPress Gutenberg 区块
WordPress 区块开发需要理解复杂的元数据、注册模式和资源管理。本技能提供专家级指导，帮助你使用现代 WordPress 模式和工具创建、配置并维护 Gutenberg 区块。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "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)
عوامل الخطر
📁 الوصول إلى نظام الملفات (3)
⚡ يحتوي على سكربتات (1)
درجة الجودة
ماذا يمكنك بناءه
创建 WordPress 插件
使用 @wordpress/create-block 脚手架为提交到 WordPress 插件目录的新块插件。
为主题添加区块
使用 block.json 元数据和 PHP 注册模式在主题内注册自定义区块。
构建动态区块
使用 render.php 创建服务器端渲染区块，用于查询、菜单和鉴权状态等动态内容。
جرّب هذه الموجهات
使用 @wordpress/create-block 并启用 TypeScript 支持，在新插件中创建一个名为 'my-custom-block' 的静态块。
我在更改 save 函数后块显示“Invalid block”错误。帮助我添加正确的弃用支持。
将我的静态块转换为使用 render.php 的动态渲染，并从 WP_Query 获取数据。
将我的区块迁移到 apiVersion 3 以兼容 WordPress 6.9 iframe 编辑器。检查所有样式是否正确加载。
أفضل الممارسات
- 始终在 block.json 中使用 apiVersion 3 以兼容 WordPress 6.9+
- 优先使用 register_block_type_from_metadata 而不是 register_block_type
- 当更改已保存的标记时添加弃用版本以防止内容破坏
تجنب
- 发布后更改块名称（会破坏现有内容引用）
- 在未添加弃用版本的情况下修改已保存的标记
- 为新属性使用已弃用的 'meta' 属性来源