register_block_type - no block available in block editor

admin管理员组

文章数量:1124376

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?

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?

• block-editor

Share Improve this question edited Dec 21, 2022 at 14:31 FFrewin asked Dec 21, 2022 at 13:05 FFrewinFFrewin 24811 silver badge1313 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

Sadly, WP doesn't have this automated yet. So to actually display the block in the editor, you have to register it using JS.

Luckily, this can be done without any JS/react building, using just pure PHP&JS:

add_action('admin_head', function () {
    ?>
    <script>
        if (typeof window.wp.blockEditor !== 'undefined') {
            ( function ( blocks, element, blockEditor, editor ) {
                const el = element.createElement;
                const InnerBlocks = blockEditor.InnerBlocks;
                const useBlockProps = blockEditor.useBlockProps;

                blocks.registerBlockType('wrm/testblock', {
                    edit: function (props) {
                        return el(
                            editor.ServerSideRender,
                            {
                                block: "wrm/testblock",
                                attributes: props.attributes
                            }
                        );
                    },

                    save: () => null,
                });
            } )( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.editor );
        }
    </script>
    <?php
});

What this does is basically telling the editor that you want to use this block in the editor and that for its rendering you want to use the render.php you have defined in your block.json e.g. like

"render": "file:./render.php",

This is just a basic example for a HTML static block.

In case you want parts of the block to be editable - again you have to tell it to editor "I want to have this input and when it changes I want to update this attribute/prop" - example adding block setting text input to the sidebar of block settings - note that it will still leverage the server-side rendering in both editor and frontend view

本文标签： registerblocktypeno block available in block editor