Things seems unnecessary.

[Arifursdev]

I was starting to create something with the block after few months for trying it for the first time. some major issue I noticed, I'm fan of doing almost all things in PHP only speaking of WordPress backend, which was always been this way, like registering new block, adding things to customizer panel etc.

Instead of this:

register_block_type( 'custom-theme-blocks/test-text-field', [
   'title'	=> 'Test Text Field',
   'icon' => 'text',
   'category' => 'common',
   'attributes' => array(
      'text' => array(
      'type' => 'string',
      'default' => '',
 ),
),
 'render_callback'	=> function(){
    echo '<input type="text" data-test-attr>';
 },
 'editor_script'   => 'test-text-field.js'
]);

so we define title, icon , category, attributes, render callback, editor script. and that's not enough. you have redo the exact same thing in JS even title, icon, category, save, and edit callback which was supposed to be render_callback. its not even optional, if you don't give it a save and edit callback it won't work.

// text-field-block-script.js
wp.blocks.registerBlockType('custom-theme-blocks/test-text-field, {
    title: 'Test Text Field Block', //replaces the title set on registerblocktype function
    icon: 'text',
    category: 'common',
    attributes: {
      text: {
        type: 'string',
        default: '',
      },
    },
    edit: function (props) {
      return wp.element.createElement(
        'input',
        {
          type: 'text',
          value: props.attributes.text,
          onChange: function (event) {
            props.setAttributes({ text: event.target.value });
          },
        }
      );
    },
    save: function (props) {
      return props.attributes.text;
    },
});

Like why??

Why not this:

register_block_type('namespace/block-name', [
    'title' => 'Test Field Block',
    'icon' => 'text',
    'category' => 'common',
    'attributes' => [
        'text' => [
            'type' => 'string',
            'default' => '',
        ],
    ],
    'render_callback'	=> function(  $attrs  ){
        echo '<input type="text" name="text" data-some-attr  value="'. $attrs['text'] .'">';
    },
    'save_callback'	=> function( $attrs  ){
        // writting the markup for both editor and frontend here
        return '<div class="ez">'. $attrs ['text'] . '</div>';
    },
   'validate_callback'   => function( $attrs  ){
   if(empty($attrs['text'])) {
   return 'errrrrr';
   }
   
   return true;
   },
    'editor_script' => 'test-field-block-script', // optional for editor
    'editor_style'  => 'test-field-editor-style', // optional for editor,

    'block_script' => 'test-field-block-script-frontend', // optional (for frontend if that block is added on the page)
    'block_style'  => 'test-field-editor-style-frontend', // optional (for frontend if that block is added on the page)
]);

and nothing else.

[ajgagnon]

The short answer is that you don't have to do this in Javascript. The preferred method is using a block.json file and register_block_from_metadata

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

If you add a script, editorScript, etc. to this file, it will be registered with Javascript. Hope this helps.

[Arifursdev]

so they have added loading a separate json file with all the params, but won't accept me writing them params directing in the function itself?😀