Follow-up to #2483319: [META] Remove unnecessary markup from core templates, a.k.a. divitis

Problem/Motivation

After the removal of CSS classes from the core templates, many unnecessary HTML tags were left behind. They were not removed in the process of removing classes and other work, because removing them requires paying particular attention to any affect on the output.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task
Issue priority Normal because nothing is broken.
Unfrozen changes Unfrozen because it only changes templates and possibly CSS which are both unfrozen.
Prioritized changes The main goal of this issue is to improve themer experience.
Disruption There should be minimal disruption.

Proposed resolution

Go through each core template and remove any unnecessary markup. This will require looking at the output to see if things shift around in unwanted ways. Various CSS files may also need checking. For example, if there is CSS like .some_class > div > .some_other_class the CSS should be adjusted, or deleted.

Evaluation criteria, not set in stone but up for discussion:

  • divs and spans with no additional attributes should be removed mercilessly unless they justify their existence.
  • Semantic tags (footer, article, etc.) should be retained even if they have no attributes.

This child issue will tackle most of the core module templates. Other issues will be added to the parent meta to remove tags from system, views, and other places.

User interface changes

Two small visual changes in Stark.

block--system-branding-block.html.twig, before & after

link-formatter-link-separate.html.twig, before & after

API changes

None

Files: 
CommentFileSizeAuthor
#16 interdiff-11to16.txt524 bytesdavidhernandez
#16 remove_unnecessary-2489664-16.patch9.94 KBdavidhernandez
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,220 pass(es). View
#13 interdiff.txt356 bytessumitmadan
#11 remove_unnecessary-2489664-11.patch9.94 KBsumitmadan
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,107 pass(es). View
#9 interdiff.txt2.58 KBsumitmadan
#9 remove_unnecessary-2489664-9.patch9.94 KBsumitmadan
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,144 pass(es). View
#8 2489664-7-diff.png72.77 KBCottser
#7 remove_unnecessary-2489664-7.patch10.05 KBsumitmadan
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,146 pass(es). View
#5 remove_unnecessary-2489664-5.patch12.02 KBsumitmadan
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,052 pass(es), 28 fail(s), and 1 exception(s). View
#3 meta_remove-2483319-3.patch10.03 KBManjit.Singh
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 94,595 pass(es), 1 fail(s), and 0 exception(s). View
#1 meta_remove-2483319.patch10.03 KBdavidhernandez
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 94,345 pass(es). View

Comments

davidhernandez’s picture

FileSize
10.03 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 94,345 pass(es). View

Moving the first patch from the parent to this issue.

Cottser’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll

Thanks @davidhernandez, this needs a reroll now.

Manjit.Singh’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
10.03 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 94,595 pass(es), 1 fail(s), and 0 exception(s). View

rerolling a patch.

Status: Needs review » Needs work

The last submitted patch, 3: meta_remove-2483319-3.patch, failed testing.

sumitmadan’s picture

Status: Needs work » Needs review
FileSize
12.02 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,052 pass(es), 28 fail(s), and 1 exception(s). View

Rerolled.

Status: Needs review » Needs work

The last submitted patch, 5: remove_unnecessary-2489664-5.patch, failed testing.

sumitmadan’s picture

Status: Needs work » Needs review
FileSize
10.05 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,146 pass(es). View

Rerolled #3.

Cottser’s picture

Status: Needs review » Needs work
FileSize
72.77 KB

Thanks for the rerolls folks. Before any further work, this one thing from the reroll needs to be fixed:

+++ b/core/modules/system/templates/maintenance-page.html.twig
@@ -11,57 +11,52 @@
+{{ page.highlighted }}
...
-    {{ page.highlighted }}
+<main role="main">
+  {% if title %}
+    <h1>{{ title }}</h1>
+  {% endif %}
 
-    {{ page.content }}
-  </main>
+  {{ page.messages }}

