• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar

IRL Experience Design

  • Blog
  • My Work
  • About
  • Immersive Austin
  • Unique Austin
  • Weird Austin
  • More Austin
    • Austin Halloween Guide 2022

Adding Border To WordPress Blocks and Images Inside of Blocks (Gutenberg)

January 1, 2021

I had some images that were on white backgrounds and when I put them on my white backgrounded site, they looked a little weird to me without a border. Just text hanging in space:

I wanted them to have a border. There’s plugins for this but I wanted something simpler. Here’s how I did it.

Creating a Border Around a Block

Add Additional CSS

Go to the Gutenberg Customizer and choose “Additional CSS”

Enter a new class. I choose the name “img-border”

Apply It To The Image

Now go to the post, select the image and under Block>Advanced you’ll see this:

Change the “Additional CSS class(es)” to include the new class:

View The Results

Publish and view the results. (Note: You won’t see the changes in the block editor, only on the published page, which is a bummer):

I noticed quickly, that if I resized the image the border did not resize with the image. The block kept the border:

This is because we’ve applied the border to the block. What if we want to apply the border to just the image? How do I get the border around the image only?

Solution 1: Put the Image in the Cell of a Column

One workaround is to create a 2-column block and then put an image block within that block. Then apply the border to that new image block. Since the cell and the image share the same dimensions, the border is around the images.

But this is a bit hacky.

Solution 2: Put the Border Around Just The Image

The problem I was having was that the “Additional CSS class(es)” field on the element only applied to the <div> level (the block itself). I wasn’t sure how to apply the class to the image within the block. All I had access to was the block element.

After some research and experimentation, here’s what I did.

The issue was that I had forgotten how selectors work.

To begin, let’s start with stating what we want: I want the site to add a border whenever I put {a custom class name I make up} into a block’s “Advanced > Additional CSS class(es)” field. Let’s name this custom class “border1” and put it into the field:

Now when wordpress displays this block, it will apply this class called “border1”.

But “border1” is not defined anywhere. All I did was put a made up word, “border1”, into this block. WordPress needs to know what to do.

Here’s how we define the custom class “border1” in the “Additional CSS” section of the site:

How do we read this?

Think of the logic here as saying “look for this thing, then apply {this formatting} to that thing”.

The “look for this thing” part is called a selector. Selectors are patterns used to select the element(s) you want to style.

The first part of the selector: We are looking for an occurance of the class “border1”. (The dot in front of a word signifies that it is a class). When we find it, we always find it in an element (eg, <div> or <figure>).

The second part of the selector: Now we’ve identified that element, in this case the block element marked up using the <figure> tag. Here’s a snippet from the inspector:

Now we read the next part of the selector, which is the space character between “.border1” and “img”. (The space is one of 4 types of combinators. The space combinator says “select the descendant elements”. This is the most used combinator but there’s others to look at adjacent elements, child elements and others.)

The space character indicates that we follow the elements downward and look for what is after the space.

The third part of the selector: So following the instructions of the space character, we look for all “img” elements under the element that has the “.border1” class (in our case, this particular <figure> element).

End of Selection: Since the next part is curly brackets, we know to apply that the selecting is over.

Now the formatting: We now format the last element mentioned, the “img” element based on what is in the curly brackets.

Note: our selector will find all occurances of what the selector identifies and apply the style to all of them.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)

Posted Under: Everything Else Tags: #Tech

Primary Sidebar

About Me

I make awesome experiences for people. Read More

NEW CONTENT 2+ TIMES A WEEK

  • IRL Experience Design
  • Amazing Experiences
  • Fun Weird Sh*t

See My Favorite Books

  • For IRL XD
  • For Learning
  • For Getting Things Done

@IRL_Experience_Design

instaglogo

RSS Feed

rss logo

Secondary Sidebar

VISIT MY BOUTIQUE IMMERSIVE EXPERIENCE

SEE MY AUSTIN EVENTS WALL CALENDAR

Austin Events 2023 wall calendar cover

Search My Blog

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Filter by Category

  • Experience Design (189)
  • Productivity (65)
  • Everything Else (105)

FILTER BY DATE

March 2023
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031  
« Feb    

Read My Recent Posts

  • Possible Small But Important Changes That AI and Chatbots Will Bring: Making Us Better At Email.
  • Digging Into Online Stats to Identify Issues
  • Google Analytics Update
  • Eureka Room Update 3/14/2023
  • Eureka Room Updates 3/10/2023
  • Eureka Room Update 3/7/2023
  • “What a waste of time”
  • Meditation Benefits (Actual Concrete Examples)
  • Bookeo and Google Analytics Tracking (Take #2)
  • IRL Experience Designers Professional Group
  • Eureka Room is Hiring!
  • Eureka Room Update
  • Eureka Room Update 2/10/23
  • Brainstormingitis
  • 1000 Days of Meditation
  • Déformation professionnelle
  • Eureka Room Update 1/27/2023
  • Introversion and Extroversion
  • The Joy of Knowing Things Exist
  • Why I Prefer Books With Few Anecdotes

  • Contact
  • About