Utility Classes for Blocks (SCSS)
Adds a small set of classes, such as has-shadow, is-rounded, has-hover-lift and text-balance, that editors can type into any block's "Additional CSS class" field.
Opens WPIDE on
Code
$radius: 10px;
$shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
.has-shadow {
box-shadow: $shadow;
}
.is-rounded,
.is-rounded img {
overflow: hidden;
border-radius: $radius;
}
.has-hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-4px);
box-shadow: $shadow;
}
}
.text-balance {
text-wrap: balance;
}
.is-sticky-top {
position: sticky;
top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
.has-hover-lift {
transition: none;
&:hover {
transform: none;
}
}
}Notes
Add more utilities in the same style. The class names have no prefix so editors can remember them easily.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.