Easier Block Spacing in WordPress with :is() and :the place()

The :is() and :the place() pseudo-selectors are comparatively new additions to CSS, which permit us to focus on components that meet the factors of their parentheses. For instance, utilizing :is() we will goal any p, h2 or ul factor with a category of check:

.check:is(p, h2, ul) {
  background: yellow;
}

That’s equal to writing:

p.check,
h2.check,
ul.check {
  background: yellow;
}

Conversely, we might goal any h2 that has any of the required lessons:

h2:is(.heading-1, .heading-2) {
  background: yellow;
}

That is equal to:

h2.heading-1,
h2.heading-2 {
  background: yellow;
}

It really works with complicated selectors too. The next targets any h2 that may be a direct little one of a component with a category of has-red-heading:

h2:is(.has-red-heading > *) {
  coloration: crimson;
}

:the place(), on the face of it, is fairly related. Certainly, we will use it in the very same manner and it’ll have the identical impact:

h2:the place(.heading-1, .heading-2) {
  background: yellow;
}

The distinction is the selectors inside :the place() have a specificity of zero, whereas the selector inside :is() contribute to the general specificity. To cite instantly from MDN:

The distinction between :the place() and :is() is that :the place() all the time has 0 specificity, whereas :is() takes on the specificity of essentially the most particular selector in its arguments.

Let’s have a look at how these could be helpful in our CSS code.

Higher block styling

At Atomic Smash, the online company the place I work, we specialize in constructing WordPress websites. Current developments in WordPress have made it simpler than ever earlier than to ship completely versatile websites: the Gutenberg block editor permits shoppers the complete flexibility so as to add, take away or reorder blocks anyplace on the web page. Nevertheless it additionally comes with its challenges, not least of which is styling the numerous totally different block sorts to make sure appropriate spacing between them.

Gutenberg overview

On a webpage constructed with the Gutenberg block editor, every “block” is a direct little one of a single wrapper factor on the web page. Some are easy blocks, like headings and paragraphs, others are extra complicated parts with lessons appended. We are able to additionally create customized blocks for use in a lot the identical manner.

<div class="entry-content">
  <!--Heading and paragraph core blocks-->
  <h2>Did dinosaurs actually exist?</h2>
  <p>
    Sure. Semper eget duis at tellus at urna condimentum mattis pellentesque.
    Donec ac odio tempor orci dapibus ultrices in. In hac habitasse platea
    dictumst quisque sagittis purus sit.
  </p>

  <!--Extra complicated core block-->
  <blockquote
    class="wp-block wp-block-quote"
    id="block-1cfd33a9-706c-4409-8a6e-d381bff67023"
  >
    <p>
      Dinosaurs lived a very very long time in the past, however they will train us lots about
      the current day
    </p>
  </blockquote>

  <!--Customized block-->
  <div class="as-accordion" id="accordion-block_6065ca0dd7fa1">
    <!--...block HTML-->
  </div>
</div>

Block spacing

WordPress ships a bunch of default CSS for styling the house between Gutenberg blocks, however we normally need to override that primarily based on our design. A helpful manner to try this is utilizing the lobotomised owl selector for direct descendants of the content material wrapper.

.entry-content > * + * {
  margin-top: 1rem;
}

This units a high margin on every block when it follows one other. It’s a very good begin, however some blocks typically want a bit extra space, so we set a bigger margin-top worth for these blocks. Right here’s how that appears utilizing Sass, which is what we use at Atomic Smash:

.entry-content {
  > * + * {
    margin-top: 1rem;
  }

  /* Any block adopted by a h2, h3, h4, determine, blockquote or gallery block wants extra space above */
  > * + h2,
  > * + h3,
  > * + h4,
  > * + determine,
  > * + blockquote,
  > * + .wp-block-gallery {
    margin-top: 2rem;
  }

  /* Any block that follows a determine, blockquote or gallery block wants extra space above */
  > determine + *,
  > blockquote + *,
  > .wp-block-gallery + * {
    margin-top: 2rem;
  }
}

That is only a snapshot, and it may be that we want much more customized spacing on any given venture, in addition to contemplating totally different breakpoints.

We are able to refactor that to make it extra concise utilizing :is():

.entry-content {
  > * + * {
    margin-top: 1rem;
  }

  > * + :is(h2, h3, h4, determine, blockquote, .wp-block-gallery),
  > :is(determine, blockquote, .wp-block-gallery) + * {
    margin-top: 2rem;
  }
}

:is() might be a greater choice than :the place() on this case, as we need to enhance the specificity and override the default Gutenberg kinds.

Right here’s a demo of it in motion, alongside customized properties for scaling the vertical rhythm for various breakpoints, which will help maintain our code much more concise:

See the Pen
by Michelle Barker (@michellebarker)
on CodePen.