WP-custom-block-plugin-starter

custom-block-starter.php

<?php

/*
  Plugin Name: Awesome Block Block Type
  Version: 1.0
  Author: Simon
  Author URI: https://github.com/simonhlee97
*/

if( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class AwesomeBlock {
  function __construct() {
    add_action('init', [$this, 'onInit']);
  }

  function onInit() {
    wp_register_script('awesomeBlockScript', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-i18n', 'wp-editor'));
    wp_register_style('awesomeBlockStyle', plugin_dir_url(__FILE__) . 'build/index.css');

    register_block_type('ourplugin/awesome-block', array(
      'render_callback' => [$this, 'renderCallback'],
      'editor_script' => 'awesomeBlockScript',
      'editor_style' => 'awesomeBlockStyle'
    ));
  }

  function renderCallback($attributes) {
    return '<p>We will replace this content soon.</p>';
  }

}

$awesomeBlock = new AwesomeBlock();

index.js

// this file needs to be inside a folder "src", beside the index.scss file.
import "./index.scss"

wp.blocks.registerBlockType("ourplugin/awesome-block", {
  title: "Awesome Block",
  description: "A custom block type built with React",
  icon: "welcome-learn-more",
  category: "common",
  edit: EditComponent,
  save: function () {
    return null
  }
})

function EditComponent(props) {
  return (
    <div className="awesome-block-wrapper">
      <div className="awesome-block-select-container">
        We will have a select dropdown form element here.
      </div>
      <div>
        The HTML preview of the selected professor will appear here.
      </div>
    </div>
  )
}