Modifier la position des méta données sur le formulaire de saisie d'un contenu avec Drupal 8

Les méta données liées à un contenu (paramètres de menu, paramètres des commentaires, options de publications, paramètres des chemins d'urls, informations de publications, etc.) sont par défaut affichées, dans les formulaires d'ajout et d'édition, dans un panneau latéral. Ceci a l'avantage de donner une visibilité immédiate sur ces options tout en rédigeant son contenu.

Par exemple, notre formulaire ci-dessous présente un aperçu global des contenus et des métadonnées.

Mais il est des cas d'usages où la position latérale de ces informations nuisent à l'ergonomie générale, car réduisant l'espace disponible pour les formulaires de saisie des contenus. Ceci peut être le cas notamment, si vous utilisez le module Field Group pour structurer et regrouper les informations à saisir (sous la forme d'onglets verticaux par exemple), et encore plus si vous utilisez les paragraphes organisés également avec le module Field group.

Par exemple, ici notre formulaire dispose d'une place tellement réduite qu'il en devient difficilement exploitable, à moins de disposer d'un écran 32 pouces.

Nulle besoin ici d'un expert Drupal. Découvrons comment nous pouvons rendre la position de ces métadonnées paramétrables en fonction des besoins et de l'ergonomie générale du projet Drupal 8.

Nous allons agir au niveau du thème d'administration. Pour ce faire, vous aurez donc besoin de créer un sous-thème d'administration qui sera basé sur le thème d'administration que vous aurez choisi (le thème par défaut seven, ou encore l'excellent thème Adminimal).

