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

Reference: https://www.drupal.org/core/beta-changes
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.

Comments

davidhernandez’s picture

Issue summary: View changes
davidhernandez’s picture

Issue tags: +FUDK
mortendk’s picture

Assigned: Unassigned » mortendk
Issue summary: View changes
mortendk’s picture

lets 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.

mortendk’s picture

Cottser’s picture

I don't think this issue is related to that one. This is html.html.twig, not page.html.twig.

mortendk’s picture

@cottser based on the classnames that were gonna move, (maintainence, install etc) i think its relevant

mortendk’s picture

Issue summary: View changes
mortendk’s picture

body 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.

davidhernandez’s picture

I 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.

davidhernandez’s picture

Issue summary: View changes
davidhernandez’s picture

I 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.

Sutharsan’s picture

@davidhernandez, I guess you are referring to Drupal\Core\Page\HtmlPage. To use that to pass variables to page and/or html template.

lauriii’s picture

Status: Active » Needs review
FileSize
3.27 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Setup environment: Test cancelled by admin prior to completion. View

I 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 in html.html.twig but why I added it there is that at least I would like to be able to easily remove it.

lauriii’s picture

FileSize
3.27 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Setup environment: Test cancelled by admin prior to completion. View

Removed whitespace

The last submitted patch, 14: move_html_classes_to_twig_2329753-14.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 15: move_html_classes_to_twig_2329753-15.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
3.27 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 77,315 pass(es). View

ok now for realz..

mdrummond’s picture

I 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.

davidhernandez’s picture

I 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.) :)

mdrummond’s picture

Ah, gotcha.

lauriii’s picture

Status: Needs review » Postponed

#2234331: Change the body classes to follow Drupal 8 CSS standards is going first I guess. Lets postpone this one.

lauriii’s picture

Assigned: mortendk » Unassigned
davidhernandez’s picture

lauriii’s picture

Assigned: Unassigned » lauriii
lauriii’s picture

Assigned: lauriii » Unassigned
Status: Needs work » Needs review
FileSize
1.78 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 45,376 pass(es), 23,148 fail(s), and 6,931 exception(s). View

I 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

Status: Needs review » Needs work

The last submitted patch, 26: move_html_classes_from-2329753-26.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
1.78 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,180 pass(es), 917 fail(s), and 45,739 exception(s). View
46.91 KB

Status: Needs review » Needs work

The last submitted patch, 28: move_html_classes_from-2329753-28.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
2.05 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 77,973 pass(es), 907 fail(s), and 45,616 exception(s). View

Hmm, I dont know what I was doing yesterday.

Status: Needs review » Needs work

The last submitted patch, 30: move_html_classes_from-2329753-30.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
2.05 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 79,500 pass(es). View
dawehner’s picture

+++ b/core/includes/theme.inc
index d605532..9ed10c1 100644
--- a/core/modules/system/templates/html.html.twig

--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig

+++ b/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -26,6 +26,12 @@

@@ -26,6 +26,12 @@
  * @ingroup themeable
  */
 #}
+{%
+  set body_classes = [
+    logged_in ? 'user-logged-in',
+    is_front ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
+  ]
+%}

So we introduce a new var, should we also document it?

davidhernandez’s picture

Functionally, 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.

mdrummond’s picture

html--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?

davidhernandez’s picture

We 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.

mortendk’s picture

Issue tags: -frontendunited, -FUDK

True 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.

Anonymous’s picture

FileSize
2.5 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 80,106 pass(es), 916 fail(s), and 13,647 exception(s). View

The previous patch is outdated so this is the updated one with documentation added as mentioned in #33

Status: Needs review » Needs work

The last submitted patch, 38: move_html_classes_from-2329753-38.patch, failed testing.

lauriii’s picture

Status: Needs work » Needs review
FileSize
397 bytes
2.44 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 81,441 pass(es). View
davidhernandez’s picture

Issue summary: View changes
Status: Needs review » Needs work
+++ b/core/modules/system/templates/html.html.twig
@@ -26,6 +28,12 @@
+    is_front ? 'path-frontpage' : 'path-' ~ root_path|clean_class,

This won't work. We've lost the is_front variable, which is now only available to page.html.twig.

+++ b/core/includes/theme.inc
@@ -1359,23 +1359,12 @@ function template_preprocess_html(&$variables) {
   $path = \Drupal::request()->getPathInfo();
...
+  $variables['root_path'] = explode('/', $path)[1];

I was thinking, with this code, root_path will be empty if on the frontpage. Could we do...

not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class

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.

lauriii’s picture

Status: Needs work » Needs review
FileSize
451 bytes
2.45 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch move_html_classes_from-2329753-42.patch. Unable to apply patch. See the log in the details link for more information. View

Not sure if it works on all the cases but lets see what testbot says.

davidhernandez’s picture

Issue tags: +Needs manual testing, +Novice

It 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.

Status: Needs review » Needs work

The last submitted patch, 42: move_html_classes_from-2329753-42.patch, failed testing.

LewisNyman’s picture

Status: Needs work » Needs review
Issue tags: -Needs manual testing
FileSize
2.44 KB
2.44 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 82,348 pass(es), 6 fail(s), and 1 exception(s). View
759.51 KB

I rerolled the patch and also tested it to make sure the classes appeared as expected. Would someone do the honours?

davidhernandez’s picture

Issue summary: View changes
Status: Needs review » Needs work

We 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.

The last submitted patch, 46: move_html_classes_from-2329753-45.patch, failed testing.

davidhernandez’s picture

Assigned: Unassigned » davidhernandez
davidhernandez’s picture

Assigned: davidhernandez » Unassigned
Status: Needs work » Needs review
FileSize
3.15 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 82,473 pass(es). View
2.54 KB

Not sure about the failure. Those tests passed locally. Maybe just testbot acting up?

I modified some comments and added the node class. Thoughts?

joelpittet’s picture

+++ b/core/modules/system/templates/html.html.twig
@@ -31,7 +32,8 @@
+    node_type ? 'node--type-' ~ node_type|clean_class,

Could we avoid declaring variables that exist already?

node.type vs node_type.

Saves the declaration in preprocess. Thoughts?

davidhernandez’s picture

I'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?)

davidhernandez’s picture

FileSize
2.38 KB
3.53 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,580 pass(es). View

How 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*

joelpittet’s picture

@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;)

davidhernandez’s picture

Alrighty, 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.

davidhernandez’s picture

crowdcg’s picture

Status: Needs review » Reviewed & tested by the community

Patch #50 looks good to me! Performed a code and visual inspection.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

I agree with #55.

Committed e92465b and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.

  • alexpott committed e92465b on 8.0.x
    Issue #2329753 by lauriii, davidhernandez, LewisNyman, nathandao: Move...
askibinski’s picture

FileSize
583.11 KB

Did something break this? I just did a clean standard D8-dev install and got "path-_" instead of "path-frontpage". (see screenshot)

davidhernandez’s picture

It 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.

davidhernandez’s picture

Status: Fixed » Closed (fixed)

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