Any suggestions for using the WPBP with Gutenberg blocks?

[raquelmsmith]

I'm looking to add some Gutenberg blocks to my plugin built with the WPBP. Any suggestions for file structure and where things should go?

[DevinVinson]

I've not really looked at anything with the new editor yet. It looks like it would all live inside the admin folder with the js, css in those folders and then maybe a new class per block.

[dingo-d]

@raquelmsmith did you take a look at https://github.com/ahmadawais/create-guten-block? Ahmad did a great job with this one, and it can give you an idea how to adopt that plugin structure to the structure of the boilerplate.

[ghost]

With WordPress moving so fast and heavily investing in the new editor, I too feel that there should be a block scaffolded into a copy of this boilerplate.

I feel it would make sense to include some scaffolding that conforms to the Block Editor Handbooks - @wordpress/create-block, feature.

I'd propose something like the following structure (but I'm no expert.) 👍

my-demo-plugin/
│ 
├─ admin/
│  ├─ css/
│  │  ├─ my-demo-plugin-admin.css
│  ├─ js /
│  │  ├─ my-demo-plugin-admin.js
│  ├─ partials/
│  │  ├─ my-demo-plugin-admin-display.php
│  ├─ index.php
│  ├─ class-my-demo-plugin-admin.php
│ 
├─ blocks/
│  ├─ class-my-demo-plugin-blocks.php
│  ├─ build/
│  │  ├─ my-first-block/
│  │  │  ├─ block.json
│  │  │  ├─ index.asset.php
│  │  │  ├─ index.css
│  │  │  ├─ index.js
│  │  │  ├─ style-index.css
│  ├─ src/
│  │  ├─ my-first-block/
│  │  │  ├─ block.json
│  │  │  ├─ edit.js
│  │  │  ├─ editor.scss
│  │  │  ├─ index.js
│  │  │  ├─ save.js
│  │  │  ├─ style.scss
│ 
├─ includes/
│  ├─ class-my-demo-plugin-activator.php
│  ├─ class-my-demo-plugin-deactivator.php
│  ├─ class-my-demo-plugin-i18n.php
│  ├─ class-my-demo-plugin-loader.php
│  ├─ class-my-demo-plugin.php
│  ├─ index.php
│ 
├─ languages/
│  ├─ en_GB.mo
│  ├─ en_GB.po
│  ├─ my-demo-plugin.pot
│ 
├─ public/
│  ├─ css/
│  │  ├─ my-demo-plugin-public.css
│  ├─ js /
│  │  ├─ my-demo-plugin-public.js
│  ├─ partials/
│  │  ├─ my-demo-plugin-public-display.php
│  ├─ index.php
│  ├─ class-my-demo-plugin-public.php
│ 
├─ index.php
├─ license.txt
├─ uninstall.php
├─ my-demo-plugin.php

[kassemEzz]

I applied @lewis-elborn proposed structure, and its working for my plugin.

In includes\class-my-demo-plugin.php, I added $this->define_block_hooks() in __construct().

private function define_blocks_hooks() {
	$plugin_blocks = new Demo_Blocks();

	$this->loader->add_action(
		'init',
		$plugin_blocks,
		'register_demo_block'
	);
}

Then in function load_dependencies(), I added the line require_once plugin_dir_path( dirname( __FILE__ ) ) . 'blocks/class-my-demo-plugin-blocks.php';

And finally in blocks/class-my-demo-plugin-blocks.php, I defined the class:

class Demo_Blocks {
    public function register_demo_block() {
        if ( function_exists('register_block_type') ) {
            register_block_type( __DIR__ . '/build');
        }
    }
}

The main reason I needed to have a separeate blocks class was actually so it can hold the rendering callback function for the dynamic block. It seems the cleanest and the right place to drop such code. So my class actually will look like this:

class Demo_Blocks {
    public function register_demo_block() {
        if ( function_exists('register_block_type') ) {
            register_block_type(
                __DIR__ . '/build',
                array(
                    'render_callback' => array( $this, 'render_frontend_content' ),
                )
        }
    }
}

I'm also no expert, but this is working for me and will stick with it, but it might not be optimal for all cases.