Global Styles doesn't work fully

Hello Everyone,
I Bought GenerateBlocks Pro and after reading the documentation I decided to try the global styles.

I have added something like this image:

It has:

  • Padding
  • Gradient Background
  • 3 Shapes

Then I went to a page to apply it, and the only thing I see in the editor is:

  • Padding

it looks like this:

So when I save and refresh and see the page, it shows:

  • Padding
  • Gradient Background

it looks like this:

So, I thought there might be a thing I may do, then I converted the CSS styles to (Inline Embedding) for both GPP and GB. Also, updated GBP. still no luck.

So in case you are wondering what plugins I’m using, this is the list:

What to do in this case?

Regards

This can be found in the documentation for global styles, just before the last section:
“Global Styles do not apply to content, including things like icons and shapes. They only apply to the CSS generated by the blocks.”

To make this work the way you want I’d suggest using local templates, reusable blocks or elements (if you use GP Premium as theme).

Thank you, I did what you said and I deleted the shapes so it only has ( Padding & Gradient Background ),
but still in the editor the background is not showing. does it include gradient backgrounds?

so basically the global style will have only the spacings and maybe the colors only?

I thought it would be like I style the container once, and I can apply it to every page easily.

Also ( about the reusable blocks or templates )
The client asked me to change the color of all the shapes to black so I should do it now manually.

Thats why I wanted the global styles.

From what I know, background styling in GB (including images) is all CSS, so it should work. I tried adding a gradient background to a global style container, and it works at least on the front end. I do not see the gradient in the block editor though. Not sure if the latter is intended to happen or not. It would be nice getting som clarity from the developers regarding this. :slight_smile:

Could your problem perhaps be that you applied the global style to already existing blocks with their own settings? From what I understand, local block settings overwrite global style settings.

Gradients should definitely be included in Global Styles, and should be displayed in the editor as well. Are these regular gradients or a part of the “Advanced Gradients” option in Pro?

As for Global Styles, think of them as re-usable CSS. It outputs the CSS for the block once, and allows your other blocks to use that block of CSS over and over again.

This means content-based elements like icons and shapes won’t be included, but the CSS for them will be.

@nilaallj No it is a new page and new container so it doesn’t have any styling.

@Tom It is included but not in the editor itself, only in the frontend.
this is what I used:

As of the global styles, what you said gave me an idea of how I can be using them in a useful way! Just what I wanted to hear. Thanks Tom!

also, does this community have the ability to include links in private? so any time we want to share URL it will be shown only by admins and the author.

The editor does not show global style gradients for container backgrounds, switching between the normal and the advanced option does not change anything. The same thing regarding background images.

I tried using global style gradients on buttons as well. It worked on front end, but the block editor displays the preset black/white gradient which is shown right after the gradient option is activated, not the global style.

From what I can see, this seems to be an issue related to gradients only. Using a plain color as background works as intended in the editor.

1 Like

Will take a look at this. Thanks!

2 Likes

Found the issue here. Updates to both GB and GBP this week :slight_smile:

2 Likes

Just release GB 1.3.1 and GBP 1.0.2 that should fix these issues.

Thanks!

1 Like

Hello Tom,
Thank you for your response,

it is working perfectly! :heart_eyes:

1 Like

Hello again! :slight_smile:
It seems like there is a small persisting issue here. After selecting a global style containing a background gradient (advanced background set as pseudo element), adding a background image (target on self) makes the gradient disappear in the block editor. However the gradient is shown as it should on the front end.

Strange, the background you’re adding to self, is this a normal background or an advanced background?

It’s an advanced background.

If you’re adding an advanced background to a local block, it should overwrite the entire advanced background feature in the Global Style - you can’t have both, unfortunately.

What’s strange is that it’s working on the front-end - it shouldn’t be. I’ll take a look.

1 Like