I have created a custom block and can create another one in the same plugin but it will get messy if I carry on because everything has to be done in the same index.js file and php file or so it would seem. This is new to me so perhaps there is a simple way to do this.
But I tried to create a blocks folder and then put a src folder in there as well as an index.js file, so each block folder basically had its own css file and js file etc. But when I run npm run start it does not create the build folders in the subfolders like it does in the root.
So my current folder structure looks like:
build
index.php
package.json
src
- index.js
- index.scss
where I was wondering if I could have multiple blocks something like this perhaps
build
index.php
hero.php
call-to-action.php
package.json
blocks
- hero
-- src
--- index.js
--- index.scss
- call-to-action
-- src
--- index.js
--- index.scss
package.json
{
"name": "custom-blocks",
"version": "1.0.0",
"description": "",
"main": "index",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@wordpress/scripts": "^19.1.0"
}
}
index.php
<?php
/*
Plugin Name: custom blocks
Description: custom blocks
Version: 1.0
Author: ...
Author URI: ...
License: GPLv2 or later
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class myCustomBlocks {
function __construct() {
add_action('init', array($this, 'adminAssets'));
}
function adminAssets() {
wp_register_style('quizeditcss', plugin_dir_url(__FILE__) . 'build/index.css');
wp_register_script('ournewblocktype', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-element', 'wp-editor'));
register_block_type('ourplugin/hero-block', array(
'editor_script' => 'ournewblocktype',
'editor_style' => 'quizeditcss',
'render_callback' => array($this, 'theHTML')
));
}
function theHTML($attributes) {
ob_start(); ?>
<p>Here is some data: <?php echo esc_html($attributes['someAttribute']); ?></p>
<?php return ob_get_clean();
}
}
$myCustomBlocks = new myCustomBlocks();
index.js
import "./index.scss";
import {
TextControl,
Flex,
FlexBlock,
FlexItem,
Button,
Icon,
} from "@wordpress/components";
wp.blocks.registerBlockType("ourplugin/hero-block", {
title: "Hero block",
icon: "smiley",
category: "common",
attributes: {
title: {
type: "string",
},
},
edit: EditComponent,
save: function () {
return null;
},
});
function EditComponent(props) {
return (
<div className="some-jsx">
Some block jsx here
</div>
);
}
block.json
files and registrations. The building separate files for JS for each block part though I'm not sure how to do with WP Scripts, though you don't need to use WP Scripts to do it