Using Utility Classes

What are Utility Classes?

These are classes that you can add in a block's Additional Class names to add essential CSS styling that isn't readily available in core blocks.

For example, you can add the class name wpi-absolute to apply position: absolute to a block.

A special utility class is wpi-stacked that can be applied to a Group block that has multiple Image blocks inside - this turns the images into a set of "stacked" images on top of each other - perfect for building a carousel of fading images.

Here's our current list of utility classes (the list below doesn't include wpi-stacked ):

.wpi-relative{
    position:relative!important
}
.wpi-absolute{
    position:absolute!important
}
.wpi-fixed{
    position:fixed!important
}
.wpi-sticky{
    position:sticky!important
}
.wpi-inset-0{
    bottom:0;
    left:0;
    right:0;
    top:0
}
.wpi-top-0{
    top:0
}
.wpi-right-0{
    right:0
}
.wpi-bottom-0{
    bottom:0
}
.wpi-left-0{
    left:0
}
.wpi-top-1{
    top:.25rem
}
.wpi-top-2{
    top:.5rem
}
.wpi-top-3{
    top:.75rem
}
.wpi-top-4{
    top:1rem
}
.wpi-top-5{
    top:1.25rem
}
.wpi-top-6{
    top:1.5rem
}
.wpi-top-7{
    top:1.75rem
}
.wpi-top-8{
    top:2rem
}
.wpi-top-9{
    top:2.25rem
}
.wpi-top-10{
    top:2.5rem
}
.wpi-right-1{
    right:.25rem
}
.wpi-right-2{
    right:.5rem
}
.wpi-right-3{
    right:.75rem
}
.wpi-right-4{
    right:1rem
}
.wpi-right-5{
    right:1.25rem
}
.wpi-right-6{
    right:1.5rem
}
.wpi-right-7{
    right:1.75rem
}
.wpi-right-8{
    right:2rem
}
.wpi-right-9{
    right:2.25rem
}
.wpi-right-10{
    right:2.5rem
}
.wpi-bottom-1{
    bottom:.25rem
}
.wpi-bottom-2{
    bottom:.5rem
}
.wpi-bottom-3{
    bottom:.75rem
}
.wpi-bottom-4{
    bottom:1rem
}
.wpi-bottom-5{
    bottom:1.25rem
}
.wpi-bottom-6{
    bottom:1.5rem
}
.wpi-bottom-7{
    bottom:1.75rem
}
.wpi-bottom-8{
    bottom:2rem
}
.wpi-bottom-9{
    bottom:2.25rem
}
.wpi-bottom-10{
    bottom:2.5rem
}
.wpi-left-1{
    left:.25rem
}
.wpi-left-2{
    left:.5rem
}
.wpi-left-3{
    left:.75rem
}
.wpi-left-4{
    left:1rem
}
.wpi-left-5{
    left:1.25rem
}
.wpi-left-6{
    left:1.5rem
}
.wpi-left-7{
    left:1.75rem
}
.wpi-left-8{
    left:2rem
}
.wpi-left-9{
    left:2.25rem
}
.wpi-left-10{
    left:2.5rem
}
.wpi-m-0{
    margin:0!important
}
.wpi-h-100-screen{
    height:100vh
}
.wpi-h-75-screen{
    height:75hv
}
.wpi-h-50-screen{
    height:50vh
}
.wpi-h-25-screen{
    height:25vh
}
.wpi-overflow-hidden{
    overflow:hidden
}
.wpi-overflow-visible{
    overflow:visible
}
.wpi-overflow-auto{
    overflow:auto
}
.wpi-overflow-x-hidden{
    overflow-x:hidden
}
.wpi-overflow-x-visible{
    overflow-x:visible
}
.wpi-overflow-x-auto{
    overflow-x:auto
}
.wpi-overflow-y-hidden{
    overflow-y:hidden
}
.wpi-overflow-y-visible{
    overflow-y:visible
}
.wpi-overflow-y-auto{
    overflow-y:auto
}
.wpi-z-n1{
    z-index:-1
}
.wpi-z-0{
    z-index:0
}
.wpi-z-1{
    z-index:1
}
.wpi-z-2{
    z-index:2
}
.wpi-z-3{
    z-index:3
}
.wpi-z-4{
    z-index:4
}
.wpi-z-5{
    z-index:5
}
.wpi-z-6{
    z-index:6
}
.wpi-z-7{
    z-index:7
}
.wpi-z-8{
    z-index:8
}
.wpi-z-9{
    z-index:9
}
.wpi-z-10{
    z-index:10
}
.wpi-z-auto{
    z-index:auto
}
.wpi-z-999{
    z-index:999
}
.wpi-z-9999{
    z-index:9999
}
.wpi-cursor-default{
    cursor:default!important
}
.wpi-cursor-pointer{
    cursor:pointer!important
}
.wpi-cursor-move{
    cursor:move!important
}
.wpi-cursor-not-allowed{
    cursor:not-allowed!important
}
.wpi-cursor-help{
    cursor:help!important
}
.wpi-cursor-zoom-in{
    cursor:zoom-in!important
}
.wpi-cursor-zoom-out{
    cursor:zoom-out!important
}
.wpi-cursor-grab{
    cursor:grab!important
}
.wpi-cursor-grabbing{
    cursor:grabbing!important
}
.wpi-cursor-copy{
    cursor:copy!important
}
.wpi-object-cover{
    object-fit:cover!important
}
.wpi-object-contain{
    object-fit:contain!important
}