[wp-trac] [WordPress Trac] #43120: HTML Tag Auto-Formatting in Custom HTML Widget
WordPress Trac
noreply at wordpress.org
Wed Jan 17 21:12:26 UTC 2018
#43120: HTML Tag Auto-Formatting in Custom HTML Widget
------------------------------+-----------------------------
Reporter: JosefNT | Owner:
Type: enhancement | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Widgets | Version: 4.9.2
Severity: normal | Keywords:
Focuses: coding-standards |
------------------------------+-----------------------------
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.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/43120>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list