HTML Tag Auto-Formatting in Custom HTML Widget

[JosefNT]

As a developer using WordPress multisite to manage a stable of client websites, I have quickly become a big fan of the Custom HTML widget. The syntax highlighting combined with the removal of the auto-paragraph formatting of text widgets has provided a much friendlier interface for my daily work building and maintaining sites.

However, in addition to syntax highlighting, the latest update has also introduced another new behavior that is quickly becoming the bane of my coding workflow. Typing the closing angle-bracket at the end of any block-level HTML tag initiates an auto-formatting routine that completely derails my coding process.

For example, typing <div> or <p> automatically generates the closing </div> or </p> tag after the cursor, respectively. This behavior mimics the automations of many popular IDEs, and it is a big time-saver if implemented well.

However, the current implementation in the Custom HTML widget takes the automation a step too far with block-level tags, also adding carriage returns and indentation to my code where I don't want either.

I understand that many coding best-practices prescribe this format to make code easier to read and maintain, which is true for coding in an adjustable-width IDE window or frame. But for the widget editor that's limited to a width of around 340 pixels (without accounting for padding), I prefer to organize my code into segments broken into logical blocks with whitespace between them and everything flush-left.

Currently, the contents of a typical Custom HTML widget in my environment look like this (line breaks added to approximate editor width):

<div class="widget-content" id="first-
section">
  <div class="widget-content-wrapper">
    <div class="image-section-text">
      <p>
        This is my content.
      </p>
      [tabby title="First Tab"]
      <h3>
        First Tab Header
      </h3>
      <p>
        <em>Click an image below to 
