EPT կարգավորումների ձևի ընդլայնում

Ստեղծել նոր EPT կարգավորումների ձևի դաս

Ես շատ ծրագրավորողներից լսել եմ անհանգստություններ EPT մոդուլների կարգավորումների քանակի վերաբերյալ՝ DOM Box, ֆոն, շրջանակներ, դասեր և այլն։ Այս ծրագրավորողները ենթադրում էին, որ բովանդակության խմբագիրները կշփոթվեն կամ այլ կերպ կմղվեն ստեղծել արմատապես տարբեր պարբերություններ, զիջումներ, ֆոններ։ Որոշ նախագծերում անհրաժեշտ է ճկունություն և ավելի շատ կարգավորումներ բովանդակության խմբագիրների համար, բայց որոշ նախագծեր ունեն բավականին խիստ Storybook-եր բաղադրիչներով։ Այս դեպքում անհրաժեշտ է փոխել մեր EPT կարգավորումների դաշտի վիջեթը։

Բացի այդ, եթե դուք ստեղծում եք նոր EPT մոդուլ և կցում եք JavaScript plugin՝ պարամետրերով, ձեզ անհրաժեշտ կլինի օգտագործել ձեր սեփական EPT կարգավորումների վիջեթը՝ այդ պարամետրերի կարգավորման դաշտերով։

EPT Core մոդուլում կա EptSettingsDefaultWidget դասը EPT կարգավորումների դաշտի վիջեթի համար։ Այն պարունակում է DOM Box, ֆոն և բոլոր մնացած կարգավորումները։ Եկեք սկսենք ստեղծել նոր դաս՝ EptSettingsSimpleWidget (այն կդնեմ EPT Core մոդուլում): Այն կունենա միայն երեք կարգավորում՝ Լայնություն (Width), Հեռավորություն (Spacing, պարբերության ներքևի եզրի համար):

Ստեղծեք նոր ֆայլ՝
/src/Plugin/Field/FieldWidget/EptSettingsSimpleWidget.php

<?php

namespace Drupal\ept_core\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Utility\Color;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;

/**
 * 'ept_settings_simple' վիջեթի պլագինի իրականացում։
 *
 * @FieldWidget(
 *   id = "ept_settings_simple",
 *   label = @Translation("EPT պարբերության պարզ կարգավորումներ"),
 *   field_types = {
 *     "ept_settings"
 *   }
 * )
 */
class EptSettingsSimpleWidget extends EptSettingsDefaultWidget  {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = parent::formElement($items, $delta, $element, $form, $form_state);


    return $element;
  }

  /**
   * {@inheritdoc}
   */
  public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
    foreach ($values as &$value) {
      $value += ['ept_settings' => []];
    }
    return $values;
  }

}

Մենք ընդլայնում ենք հիմնական կարգավորումների դասը՝ EptSettingsDefaultWidget: Անոտացիոն մեկնաբանությունում՝ @FieldWidget, մենք մեր վիջեթը կնշանակենք id = "ept_settings_simple" և label = @Translation("EPT Simple settings")։

/**
 * 'ept_settings_simple' վիջեթի պլագինի իրականացում։
 *
 * @FieldWidget(
 *   id = "ept_settings_simple",
 *   label = @Translation("EPT պարբերության պարզ կարգավորումներ"),
 *   field_types = {
 *     "ept_settings"
 *   }
 * )
 */

Կա երկու մեթոդ՝ formElement(), massageFormValues(): Դուք կարող եք թողնել massageFormValues()-ը ինչպես կա։ Drupal-ը ավտոմատ կերպով կմիավորի բոլոր կարգավորումները մեկ դաշտում՝ field_ept_settings։ Այսպիսով, կարևոր չէ քանի կարգավորում ունեք՝ դրանք պահվում են որպես serialized array, և պարզապես անհրաժեշտ է սահմանել կարգավորման դաշտերը՝ օգտագործելով Form API․

https://www.drupal.org/docs/drupal-apis/form-api

formElement() մեթոդում մենք կսահմանենք կարգավորման դաշտերը։ Եկեք թաքցնենք DOM Box-ը և շրջանակի կարգավորումները՝

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = parent::formElement($items, $delta, $element, $form, $form_state);
    unset($element['ept_settings']['design_options']['box1']);
    unset($element['ept_settings']['design_options']['other_settings']['border_color']);
    unset($element['ept_settings']['design_options']['other_settings']['border_style']);
    unset($element['ept_settings']['design_options']['other_settings']['border_radius']);

    return $element;
  }

Եթե այս նոր դաշտի վիջեթը ընտրեք ձեր EPT պարբերության տիպերից մեկի համար՝

