[Resolved] Creating GenerateBlocks Button in post/page causes unexpected behaviour

[David]

Hello,

My website uses the premium version of GeneratePress (theme at version 3.0.2, plugin at version 1.12.3) along with the GenerateBlocks plugin (at version 1.2.0).

I have been using GenerateBlocks now for a few weeks and find it great, except for the following glitch.

I have cleared my website cache numerous times using a function my webhost provides. They call it SiteSpeed. Anyway this is disabled for the moment.

I have not deactivated my other plugins one by one to check for conflicts as I don’t think that they cause this unexpected glitch.

See workfromhomenotes.com – the home page displays stuff correctly (page header and page footer is the main focus here). I am using a GeneratePress hook at top of page and at the bottom of the page. Both contain GenerateBlocks buttons and content is displayed okay.

I am in the process of updating
https://workfromhomenotes.com/wealthy-affiliate-review/

It was written before the days of the WP block editor, so I am converting it to WP blocks. I have some work to do there.
However when I add a GenerateBlocks Button to it – the button displays okay. However the bottom of the page GeneratePress hook is “messed up”.
At the moment I am using a ‘normal button’ (start free with orange background) and the bottom of the page GeneratePress hook displays okay.
Please note I am working on this page currently so it may change.

I created four test pages: (the “only difference” being the button to help narrow this down – both call the same GeneratePress Hooks)
https://workfromhomenotes.com/testing-issue-not-with-this-one/
-> Uses a standard WP Button (start free with orange background) (not created via GenerateBlocks)
-> The GeneratePress Hook at bottom of page is displayed correctly

https://workfromhomenotes.com/testing-issue-with-this-one-uses-generatepress-button/
-> Uses a Button created with GenerateBlocks (start free with orange background)
-> Button seems to be okay
-> The GeneratePress Hook at bottom of page is messed up (can’t see some of the content)
-> Looks like somehow the “GenerateBlocks button” stuff messed it up or maybe overwrote some values.

Interestingly enough, the home page has similar buttons created with GenerateBlocks. In that case, the GeneratePress Hook at bottom of page is displayed correctly. Even when I use the same reusable block to create the button I get this unexpected behavior. All three of these pages are WordPress pages (not posts).

I created another page from scratch and get the same behavior.
https://workfromhomenotes.com/testing-generate-block-button-with-other-generate-block-functionality/

When I do an inspect I notice that the color attribute is “deleted”. See content inside the following page:
https://workfromhomenotes.com/test-generate-blocks-glitch/

I also created a post in case that was it. It has the same glitch.
https://workfromhomenotes.com/test-post-testing-something/

Any ideas?

Let me know if you need any more information.

I get the same glitch when viewing the pages using Edge, Firefox and Chrome.

Stay well, stay safe.

Happy New year,
David

[David]

I fixed this after a lot of time spent going down “wrong” roads. Part of the debugging process.

I will update here what I did finally that resolved this for me later today or tomorrow.

I will also be removing the test pages I mentioned earlier in this thread. They will be rerouted to my home page.

Happy New Year.
Cheers,
David

[David]

Howdy,

As promised earlier:

I created a website footer using GeneratePress Element functionally – Block Hook – generate_footer.

I created this using the WP Block Editor in conjunction with GenerateBlocks.

I used a high level GenerateBlocks container to contain everything in this footer.

The “mistake” I made was that I also specified some of the color attributes:

I specified the color “Link Color” which was where my problem was.
I specified the color “Link Color Hover” which was where my problem was.

My problem was that whenever I used the GenerateBlocks Button function to create a button, the button was rendered correctly however my website footer was not. In my home page, there are GenerateBlocks Buttons which were rendered correctly and my website footer was also rendered correctly.
When I added a GenerateBlocks Button to other pages and posts, those buttons rendered correctly however the website footer would not render correctly.

Back to the high level GenerateBlocks container where I specified the colors:
When I changed the color “Link Color” back to “clear color” and the color “Link Color Hover” back to “clear color”, my issue resolved.

For some unknown reason to me, even though these color attributes were changed “deeper” within the logic, these “lower level” values did not always take.