enlarge for viewing details.</em>
      </p>
      [su_row]
      [su_column]
      [su_lightbox type="image" 
src="/wp-content/uploads/sites/44/2018
/01/image01.jpg"]<img class="aligncenter 
size-medium wp-image-201" src="/wp-
content/uploads/sites/44/2018
/01/image01-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
      <h4>
        Image 1 Title
      </h4>
      <h4>
        <em>Image 1 Caption</em>
      </h4>
      [/su_column]

      [su_column]
      [su_lightbox type="image" 
src="/wp-content/uploads/sites/44/2018
/01/image02.jpg"]<img class="aligncenter 
size-medium wp-image-202" src="/wp-
content/uploads/sites/44/2018
/01/image02-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
      <h4>
        Image 2 Title
      </h4>
      <h4>
        <em>Image 2 Caption</em>
      </h4>
      [/su_column]
      [/su_row]

      [tabby title="Second Tab"]
      <h3>
        Second Tab Header
      </h3>
      <p>
        <em>Click an image below to 
enlarge for viewing details.</em>
      </p>
      [su_row]
      [su_column]
      [su_lightbox type="image" 
src="/wp-content/uploads/sites/44/2018
/01/image03.jpg"]<img class="aligncenter 
size-medium wp-image-203" src="/wp-
content/uploads/sites/44/2018
/01/image03-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
      <h4>
        Image 3 Title
      </h4>
      <h4>
        <em>Image 3 Caption</em>
      </h4>
      [/su_column]

      [su_column]
      [su_lightbox type="image" 
src="/wp-content/uploads/sites/44/2018
/01/image04.jpg"]<img class="aligncenter 
size-medium wp-image-204" src="/wp-
content/uploads/sites/44/2018
/01/image04-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
      <h4>
        Image 4 Title
      </h4>
      <h4>
        <em>Image 4 Caption</em>
      </h4>
      [/su_column]
      [/su_row]

      [tabbyending]
    </div>
  </div>
</div>

Because I am using the Custom HTML widgets to build out large sections of pages within my sites, I end up having to scroll through lots of code within any single widget instance. Having a bunch of opening and closing tags on individual lines sprinkled with indents forcing extra text wraps is a pointless gesture that impairs quick-scanning and readability rather than improving it. This is especially true for sections involving deeply nested divs containing lengthy paragraph text and shortcodes.

Within the constraints of the editor, I would prefer the above code to appear in the below format (again, line breaks reflect real text-wrapping in the editor):

<div class="widget-content" id="first-
section">
<div class="widget-content-wrapper">
<div class="image-section-text">
<p>This is my content.</p>

[tabby title="First Tab"]
<h3>First Tab Header</h3>
<p><em>Click an image below to enlarge 
for viewing details.</em></p>

[su_row]
[su_column]
[su_lightbox type="image" src="/wp-
content/uploads/sites/44/2018
/01/image01.jpg"]<img class="aligncenter 
size-medium wp-image-201" src="/wp-
content/uploads/sites/44/2018
/01/image01-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
<h4>Image 1 Title</h4>
<h4><em>Image 1 Caption</em></h4>
[/su_column]
		
[su_column]
[su_lightbox type="image" src="/wp-
content/uploads/sites/44/2018
/01/image02.jpg"]<img class="aligncenter 
size-medium wp-image-202" src="/wp-
content/uploads/sites/44/2018
/01/image02-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
<h4>Image 2 Title</h4>
<h4><em>Image 2 Caption</em></h4>
[/su_column]
[/su_row]
			
[tabby title="Second Tab"]
<h3>Second Tab Header</h3>
<p><em>Click an image below to enlarge 
for viewing details.</em></p>
[su_row]
[su_column]
[su_lightbox type="image" src="/wp-
content/uploads/sites/44/2018
/01/image03.jpg"]<img class="aligncenter 
size-medium wp-image-203" src="/wp-
content/uploads/sites/44/2018
/01/image03-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
<h4>Image 3 Title</h4>
<h4><em>Image 3 Caption</em></h4>
[/su_column]
			
[su_column]
[su_lightbox type="image" src="/wp-
content/uploads/sites/44/2018
/01/image04.jpg"]<img class="aligncenter 
size-medium wp-image-204" src="/wp-
content/uploads/sites/44/2018
/01/image04-250x300.jpg" width="250" 
height="300" />[/su_lightbox]
<h4>Image 4 Title</h4>
<h4><em>Image 4 Caption</em></h4>		
[/su_column]
[/su_row]
			
[tabbyending]
</div>
</div>
</div>

Because I prefer to keep my code flush left, the editor's auto-indentation for nested block-level tags keeps offsetting my closing tags and requires backspacing/deletion of both the indents and the carriage returns.

While I realize that many developers may prefer strict adherance to best-practices, I also expect those same developers ultimately prefer the ability to decide upon their own standards without having someone else assume what's best and impose those assumptions into their development environments.

I believe the best implementation of IDE features into the Custom HTML widget should involve the ability to adjust such formatting presets as they are introduced. This would allow end-users to apply such enhancements according to their individual preferences and prevent distractions from the introduction of unwelcomed "improvements".

Perhaps IDE preferences could be enabled through checkboxes below the editor pane for applying individual features:

• Syntax Highlighting
• Tag Completion
• Quotes Completion
• Auto-Indentation

and maybe even

• Line Numbers (to regain space in a constrained-width pane)

The editor would still perform analysis on each keystroke, but "If Tag-Completion = false" it could skip the tag completion subroutine, for instance.

My apologies for the verbosity of this ticket, but I wanted to fully illustrate my particular use-case.

As a frequent user of Custom HTML widgets, I am excited by the prospects of current and forthcoming enhancements, and I can't wait to see what improvements future updates bring.

[westonruter]

@JosefNT hi, thanks for the ticket. Have you looked at the wp_code_editor_settings filter? It allows you to modify the codemirror settings, including things like whether line numbers are displayed: ​https://github.com/WordPress/wordpress-develop/blob/0baa8ae85c670d338e78e408f8d6e301c6410c86/src/wp-includes/general-template.php#L3199-L3213