Generate WordPress html code from Generate blocks

Resolved craiglilly10
(@craiglilly10)

4 years, 10 months ago

I have downloaded WP Advanced Ads as this plugin enables me to automatically inject my own ads into pages/posts in precise locations easily.

To create the ad design from within WordPress, you do the following:

– Create a new page/post (it won’t be saved) and create the ad as you would like it using WordPress editor, or Gutenberg. (I want to use Generate Blocks for this)

– Click “edit as HTML” on the banner ad you have now created

– Copy the code

– Paste this code into the advanced ads plugin and save the ad

– The ad should display exactly as you have created it

The issue is that it doesn’t seem to like the Generate Blocks code and won’t display the design I have created.

Is there any way to convert a block designed using Generate Blocks into the same HTML which would have been created, had it been designed using the WordPress editor?

This would allow me to use Generate Blocks to create my ad >>> convert this code to the standard WP editor code >>> Paste it into Advanced Ads

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Support

(@leohsiang)

Hi Craig,

Not sure if I fully understand the requirement here but it doesn’t sound like GB can be used for this – I’d assume the same for other block plugins as well.

Can you check with the plugin’s support team to see if there are any requirements to make their solution compatible with other block plugins?

Thomas Maier

(@webzunft)

4 years, 10 months ago

Hi there,

Thomas here, the founder of Advanced Ads.

@craiglilly10 your case sounds like our tutorial on using block code in ads. It can indeed ignore CSS layouts of blocks. The CSS needs to be added manually as well.

@leohsiang you are probably the expert on this, so maybe we can find a solution together. When using Advanced Ads to inject the block code, it is technically not yet included in post_content, but added later using the the_content hook.
How does WordPress / GenerateBlocks deliver the CSS for a block? What is the criteria? Does it look for the block code before the_content is executed?

Thanks!
Thomas

Thread Starter

craiglilly10

(@craiglilly10)

4 years, 10 months ago

Hi Thomas,

Thanks for responding to this. Your plugin is hopefully going to be very useful!

I agree regarding the tutorial on using block code in ads. That is where I got my information from originally. I have followed the tutorial, but I have become stuck now that nothing is showing.

I won’t tinker around with it too much until we see what @leohsiang says regarding the questions you have put forward.

I have added the generate blocks code pasted into Advanced Ads, below, for reference.

<!-- wp:generateblocks/headline {"uniqueId":"0c0eaa73","alignment":"center","textColor":"#0f1c2b","showAdvancedTypography":true,"fontWeight":"700","fontSize":44,"lineHeight":60,"lineHeightUnit":"px","marginBottom":"15","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<h2 class="gb-headline gb-headline-0c0eaa73 gb-headline-text">Need an ad placeholder?</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"7f6a9b48","element":"p","alignment":"center","textColor":"#0f1c2b","showAdvancedTypography":true,"fontSize":16,"fontSizeMobile":24,"lineHeight":40,"lineHeightUnit":"px","marginBottom":"20","paddingRightTablet":"20","paddingLeftTablet":"20","paddingRightMobile":"20","paddingLeftMobile":"20","iconColor":"#8eb2a6","iconLocation":"above","iconPaddingRight":"","iconPaddingBottom":"0.5","iconSize":40,"iconSizeUnit":"px","htmlAttributes":[],"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<p class="gb-headline gb-headline-7f6a9b48 gb-headline-text">Ad placeholder text.</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button-container {"uniqueId":"bc6b524d","alignment":"center","marginTop":"30","marginBottom":"0","isDynamic":true} -->
<!-- wp:generateblocks/button {"uniqueId":"6e46798f","hasUrl":true,"hasIcon":true,"iconLocation":"right","backgroundColor":"#e63946","textColor":"#ffffff","backgroundColorHover":"#e63946","backgroundColorHoverOpacity":0.95,"textColorHover":"#ffffff","fontWeight":"bold","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20","borderRadiusTopRight":"4","borderRadiusBottomRight":"4","borderRadiusBottomLeft":"4","borderRadiusTopLeft":"4","iconPaddingRight":"","iconPaddingLeft":"0","htmlAttributes":[],"opacities":[],"transitions":[{"state":"normal","target":"self","timingFunction":"ease","property":"all","duration":0.5,"delay":""}],"boxShadows":[{"state":"normal","target":"self","customSelector":"","inset":false,"color":"#000000","colorOpacity":0.1,"xOffset":0,"yOffset":4,"blur":10,"spread":""}],"transforms":[{"type":"translate","state":"hover","target":"self","translateY":-5}],"textShadows":[],"filters":[]} -->
<a class="gb-button gb-button-6e46798f" href="#"><span class="gb-button-text">View ad placeholder</span><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->

Thread Starter

craiglilly10

(@craiglilly10)

4 years, 10 months ago

***update***

I can see that the ads are now being inserted (not actually sure what I’ve changed to make that happen)

They just lack styling.

This sounds as though it’s going to be a CSS issue rather than anything else.

How do I get the CSS code from the block I made?

Plugin Support