Групиране на елементите

След като видяхме как можем да добавим нови контроли за промяна на настройките на темата е хубаво да се погрижим и за тяхната подредба. Представете си, че темата стане голяма и искаме да дадем на потребителя възможността да контролира голям брой визуални елементи. Тогава формата би станала огромна и трудна за работа. За да я направим по-прегледна можем да групираме елементите със сходно поведение в отделни групиращи полета, подобни на fiedset в html формите. Тези полета могат да бъдат разтворени, като просто служат за групиране или затворени, като освен за групиране служат и за скриване на елементите когато с тях не се работи така, че формата да остава семпла и прегледна. Добавянето на подобни групиращи полета е изключително лесно. За да видим как става ще групираме всички заглавия на услуги в отделно поле. Това става като към елемента $form добавим следното:

$form['titles'] = array(
    '#type' => 'details',
    '#title' => t('Service Titles'),
);

Това ще дефинира групиращо поле от затворен тип, което ще се разтваря при натискане с мишката.

Сега трябва да променим контролите за заглавията така, че да принадлежат към новосъздаденото поле.

За целта просто трябва да ги направим елементи не на $form, а на масива 'titles':

<?php

/* 
 * Implements hook_form_system_theme_settings
 */
function deep_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {
  $form['titles'] = array(
    '#type' => 'details',
    '#title' => t('Service Titles'),
  );
  $form['titles']['left_service_title'] = array(
    '#type' => 'textfield',
    '#title' => t('Left Service Title'),
    '#description' => 'The service title will be vissible on the left service section on the frontpage',
    '#default_value' => theme_get_setting('left_service_title'),
  );
  
  $form['titles']['middle_service_title'] = array(
    '#type' => 'textfield',
    '#title' => t('Middle Service Title'),
    '#description' => 'The service title will be vissible on the middle service section on the frontpage',
    '#default_value' => theme_get_setting('middle_service_title'),
  );
  
  $form['titles']['right_service_title'] = array(
    '#type' => 'textfield',
    '#title' => t('Right Service Title'),
    '#description' => 'The service title will be vissible on the right service section on the frontpage',
    '#default_value' => theme_get_setting('right_service_title'),
  );
}

След като сме го направили можем да надникнем към формата за настройки и да видим дали всичко е както го описахме:

Групиране на елементите

Натискането на SERVICE TITLES ще разтвори групата с контроли за промяна на заглавията:

Разтворена група

Виждаме, че така формата става много по-прегледна и удобна за работа. Ще използваме полето details за да групираме и контролите, които ще добавим за промяна на изображенията на темата, което ще направим в следващата статия.