Roots Discourse

Sage 10 + Gutenberg (How to do it?)

Hi Folks.

I’m trying to get proper structure in Sage10 to work with Gutenberg Blocks. I know that originally they are planned to be as Plugin, but in my cases blocks are strongly connected with Theme and I don’t see the point to separate them.

Ok, I know that there is @tinypixelco/laravel-mix-wp-blocks, but what next? Let’s say for example I have a website where I need to make 30-50 custom tailored blocks for that website.

  1. What structure for that should I use?

Should I make:

/resources/scripts/blocks/block-name-1/index.js & edit.js & save.js
/resources/scripts/blocks/block-name-2/index.js & edit.js & save.js

and import index.js files in editor.js each by each?

  1. What when there is front-end js? make a file script.js in block folder and import to app.js?

  2. What with .scss import to index.js? (Also wondering what is the reason? Could someone explain?)

  3. For CSS I would probably use /resources/styles/blocks/block-name-1.scss & block-name-2.scss and import them using https://www.npmjs.com/package/import-glob-loader .

  4. I was wondering about using FS (Or there is something better?) to get importing blocks to editor.js automatically if file/folder exist, anyone got good trick for that?

Thank you!

First try to use the core blocks or blocks from well-maintained plugins and modify these using block styles.
In most cases there is already a “primitive” that can be used, e.g. a table, image, heading, paragraph and so on.

That is not the case I’m dealing. I want to drop ACF blocks and just looking for proper structure for files inside sage10. To get that play together when code template.

checkout this package

And how this answer my question? :wink: I’m about to stop using ACF.

my bad, thought you wanted to use acf.

I’d still just put 'm in an independent plugin. The wp scripts package is great and auto sets up all your css / js needs including versioning.