Կտեսնեք ավելի փոքր կարգավորումների ձև՝

Այժմ հեռացնենք նաև ֆոնի կարգավորումները։ Եթե ձեզ անհրաժեշտ է ֆոնի կարգավորումներ, բայց մնացածը՝ ոչ, կարող եք ընդլայնել EptSettingsDefaultWidget դասը և ստեղծել ձեր սեփական վիջեթի դասը։ Ահա օրինակ՝ ինչպես հնարավորինս փոքր դարձնել EPT կարգավորումները։

...
    unset($element['ept_settings']['design_options']['other_settings']['background_color']);
    unset($element['ept_settings']['design_options']['other_settings']['background_media']);
    unset($element['ept_settings']['design_options']['other_settings']['background_image_style']);
...

Մեր ձևը արդեն ունի միայն երկու կարգավորում՝

Մնում է միայն ավելացնել Spacing դաշտը՝ ներքևի մասում շեղում (margin) ավելացնելու համար։ Դրա համար կօգտագործենք լրացուցիչ դասեր և CSS՝ շեղումներն կազմակերպելու համար․

spacing-none, 
spacing-sm, 
spacing-md, 
spacing-lg, 
spacing-xl, 
spacing-xxl 

Եթե ձեզ անհրաժեշտ է ավելի մեծ ցուցակ շեղումների համար, կարող եք ընդլայնել EptSettingsSimpleWidget դասը և ստեղծել ձեր սեփական վիջեթի դասը ինչպես արեցինք EptSettingsDefaultWidget-ի դեպքում։

$element['ept_settings']['design_options']['other_settings']['spacing'] = [
      '#type' => 'select',
      '#title' => $this->t('Background Image Style'),
      '#options' => [
        'spacing-none' => $this->t('Չկա'),
        'spacing-sm' => $this->t('Փոքր'),
        'spacing-md' => $this->t('Միջին'),
        'spacing-lg' => $this->t('Մեծ'),
        'spacing-xl' => $this->t('Շատ մեծ'),
        'spacing-xxl' => $this->t('Երկակի շատ մեծ'),
      ],
      '#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
    ];

Հիմա տեսնում եմ երեք տարբերակ՝ մեր բլոկի համար ոճերը ավելացնելու․

1. Վերազանցել բլոկի կաղապարը և սահմանել spacing-ը որպես դաս բլոկի համար։

2. Ոճերը ստեղծել անցողիկորեն և ներառել custom CSS յուրաքանչյուր պարբերության համար։

3. Դաս ավելացնել JavaScript-ով՝ ստեղծելով հատուկ JavaScript յուրաքանչյուր EPT պարբերության համար։

4. Վերափոխել դասերի ցուցակը template_preprocess_block() ֆունկցիայում։

Այս բոլոր մոտեցումները կաշխատեն, բայց կարծում եմ, որ ամենահեշտը կլինի օգտագործել template_process_paragraph() ֆունկցիան։ Առնվազն արդեն ունենք ept_core_preprocess_block() ֆունկցիան ebt_core.module ֆայլում։ Օգտագործենք այն․

...
  if (!empty($ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'])) {
    $variables['attributes']['class'][] = $ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'];
  }
...

Այժմ Spacing դաշտի արժեքները փոխանցվում են որպես դասի անուն, և մենք կօգտագործենք CSS՝ այդ դասերի հիման վրա margins-ի արժեքը սահմանելու համար՝

/ebt_core/scss/ept_core.scss

.spacing-sm {
  margin-bottom: 10px;
}

.spacing-md {
  margin-bottom: 20px;
}

.spacing-lg {
  margin-bottom: 30px;
}

.spacing-xl {
  margin-bottom: 40px;
}

.spacing-xxl {
  margin-bottom: 50px;
}

Կարող եք վերափոխել արժեքները ձեր custom CSS ֆայլում, օրինակ՝ օգտագործելով ցանկացած դաս՝ content կամ body տեգի համար՝

body .spacing-sm {
  margin-bottom: 15px;
}

Եվ կարող եք վերափոխել շեղումների ցանկը ձեր custom EBT կարգավորումների դաշտի վիջեթի դասում։

Ահա և վերջ, հիմա կարող եք ընտրել DOM Box-ը կամ սովորական ընտրության դաշտը՝ ձեր EBT բլոկների margins-ը կարգավորելու համար։

Հաճույքով պատասխանեմ ձեր հարցերին EBT մոդուլների վերաբերյալ Drupal.org-ում կամ կոնտակտային ձևով՝

Կապվել

Ստեղծել issue Drupal.org-ում

Պահպանել կապը LinkedIn-ում