It's hard to tell all this does from the diff because of the indentation changes, but it adds back the now-removed messages region #2470807: Rename the default "Messages" region for all themes to "Highlighted", and moves the highlighted region back up. Only the indentation of this hunk should be changing. Screenshot from my visual diff tool is the best way I can think to show this:

  1. +++ b/core/modules/link/templates/link-formatter-link-separate.html.twig
    @@ -15,10 +15,8 @@
    +  {% if title %}
    +    {{ title }}
    +  {% endif %}
    

    I'm thrilled to say that this if can now be removed :)

  2. +++ b/core/modules/system/templates/block--system-branding-block.html.twig
    @@ -22,11 +22,9 @@
       {% if site_slogan %}
    -    <div>{{ site_slogan }}</div>
    +    {{ site_slogan }}
       {% endif %}
    

    And this one too.

  3. +++ b/core/modules/system/templates/datetime-wrapper.html.twig
    @@ -25,5 +25,5 @@
     {% if description %}
    -  <div>{{ description }}</div>
    +  {{ description }}
     {% endif %}
    

    Yup.

  4. +++ b/core/modules/system/templates/details.html.twig
    @@ -19,15 +19,16 @@
    +  {%- if description -%}
    +    {{ description }}
    +  {%- endif -%}
    +
    +  {%- if children -%}
    +    {{ children }}
    +  {%- endif -%}
    +
    +  {%- if value -%}
    +    {{ value }}
    +  {%- endif -%}
    

    Bye bye.

sumitmadan’s picture

Status: Needs work » Needs review
FileSize
9.94 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,144 pass(es). View
2.58 KB

Fixed the reroll. Hope it is correct now. :)

Cottser’s picture

The changes look great, thanks @sumitmadan!

+++ b/core/modules/system/templates/details.html.twig
@@ -19,15 +19,10 @@
+  {{ description }}
+
+  {{ children }}
+
+  {{ value }}

I think we can remove the blank lines in between each variable here. We can still keep a blank line between the endif above and the first variable output (description).

sumitmadan’s picture

FileSize
9.94 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,107 pass(es). View

Done, Thanks. :)

Cottser’s picture

Always interdiff, please :)

(except when rerolling a patch that doesn't apply)

sumitmadan’s picture

FileSize
356 bytes

Sorry. I'll keep this in mind next time. Thanks. :)

Cottser’s picture

Working on manually testing this.

Cottser’s picture

Status: Needs review » Needs work
+++ b/core/modules/image/templates/image-widget.html.twig
@@ -14,12 +14,9 @@
   {% if data.preview %}
-    <div>
-      {{ data.preview }}
-    </div>
+    {{ data.preview }}
   {% endif %}

This if can be removed as well.

Testing is going well, finding some (unrelated) core bugs in the process.

davidhernandez’s picture

Status: Needs work » Needs review
FileSize
9.94 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 95,220 pass(es). View
524 bytes

For #15.

Cottser’s picture

Component: theme system » markup
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
FileSize
282.83 KB
282.22 KB
147.26 KB
148.88 KB
125.94 KB
125.74 KB
132.75 KB
132.75 KB
618.55 KB
619.54 KB
77.95 KB
77.81 KB
248.27 KB
248.61 KB
190.62 KB
191.27 KB
84.65 KB
84.3 KB
17.01 KB
17.01 KB
131.09 KB
129.08 KB
120.89 KB
120.89 KB
86.13 KB
86.13 KB
29.15 KB
29.71 KB
16.56 KB
17.24 KB
9.81 KB
10.6 KB

Thanks all!

This all checks out, there are only two small visual changes (which are link-formatter-link-separate.html.twig and block--system-branding-block.html.twig), the former @LewisNyman pointed out in #2483319-17: [META] Remove unnecessary markup from core templates, a.k.a. divitis and I think they are both perfectly acceptable for Stark. I'm uploading the full set of before/after screenshots I took (we need a bulk upload!) but only embedding in the issue summary cropped versions of the ones that change visually (because otherwise it's 4.5+ MB of screenshots even after putting everything through ImageOptim [it doesn't help that half of them are 2x resolution either]!).

I should probably set up that tool that @LewisNyman is using…

To test node-edit-form.html.twig (normally only used by Seven), I added the following code to node.module:

function node_form_node_form_alter(&$form, FormStateInterface $form_state) {
  $form['#theme'] = array('node_edit_form');
}

I also had to hack some things to test the image-widget.html.twig template, I'll create a separate bug issue for that as soon as I can, it's related to the form process callbacks, the #theme gets clobbered.

Cottser’s picture

Right it does help if the patch is visible in the IS :)

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Thanks @Cottser for an awesome review. Committed f3e2e68 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to issue summary.

  • alexpott committed f3e2e68 on 8.0.x
    Issue #2489664 by sumitmadan, davidhernandez, Manjit.Singh, Cottser:...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Cottser’s picture

Created the issue as promised (better late than never) for this bug from #17:

I also had to hack some things to test the image-widget.html.twig template, I'll create a separate bug issue for that as soon as I can, it's related to the form process callbacks, the #theme gets clobbered.

#2511036: image-widget.html.twig never gets used (image_widget gets overridden by FieldWidget::process)