0

Fresh/clean install of WordPress 6.1.1 (no 3rd party plugins/themes)- PHP 8.0.x

Using the following code in functions.php of twentytwentytwo theme.

function wrm_testblock() {
  register_block_type('wrm/testblock', array(
    'attributes' => array(
      'title' => array(
        'type' => 'string',
        'default' => 'TEST',
      ),
      'imageUrl' => array(
        'type' => 'string',
        'default' => '',
      ),
      'linkUrl' => array(
        'type' => 'string',
        'default' => '',
      ),
    ),
  ));
}
add_action('init', 'wrm_testblock');

According to any documentation I have read, I would expect to see the new block available in the blocks panel in the editor. But that's not the case. The new block is nowhere. If I do intentionally a mistake -e.g. type the block name with capitals, WP will let me know about my mistake, which means that the function gets called.

I might be missing something obvious that I am not able to see.

Does the block need to have any other attributes in order to become available in the blocks panel? Or do I need anything else to make this work?

All the docs I read and many examples show that I can register a block only by its name and that it should appear as block option in the panel.

Any idea?

Improve this question

1 Answer 1

Reset to default
2

The PHP code you shared registers the block on the server side, and this information is passed to the block editor via the REST API.

However, no information about how to display or edit the block is included with this, there is no edit component, no save component, and no JS file referenced. So there is no way to show your block in the block editor with just what you've told it. Using this method still requires that the block be registered in javascript too

It is possible to specify a JS file when using register_block_type but you would then need to register the block in that file and pass it the necessary save and edit parameters. Not only that but the title, icon, block category, are all missing.

The easiest method is probably to use register_block_type_from_metadata and provide it the folder/path of a block.json file. This is a more modern version of what you've used, and it will process relative file paths to load edit and save component JS in the same folder.

This is what the WP Scripts block scaffolding will do. It also auto-generates some PHP that can be used to enqueue the needed scripts for the block automagically, and it sets up React etc and commands/docs to build and do live in browser rebuild/refresh.

Improve this answer
7
  • Has not WP added support for block.json in register_block_type recently? At first place my question is about being able to see the block as available in the blocks panel, even if it's not capable of showing, saving, editing anything. Shouldn't the block be available there?
    – FFrewin
    Dec 21, 2022 at 14:37
  • no, why would it? It has no name, description, icon, no edit or save component, so there's no way to insert it, no way to display it, even listing it requires information you haven't provided. I'm not entirely sure what you expect you would see in the block inserter if it did try to display your block, as far as the block editor is concerned, it is aware there is something named wrm/testblock that takes specific attributes, but it knows nothing more than that, and has no idea how to display/save/edit/insert it. Registering the block only in JS with just that info would have the same result
    – Tom J Nowell ♦
    Dec 21, 2022 at 15:06
  • likewise, if you programmatically created that block and tried to insert it, the editor would show it as a crashed block, though it may break at a higher level with messages in the console
    – Tom J Nowell ♦
    Dec 21, 2022 at 15:11
  • Thanks for your input so far. I will check further, try to validate your directions, and should be back with my findings at some point.
    – FFrewin
    Dec 21, 2022 at 16:55
  • OK @Tom - I managed to gather all the pieces together - my misconception is cleared now. Thanks for the time you put and the information you provided. Best wishes.
    – FFrewin
    Dec 22, 2022 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.