Simple way to add a class to the body when creating/editing an entity

Question

In Drupal 8.4, I am trying to add a class to the body (like Drupal 7 had) when the page viewed is a node (or entity for that matter), something like [entity]-[create or edit], so that, when a user is editing or creating a node, a class like page-node-edit gets added to the body classes array.

Answer 1

I couldn't get oknate's solution to work so I modified it. You can add it to your custom module file.

/**
 * Implements hook_preprocess_html().
 */
function MYMODULE_preprocess_html(&$variables) {
  // Add node ID
  if ($node = \Drupal::request()->attributes->get('node')) {
   $variables['attributes']['class'][] = 'page-node-' . $node->id();
  }

  // Get route
  $route_name = \Drupal::routeMatch()->getRouteName();

  // Add edit class
  if ($route_name == 'entity.node.edit_form') {
    $variables['attributes']['class'][] = 'entity-edit';
  }

  // Add create class
  if ($route_name == 'node.add') {
    $variables['attributes']['class'][] = 'entity-create';
  }

}

Answer 2

I combined @Parag's solution with some extra logic to also handle node type along with the operation.

UPDATED: Implemented a switch to allow adding more routes.

function MYTHEME_preprocess_html(&$variables) {
  $routeName = \Drupal::routeMatch()->getRouteName();
  switch ($routeName) {
    case 'entity.node.edit_form':
      $entityType = $variables['node_type'];
      $op = 'edit';
      break;
    case 'node.add':
      $entityType = \Drupal::routeMatch()->getParameter('node_type')->id();
      $op = 'add';
      break;
  }
  
  if (isset($entityType) && isset($op)) {
    $cleanEntityType = Html::cleanCssIdentifier($entityType);
    $prefix = 'entity-form';
    $cssClasses = [
      [$prefix],
      [$prefix, $op],
      [$prefix, $cleanEntityType],
      [$prefix, $cleanEntityType, $op],
    ];
    foreach ($cssClasses as $cssClass) {
      $variables['attributes']['class'][] = implode('-', $cssClass);
    }
  }
}

Answer 3

You can use hook_preprocess_page and check the current route:

function mymodule_preprocess_page(&$vars) {

  $route_name = \Drupal::routeMatch()->getRouteName();

  // This would add a class based on the route.  You'd need the 
  // pathauto module enabled.
  $vars['page_classes'][] = \Drupal::service('pathauto.alias_cleaner')->cleanString($route_name);

  // This would add the classes asked for in the question.
  if ($route_name == 'entity.node.edit_form') {
    $vars['page_classes'][] = 'entity-edit';
  }
  elseif ($route_name == 'node.add') {
    $vars['page_classes'][] = 'entity-create';
  }
}

Answer 4

After dealing with this for some time, I've found a potential alternative way of approaching this sort of functionality.

For my use case, I was trying to add classes to the body of the node add/edit pages, so I can do things like hide blocks and alter positioning using css.

My new approach to achieve this is to simply override the page.html.twig. So, if I wanted to customize the node edit/add pages for a content type called "Blog Post", I would create two new template files:

1. page--node--add--blogpost.html.twig
2. page--node--edit--blogpost.html.twig

Note that I can create one set template files to cover all content types like so:

1. page--node--add.html.twig
2. page--node--edit.html.twig

I can also override html.html.twig, if I really needed to get my classes into the node add/edit pages. For this approach, I would create two new template pages:

1. html--node--add.html.twig
2. html--node--edit.html.twig

In these template pages, I would simply modify the body_classes array like so:

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    'my-new-class',
    'another-class',
  ]
%}

Answer 5

function MYTHEME_preprocess_html(&$variables) {
$current_path = \Drupal::service('path.current')->getPath();
$path_alias = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);
$is_edit = strpos($path_alias, '/edit');
if ($is_edit !== false) {
  $edit_css_classname = $variables['node_type'].'-edit';
  $variables['attributes']['class'][] = \Drupal\Component\Utility\Html::cleanCssIdentifier($edit_css_classname);
  }
}

This code snippet adds a MY-NODE-TYPE-edit class to the body tag of a page, if there is "/edit" inside the path.

Answer 6

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    user.getRoles()|join(' role-'),
    'edit' in url('<current>')|render|render ? 'page-edit'
  ]
%}