[Resolved] Generate WordPress html code from Generate blocks

[CRAIG]

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

The issue I am facing is that 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

[Leo]

Hi Craig,

Any chance you can open a support topic in GB’s support forum?
https://wordpress.org/support/plugin/generateblocks/

The answer might be useful for other GB users as well.

Thanks!

[CRAIG]

Sure, I’ll do that now

[Leo]

Thanks 🙂

[CRAIG]

Hopefully someone replies

I’ve got used to such quick responses on here 🙈

[Leo]

We will get to it 🙂

[CRAIG]

I seem to be getting the ads to show in on the pages now

They just lack any sort of styling

Is there a way I can easily get the CSS from the block I made so that I can copy and paste it?

[David]

Hi there,

add your block to a post or page, view it on the front end. The right click inspect the page, and in the network tab look for the styles-###.css file eg. styles-2.css by hovering over it – the tooltip will show you the URL which will contain generateblocks. Click on that and copy the CSS from the preview.

[CRAIG]

Hi David,

I really can’t get this to display, is there any chance you could show me a screenshot of how to get at this file?

When I right-click > inspect > network = there is nothing there

When I click pointer > hover over the container of the ad I created(gb-inside-container) > click it = there is initially nothing in the network tab but it tells me to click command and R to refresh. I do that, and there are now several files displaying none of them with CSS in the filename

>>>>> I have now found something called “style-1907.css?ver=1626363070” – I think this might be it

I have added a link to the post I have created privately

[David]

In Chrome Developers tools you should see something like this:

[screenshot removed]

With the css file selected you will see the preview panel to copy the code from

[CRAIG]

Hi David, could you please delete that screenshot and share the link to me privately?

Unless it’s private already that is

[CRAIG]

I have now copied the CSS over to the advanced ads plugin and wrapped it in style tags

The code is no longer displaying on the front end which is good, but the ad still has no style applied to it

I wonder if I am missing something simple

I have raised this with the Advanced Ads team but it looks like one of those issues where a bit of feedback from both parties will be required to get this working

[David]

I read up the post – you copied the HTML from the editor… that won’t work as it contains markup specifically for the block editor – you will need the HTML from the Front End. I copied this from the test-ad-post:

<div class="gb-container gb-container-4123e9fd gb-headline gb-headline-e9fa1b79 gb-headline-text">
    <div class="gb-inside-container">
        <h2 class="gb-headline gb-headline-e9fa1b79 gb-headline-text"><span id="Need_a_boiler_price_now">Need a boiler price now?</span></h2>
        <p class="gb-headline gb-headline-6c36ba78 gb-headline-text">Get a great price for a range of quality boilers in under a minute</p>
        <div class="gb-button-wrapper gb-button-wrapper-203ac754">
            <a class="gb-button gb-button-dc9d43a7" href="#"><span class="gb-button-text">View boiler prices</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>
        </div>
    </div>
</div>

[CRAIG]

Ah – thanks David, I will remember that for future. I did wonder if the generate blocks code would have some sort of effect. I have added the front HTML to the ad now.

The ad is displaying as text, still no style applied to it.

After I added the CSS (below) to their plugin (not added anywhere else), I was told by the advanced ads team to wrap it in style tags, which I have now done. Ads still displaying as text only.

Just not too sure where to go from here, I am hoping to hear from Advanced Ads in case there is a setting or something needing tweaked on their plugin.

If there is anything you can add to help with in the meantime I’d really appreciate it

<style>
	.gb-container .wp-block-image img {
    vertical-align: middle;
}

.gb-container .gb-shape {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    line-height: 0;
}

.gb-container .gb-shape svg {
    fill: currentColor;
}

.gb-container-8fe93442 {
    margin: 0 0 100px;
    background-color: #f7f7ff;
    border-radius: 5px;
    border-width: 0;
}

.gb-container-8fe93442 > .gb-inside-container {
    padding: 40px 20px 20px;
}

.gb-container-73cd57e1 {
    background-color: #f3f3f3;
}

