[Resolved] What requirements are needed to use GenerateBlocks?

[Harvey]

Hi,

I’ve got some pretty sweet custom GenerateBlocks that I want to make available to other people.

Are the only requirements to start using the blocks that they import the JSON file I send them and that they install GenerateBlocks?

Forgive me if this is a stupid question as I’ve never used builders like these, but if people are using Elementor or BeaverBuilder (or similar setups), is there any way for them to import and use the custom GenerateBlocks or is this only for people using default Gutenberg?

Thanks so much guys!

[Fernando]

Hi Harvey,

You should be able to copy and paste the GenerateBlocks Editor code directly from Editor to Editor. That should work.

I haven’t tried adding GenerateBlocks in another editor, but I believe the only way would be if there was an available Hook to hook on to for the GB code.

For instance, you can try creating a portable hook as such: https://generatepress.com/forums/topic/hooks-related-question/#post-2170598

Then create a Block Element – Hook to add your GB Blocks from within Elementor or BB content.

I’m not sure but you may need to let WordPress know that you have GB inside Elementor or BB Content: https://docs.generateblocks.com/article/adding-content-sources-for-dynamic-css-generation/

[Harvey]

Thanks man, just to confirm, what do you mean by GenerateBlocks Editor code? Are you saying there’s no need to import the JSON file as a reusable block in order to import a custom GB block?

Good info re the Elementor/BB stuff, I may try that to get compatibility for those cretins who use those things! 😀

Thanks again

[Fernando]

Actually, you’re right. It’s JSON code – but same as what I was referring to, the editor code of GB.

Example:

<!-- wp:generateblocks/container {"uniqueId":"9842a29d","outerContainer":"contained","containerWidth":1400,"borderColor":"var(\u002d\u002dbase-3)","backgroundColor":"var(\u002d\u002dcontrast-3)","bgImage":{"id":967,"image":{"url":"https://fazarcon.pluginsupportwp.com/wp-content/uploads/2022/09/marvin-meyer-8CDuHXff3zo-unsplash.jpg","height":933,"width":1400,"orientation":"landscape"}},"bgOptions":{"selector":"pseudo-element","opacity":0.3,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"isDynamic":true,"blockVersion":3,"useInnerContainer":true,"paddingTop":"160","paddingRight":"30","paddingBottom":"280","paddingLeft":"30","paddingTopTablet":"120","paddingRightTablet":"30","paddingBottomTablet":"300","paddingLeftTablet":"30","paddingTopMobile":"80","paddingBottomMobile":"300","borderSizeRight":"20","borderSizeBottom":"20","borderSizeLeft":"20"} -->
<!-- wp:generateblocks/headline {"uniqueId":"da217663","element":"h1","blockVersion":2,"alignment":"center","fontSize":44,"fontSizeMobile":38,"marginBottom":"0","backgroundColor":"","textColor":"var(\u002d\u002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":""} -->
<h1 class="gb-headline gb-headline-da217663 gb-headline-text">Exploring the world one destination at a time</h1>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"dde44a75","element":"p","blockVersion":2,"display":"flex","flexDirection":"column","alignment":"center","fontSize":21,"lineHeight":1.3,"backgroundColor":"","textColor":"var(\u002d\u002dbase-3)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"","iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":".2","iconSize":70,"iconSizeUnit":"px"} -->
<p class="gb-headline gb-headline-dde44a75"><span class="gb-icon"><svg viewBox="0 0 200 89.68" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="M100 26.67c26.16 0 41.14-17.89 67.65-17.89 10.5 0 22.63 3.14 32.35 7.88V8.22C190.47 3.33 178.17 0 167.65 0c-26 0-41 17.89-67.65 17.89S58.33 0 32.35 0C21.83 0 9.52 3.33 0 8.22v8.44c9.72-4.74 21.85-7.88 32.35-7.88 26.51 0 41.49 17.89 67.65 17.89Zm100 53v-8.44c-9.53-4.89-21.83-8.23-32.35-8.23-26 0-41 17.89-67.66 17.89S58.31 63 32.35 63C21.83 63 9.52 66.34 0 71.23v8.45c9.72-4.75 21.85-7.89 32.35-7.89 26.49 0 41.5 17.89 67.64 17.89s41.15-17.89 67.65-17.89c10.51 0 22.64 3.14 32.36 7.89Zm-100-22c26.15 0 41.14-17.88 67.65-17.88 10.5 0 22.63 3.14 32.35 7.88v-8.43c-9.53-4.89-21.83-8.24-32.35-8.24-26 0-41 17.9-67.65 17.9S58.31 31 32.35 31C21.83 31 9.52 34.35 0 39.24v8.45c9.72-4.69 21.85-7.88 32.35-7.88 26.51 0 41.5 17.88 67.65 17.88Z"></path></svg></span><span class="gb-headline-text">Photography, articles & travel tips from a married nomadic couple</span></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Also see: https://share.getcloudapp.com/ApueepD7

[Harvey]

Hey sorry mate, I’m not quite sure what you’re getting at re the editor code? How would this be used by someone trying to use one of my GBlocks?

[Fernando]

This is what I mean: https://share.getcloudapp.com/OAu225rj

Or, are you referring to something else? If so, let us know.

[Harvey]

Ohh, so, if they’re using regular Gutenberg as the default, they have to import the GB editor code into the default gutenberg editor AS WELL AS the Json files of the individual custom blocks in order to work right?

Seems simple enough if that’s the case!

[Fernando]

Yes, that’s correct.

You can also directly copy and paste from the Visual editor. That works as well.

[Harvey]

Just to confirm mate, if they have the JSON + GB editor code on their site, they still require the GenerateBlocks plugin to be installed or no?

[Fernando]

Yes, GB is required to be installed for a GB code to work.

[Harvey]

Sweet, that’s all then mate, thanks so much for all your help today!

[Fernando]

You’re welcome, Harvey! Have a nice day!

[Author]

Posts