Container One Start Link Color=#1, Link Color Hover=#2
Container Two Start
Buttons Three Start
Button Four Start Link Color=#3, Link Color Hover=#5 – These values did not always take.
Button Four End
Buttons Three End
Container Two End
Container One End

Cheers,
Happy New Year,
David

[Tom]

Hi David,

Happy New Year!

Thanks for posting your process here.

Sounds strange – is there any way you can build a simple test page that showcases the issue so I can dig into the code a bit?

Let me know 🙂

[David]

Hi Tom,

It’s very strange indeed. I hope that you can see why when you dig into the code a bit.

As requested.

1) Created post tag called “interesting”

2) Created “new” Block Element called “Website Footer Website Footer (with interesting case)” (Block Hook – Generate Footer) to display this footer when a post specifies the “interesting” tag. I went into the existing block element called “Website Footer” changed the view to code view and copied that code across completely. Then I changed it to “visual mode” and added the following to the color frame for the top container:
“Link Color” to #10316b and “Link Color Hover” to #e25822
I also changed text on screen “you” to “YOU” to prove it was using this Block Element (needed a way to prove this just to be sure)

3) The existing Block Element called “Website Footer” was modified to exclude any posts that specify the “interesting” tag. That should mean that the rest of my website will behave “correctly”.

4) I wrote post using a GenerateBlocks Header H2 and a paragraph followed by a GenerateBlocks Button. This post has the “interesting” tag so that the “Website Footer Website Footer (with interesting case)” would be used.
See https://workfromhomenotes.com/interesting-unexpected-when-using-generateblocks-button-function/
It displays correctly. However the web footer is off. (Notice YOU in upper case)

5) I wrote another post using a GenerateBlocks Header H2 and a paragraph followed by a standard WP Button. This post has the “interesting” tag so that the “Website Footer Website Footer (with interesting case)” would be used.
See https://workfromhomenotes.com/interesting-okay-when-using-standard-wp-button-function/
It displays correctly. The web footer is okay. (Notice YOU in upper case)

6) I wrote post using a GenerateBlocks Header H2 and a paragraph followed by a GenerateBlocks Button. Copy of point 4. Does not use the “interesting” tag so that the revised “Website Footer” is used.
See https://workfromhomenotes.com/interesting-okay-now-when-using-revised-web-footer-top-container-selected-color-cleared-when-using-generateblocks-button-function/
It displays correctly. The web footer displays correctly. (Notice YOU in lower case)

The only difference from my point of view between 4) and 6) is what I mentioned earlier in this thread.

The 3 posts I created for this I changed the publish date to 2011 as I didn’t want them showing up at the top of my blog. I also specified “no index” and “no follow” for SEO purposes.

Let me know if you need any more information.

Stay well. Stay safe.

Happy New Year,
David

[Tom]

Strange, it seems the order of the CSS is different on each page, which is causing the issue.

The main container of the footer has links set to blue – any reason for that? Everything on the inside is set to white, so I believe if you remove that blue link color, the issue should resolve itself.

Let me know 🙂

[David]

Hi Tom,

Thanks for coming back.

Your belief was what I already did to resolve the issue in this case.

“Back to the high level GenerateBlocks container where I specified the colors:
When I changed the color “Link Color” back to “clear color” and the color “Link Color Hover” back to “clear color”, my issue resolved.”

For me, this issue is resolved.

However there may be an underlying root cause here which I guess we have to live with, otherwise we get nothing else done.

Stay well, stay safe.

Happy New Year,
David

[Tom]

The issue I’m seeing is our selector is too specific: .gb-container.gb-container-xx

We’ve removed the double selector in 1.3.0, which is available for testing now: https://generateblocks.com/generateblocks-1-3-0/

I think that should fix the issue even with the top-level link color set.

Thanks!

[David]

Howdy Tom,

I installed Version 1.3.0-alpha.1

The page at https://workfromhomenotes.com/interesting-unexpected-when-using-generateblocks-button-function/ which had the error is now fixed.

Happy Days,

Stay well, stay safe.

Happy New Year,
David

[Tom]

Awesome, thanks for testing!

Happy New Year 🙂

[Author]

Posts