Skip to content

Add "Boundary View Mode" to Display Block Outlines in the Gutenberg Editor #66576

@orionp13

Description

@orionp13

What problem does this address?

Currently, when creating and editing content with the Gutenberg editor in WordPress, there is a lack of visual cues indicating the boundaries and structure of text blocks and other layout elements. This can lead to frustration, as users may find it challenging to accurately arrange and visualize the organization of their content. Without clear lines or frames around blocks, it is difficult to see where one block ends and another begins, especially in complex layouts with nested or closely spaced elements. This lack of boundary visualization can result in increased editing time, potential layout errors, and overall confusion about the page structure during the content creation process.

What is your proposed solution?

To address this issue, I propose adding a feature to the Gutenberg editor that provides an optional "Boundary View Mode" or "Outline Mode." When activated, this mode would display light borders, lines, or frames around each content block, giving users a clearer sense of the structural divisions on the page. This visual outline should not affect the actual published content but serve solely as an aid in the editing interface. The feature would resemble visual editor tools used in design and layout software, where block limits and separations are visible to improve precision.

This solution would enable users to:

  • Easily see the limits of each content block, reducing guesswork when arranging or editing sections.
    
  • Better understand nested structures or complex layouts, especially when working with containers, columns, or groups.
    
  • Quickly identify where adjustments are needed without affecting surrounding elements.
    
  • Toggle the mode on and off based on personal preference or specific tasks, providing flexibility in the editing experience.
    

Adding this feature would make content editing in Gutenberg more intuitive, particularly for users who work on complex layouts or want a more precise visual representation of their page's structure during editing.

Image
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs DecisionNeeds a decision to be actionable or relevantNeeds DesignNeeds design efforts.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions