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
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
Comment | File | Size | Author |
---|---|---|---|
#16 | interdiff-11to16.txt | 524 bytes | davidhernandez |
#16 | remove_unnecessary-2489664-16.patch | 9.94 KB | davidhernandez |
#13 | interdiff.txt | 356 bytes | sumitmadan |
#11 | remove_unnecessary-2489664-11.patch | 9.94 KB | sumitmadan |
#9 | interdiff.txt | 2.58 KB | sumitmadan |
Comments
Comment #1
davidhernandezMoving the first patch from the parent to this issue.
Comment #2
star-szrThanks @davidhernandez, this needs a reroll now.
Comment #3
Manjit.Singhrerolling a patch.
Comment #5
sumitmadan CreditAttribution: sumitmadan commentedRerolled.
Comment #7
sumitmadan CreditAttribution: sumitmadan commentedRerolled #3.
Comment #8
star-szrThanks for the rerolls folks. Before any further work, this one thing from the reroll needs to be fixed:
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:
I'm thrilled to say that this
if
can now be removed :)And this one too.
Yup.
Bye bye.
Comment #9
sumitmadan CreditAttribution: sumitmadan commentedFixed the reroll. Hope it is correct now. :)
Comment #10
star-szrThe changes look great, thanks @sumitmadan!
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).
Comment #11
sumitmadan CreditAttribution: sumitmadan at QED42 commentedDone, Thanks. :)
Comment #12
star-szrAlways interdiff, please :)
(except when rerolling a patch that doesn't apply)
Comment #13
sumitmadan CreditAttribution: sumitmadan commentedSorry. I'll keep this in mind next time. Thanks. :)
Comment #14
star-szrWorking on manually testing this.
Comment #15
star-szrThis
if
can be removed as well.Testing is going well, finding some (unrelated) core bugs in the process.
Comment #16
davidhernandezFor #15.
Comment #17
star-szrThanks 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:
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.Comment #18
star-szrRight it does help if the patch is visible in the IS :)
Comment #19
alexpottThanks @Cottser for an awesome review. Committed f3e2e68 and pushed to 8.0.x. Thanks!
Thanks for adding the beta evaluation to issue summary.
Comment #22
star-szrCreated the issue as promised (better late than never) for this bug from #17:
#2511036: image-widget.html.twig never gets used (image_widget gets overridden by FieldWidget::process)