GenerateBlocks Container Background Image Not Optimized When Selector is Set to Pseudo Element

[kushh23]

Description

A user reported that their GenerateBlocks's homepage container background image was not being optimized by Optimole. Upon investigation, I discovered that under the background image option, there is a setting of Selector; when it is set to "Pseudo Element," it prevents Optimole from optimizing the image. However, switching the option to "Element" allows Optimole to optimize it as expected.

Could we investigate whether this issue originates from our side or theirs? If it's on our end, we should address it to ensure compatibility. In the meantime, I have advised the user to set the option to "Element."

Step-by-step reproduction instructions

1. Install and activate the GenerateBlocks and Optimole plugins.
2. Add a container using GenerateBlocks and Set the container background image option to "Pseudo Element."
3. Check whether the image is optimized by Optimole (it will not be).
4. Change the Selector option to "Element."
5. Check if the image is now optimized by Optimole (it will be).

Screenshots, screen recording, code snippet or Help Scout ticket

Reported here - https://secure.helpscout.net/conversation/2725973401/436218?viewId=2353196

Environment info

No response

Is the issue you are reporting a regression

No

[girishpanchal30]

@kushh23 I checked both modes on the backend, and it looks like both display the local image URL. However, on the frontend, it seems to show the optimized image URL.

Backend screencast:

Element

Pseudo Element

Frontend screencast(Pseudo Element):

Please let me know if I'm making any mistakes.

[kushh23]

@girishpanchal30

The backend editor always shows the Optimole URL, as the Optimole image replacement only works on the front end. (When images are hosted on site i.e offload is disabled)

I tested it again, and as you can see on this page - https://begdowntown.s4-tastewp.com/5-2/ the image is still not optimized. In the backend, it is set on the pseudo-element option

Here is the instance details:

https://begdowntown.s4-tastewp.com/wp-admin
Your username: kushnamdev
Your new password: XntrWXQ3qyM

[girishpanchal30]

@kushh23 It appears to be working with the pseudo-element option in my test instance.

https://spikymemory.s3-tastewp.com/wp-admin/post.php?post=6&action=edit

girish / cNa*5Ny@&DZOkbz48ytNfVNK

Please check and let me know if I'm doing anything incorrectly.

Thanks

[kushh23]

Hi @girishpanchal30,

I checked your test instance before it got expired, on your instance, the issue do not occur, but on my end, I am still able to replicate it.

https://vertis.d.pr/i/dAMLEo

I checked again on a fresh test instance from InstaWP as well, and it is still replicable with the default twenty-twenty themes.

https://genial-guanaco-fd77af.vertisite.cloud/test-kush/
girish / girish

[girishpanchal30]

@kushh23 I've been debugging your test instance, and it appears that the Pseudo Element feature doesn't work when the CSS type is set to External file.

We have two options to change the CSS type:

1. Navigate to wp-admin -> admin.php?page=generateblocks-settings -> Update the CSS Print Method setting.

2. Add the following code snippet to your theme's functions.php file:

add_filter( 'generateblocks_css_print_method', function() {
	return 'inline';
}, 999 );

Thanks!

[kushh23]

@girishpanchal30 Thank you for debugging this issue. I can confirm that if I follow the above steps, the issue will be solved. So, is this issue related to the GenerateBlocks plugin or we can do something from our end to solve this.