Move classes out of the preprocess functions and into the Twig templates. Use the addClass() attribute method to add classes in the template. Use the clean_class filter to filter class names, if necessary. Maintain all existing functionality and ensure all existing class names are still in the markup, even ones that are inherited.
See the following issues for more detailed examples:
#2217731: Move field classes out of preprocess and into templates
#2254153: Move node classes out of preprocess and into templates
See this change record for information about using the addClass() method:
https://www.drupal.org/node/2315471
See this change record for more information about the phase 1 process of moving class from preprocess to templates:
https://www.drupal.org/node/2325067
Preprocess Functions Modified
template_preprocess_html
node_preprocess_html
template_preprocess_install_page
seven_preprocess_install_page
template_preprocess_maintenance_page
seven_preprocess_maintenance_page
Twig Templates Modified
core/modules/system/templates/html.html.twig
The install and maintenance page functions pass classes to and in the html.html.twig template.
See if these need modifying:
core/modules/book/templates/book-export-html.html.twig
core/modules/book/templates/book-node-export-html.html.twig
Beta phase evaluation
Issue category | Task because it improves the Themer Experience. |
---|---|
Issue priority | Normal because it should not affect many people. |
Unfrozen changes | Unfrozen because it changes markup. |
Prioritized changes | The main goal of this issue is usability of the new Twig theming layer, and since it adjusts markup it must be completed prior to RC. |
Disruption | This issue is a prioritized change (theme improvements) as per https://www.drupal.org/core/beta-changes and it's benefits outweigh any disruption. |
Comment | File | Size | Author |
---|---|---|---|
#60 | path-frontpage.png | 583.11 KB | askibinski |
#50 | interdiff-50.txt | 2.54 KB | davidhernandez |
#50 | move_html_classes_from-2329753-50.patch | 3.15 KB | davidhernandez |
#46 | Screen Shot 2014-12-14 at 21.44.20.jpg | 759.51 KB | LewisNyman |
Comments
Comment #1
davidhernandezComment #2
davidhernandezComment #3
mortendk CreditAttribution: mortendk commentedComment #4
mortendk CreditAttribution: mortendk commentedlets wait and push this when #2234331: Change the body classes to follow Drupal 8 CSS standards is ready to roll, so we have the classes cleaned up.
Comment #5
mortendk CreditAttribution: mortendk commentedComment #6
star-szrI don't think this issue is related to that one. This is html.html.twig, not page.html.twig.
Comment #7
mortendk CreditAttribution: mortendk commented@cottser based on the classnames that were gonna move, (maintainence, install etc) i think its relevant
Comment #8
mortendk CreditAttribution: mortendk commentedComment #9
mortendk CreditAttribution: mortendk commentedbody html is getting classes all over so this is gonna be fun :) if we can get em all collected inside the html.html.twig file that would make it easy to grap what goes on.
unless were going with a twigblock solution.
Comment #10
davidhernandezI think I see a path now. We can pass the node type as a variable that makes it way to the html template, and do the same for the maintenance. Those classes can be removed from preprocess maintenance and maybe handled directly in _html or _page.
Comment #11
davidhernandezComment #12
davidhernandezI think we may end up merging the html and page issues. All the page functions are really just adding classes to and . I don't see any getting added to the markup in the page template.
Comment #13
Sutharsan CreditAttribution: Sutharsan commented@davidhernandez, I guess you are referring to
Drupal\Core\Page\HtmlPage
. To use that to pass variables to page and/or html template.Comment #14
lauriiiI think that the
node_type ? 'node--type-' ~ node_type
class is a bit hard one because Im not sure if we should have node specific functionality inhtml.html.twig
but why I added it there is that at least I would like to be able to easily remove it.Comment #15
lauriiiRemoved whitespace
Comment #18
lauriiiok now for realz..
Comment #19
RainbowArrayI just want to note here that it is very unlikely that html and page templates would be merged. We have gone around and around on that, and there are some serious technical challenges to do so, mostly revolving around asset management if I remember right.
Comment #20
davidhernandezI only meant merging the two banana phase 1 issues together, since they are related. We certainly wouldn't try merging the templates together here (or at all.) :)
Comment #21
RainbowArrayAh, gotcha.
Comment #22
lauriii#2234331: Change the body classes to follow Drupal 8 CSS standards is going first I guess. Lets postpone this one.
Comment #23
lauriiiComment #24
davidhernandez#2234331: Change the body classes to follow Drupal 8 CSS standards is in.
Comment #25
lauriiiComment #26
lauriiiI think we cannot move the classes from preprocess_page since we are missing the variables in html.html.twig. In seven theme there's some very specific functionality in the preprocess which I wouldn't move to template. Maybe we should discuss that
Comment #28
lauriiiComment #30
lauriiiHmm, I dont know what I was doing yesterday.
Comment #32
lauriiiComment #33
dawehnerSo we introduce a new var, should we also document it?
Comment #34
davidhernandezFunctionally, the patch in #32 looks good. We'll have to rework some of the comments, but I think that is it.
Regarding the node classes, we have a dilemma. I don't think there is a way we can move it (it is just the node--type-X class) to the html template. Node is a required module, but it's still a case of a module manipulating another module's template. Based on what we're doing, philosophically, node should have it's own html template (html--node.html.twig,) but I'm willing to bet no one will vote for that. That would mean leaving it in preprocess.
A consideration would be the html--node.html.twig template being in Classy. We'll end up removing the node--type-X class from the system module's html template, so the only copy of the template that needs to exist is in Classy, not in the system or node module.
Comment #35
RainbowArrayhtml--node.html.twig in Classy is maybe fine. Might be worth looking into using Twig blocks so that template is only changing the classes, maybe?
Comment #36
davidhernandezWe actually need more Twig blocks EVERYWHERE. We need a whole template strategy, which I don't think we'll be able to get to in D8.
Comment #37
mortendk CreditAttribution: mortendk commentedTrue to using blocks all around - but the problem is that we cant just spread em all around that would leave the system in a mess.
I do think though with documentation that we can have node manipulate or add to the html template in this cause, caise at the end of the day what a "themer" wants is simply to manipulate that class.
Comment #38
Anonymous (not verified) CreditAttribution: Anonymous commentedThe previous patch is outdated so this is the updated one with documentation added as mentioned in #33
Comment #40
lauriiiComment #41
davidhernandezThis won't work. We've lost the is_front variable, which is now only available to page.html.twig.
I was thinking, with this code, root_path will be empty if on the frontpage. Could we do...
Does that make sense?
Also, I was talking to Cottser about this and it seems ok to move the node class stuff into html.html.twig. We already have precedent doing that with page. If we figure out how to move it, we can completely get rid of node_preprocess_html which is only adding "node--type-[type]".
...adding beta eval text to issue summary.
Comment #42
lauriiiNot sure if it works on all the cases but lets see what testbot says.
Comment #43
davidhernandezIt would be nice to manual test. Check that the path-frontpage and root_path are working correctly on various pages. Also, that it works correctly when Drupal is installed in a subdirectory.
Comment #46
LewisNymanI rerolled the patch and also tested it to make sure the classes appeared as expected. Would someone do the honours?
Comment #47
davidhernandezWe need to fix the comments. Also, I think we can add the node type class, which lauriii had in #18. I think we'll be ok with that, and it takes care of node_preprocess_html. The other solution would be to add the class in node--html.html.twig (extending html.html.twig.) We could do that just in Classy, without an extra template in core, but I don't think we need to do that now. We can sort that out in the phase 2 follow up.
I'm striking out the install page /maintenance page stuff since I don't see anything to move.
Comment #49
davidhernandezComment #50
davidhernandezNot sure about the failure. Those tests passed locally. Maybe just testbot acting up?
I modified some comments and added the node class. Thoughts?
Comment #51
joelpittetCould we avoid declaring variables that exist already?
node.type
vsnode_type
.Saves the declaration in preprocess. Thoughts?
Comment #52
davidhernandezI'm all for simplifying. When I dump node here I get NULL. It is not loaded for preprocess_html but it is for preprocess_page. Does that not make it through? Is it worth loading again? (And it's probably node.bundle?)
Comment #53
davidhernandezHow about this? Not sure if it's the best approach or wasteful. I loaded the node for the html template and got rid of the node_preprocess_html completely. I was curious and did a quick and dirty profiling of a node page to see if anything bad happened. The runs actually all came back slightly faster. *shrug*
Comment #54
joelpittet@davidhernandez oh sorry, you are move involved that me in this, though I should have known better, we aren't at the node level and there isn't always a node at the html template level.
type should work because of getType(). But regardless, i'm not sure that that suggestion I made was a good one. If you think it's good though, I'll back it;)
Comment #55
davidhernandezAlrighty, though we could make the same argument for the html template that is made for the page template, in regards to having the node data there. But node data probably isn't particularly useful in the html template.
I'm hiding the last patch, so lets review with #50 instead.
Comment #56
davidhernandezComment #57
seantwalshPatch #50 looks good to me! Performed a code and visual inspection.
Comment #58
alexpottI agree with #55.
Committed e92465b and pushed to 8.0.x. Thanks!
Thanks for adding the beta evaluation to the issue summary.
Comment #60
askibinski CreditAttribution: askibinski commentedDid something break this? I just did a clean standard D8-dev install and got "path-_" instead of "path-frontpage". (see screenshot)
Comment #61
davidhernandezIt looks like this commit introduced a bug. #2404929: Path class on <body> may be language specific, results in CSS bugs
Should be easy to fix.
Comment #62
davidhernandezIt is being fixed here #2411597: Class 'path-frontpage' missing from <body>