Using several block builders
Combining block builders on a website
If you use builders, even a Gutenberg block builder, there will come a time when you are short of something, or see something that you would also like to use on a website; would it be possible to combine several block builders at the same time on the same website?
What’s the advantage of using numerous block builders?
For example, I regularly use Kadence Blocks or Greenshift Blocks. Both are excellent, complete, and fulfill the function of a real Pagebuilder. But it regularly happens that I need something, which is not in it, or is really better elsewhere. In the old days, with builders such as Divi or Elementor, you could expand the functionality with various plug-ins. The disadvantage of this was that at some point you sometimes had to install 5, 10 or more extra plug-ins to achieve what you wanted (that is not exaggerated). This made the website, which is already very slow with both Divi and Elementor, even slower and with updates often problems arise because not everything turns out to be compatible.
Gutenberg is Gutenberg, right?
I regularly heard that as well. But at the same time, you know as a web builder, designer, that too many plug-ins is absolutely not recommended.
The Good News
The good news is that you can indeed use multiple Gutenberg Builders, collections, side by side. The bad news could be that we assume that you install good Gutenberg Blocks. Good means ‘intelligent and written with good code’. Good code does not really need explanation, and intelligent means that it only loads code on a page or site as a whole, if necessary. So if you have installed an extra block collection, but do not apply any block to a page, no extra code should be loaded. Most good, solid block collections take this into account.
The less good news…
If you use several good Gutenberg block builders / block collections, your website will not become slower. Sometimes even faster because you use blocks that are more code efficient.
This is different with editing.
One extra block collection usually makes no difference. A second extra block collection is still fine, but thereafter, the speed of your editor really goes down. It also quickly becomes a mess; If you add a block, you will see an endless list, and you keep scrolling.
This is different with editing.
One extra block collection usually makes no difference. A second extra block collection is still fine, but thereafter, the speed of your editor really goes down. It also quickly becomes a mess; If you add a block, you will see an endless list, and you keep scrolling.
Blocks from different builders on the same page
As an example, I use blocks from Kadence Blocks and Greenshift Blocks. Can you mix their blocks on the same website: yes, no issues. Can you mix the blocks mix on the same web page? Yes and no.
Mixed up but not connected
On a page, you can simply mix blocks from different builders; I have not experienced any problems during the tests and daily activities. By ‘loose’not connected’ I mean separately; not one block in a block of another block builder. No container or section from Greenshift in a row block from Kadence blocks. Simple blocks, like a heading or text block, are safe; you can place a Greenshift text block in a Kadence row block. But don’t place fancier blocks, like an accordion or a modal, in a row block or section from another builder: it’s going to give you issues. Don’t create a Kadence advanced query, with the rest from another block collection like Greenshift; it won’t work as it should.
Use one block collection (builder) as base
So, you can mix. But, keep in mind that you should really use one block collection as a base. By base, I mean sections, columns, and even accordions of the same block collection on a page, and preferably even the entire website. Then you can occasionally “borrow” a block from another builder.
Video about the impact of multiple block builders
Jack Cao made a YouTube video about the effect of using multiple Gutenberg collections. He uses two identical websites. The reference site only uses Kadence Blocks. The test site also starts with Kadence, but starts adding Gutenberg Builder Block collections, one after the other.
Starting point block builders of the test
On this page also a list of the block builders that have been tested. The starting point for this, both for me and Jack Cao, is a FSE theme on a normal shared hosting.
Builders tested
The combinations tested by me:
Kadence blocks + Getwid
- No delay, not even in the editor.
Kadence blocks + Greenshift
- No delay, not even in the editor.
Tested by Jack Cao
Starting point is a WordPress installation with Kadence blocks.
Getwid
- No delay
Atomic blocks
- Very slight delay
Otter blocks
- No delay
Gutenblocks
- No delay
PublishPress
- No delay
Stackable
- No delay
Spectra
- No delay
Conclusion
Keep in mind that the results are about activating extra Gutenberg Block collections. If we look at individual blocks, for example a query or a slider, one block will handle memory and processor capacity much more carefully and therefore with less delay than another. Spectra, for example, is not known for its efficient written blocks, while Kadence, Greenshift, GenerateBlocks (not tested here) and Stackable are.
There are more good blocks!
We certainly don’t want to exclude the block collections that we have not tested. The collections mentioned here are not necessarily the only ones; there is more! . Block builders such as Gutenkit, Blockera, Nectarblocks, Postx, Zolo, Coblocks and many others can also be worth using.