This one is done only for 1-block plugin

[vitasha10]

How to create more than 1 different block in tailwind plugin? if we use frontend.js we can pass here only one block. but if we want to create file with different name it won't be in the build falder whatever we will do.

[yassinerh28]

1. create your block folder in src

brads-boilerplate-block-plugin
-- node_modules
-- build
-- src
---- first-block
------ frontend.js
------ frontend.scss
------ index.js
------ index.scss
-- index.php

2. add a custom start and build script in the package.json folder

replace 'custom-block' with your namespace and 'first-block' with your block name

"scripts": {
    "build-custom-block-first-block": "wp-scripts build src/custom-block-first-block/index.js src/custom-block-first-block/frontend.js --output-path=build/custom-block-first-block",
    "start-custom-block-first-block": "wp-scripts start src/custom-block-first-block/index.js src/custom-block-first-block/frontend.js --output-path=build/custom-block-first-block"
}

3. edit frontend.js

replace 'custom-block' with your namespace and 'first-block' with your block name

import "./frontend.scss"
import React, { useState } from "react"
import ReactDOM from "react-dom"

// replace these with yours
const nameSpace = "custom-block"
const blockName = "first-block"

const divsToUpdate = document.querySelectorAll(`.wp-block-${nameSpace}-${blockName}`)

divsToUpdate.forEach(div => {
  const data = JSON.parse(div.querySelector("pre").innerText)
  ReactDOM.render(<OurComponent {...data} />, div)
})

function OurComponent(props) {
  const [showSkyColor, setShowSkyColor] = useState(false)
  const [showGrassColor, setShowGrassColor] = useState(false)

  return (
    <div>
      <p>
        <button onClick={() => setShowSkyColor(prev => !prev)}>Toggle view sky color</button>
        {showSkyColor && <span>{props.skyColor}</span>}
      </p>
      <p>
        <button onClick={() => setShowGrassColor(prev => !prev)}>Toggle view grass color</button>
        {showGrassColor && <span>{props.grassColor}</span>}
      </p>
    </div>
  )
}

4. edit frontend.scss

replace 'custom-block' with your namespace and 'first-block' with your block name

/* replace classname with yours */
.wp-block-custom-block-first-block {
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);
  background-color: #ffe5b4;
  border: 2px solid #ffda97;
  color: #ce9c41;
  padding: 20px;
  margin: 20px 0;

  p {
    margin: 0;
    padding: 0;
  }
}

5. edit index.js

replace 'custom-block' with your namespace and 'first-block' with your block name and 'My First Block' with your block title

import "./index.scss"

// replace these with yours
const nameSpace = "custom-block"
const blockName = "first-block"
const blockTitle = "My First Block"

wp.blocks.registerBlockType(`${nameSpace}/${blockName}`, {
  title: blockTitle,
  icon: "welcome-learn-more",
  category: "common",
  attributes: {
    skyColor: { type: "string" },
    grassColor: { type: "string" }
  },
  edit: EditComponent,
  save: function () {
    return null
  }
})

function EditComponent(props) {
  function updateSkyColor(e) {
    props.setAttributes({ skyColor: e.target.value })
  }

  function updateGrassColor(e) {
    props.setAttributes({ grassColor: e.target.value })
  }

  return (
    <div className={`wp-block-${nameSpace}-${blockName}`}>
      <input type="text" value={props.attributes.skyColor} onChange={updateSkyColor} placeholder="sky color..." />
      <input type="text" value={props.attributes.grassColor} onChange={updateGrassColor} placeholder="grass color..." />
    </div>
  )
}

6. edit index.scss

replace 'custom-block' with your namespace and 'first-block' with your block name

/* replace classname with yours */
.wp-block-custom-block-first-block {
  background-color: #b8c9f8;
  border: 1px solid #94a9e2;
  border-radius: 5px;
  padding: 20px;
}

7. edit index.php

<?php

/*
  Plugin Name: Brad&rsquo;s Boilerplate Block Plugin
  Version: 1.0
  Author: Brad
  Author URI: https://github.com/LearnWebCode
*/

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

// replace these with yours
// add new blocks names to $blocks_names array
$name_space = "custom-block";
$blocks_names = array(
  "first-block"
);

foreach ($blocks_names as $block) {
  $registeredBlock = new registerBlock($block);
}

class registerBlock {
  public $block_name;
  public $block_type;
  function __construct($block_name) {
    global $name_space;
    $this->block_name = $block_name;
    $this->block_type = $name_space . "-" . $this->block_name;
    add_action('init', array($this, 'onInit'));
  }

  function onInit() {
    wp_register_script($this->block_type . 'Script', plugin_dir_url(__FILE__) . 'build/' . $this->block_type . '/index.js', array('wp-blocks', 'wp-element', 'wp-editor'));
    wp_register_style($this->block_type . 'Style', plugin_dir_url(__FILE__) . 'build/' . $this->block_type . '/index.css');

    global $name_space;
    register_block_type($name_space . '/' . $this->block_name, array(
      'render_callback' => array($this, 'renderCallback'),
      'editor_script' => $this->block_type . 'Script',
      'editor_style' => $this->block_type . 'Style'
    ));
  }

  function renderCallback($attributes) {
    if (!is_admin()) {
      wp_enqueue_script($this->block_type . 'FrontendScript', plugin_dir_url(__FILE__) . 'build/' . $this->block_type . '/frontend.js', array('wp-element'), "0.0.1", true);
      wp_enqueue_style($this->block_type . 'FrontendStyles', plugin_dir_url(__FILE__) . 'build/' . $this->block_type . '/frontend.css');
    }

    ob_start(); ?>
    <div class=<?php echo "wp-block-" . $this->block_type ?>><pre style="display: none;"><?php echo wp_json_encode($attributes) ?></pre></div>
    <?php return ob_get_clean();
    
  }
}

8. repeat the steps for every new block

• repeat steps 1-6 for every new block
• add new blocks names to $blocks_names array for step 7

[yassinerh28]

• to start a block run this from the plugin's directory:

npm run start-custom-block-first-block

• to build a block run this from the plugin's directory:

npm run build-custom-block-first-block