.gb-container-73cd57e1 > .gb-inside-container {
    padding: 100px 30px 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.gb-container-53cb46e2 {
    min-height: 0px;
}

.gb-container-53cb46e2 > .gb-inside-container {
    padding: 0;
}

.gb-grid-wrapper > .gb-grid-column-53cb46e2 {
    width: 33.33%;
}

.gb-container-e1bd60bb > .gb-inside-container {
    padding: 0;
}

.gb-grid-wrapper > .gb-grid-column-e1bd60bb {
    width: 33.33%;
}

.gb-container-c762d353 > .gb-inside-container {
    padding: 0;
}

.gb-grid-wrapper > .gb-grid-column-c762d353 {
    width: 33.33%;
}

.gb-container-0f87c806 {
    margin: 40px 0 0;
    border-width: 1px 0 0;
    border-style: solid;
    border-color: #ffffff;
}

.gb-container-0f87c806 > .gb-inside-container {
    padding: 40px 0 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.gb-container-e6861bde > .gb-inside-container {
    padding: 0;
}

.gb-grid-wrapper > .gb-grid-column-e6861bde {
    width: 50%;
}

.gb-container-76827f37 {
    text-align: left;
}

.gb-container-76827f37 > .gb-inside-container {
    padding: 0 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.gb-icon {
    display: inline-flex;
    line-height: 0;
}

.gb-icon svg {
    height: 1em;
    width: 1em;
    fill: currentColor;
}

.gb-highlight {
    background: none;
    color: unset;
}

h2.gb-headline-1e81c13c {
    text-align: center;
    color: #0f1c2b;
    font-size: 44px;
    font-weight: 700;
    line-height: 60px;
    margin-bottom: 15px;
}

p.gb-headline-1504a244 {
    text-align: center;
    color: #0f1c2b;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 20px;
}

div.gb-headline-7741d895 {
    color: #0f1c2b;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

div.gb-headline-7741d895 a {
    color: #0f1c2b;
}

div.gb-headline-43296d39 {
    color: #0f1c2b;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

div.gb-headline-43296d39 a {
    color: #0f1c2b;
}

p.gb-headline-97c10964 {
    color: #a3a3a3;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

h2.gb-headline-c0019166 {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
}

p.gb-headline-a85eccd3 {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0 0;
}

.gb-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    clear: both;
}

.gb-button-wrapper-e41341fd {
    margin: 30px 0 0;
    justify-content: center;
}

.gb-button-wrapper .gb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out;
}

.gb-button-wrapper .gb-button .gb-icon {
    align-items: center;
}

.gb-button-wrapper a.gb-button-cfa80deb,.gb-button-wrapper a.gb-button-cfa80deb:visited {
    background-color: #e63946;
    color: #ffffff;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.gb-button-wrapper a.gb-button-cfa80deb:hover,.gb-button-wrapper a.gb-button-cfa80deb:active,.gb-button-wrapper a.gb-button-cfa80deb:focus {
    background-color: rgba(230, 57, 70, 0.95);
    color: #ffffff;
}

a.gb-button-cfa80deb .gb-icon {
    font-size: 1em;
    padding: 0;
}

.gb-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.gb-grid-wrapper > .gb-grid-column > .gb-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-grid-column {
    box-sizing: border-box;
}

.gb-grid-wrapper .wp-block-image {
    margin-bottom: 0;
}

.gb-grid-wrapper-b76f312f {
    align-items: center;
    margin-left: -80px;
}

.gb-grid-wrapper-b76f312f > .gb-grid-column {
    padding-left: 80px;
}

.gb-grid-wrapper-9cc30ed9 {
    margin-left: -30px;
}

.gb-grid-wrapper-9cc30ed9 > .gb-grid-column {
    padding-left: 30px;
}

@media (max-width: 1024px) {
    .gb-container-8fe93442 > .gb-inside-container {
        padding:20px;
    }

    .gb-grid-wrapper > .gb-grid-column-53cb46e2 {
        width: 100%;
    }

    .gb-grid-wrapper > .gb-grid-column-e1bd60bb {
        width: 100%;
    }

    .gb-grid-wrapper > .gb-grid-column-c762d353 {
        width: 50%;
    }

    p.gb-headline-1504a244 {
        padding-right: 20px;
        padding-left: 20px;
    }

    .gb-grid-wrapper-b76f312f > .gb-grid-column {
        padding-bottom: 40px;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .gb-grid-wrapper > div.gb-grid-column-c762d353 {
        padding-bottom:0;
    }
}

@media (max-width: 767px) {
    .gb-grid-wrapper > .gb-grid-column {
        width: 100%;
    }

    .gb-container-8fe93442 {
        font-size: 16px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .gb-container-8fe93442 > .gb-inside-container {
        padding: 20px;
    }

    .gb-grid-wrapper > div.gb-grid-column-c762d353 {
        padding-bottom: 0;
    }

    p.gb-headline-1504a244 {
        font-size: 24px;
        padding-right: 20px;
        padding-left: 20px;
    }
}

.gb-container-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

a.gb-container {
    display: block;
}
</style>

[David]

Can you link us to a page where the Ad Inserter block can be seen ?

[Author]

Posts