BugWP logo BugWP
Back to Community
Home / Community / Plugin → Gutenberg

How to Fix Common Gutenberg Block Alignment Issues

17 threads Sep 16, 2025 Plugin → Gutenberg

Content

Alignment is a fundamental part of creating a visually appealing and professional-looking website. Users of the Gutenberg block editor often encounter challenges when trying to align various elements, from lists and columns to navigation items and post titles. This guide covers the most common alignment problems and provides clear, actionable solutions.

Common Alignment Issues and Their Solutions

1. List Block Indentation and Spacing

List items are indented by default, which can cause alignment issues with subsequent paragraphs or other blocks.

  • Problem: A paragraph following a list appears smashed against it without proper spacing.
  • Solution: Add a Spacer block after your list or use custom CSS to add bottom margin to the list block. For example: .wp-block-list { margin-bottom: 20px; }

2. Aligning Text Within a List Item

Aligning text to a specific point, like a red guideline, can be tricky within a list block.

  • Problem: Text inside a list item does not align with an external guideline or other page elements.
  • Solution: Use custom CSS to adjust the padding of the specific list item or paragraph. The padding-left property is often effective for this. Alternatively, a creative workaround is to use a Columns block below your list, leaving the first column empty and placing your text in the second column, then adjusting the column width to match your desired alignment.

3. Changing List Style (e.g., to Roman Numerals)

The block editor does not have a built-in UI for changing list markers to Roman numerals or other styles.

  • Problem: Needing an ordered list to display with upper-roman numerals (I, II, III) instead of standard numbers (1, 2, 3).
  • Solution: This requires adding custom CSS. First, edit your List block and give it a custom CSS class in the Advanced panel (e.g., roman-numerals). Then, add the following CSS to your theme's "Additional CSS" section or a custom CSS plugin:
    .roman-numerals { list-style-type: upper-roman; }

4. Vertical Alignment in Columns

Getting columns to stretch to the full height of a container or align vertically is a frequent request.

  • Problem: Columns are always top-aligned, and the editor's vertical alignment options do not include a 'stretch' option.
  • Solution: As of now, a native 'stretch' option is not available in the dropdown. To achieve this, you will need to add custom CSS to target your specific Columns block and apply align-items: stretch;.

5. Adding Vertical Lines to Navigation Menus

There is no native setting to add separators between navigation menu items.

  • Problem: Wanting to add vertical lines (e.g., Home | About | Contact) between items in a Navigation block without the lines being part of the link.
  • Solution: This can be accomplished with CSS. The following code adds a border to the right of each navigation item. You may need to adjust the theme and class names to match your site's structure.
    .wp-block-navigation .wp-block-navigation-item { border-right: 1px solid #000; padding-right: 15px; }
    .wp-block-navigation .wp-block-navigation-item:last-child { border-right: none; }

6. Centering a Post Title Block in a Template

Users of block themes often want to center a post title within a template.

  • Problem: Needing to center-align a core/post-title block within a template file like Single Post or Page.
  • Solution: The simplest method is to edit the template directly. Navigate to Appearance → Editor → Templates, select the appropriate template (e.g., Single), click on the Post Title block, and use the block toolbar's alignment controls to center it. This is preferable to modifying the theme.json file for simple alignment tasks.

General Troubleshooting Tips

If you are experiencing an alignment issue not listed here, or if a solution isn't working, follow these steps:

  1. Check for Conflicts: Temporarily deactivate all plugins to see if the issue is caused by a conflict. The Health Check plugin is useful for this as it allows you to troubleshoot without affecting your site's visitors.
  2. Switch Themes: Temporarily switch to a default WordPress theme like Twenty Twenty-Two to see if the problem is related to your current theme's styles.
  3. Inspect with Browser Tools: Use your browser's developer tools (right-click on an element and select "Inspect") to see what CSS rules are being applied and test changes live before adding them to your site.

While the Gutenberg block editor provides powerful layout tools, achieving perfect alignment sometimes requires a small amount of custom CSS. Understanding these common workarounds can help you build the precise layout you envision.

Related Support Threads Support