With the Gutenberg WordPress editor, you can utilize blocks to create visually appealing and captivating content. The List block, for example, is a frequently used block that enables you to add numbered (ordered) and bulleted (unordered) lists to your post or pages.
But how do you set the indentation of a list element in Gutenberg? In this article, we will show you how to do that by adding a very simple CSS snippet that allows you to change the indentation value of the list element to your desired level.
Setting List Element Indentation in Gutenberg
Alright, setting the indentation of a list element in Gutenberg is very easy. The only thing that you need to do is add the very simple CSS snippet to the Additional CSS block on Theme Customizer.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. A little note. If you use a block theme, you need to enable the Theme Customizer first to easily add custom CSS.
Once you enter the Additional CSS block, please copy the simple CSS snippet below and paste it into the available field.
ul li {
margin-left: 30px;
}
ol li {
margin-left: 30px;
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
The Code Explanation:
The CSS rule has a selector and a declaration block. The selector is ul li, ol li, which means it matches any li element that is a descendant of either an unordered list or an ordered list element.
The declaration block is { margin-left: 30px; }, which means it sets the left margin of the matched elements to 30 pixels
The effect of this CSS rule is that it indents the list items (ordered and unordered) by 30 pixels from the left edge of their parent element. This creates some visual separation between the list and the rest of the content. You can replace ”30px“ with your desired spacing value.
That’s it. To see how the CSS snippet you’ve added works, you can create a new post type or select the existing one (page or post) with the List block (ordered and unordered).
The Bottom Line
This article explains how to set the indentation of list elements in the Gutenberg WordPress editor without relying on any plugins. It provides a simple CSS snippet that you can add to the Additional CSS block in the Theme Customizer.
The snippet sets the margin-left property of list items to 30px, which indents them from the left edge of their parent element. You can replace the “30px” value with your desired spacing.
In summary, this article shows you how to achieve a visually appealing look for your lists in Gutenberg with a quick and easy CSS modification.
