Isotoop for Gutenberg

How to apply to Gutenberg

1 Add a block

Install this plugin:
Insert Headers and Footers WP Plugin

2 Go to Advanced Block setting

Simple text styles

Text styles always start with “t-” followed by a value like “n” (normal) or “l” (large)

For example: font size

Text size: Large


Font color: medium red


Font color: dark red



Add padding. This is the spacing within the Gutenberg Block


Add margin. This is the spacing outside the Gutenberg Block


Make combinations

You can combine all styles like colors, typography and spacing.

t-l t-red09 red02 p-n

In the example above the result will be:
Large text, dark red color, light red background, normal spacing around the text inside a Gutenberg block

Scroll to Top