WordPress Fun with Additional CSS for Blocks

This is Intermediate Level Editing, Maybe Advanced

This is intermediate editing, not beginner level. WordPress has some easy, point-and-click styling, but this isn’t that. With this tip, you easily navigate to the new Additional CSS field, but once there, you use code. So be ready for that.

It helps to understand at least a little about CSS, though often you can simply copy and paste code. See the helpful links below to learn about CSS.

You also need to edit a block’s Additional CSS under Advanced. See the link below to learn about the Advanced settings.

Even if you don’t know much about CSS, the examples below have the CSS you can copy and paste onto your site to see how it looks.

CSS is Safe Code, But Test Thoroughly

As code goes, CSS is safe because it’s not executable. It’s a style language. It won’t erase data or files, but it could momentary make things look bad. If something doesn’t look right, just delete the Additional CSS. That should clear it up.

Of course, always test any of these when you use them, ideally on a staging site, not a live site. Make sure they look right on the front end and small screens.

With that, here are some examples you can copy and adapt.

Let’s play.

CSS Examples You Can Copy and Play With

Fancy Shapes with CSS Radius

The CSS property border-radius is more than rounded corners. It can shape blocks like in these examples. See the helpful links below to learn more about border-radius.

Here’s a Cover block with these radius settings in Additional CSS.

border-top-left-radius: 100% 50px;
border-bottom-right-radius: 100% 50px;

border-radius: 10% / 50%;
width: 300px;
height: auto;

border-radius: 10px 100px / 120px;
width: 300px;
min-height: 350px;

border-radius:35% 35% 0% 0% / 100% 100% 0% 0%;
width: 350px;
min-height: 300px;

Some Backgrounds from CSS-Tricks.com

CSS-Tricks.com is a fantastic site for, you know, CSS tricks. I’ve learned a lot there over the years. Anybody interested in learning CSS should surf the site for tips, tricks, and design. It’s a great resource.

These background examples are adapted from The Greatest CSS-Tricks – Volume I at CSS Tricks. At this online “book”, you’ll find 15 chapters with lots of examples including copyable code.

{ background-image: radial-gradient(#b1dcff 20%, transparent 20%), radial-gradient(#d6ecff 20%, transparent 20%);
  background-color: #d1e6f6;
  background-position: top left, 50px 50px;
  background-size: 100px 100px;
}

&::before {
  background-color: #cfd8dc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    #90a4ae 1px,
    #90a4ae 2px
  );
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
filter: blur(2px) opacity(.2);
}

Vertically Align/Center Images in a Grid

I wanted to vertically center logos in a Grid block, but vertical alignment isn’t available for the block. Here’s the CSS to paste in the block’s Additional CSS:

& > *
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Here’s a Grid block of logos vertically centered with this CSS.

Get CSS Code from AI

Of course, AI can write CSS code. Here are a few results from ChatGPT.

Checkerboard Background

I asked ChatGPT for a CSS background with this prompt: “pure css code for a background of a solid color with diamonds step and repeat”. It answered with this code. It’s not exactly what I was going for, but it’s usable:

  background-color: #2f6fed;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.12) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;

ChatGPT provided this additional information:

This gives you a solid-color background with a repeating diamond/checker pattern, using only CSS.

For a more subtle pattern, reduce the rgba alpha:

rgba(255, 255, 255, 0.06)

Or change #2f6fed to whatever base color you want.

Here’s an example with a lighter background, which is edited on the first line of the code.

Change Text Color Based on the Vertical Position in a Container

Here’s the ChatGPT prompt I used: “pure css to change color of text based on vertical position in the parent container”

Here’s the CSS it provided.

  background: linear-gradient(    to bottom,
    red 0%,
    purple 50%,
    blue 100%
  );

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

Here’s an example of this CSS in a Group block.

A Warning for Beginners: Limit how often you use Additional CSS.

Good and proper web design includes site-wide CSS, which lets you change a style in one place and apply it site wide. Using Additional CSS on lots of individual blocks means you’ll have to find and change each instance when you want to update them. So be careful about how many times you use it.

WordPress has other ways to change site-wide styles. If you find your self repeating per-block Additional CSS, look into other ways of applying those styles. This blog post can’t cover all of that.

If you’re a beginner, I suggest you also learn about WordPress block themes, full-site editing, the style book, block styles in full-site editing, and synced patterns. These are useful for managing site-wide and repeated styles and content.

For now, remember that lots of instances of Additional CSS for blocks makes updating design much more difficult.

Conclusion: Additional CSS for Blocks is a Fun and Useful Update

You can find lots of CSS to copy and paste into the new WordPress feature Addition CSS for blocks. You can also create your own and edit anything you find online. It’s a handy update to styling content. If you like graphic design and web design, it can be fun, too.

Whether you copy CSS you find online or make your own, it can be useful and downright fun to play with it.