Using GB classes in custom blocks

Hi there,

I am working on a new client project where pages will be a combination of GB blocks and custom blocks I am building with ACF and ACF Extended. This is working mostly as expected. However, I am having issues with how styles display in the block editor.

For consistency, I am reusing GB classes and markup for things like buttons and global styles on heading tags. On the front end this works fine, but these styles are ignored when displaying my custom blocks in the block editor.

Doing a little inspecting, it looks like this is because those styles are applied using the element’s unique class, such as gb-headline-XXXXXXX, which my custom built blocks don’t have.

So for example, I could have a Headline Small global style, that on the front-end gets applied via a class named gb-headline-headline-small - however within the block editor those styles are replicated via the individual unique classname for the particular element. Presumably this is done for a reason, but hoping to figure out a workaround.

Thanks

Hi @jamesrice,

To clarify, how are you modifying the ones with “custom classes”? Are you using custom CSS?

Hi Fernando,

I’m not modifying them at all per se. I am just trying to replicate GB buttons, with their global styles, within my own custom blocks.

I have setup some screenshots here to explain better - this should be a public link

Also, while this example is about buttons, this is not only about buttons. Same concept applies to heading elements too.

Sorry, I’m not getting the full grasp of what you’re trying to do. Out of curiosity, why not use Global Styles since you have GP Pro?

WordPress editor code is different. If you open the Code editor, you’ll see how it’s structured. If you want to add it through code, can you try using the WordPress code through the code editor instead of the plain HTML code? Example: Edit Page “Home” ‹ fazarcon...

Thanks

I am using global styles, however there are some pieces of the site I am making using my own markup and custom blocks, where the user just supplies specific fields and the rest is done for them. The point being I am trying to use the GB styles and global types both using normal GB blocks, and also in my custom blocks via markup.

I enqueued the front end css file for the specific post on the editor page, which helps but has some additional quirks,

Your idea about using the block code instead of straight HTML is a good one, so I will give that a try and report back.

I will experiment some more, but using the block markup from the code editor does not appear to help in this case.

What occurred? It should be showing in the editor with the styles if you duplicate the post in the code editor.

It seems like the block markup does not get rendered as it normally would, maybe because it’s within an ACF block, so a little bit on plain text shows and the comment tags are ignored. When I have time, I will try setting up InnerBlock within my ACF block to see if that helps.

Is there any way to for all global styles css to completely load in the editor, rather than each element being styled via it’s unique ID?

I sent you an email. Can you check?

For those finding this at some future time, the solution I am going with is to use within my custom blocks instead of trying to replicate blocks using HTML only.

1 Like