Modifiers

Modifiers have been added to allow for further modification of gutenberg editor components. This gives you the flexibility to make the site look exactly how you would like it to.

Modifiers are created to target either very generally or extremely specifically. This means some won’t work or won’t work as expected in some scenarios – if this does occur please let the Web Team know and we’ll see if we can fix it.

How do I apply a modifier?

When editing a page or post, if you click on the advanced options in the right-hand sidebar you will see the option to add additional CSS classes. If you put the modifier in that field it will be applied to the selected block.

Modifiers can’t be applied globally and must be used on a per-block basis.

Can I stack modifiers?

If a block has support for multiple modifiers you can stack them! Just put a space between each to make sure they work correctly.

You can’t have two of the same modifiers however, they must be different.

The Modifiers

Colour

The colour modifier works for the following blocks

• Seperator (with “dots” style)

You can use the following values with the colour modifier

• red
• black
• navy
• white
• blue
• light-green
• light-red
• yellow
• grey

Examples

colour--red

colour--yellow

Background

The background modifier has been tested with the following blocks

• Latest Posts
• Button
• Image

As the modifier is applied generally it may work with other blocks, but this is not guaranteed.

You can use the following values with the background modifier

• red
• black
• navy
• white
• blue
• light-green
• light-red
• yellow
• grey

Examples

background--navy

• Post 313/07/2020
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vivamus magna justo,… Read more: Post 3
• Post 213/07/2020
  Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue… Read more: Post 2

background--red

Border

The border modifier works for the following blocks

• Pull Quote

You can use the following values with the border modifier

• red
• black
• navy
• white
• blue
• light-green
• light-red
• yellow
• grey

Examples

border--light-red

border--yellow

Font-Size

The font-size modifier has been tested with the following blocks

• Image

As the modifier is applied generally it may work with other blocks, but this is not guaranteed.

You can use the following values with the font-size modifier

• h1
• h2
• h3
• h4
• h5
• h6

Examples

font-size--h2

font-size--h4

Font-Weight

The font-weight modifier has been tested with the following blocks

• Image

As the modifier is applied generally it may work with other blocks, but this is not guaranteed.

You can use the following values with the font-weight modifier

• heavy
• bold
• normal

Examples

font-weight--heavy

Font-Decoration

The font-decoration modifier has been tested with the following blocks

• Image

As the modifier is applied generally it may work with other blocks, but this is not guaranteed.

You can use the following values with the font-decoration modifier

• underline
• none

Examples

font-decoration--underline