Comments on: Creating a Gutenberg block using the official new package https://www.designbombs.com/creating-a-gutenberg-block-using-the-official-new-package/ Droppin' design bombs everyday! Fri, 19 Nov 2021 11:16:38 +0000 hourly 1 https://wordpress.org/?v=6.8.5 By: Johan Linderoth https://www.designbombs.com/creating-a-gutenberg-block-using-the-official-new-package/#comment-118450 Fri, 19 Nov 2021 11:16:38 +0000 https://www.designbombs.com/?p=30464#comment-118450 Thank you for a great article!

Here’s an alternative (and simpler way) to create more than one block in the generated project.

Create one directory for each block – e.g
src/blocks/a/
src/blocks/b/
etc

Implement each block as the generated example with edit.js, save,js, editor.scss, style.scss and an index.js but let index.js default export an init function that makes the registerBlockType( … ) call instead.

Remove the top level src/edit.js and src/save.js files

Modify src/editor.scss by removing the original code and then add
@import “blocks/a/editor”;
@import “blocks/b/editor”;

Same thing for src/style.scss
@import “blocks/a/style”;
@import “blocks/b/style”;

Modify src/index.js, remove the original code and add
import aInit from ‘./blocks/a’;
import bInit from ‘./blocks/b’;
aInit();
bInit();

That’s it! npm run build the usual way

🙂
/johan

]]>
By: Nick https://www.designbombs.com/creating-a-gutenberg-block-using-the-official-new-package/#comment-105630 Sat, 07 Aug 2021 12:58:32 +0000 https://www.designbombs.com/?p=30464#comment-105630 I just learned that you can specify a namespace!

npx @wordpress/create-block block-name –namespace block-namespace

]]>