Après avoir créer votre sous-thème (nous l'avons intitulé ici bo), vous aurez une structure de fichiers qui ressemblera à ceci

bo
├── bo.info.yml
├── bo.libraries.yml
├── bo.theme
├── config
│   ├── install
│   │   ├── block.block.bo_breadcrumbs.yml
│   │   ├── block.block.bo_content.yml
│   │   ├── block.block.bo_help.yml
│   │   ├── block.block.bo_local_actions.yml
│   │   ├── block.block.bo_messages.yml
│   │   ├── block.block.bo_page_title.yml
│   │   ├── block.block.bo_primary_local_tasks.yml
│   │   ├── block.block.bo_secondary_local_tasks.yml
│   │   └── bo.settings.yml
│   └── schema
│       └── bo.schema.yml
├── css
│   ├── node_meta.css
│   ├── node_meta.css.map
│   ├── style.css
│   └── style.css.map
├── js
│   └── bo.js
├── less
│   ├── node_meta.less
│   └── style.less
└── theme-settings.php

Nous aurons besoin notamment des fichiers

• bo.libraries.yml pour déclarer notre librairie et charger le fichier node_meta.css pour fournira les quelques surcharges nécessaires au niveau des règles css.
• bo.theme pour altérer les formulaires d'édition et de création des contenus
• theme-settings.php pour fournir les options de configuration au niveau de notre sous-thème d'administration

Rendre paramétrable la position des méta données

Nous commençons par fournir des options de configuration au niveau du sous-thème d'administration. L'idée générale est de fournir un formulaire de configuration qui va ressembler à la capture ci-dessus, formulaire qui va nous permettre de définir la position du panneau des métadonnées en fonction des types de contenu. Si vous avez une logique métier différente alors vous pouvez bien sûr fournir ces options en fonction de celle-ci et non les types de contenu.

Pour fournir ce formulaire de configuration, nous allons altérer, avec le fichier theme-settings.php, le formulaire d'édition des paramètres du thème pour ajouter ces options.

<?php

use Drupal\node\Entity\NodeType;
use Drupal\Core\Form\FormStateInterface;

function bo_form_system_theme_settings_alter(&$form, FormStateInterface &$form_state) {

  $form['bo_settings'] = array(
    '#type' => 'fieldset',
    '#title' => t('BO Theme Settings'),
    '#collapsible' => FALSE,
    '#collapsed' => FALSE,
  );

  $form['bo_settings']['tabs'] = array(
    '#type' => 'vertical_tabs',
    '#default_tab' => 'basic_tab',
  );
  
  $form['bo_settings']['basic_tab']['basic_settings'] = array(
    '#type' => 'details',
    '#title' => t('Basic Settings'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#group' => 'tabs',
  );

  $form['bo_settings']['basic_tab']['basic_settings']['node_form_meta'] = array(
    '#type' => 'item',
    '#markup' => '<div class="theme-settings-title">'.t("Node form meta block position").'</div>',
  );
  
  $form['bo_settings']['basic_tab']['basic_settings']['node_form_meta'] = array(
    '#type' => 'checkbox',
    '#title' => t('Display block meta as vertical tabs'),
    '#description'   => t('Use the checkbox to display the node meta block as vertical tabs and under the main node form.'),
    '#default_value' => theme_get_setting('node_form_meta', 'bo'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
  );

  $options = array_map(function (NodeType $nodeType) { return $nodeType->label(); }, NodeType::loadMultiple());
  $default_value = theme_get_setting('node_form_meta_types', 'bo');
  $form['bo_settings']['basic_tab']['basic_settings']['node_form_meta_types'] = array(
    '#type' => 'checkboxes',
    '#title' => t('Select the content types'),
    '#description'   => t('Select the content type on which display the node meta block as vertical tabs and under the main node form.'),
    '#default_value' => $default_value ? array_filter($default_value) : [],
    '#options' => $options,
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#states' => [
      'visible' => [
        ':input[name="node_form_meta"]' => ['checked' => TRUE],
      ],
    ]
  );

}

Altérer le formulaire de saisie des contenus

Une fois ces options configurées, nous pouvons désormais altérer les formulaires d'édition des contenus depuis le fichier bo.theme.

/**
 * Implements hook_form_alter().
 */
function bo_form_node_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Set advanced settings in node form as verticals tabs.
  if (theme_get_setting('node_form_meta', 'bo')) {
    /** @var \Drupal\node\NodeInterface $node */
    $node = $form_state->getFormObject()->getEntity();
    $types_enabled = theme_get_setting('node_form_meta_types', 'bo') ? array_filter(theme_get_setting('node_form_meta_types', 'bo')): [];
    if (in_array($node->bundle(), $types_enabled)) {
      $form['advanced']['#type'] = 'vertical_tabs';
      $form['meta']['#type'] = 'details';
      $form['meta']['#title'] = t('Informations');
      $form['#attached']['library'][] = 'bo/node_meta';
    }
  }
}

Et voilà ! A noter que nous chargeons la librairie bo/node_meta afin d'apporter quelques surcharges css. Pour que le snippet soit complet, vous trouverez le fichier node_meta.css ci-dessous.

.node-form .entity-meta details[open] {
  background-image: none;
}
.node-form .entity-meta__header,
.node-form .entity-meta details {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}
.node-form .entity-meta__header:first-child,
.node-form .entity-meta details:first-child {
  border-top-color: transparent;
}
@media screen and (min-width: 768px) {
  .node-form .layout-region-node-main,
  .node-form .layout-region-node-footer {
    float: inherit;
    /* LTR */
    width: 100%;
    padding-right: 0;
    /* LTR */
    box-sizing: border-box;
  }
  .node-form [dir="rtl"] .layout-region-node-main,
  .node-form [dir="rtl"] .layout-region-node-footer {
    float: inherit;
    padding-left: 0;
    padding-right: 0;
  }
  .node-form .layout-region-node-secondary {
    float: inherit;
    /* LTR */
    width: 100%;
  }
  .node-form [dir="rtl"] .layout-region-node-secondary {
    float: inherit;
  }
}

Vous pouvez avoir besoin de surcharger cette librairie si jamais votre thème d'administration diffère quelque peu. Dans ce cas depuis votre thème, vous pouvez rajouter ces quelques lignes dans le fichier my_theme.info.yml de votre thème d'administration pour surcharger cette librairie.

libraries-override:
  # Replace an entire library.
  bo/node_meta: my_theme/node_meta

Où my_theme/node_meta sera votre propre librairie chargeant le fichier css pertinent.

Et tout ceci nous permet de positionner selon nos besoins ce panneau des méta données d'un contenu, nous permettant ainsi de bénéficier de toute la largeur disponible du navigateur pour améliorer le confort des utilisateurs. 

A noter que ce snippet n'est utile que si vous utilisez le thème d'administration seven, ou un autre thème d'administration qui étend Seven (comme le thème d'administration Adminimal par exemple). En effet, par défaut ce panneau des méta données est affiché sous le formulaire principal sous la forme d'onglets verticaux. C'est le thème Seven qui fait une surcharge de l'affichage de ce panneau. Si vous n'utilisez pas Seven, vous ne devriez pas avoir besoin de ces snippet. Ou peut-être mais alors pour faire l'inverse.

Et si on faisait un module ?

C'est après plusieurs altérations similaires sur des types de contenu différents, que j'ai souhaité rendre ces options configurables. Et c'est en rédigeant ce billet suite à une discussion au cours du DrupalCamp Lannion, que l'idée d'un petit module Meta position proposant cette fonctionnalité, rendant inutile cette surcharge au niveau du thème d'administration, m'est venue. Ce petit module reste très simple, mais peut être utile à tout un chacun. Quoiqu'il en soit c'est un besoin que je rencontre très  souvent, pour lequel je n'aurai plus besoin de venir altérer le thème d'administration. L'intérêt réside aussi pour les sites builders / webmestres, permettant un paramétrage fin en quelques clics depuis l'interface de configuration.

Comme on dit, les petits ruisseaux font les grandes rivières.