What is the twig template name for a node edit form?

Question

In Drupal 8, what is the twig template name for a node edit form for a custom content type called for example "device".

• For a default node we use node-edit-form.html.twig
• So what is the edit template name for a custom content type ?

I would appreciate your help. Thank you !

Answer 1

You could have a look at this comment. It suggests adding a theme suggestion like this:

This feels hacky, but it's the best I can come up with. First add this code to your admin .theme file (likely a sub-theme of Seven):

function NAMEOFTHEME_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
   if ($hook == 'node_edit_form') {
     if ($node = \Drupal::routeMatch()->getParameter('node')) {
      $content_type = $node->bundle();
     }
     else {
       $current_path = \Drupal::service('path.current')->getPath();
       $path_args = explode('/', $current_path);
       $content_type = $path_args[3];
     }
     $suggestions[] = 'node_edit_form__' . $content_type;
   } 
 }

Next, create twig templates in your theme's template directory in the form of node-edit-form--NODE-TYPE-SEPARATED-WITH-DASHES.html.twig.

Answer 2

Based on Neograph734's answer and Berdir his comment on it, the node type is indeed already available (no need get it out of the path). I would recommend to add the theme suggestion using:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for node_edit_form.
 */
function example_theme_suggestions_node_edit_form_alter(array &$suggestions, array $variables) {
  $route_match = \Drupal::routeMatch();

  if ($node = $route_match->getParameter('node')) {
    // When editing an existing node, add the node's bundle as the theme hook
    // suggestion.
    $suggestions[] = $variables['theme_hook_original'] . '__' . $node->bundle();
  } elseif ($node_type = $route_match->getParameter('node_type')) {
    // When a new node is created, the node type (object) is provided.
    $suggestions[] = $variables['theme_hook_original'] . '__' . $node_type->id();
  }

  return $suggestions;
}

This allows you to write targeted Twig templates and/or pre-process functions. When your node type's machine name is device, your Twig template should be named node-edit-form--device.html.twig and your pre-process function example_preprocess_node_edit_form__device(&$variables), where example is the name of your theme (or module).

Answer 3

Here are the complete steps it took me to implement on D9.2.10

1. Create subtheme of admin theme seven
2. Install and enable new admin theme (note: enable through drop down)
3. create hook_theme_suggestions_HOOK_alter in new admin *.theme

/**
 * Implements hook_theme_suggestions_HOOK_alter() for node_edit_form.
 */
function NAMEOFTHEME_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
   if ($hook == 'node_edit_form') {
     if ($node = \Drupal::routeMatch()->getParameter('node')) {
      $content_type = $node->bundle();
     }
     else {
       $current_path = \Drupal::service('path.current')->getPath();
       $path_args = explode('/', $current_path);
       $content_type = $path_args[3];
     }
     $suggestions[] = 'node_edit_form__' . $content_type;
   } 
 }

4. Copy seven's node-edit-form.html.twig to new subtheme's templates directory.
5. Create a node bundle specific override node-edit-form--BUNDLE-NAME.html.twig
6. Clear caches

Note: I did not need to override the theme for the form in a hook_form_alter for it to pick up node_edit_form.

Answer 4

If you want to theme a specific form, for example the edit form of a node type, then all you have to do is

/**
 * Implements hook_theme().
 */
function THEMENAME_theme($existing, $type, $theme, $path) {
  return [
    // form id (weather it's an edit node for or a new node form)
    'node_NODE_CONTENT_TYPE_edit_form' => [
      'render element' => 'form',
    ],
  ];
}

Then create a twig file node-NODE-CONTENT-TYPE-edit-form.html.twig

and theme it like so:

{{ form.field_MACHINE_NAME_OF_FIELD }}
{{ form.field_MACHINE_NAME_OF_FIELD2 }}
...
{# this prints out the submit button #}
{{ form.actions }}
{# you need to have this for the form to work properly #}
{{ form|without('name', 'field_MACHINE_NAME_OF_FIELD2', 'field_MACHINE_NAME_OF_FIELD3') }}