Ability to add css classes to blocks

[Steve Bullman]

Someones probably going to tell me this already exists, or theres an obvious work around but...

It would be really handy for people like myself who can just about work their way around css to have the ability to add a css class when creating a block, much like most of the wordpress page builders allow.

[Rikki]

Blocks all have a unique 'blockid' attribute, which you can use in CSS to target that block. For example:

[data-blockid="app_gallery_albums_lqslwgew6"] {
	background: red;
}

You can find that ID by using web inspector to select the block on the page and looking at the DOM. That line above matches a specific block; if you have multiple blocks of the same type, you could target them all by doing (note the ^=)

[data-blockid^="app_gallery_albums_"] {
	background: blue;
}

 

[Steve Bullman]

Thanks for the quick response Rikki.  Ok, I can just about manage those instructions.  Been fiddling for ages trying to add css to blocks, some have worked, some haven't...some have applied the css to every block.  This is a big help, thanks

 

[Rikki]

No problem 🙂There's a lot you can achieve with some creative CSS selectors.

[Joel R]

Nominating this for CSS tip of the week.