Creating a Gutenberg block using a function

I am working on a members style plugin and needed a front end login form, WP has a pretty simple function to include the login form ( wp_login_form() ) which makes the process really easy but how do we get the form to show? WP has a lot of options including:

• Use the_content filter
• Use a page template
• Use a shortcode

If I am to fully embrace WP's adoption of Gutenberg, I should delve into the building a block to handle this.

Create the plugin

Add the following to the top of a blank file:

<?php
/**
 * Plugin Name:       GB Login Block
 * Plugin URI:        https://example.com
 * Description:       My Gutenberg login block
**/

Save the file as login-block.php

Register Our block (php)

Next we need to register the block JS using the enqueue_block_editor_assets action.

Add the following to the plugin file above.

function login_block_func() {
  wp_enqueue_script(
    "login-block",
    plugin_dir_url(__FILE__) . "block.js",
    array( "wp-blocks","wp-editor" ),
    true
  );
}

add_action( "enqueue_block_editor_assets", "register_block_func" );

Registering our block (js)

Next we need to register the block using javascript, copy the code below and save the file as block.js

( function() {

  var __ = wp.i18n.__;
  var el = wp.element.createElement;
  var registerBlockType = wp.blocks.registerBlockType;

  registerBlockType(
    'block/login-block', {
      title: __( 'Login Form', '' ),
      icon: 'shield-alt',
      category: 'common',
      edit: function( props ) {
        return el(
          'p',
          { className: props.className },
          'The login form will be displayed here when viewed on the page.'
        );
      },
      save: function( props ) {
        return null
      },
    }
  );

})();

Rendering our function

Using register_block_type we can render php into our block, add the following to the login-block.php file we created earlier.

register_block_type(
  'block/login-block', array(
    'render_callback' => 'login_block_render'
  )
);

function login_block_render() {
  $login_args = array(
    'echo' => false, // This line is important
  );
  return wp_login_form( $login_args );
}

Finish

Zip up both files and upload the file to the wp admin and activate your new plugin. Create a new page and add a new block, under 'common' you will should see "login form". Add to the page and save. Now head to the page on the frontend to see your custom login form.

Comments

[Stuart Read]

Hi Gareth, thanks for the code

---> this line: add_action( "enqueue_block_editor_assets", "register_block_func" );

I think the function name should be 'login_block_func' , not 'register_block_func'

:)

It didn't work for me with a cut and paste, so this change rendered in the block editor.