A simple Wordpress Gutenberg plug-in

mb-block.js

/**
 * mb Gutemberg block
 *  Copyright (c) 2001-2018. Matteo Bicocchi (Pupunzi)
 */
var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    ServerSideRender = wp.components.ServerSideRender,
    TextControl = wp.components.TextControl,
    TextareaControl = wp.components.TextareaControl,
    InspectorControls = wp.editor.InspectorControls;

/** Set the icon for your block */
var mb_icon = el ("img", {
  src: "/wp-content/plugins/mb.gutemberg-block/images/YTPL.svg",
  width: "50px",
  height: "50px"
});

registerBlockType( 'mbideas/mb-simple-block', {
  title: 'mb Simple Block',
  icon: "carrot",
  category: 'mb.ideas',
  
  attributes: {
    
    'mb_title': {
      type: 'string',
      default: "mb Editor content block"
    },
    'mb_text': {
      type: 'string',
      default: "Write here some text"
    },
    
    'mb_url': {
      type: 'string',
      default: "https://pupunzi.com"
    },
  },

  
  edit: (props) => {
    
    if(props.isSelected){
      //console.debug(props.attributes);
    };
    
    return [
      /**
       * Server side render
       */
      el("div", {
            className: "mb-editor-container",
            style: {textAlign: "center"}
          },
          el( ServerSideRender, {
            block: 'mbideas/mb-simple-block',
            attributes: props.attributes
          } )
      ),

      /**
       * Inspector
       */
      el( InspectorControls,
          {}, [
            el( "hr", {
              style: {marginTop:20}
            }),
      
            el( TextControl, {
              label: 'Title',
              value: props.attributes.mb_title,
              onChange: ( value ) => {
                props.setAttributes( { mb_title: value } );
              }
            } ),
            
            el( TextareaControl, {
              style: {height:250},
              label: 'Content',
              value: props.attributes.mb_text,
              onChange: ( value ) => {
                props.setAttributes( { mb_text: value } );
                console.debug(props.attributes)
              }
            }, props.attributes.mb_text ),
      
            el( TextControl, {
              label: 'Url',
              value: props.attributes.mb_url,
              onChange: ( value ) => {
                props.setAttributes( { mb_url: value } );
              }
            } ),
          ]
      )
    ]
  },
  
  save: () => {
    /** this is resolved server side */
    return null
  }
} );

mb-block.php

<?php

/*
Plugin Name: mb.block
Plugin URI: https://pupunzi.open-lab.com/2018/11/11/a-simple-gutenberg-block-plugin
Description: A sample Gutemberg block
Author: Pupunzi (Matteo Bicocchi)
Version: 1.0.0
Author URI: http://pupunzi.com
Text Domain: mbBlock
*/


function mb_block_init()
{
  /**
   * Check if Gutemberg is active
   */
  if (!function_exists('register_block_type'))
    return;

  /**
   * Register our block editor script
   */
  wp_register_script(
      'mb-simple-block',
      plugins_url( 'mb-block.js', __FILE__ ),
      array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
  );

  /**
   * Register our block, and explicitly define the attributes we accept
   */
  register_block_type( 'mbideas/mb-simple-block', array(

    /** Define the attributes used in your block */

      'attributes'  => array(
          'mb_title' => array(
              'type' => 'string'
          ), 
          'mb_text' => array(
              'type' => 'string'
          ),
          'mb_url' => array(
              'type' => 'string'
          )
      ),

    /** Define the category for your block */
      'category' => 'mb.ideas',

    /** The script name we gave in the wp_register_script() call */
      'editor_script'   => 'mb-simple-block',

    /** The callback called by the javascript file to render the block */
      'render_callback' => 'mb_block_render',
  ) );

}
add_action( 'init', 'mb_block_init' );

/**
 * Define the server side callback to render your block in the front end
 *
 * @param $attributes
 * @return string
 * @param array $attributes The attributes that were set on the block or shortcode.
 */
function mb_block_render( $attributes )
{
  /** @var  $is_in_edit_mode  Check if we are in the editor */
  $is_in_edit_mode = strrpos($_SERVER['REQUEST_URI'], "context=edit");

  /** @var  $UID  Unique ID for the element*/
  $UID = rand(0, 10000);

  /** If we are in the editor */
  if ($is_in_edit_mode) {

    /** If the specific attribute exist (it's not new) */
    if($attributes['mb_text']){
      $content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '">';
      $content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
      $content .= '<p class="mb-editor-text"> ' . $attributes['mb_text'] . '</p>';
      $content .= '<a class="mb-editor-url" href="' . $attributes['mb_url'] . '"> ' . $attributes['mb_url'] . '</a>';
      $content .= '</div>';

      /** If it's new */
    } else {
      $content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '">';
      $content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
      $content .= '<p class="mb-editor-text"> Insert your content</p>';
      $content .= '</div>';
    }

    /** If we are in the front end */
  } else {
    $content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '" style="background:#f3f3f3; padding:20px">';
    $content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
    $content .= '<p class="mb-editor-text"> ' . $attributes['mb_text'] . '</p>';
    $content .= '<a class="mb-editor-url" href="' . $attributes['mb_url'] . '"> ' . $attributes['mb_url'] . '</a>';
    $content .= '</div>';
  }
  return $content;
}

/**
 * Create your Gutemberg category
 *
 * @param $categories
 * @param $post
 * @return array
 */
add_filter( 'block_categories', 'mb_block_categories', 10, 2 );
function mb_block_categories( $categories, $post )
{

  return $categories;
  /** If mb.ideas is already in categories return categories */
  if($categories['slug'] == 'mb.ideas')
    return $categories;

  return array_merge(
      $categories,
      array(
          array(
              'slug' => 'mb.ideas',
              'title' => __( 'mb.ideas Blocks', 'mbBlock' ),
          ),
      )
  );
}

Spent the entire day trying to do what this example plugin is meant to do. I installed this and still no luck!

It looks textbook though but there has to be a bug in WP because this is the only active plugin.

@RyanBayne I know I'm a bit late to the party, but if you change from category: 'mb.ideas', to category: 'common', in the js file, everything works as expected! :-)

@RyanBayne I know I'm a bit late to the party, but if you change from category: 'mb.ideas', to category: 'common', in the js file, everything works as expected! :-)

Appreciated - I still needed a solution as I had moved onto other tasks.