需要修复/调试 WordPress 的帮助，以了解为什么我的块在主题的块编辑器中不可见

Question

我是 WordPress 开发新手，但在 Javascript 方面有不错的经验。

因此，我在 Udemy (https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/) 上尝试了本教程，并且该课程的项目效果非常好。所以我决定从头开始创建一个新主题，但我似乎陷入了最基本的步骤。创建我的第一个块。所以这是一个非常基本的块，在我的 wp-content -> 主题文件夹中具有此文件结构

我的主题文件夹

- src

-- 标题

--- block.json

--- index.js

--- render.php

functions.php

这是我的 block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-theme/header",
  "category": "text",
  "title": "My Theme",
  "description": "The header for My Theme",
  "keywords": ["header"],
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

这是我的index.js

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

function Edit() {
  return <div>Hello from admin backend.</div>;
}

registerBlockType(metadata.name, {
  edit: Edit,
});

这是我的render.php

<div>
    <h3>Hello from the front end </h3>
</div>

最后这是我的functions.php

<?php

// ENQUEUE CSS AND JS

function theme_scripts(){
    wp_enqueue_script( 'theme-script', get_theme_file_uri('/build/index.js'), null,'1.0', true );
    wp_enqueue_style('theme-style',get_theme_file_uri('/build/style-index.css'));
    
}
add_action('wp_enqueue_scripts','theme_scripts');

// REGISTER BLOCK

function my_theme_blocks(){
    register_block_type_from_metadata(__DIR__ . '/build/header');
}

add_action('init','my_theme_blocks');

我正在使用这个package.json

{
  "name": "vpawards",
  "version": "1.0.0",
  "description": "Theme for VP Awards ",
  "main": "index.js",
  "scripts": {
    "start": "wp-scripts start src/index.js",
    "blocks": "wp-scripts start --experimental-modules",
    "buildIndex": "wp-scripts build src/index.js",
    "buildBlocks": "wp-scripts build --experimental-modules",
    "build": "run-s buildIndex buildBlocks"
  },
  "author": "Alim Bolar",
  "license": "ISC",
  "dependencies": {
    "@wordpress/scripts": "^28.0.0",
    "npm-run-all": "^4.1.5"
  }
}

我在一个终端上运行

npm start

，在另一个终端上运行

npm run blocks

，因为这就是教程老师建议的“经过尝试和测试”的方法/解决方法，以确保工作流程顺利并且确实有效。

现在我为我们在课程中完成的项目设置了类似的设置，我似乎无法弄清楚为什么我的代码不起作用（为什么当我尝试搜索时我的块在块编辑器中不可见）它）而且我似乎不明白如何调试。我在 javascript 中没有使用过的“console.log”选项，我非常感谢您提供一些帮助来解决问题，甚至指导我如何在 WordPress 中进行调试。

我有一个想法可能是什么问题..但我不确定..在 block.json 中 name 属性有这个值 - 'my-theme/header' ... wordpress 知道这是在什么基础上正确的一个，如果我对同一主题中的另一个块使用另一个名称空间而不是“我的主题”怎么办？我假设它会抛出错误，但我不确定。文档说它应该与我的主题名称相对应，但是在哪里以及如何将此命名空间注册为我的主题名称？

如有任何建议，我们将不胜感激。

问候， 阿利姆

我尝试更改命名空间，然后我将课程中的项目添加为主题，因为它正在工作，并尝试删除一些组件以弄清楚它在哪个阶段开始出现问题，但我找不到任何东西具体的。最后，当我试图保留项目过程的最低限度时，即使这在我的网站上也不起作用。所以这是我正在用我的代码做或没有做的事情。我尝试过谷歌搜索，这里有一个与我类似的情况的链接，他似乎找到了一种解决方法，完全避免了寄存器块方法，这不是我想要的方式..

自定义 WordPress 块未使用 block.json、register_block_type 加载到编辑器中

Answer 1

这是为了帮助其他可能有同样问题的人，也是给未来的自己的一个注释。

问题不在于代码，如果我非常谦虚的话，代码是完美的！..;-)..

问题出在“@wordpress/scripts”版本 28 的最新更新上。恢复到版本 27.9 对我来说非常有效，并帮助我避免结束我的开发生涯，因为我认为我什至无法显示基本块！！

这里甚至还有一个未解决的问题。是 Udemy 的一位用户帮我找到了这个。

https://github.com/WordPress/gutenberg/issues/62202

希望它能帮助那里的人。