Extend the AddCommand (or RegisterCommand) to add Gutenberg Blocks

[garretthyder]

Hi @amostajo

Along with the ability to setup shortcode/widget stubs it would be awesome to do the same for Gutenberg Blocks.

I noted in your Post Gallery plugin that there's a Gutenberg Block so figured it might be straight-forward?

Speaking on this plugin - https://en-ca.wordpress.org/plugins/simple-post-gallery/

Thank you

[amostajo]

@garretthyder Yes! Gutenburg is one of the milestones for the next major release.

I have not figured it out yet how to architecture and design the framework the best way though. If you come with ideas, let me know!

[garretthyder]

Sounds good, I'll use your plugin as a guide to start and as I make progress in my plugin we can collaborate on the command.

[amostajo]

@garretthyder if you review the studio's repositories, you will find that there are already a couple of handy add-ons your could use in your project.

[garretthyder]

Thanks @amostajo greatly appreciated I'll dive in there

[garretthyder]

Hi @amostajo following your lead with Simple Post Gallery plugin I was able to get a basic block working and just wanted to share a highlevel view on the pieces to hopefully lay the groundwork for a command.

1. Added to Main.php the registration function on init wrapped in a function_exists for register_block_type;

// Register SendToNews block.
if (function_exists('register_block_type')) {
    $this->add_action('init', 'BlockController@register');
}

2. Created a BlockController containing a single register() method;
   https://gist.github.com/garretthyder/91d1bdb5ce641c44c543e82a6cb745da
   Note: The register method registers the editor.css and editor.js and then registers the block type using these.

3. Created a blocks directory in /assets and adds a custom block folder which holds the editor.js and editor.css files.
   *The editor.css could be barebones with not much more than the docblock description.
   **The editor.js probably should be a little more involved giving a basic block registration script;
   https://gist.github.com/garretthyder/c6377853cb7eaff8aac0727b4d4107d5

I believe that's all that's needed for a basic block, and then maybe provide links to the handbook, etc.

Thoughts?

[amostajo]

@garretthyder I think we need to rework gulp-wpmvc and add compilation exceptions inside raw js, son we can separate admin assets and block assets.

Also, blocks use marionette and backbone, I would be great I we can figure it out a better way to process the two. For example, when using view, you can create vue assets that contain JS/HTML/CSS in one place, and node will make the separation.

So before adding the commands in here, we need to define a better working workflow for blocks inside the framework.

[garretthyder]

Awesome thanks @amostajo I'll let you lead there and feel free to ping and i'll be around to test and assist.

[amostajo]

I was wrong about the backbone/marionette, got confused with the WP media manader. Will work on adding this in Sunday's release.

[amostajo]

@garretthyder will reschedule this to next release since this feature needs changes on other components, I have not finish it. Still, release v1.0.9 needs to be shipped today.

[amostajo]

@garretthyder been looking further, and since blocks are based on react, I think the best thing moving forward would be to migrate from gulp to webpack.
https://youtu.be/6x7GXs6Foaw

What do you think?

[garretthyder]

I'm all for it @amostajo and agree moving to webpack makes the most sense for React and supports most of what gulp handled for us. Anything like unit testing or tasks that webpack doesn't cover we can fall back to gulp or just rely on npm scripts.