Custom Block creation - Vite or Bud, Plugin or Theme?

sage
1

Hi there, firstly a disclaimer - I’m very new to Sage 11 and for that matter 10. My previous major site development was using Sage 9 and things have evidently moved on a great deal since then both in terms of Wordpress Gutenberg blocks and the tech stack surrounding roots/sage. So with this in mind I’m trying to piece together my best approach for a fairly simple new site but where I can also update my skillset during the process. Hopefully if I present what I’m trying to do and what I’ve discovered myself so far, you can help fill in some gaps and put me in the right direction.

I’m looking to create a custom Block that presents as a kind of search widget to the visitor, there are 2 drop downs and a Search button. The contents of the first drop down are rendered directly from a database table, then on selecting an option in the first drop down, the second drop down is activated and populated with a bunch of other options from the database. On selecting the second option, the ‘Search’ button is activated and on clicking this, the user is taken off to a page where their search results are presented.

I’ve looked at the Block Editor Handbook - Block Editor Handbook | Developer.WordPress.org and have a reasonable grasp on how to scaffold and set up a block. The main question I have here is that they are instructing me to create a block as a plugin, not as part of the theme - is that the best approach? Is there an alternative approach where the Block is defined in the Sage theme and thus inherits styles and can utilize Blade templates?

The functionality that I’m building obviously requires Javascript and needs to utilize admin-ajax.php - so I wondered if I could possibly use vue.js. But when I started to look into this I got a bit confused. I started looking at @roots/bud-vue but then I read that Sage 11 uses Vite not Bud - https://discourse.roots.io/t/is-sage-switching-from-bud-to-vite/29112/22 . So is Vue part of Vite now? Is there anywhere I can go to get a kind of ‘Hello world’ example of a Vue component in Sage 11?

Lastly, if the Block I’m building is a Plugin, and Vite/Vue is part of my Theme - it doesn’t really help me does it? In this case would I need to add Vue to the plugin, is that correct?

Sorry for the undoubtedly dumb questions… just need some pointers really

2

My preferences in order:

  1. Radicle’s block setup
  2. Using wp-scripts in a plugin
  3. Using GitHub - Log1x/acf-composer: Compose ACF Fields, Blocks, Widgets, and Option Pages with ACF Builder on Sage 10. (only last for me because I do not use ACF / ACF Blocks)
3

Hi @ben, thanks for the suggestions. I don’t really know much about Radicle but from what can tell it wraps Bedrock/Acorn/Sage? Is it Sage11? Also, it’s a paid option - is that correct?

4

Yes it does wrap them, but also configures Acorn from the project root with a more Laravel-like structure (and a lot more)

It is “Sage 11” but modified and with a better starting point

Yes, it is a paid product

5

I see, so with Radicle you could go wp acorn make:block which you couldn’t do with just sage? But if I was using GitHub - Log1x/acf-composer: Compose ACF Fields, Blocks, Widgets, and Option Pages with ACF Builder on Sage 10. I could go wp acorn acf:block ? Is the acf-composer only for Sage 10 though - that’s what it says on it’s github page.

Thanks Ben

6

Yes, Sage doesn’t have any commands for making blocks. Radicle’s block scaffolding uses native blocks (no ACF).

ACF Composer works on Sage 10 and Sage 11, as well as Radicle.

7

Thanks for letting me pick your brains @ben it’s helping me get a better understanding of options for sure, one more thing and I promise I’ll leave you alone… if I’m creating a native block either with Radicle in the Theme or seperately in it’s own plugin, and I need it to have js/ajax functionality, am I better off using React because this is natively supported in blocks. Is Vue.js an option or should I disregard this for now?

8

I use React because that’s what the block editor is built on