扩展 EBT 设置表单
创建新的 EBT 设置表单类
我从许多程序员那里听到过对 EBT 模块设置数量的担忧：DOM Box、背景、边框、类等。这些程序员暗示内容编辑可能会感到困惑，或者在某种程度上被鼓励创建完全不同的区块、边距和背景。有些项目需要灵活性和更多的设置供内容编辑使用，但有些项目则有相当严格的组件规范。对于这种情况，我们需要更改我们的 EBT 设置字段小部件。
另外，如果您创建了一个新的 EBT 模块并附加了带有选项的 javascript 插件，您将需要使用自己的 EBT 设置小部件，并为这些选项添加设置字段。
EBT Core 模块有一个用于 EBT 设置字段小部件的 EbtSettingsDefaultWidget 类。它包含 DOM Box、背景和所有其他设置。我们开始创建一个新的类 EbtSettingsSimpleWidget（我会将它放在 EBT Core 模块中）。它只包含三个设置：宽度、间距（用于区块下方的边距）。
创建一个新文件：
/src/Plugin/Field/FieldWidget/EbtSettingsSimpleWidget.php
<?php
namespace Drupal\ebt_core\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ebt_core\Plugin\Field\FieldWidget\EbtSettingsDefaultWidget;
/**
* Plugin implementation of the 'ebt_settings_simple' widget.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
class EbtSettingsSimpleWidget extends EbtSettingsDefaultWidget {
/**
* {@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 += ['ebt_settings' => []];
}
return $values;
}
}
我们将扩展基本设置类 EbtSettingsDefaultWidget。在注释 @FieldWidget 中，我们将小部件命名为 id = "ebt_settings_simple"，并添加标签 label = @Translation("EBT Simple settings")
/**
* Plugin implementation of the 'ebt_settings_simple' widget.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
我们还有两个方法 formElement() 和 massageFormValues()。您可以保持 massageFormValues() 不变。Drupal 会自动将所有设置序列化为一个 field_ebt_settings 字段。因此，不管您有多少设置，它们都会存储为序列化数组，您只需使用 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['ebt_settings']['design_options']['box1']);
unset($element['ebt_settings']['design_options']['other_settings']['border_color']);
unset($element['ebt_settings']['design_options']['other_settings']['border_style']);
unset($element['ebt_settings']['design_options']['other_settings']['border_radius']);
return $element;
}
如果您将新的字段小部件应用于某个 EBT 区块类型：
您会看到一个更精简的设置表单：
现在我们也将移除背景设置。如果您需要背景设置但不需要其他所有设置，您可以扩展 EbtSettingsDefaultWidget 类并创建自己的字段小部件。以下是如何让 EBT 设置尽可能精简的示例。
...
unset($element['ebt_settings']['design_options']['other_settings']['background_color']);
unset($element['ebt_settings']['design_options']['other_settings']['background_media']);
unset($element['ebt_settings']['design_options']['other_settings']['background_image_style']);
...
我们的表单现在只剩下两个设置：
接下来只需添加间距字段，用于在底部添加边距。我们将使用额外的类和 CSS 来组织间距：
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
如果您需要更长的间距列表，可以随意扩展 EbtSettingsSimpleWidget 类，并像我们对 EbtSettingsDefaultWidget 类那样创建自己的字段小部件类。
$element['ebt_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Spacing'),
'#options' => [
'spacing-none' => $this->t('None'),
'spacing-sm' => $this->t('Small'),
'spacing-md' => $this->t('Medium'),
'spacing-lg' => $this->t('Large'),
'spacing-xl' => $this->t('Extra Large'),
'spacing-xxl' => $this->t('Double Extra Large'),
],
'#default_value' => $items[$delta]->ebt_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
现在我看到三种为我们的区块添加样式的方法：
1. 覆盖区块模板，并在其中将间距作为区块类设置。
2. 动态生成样式，并将它们作为自定义 CSS 样式包含到每个区块中。
3. 使用 javascript 添加类，通过为每个 EBT 区块生成自定义 javascript。
4. 在 template_preprocess_block() 函数中覆盖类列表。
这些方法都可行，但我认为使用 template_process_block() 函数会更简单。至少我们已经在 ebt_core.module 文件中有 ebt_core_preprocess_block() 函数。让我们使用它：
...
if (!empty($ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'])) {
$variables['attributes']['class'][] = $ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'];
}
...
现在我们将间距字段的键作为类名传递，并使用 CSS 根据这些类定义边距值：
/ebt_core/scss/ebt_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;
}
您可以在自定义 CSS 文件中覆盖这些值，例如使用内容或 body 标签中的任何类：
body .spacing-sm {
margin-bottom: 15px;
}
您还可以在自定义的 EBT 设置字段小部件类中覆盖间距列表。
就是这样，现在您可以在 DOM Box 和简单下拉框之间进行选择，以便为您的 EBT 区块设置边距。
欢迎在 Drupal.org 或联系表单中提出有关 EBT 模块的问题：