[wp-trac] [WordPress Trac] #48948: Fix the Site Health template to produce valid HTML

WordPress Trac noreply at wordpress.org
Thu Dec 12 11:48:49 UTC 2019


#48948: Fix the Site Health template to produce valid HTML
-----------------------------------------+------------------------------
 Reporter:  afercia                      |       Owner:  (none)
     Type:  defect (bug)                 |      Status:  new
 Priority:  normal                       |   Milestone:  Awaiting Review
Component:  Site Health                  |     Version:  5.2
 Severity:  normal                       |  Resolution:
 Keywords:  has-screenshots needs-patch  |     Focuses:
-----------------------------------------+------------------------------
Description changed by afercia:

Old description:

> Working on an external project that adds tests to Site Health, I noticed
> the JavaScript issue template produces invalid HTML, depending also on
> the passed content.
>
> See the template, specifically the parts related to the issue description
> and actions:
> https://core.trac.wordpress.org/browser/trunk/src/wp-admin/site-
> health.php?rev=46586&marks=151-156#L143
>

> {{{
> <script id="tmpl-health-check-issue" type="text/template">
>         ...
>         <div id="health-check-accordion-block-{{ data.test }}" class
> ="health-check-accordion-panel" hidden="hidden">
>                 {{{ data.description }}}
>                 <div class="actions">
>                         <p class="button-container">{{{ data.actions
> }}}</p>
>                 </div>
>         </div>
> </script>
> }}}
>
> == Description
> It's not wrapped within other HTML elements other than the main `<div>`
> thus  there are no nesting problems and any HTML can be used.
>
> However, some WordPress tests pass content that's actually an unordered
> list within a paragraph. See for example
> https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes
> /class-wp-site-health.php?rev=46797&marks=1640-1649#L1638
>
> Browsers are tolerant and their parsers will try to produce well-formed
> HTML thus actually rendering empty paragraphs:
>
> [[Image(http://cldup.com/w5oC9shd5I.png)]]
>
> This is responsibility of some specific WordPress tests that output
> invalid HTML and should be fixed in the tests.
>
> == Actions
> The template wraps the actions within a paragraph. This assumes that the
> content passed for the actions needs to be content that can be nested
> within a paragraph, for example a simple link. However, most of the tests
> pass content that is already wrapped in a paragraph thus producing nested
> paragraphs.
>
> Also, I can't seem to be able to find any documentation on the
> recommended HTML that should be passed in order do have valid HTML. To
> help plugin authors to produce valid HTML, it would be best to:
> - either document what the recommended markup is
> - or just replace the template paragraph with a `<div>` thus allowing any
> HTML
>
> The second option would make plugin authors responsible for the output
> markup: core should encourage authors to produce valid semantic HTML with
> good examples
>
> Going through the WordPress tests, the content passed for the actions is
> inconsistent:
>
> 1
> In a couple cases, the passed string is a link: it will be correctly
> rendered within the paragraph rendered by the template. See for example
> https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes
> /class-wp-site-health.php?rev=46797&marks=239-243#L238
>
> 2
> More often, the actions HTML is already wrapped within a paragraph. It
> will be rendered within the paragraph from the template (nested
> paragraphs). Also in this case, the browsers parsers will try to "fix"
> the HTML thus producing empty paragraphs.
>
> Also, worth noting the action is actually rendered within a paragraph
> that doesn't have the `button-container` class so this CSS class can't be
> used for styling:
>
> [[Image(http://cldup.com/4Dy8ncZKeS.png)]]
>
> 3
> Sometimes, the action is an empty string because there's no action to
> take or because the test passed: an empty paragraph will be rendered. In
> these cases, it would be better to not render the entire actions `<div>`.
> A simple check for `data.actions` may help.
>
> 4
> Seems to me the `get_test_php_default_timezone` test is the only one that
> doesn't set `actions` in the result array, not sure why. Within the
> template `data.actions` will be `undefined`. I guess it should pass an
> empty string for consistency.

New description:

 Working on an external project that adds tests to Site Health, I noticed
 the JavaScript issue template produces invalid HTML, depending also on the
 passed content.

 See the template, specifically the parts related to the issue description
 and actions:
 https://core.trac.wordpress.org/browser/trunk/src/wp-admin/site-
 health.php?rev=46586&marks=151-156#L143


 {{{
 <script id="tmpl-health-check-issue" type="text/template">
         ...
         <div id="health-check-accordion-block-{{ data.test }}" class
 ="health-check-accordion-panel" hidden="hidden">
                 {{{ data.description }}}
                 <div class="actions">
                         <p class="button-container">{{{ data.actions
 }}}</p>
                 </div>
         </div>
 </script>
 }}}

 == Description
 It's not wrapped within other HTML elements other than the main `<div>`
 thus  there are no nesting problems and any HTML can be used.

 However, some WordPress tests pass content that's actually an unordered
 list within a paragraph. See for example
 https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes/class-
 wp-site-health.php?rev=46797&marks=1640-1649#L1638

 Browsers are tolerant and their parsers will try to produce well-formed
 HTML thus actually rendering empty paragraphs:

 [[Image(http://cldup.com/w5oC9shd5I.png)]]

 This is responsibility of some specific WordPress tests that output
 invalid HTML and should be fixed in the tests.

 == Actions
 The template wraps the actions within a paragraph. This assumes that the
 content passed for the actions needs to be content that can be nested
 within a paragraph, for example a simple link. However, most of the tests
 pass content that is already wrapped in a paragraph thus producing nested
 paragraphs.

 Also, I can't seem to be able to find any documentation on the recommended
 HTML that should be passed in order do have valid HTML. To help plugin
 authors to produce valid HTML, it would be best to:
 - either document what the recommended markup is
 - or just replace the template paragraph with a `<div>` thus allowing any
 HTML

 The second option would make plugin authors responsible for the output
 markup: core should encourage authors to produce valid semantic HTML with
 good examples

 Going through the WordPress tests, the content passed for the actions is
 inconsistent:

 1
 In a couple cases, the passed string is a link: it will be correctly
 rendered within the paragraph rendered by the template. See for example
 https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes/class-
 wp-site-health.php?rev=46797&marks=239-243#L238

 2
 More often, the actions HTML is already wrapped within a paragraph. It
 will be rendered within the paragraph from the template (nested
 paragraphs). Also in this case, the browsers parsers will try to "fix" the
 HTML thus producing empty paragraphs.

 Also, worth noting the action is actually rendered within a paragraph that
 doesn't have the `button-container` class so this CSS class can't be used
 for styling:

 [[Image(http://cldup.com/4Dy8ncZKeS.png)]]

 3
 Sometimes, the action is an empty string because there's no action to take
 or because the test passed: an empty paragraph will be rendered. In these
 cases, it would be better to not render the entire actions `<div>`. A
 simple check for `data.actions` may help.

 4
 Seems to me the `get_test_php_default_timezone` test is the only one that
 doesn't set `actions` in the result array, not sure why. Within the
 template `data.actions` will be `undefined`. I guess it should pass an
 empty string for consistency.

 Related (in a way): #47210

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48948#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform


More information about the wp-trac mailing list