From 9c102998d2e05bdd06c1385dfcb724c3297fa7d8 Mon Sep 17 00:00:00 2001 From: berliner Date: Thu, 12 Dec 2024 10:32:14 +0100 Subject: [PATCH] HPC-9945: Add settings for promotable and full width to multi column interactive content --- ....interactive_content_2_columns.default.yml | 62 +++++++++++++++- ....interactive_content_2_columns.default.yml | 14 ++++ ...ive_content_2_columns.field_full_width.yml | 32 ++++++++ ...phs_type.interactive_content_2_columns.yml | 2 + .../gho_layouts/src/LayoutSelectHelper.php | 10 ++- .../Plugin/Layout/MultiColumnLayoutBase.php | 18 ++++- .../ncms_paragraphs/ncms_paragraphs.module | 49 ++----------- .../src/Entity/NcmsParagraphBase.php | 47 +++++++++++- .../src/Entity/NcmsParagraphGeneric.php | 10 +++ .../src/Entity/NcmsParagraphInterface.php | 5 ++ .../Entity/Paragraph/InteractiveContent.php | 14 ++++ .../Paragraph/InteractiveContent2Columns.php | 73 +++++++++++++++++++ .../common_design_subtheme.theme | 11 --- ...h--interactive-content-2-columns.html.twig | 2 +- .../paragraph--interactive-content.html.twig | 2 +- 15 files changed, 291 insertions(+), 60 deletions(-) create mode 100644 config/core.entity_view_display.paragraph.interactive_content_2_columns.default.yml create mode 100644 config/field.field.paragraph.interactive_content_2_columns.field_full_width.yml create mode 100644 html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphGeneric.php create mode 100644 html/modules/custom/ncms_paragraphs/src/Entity/Paragraph/InteractiveContent2Columns.php diff --git a/config/core.entity_form_display.paragraph.interactive_content_2_columns.default.yml b/config/core.entity_form_display.paragraph.interactive_content_2_columns.default.yml index b486aee2..2c54173c 100644 --- a/config/core.entity_form_display.paragraph.interactive_content_2_columns.default.yml +++ b/config/core.entity_form_display.paragraph.interactive_content_2_columns.default.yml @@ -3,14 +3,74 @@ langcode: en status: true dependencies: config: + - field.field.paragraph.interactive_content_2_columns.field_full_width - paragraphs.paragraphs_type.interactive_content_2_columns + module: + - field_group +third_party_settings: + field_group: + group_tabs: + children: + - group_layout + - group_settings + label: Tabs + region: content + parent_name: '' + weight: 0 + format_type: tabs + format_settings: + classes: '' + show_empty_fields: false + id: '' + label_as_html: false + direction: horizontal + width_breakpoint: 640 + group_layout: + children: + - layout_paragraphs_fields + label: Layout + region: content + parent_name: group_tabs + weight: 4 + format_type: tab + format_settings: + classes: '' + show_empty_fields: true + id: '' + label_as_html: false + formatter: closed + description: '' + required_fields: true + group_settings: + children: + - field_full_width + label: 'Additional settings' + region: content + parent_name: group_tabs + weight: 5 + format_type: tab + format_settings: + classes: '' + show_empty_fields: false + id: '' + label_as_html: false + formatter: closed + description: '' + required_fields: true id: paragraph.interactive_content_2_columns.default targetEntityType: paragraph bundle: interactive_content_2_columns mode: default content: + field_full_width: + type: boolean_checkbox + weight: 3 + region: content + settings: + display_label: true + third_party_settings: { } layout_paragraphs_fields: - weight: 0 + weight: 2 region: content settings: { } third_party_settings: { } diff --git a/config/core.entity_view_display.paragraph.interactive_content_2_columns.default.yml b/config/core.entity_view_display.paragraph.interactive_content_2_columns.default.yml new file mode 100644 index 00000000..4d0ba407 --- /dev/null +++ b/config/core.entity_view_display.paragraph.interactive_content_2_columns.default.yml @@ -0,0 +1,14 @@ +uuid: 4ccfb4b9-f82a-4e70-ad8a-953d448c90e2 +langcode: en +status: true +dependencies: + config: + - field.field.paragraph.interactive_content_2_columns.field_full_width + - paragraphs.paragraphs_type.interactive_content_2_columns +id: paragraph.interactive_content_2_columns.default +targetEntityType: paragraph +bundle: interactive_content_2_columns +mode: default +content: { } +hidden: + field_full_width: true diff --git a/config/field.field.paragraph.interactive_content_2_columns.field_full_width.yml b/config/field.field.paragraph.interactive_content_2_columns.field_full_width.yml new file mode 100644 index 00000000..d243b8a1 --- /dev/null +++ b/config/field.field.paragraph.interactive_content_2_columns.field_full_width.yml @@ -0,0 +1,32 @@ +uuid: 6e0f7d23-ee57-41e0-8d62-f08316679e46 +langcode: en +status: true +dependencies: + config: + - field.storage.paragraph.field_full_width + - paragraphs.paragraphs_type.interactive_content_2_columns + module: + - field_config_cardinality +third_party_settings: + field_config_cardinality: + cardinality_config: '1' + cardinality_label_config: false + unlimited_not_required: '' + limited_not_required: '' + limited_required: '' +id: paragraph.interactive_content_2_columns.field_full_width +field_name: field_full_width +entity_type: paragraph +bundle: interactive_content_2_columns +label: 'Display at full width?' +description: 'If checked, the interactive content will be shown at full-width. Otherwise it will be restricted to same width as the surrounding text content.' +required: false +translatable: false +default_value: + - + value: 0 +default_value_callback: '' +settings: + on_label: 'Yes, full width' + off_label: 'No, align with content' +field_type: boolean diff --git a/config/paragraphs.paragraphs_type.interactive_content_2_columns.yml b/config/paragraphs.paragraphs_type.interactive_content_2_columns.yml index 40fb378c..9c69c22e 100644 --- a/config/paragraphs.paragraphs_type.interactive_content_2_columns.yml +++ b/config/paragraphs.paragraphs_type.interactive_content_2_columns.yml @@ -20,3 +20,5 @@ behavior_plugins: available_layouts: layout_twocol_interactive: 'Two column (interactive content)' layout_threecol_interactive: 'Three column (interactive content)' + promoted_behavior: + enabled: true diff --git a/html/modules/custom/gho_layouts/src/LayoutSelectHelper.php b/html/modules/custom/gho_layouts/src/LayoutSelectHelper.php index be697c43..84e43df9 100644 --- a/html/modules/custom/gho_layouts/src/LayoutSelectHelper.php +++ b/html/modules/custom/gho_layouts/src/LayoutSelectHelper.php @@ -20,7 +20,14 @@ class LayoutSelectHelper { public static function processLayoutSelect(array &$element, FormStateInterface $form_state, array &$form) { $element['#attached']['library'][] = 'gho_layouts/layout_select'; + // Make the details wrapper a container, so it shows directly. + $form['layout_paragraphs']['config']['#type'] = 'container'; + // Hide the "Administrative label input, we don't need that. + $form['layout_paragraphs']['config']['label']['#access'] = FALSE; + if (empty($form['#region_component_restrict'])) { + // The rest here applies only to elements where some layout options + // should be restricted. return $element; } @@ -43,6 +50,7 @@ public static function processLayoutSelect(array &$element, FormStateInterface $ $element[$layout]['#disabled'] = TRUE; } } + if (!empty($disabled)) { $form['layout_paragraphs']['disabled_message'] = [ '#type' => 'html_tag', @@ -58,7 +66,7 @@ public static function processLayoutSelect(array &$element, FormStateInterface $ } /** - * Get th layout plugin manager. + * Get the layout plugin manager. * * @return \Drupal\Core\Layout\LayoutPluginManagerInterface * The layout plugin manager. diff --git a/html/modules/custom/gho_layouts/src/Plugin/Layout/MultiColumnLayoutBase.php b/html/modules/custom/gho_layouts/src/Plugin/Layout/MultiColumnLayoutBase.php index 7582919b..a8561e45 100644 --- a/html/modules/custom/gho_layouts/src/Plugin/Layout/MultiColumnLayoutBase.php +++ b/html/modules/custom/gho_layouts/src/Plugin/Layout/MultiColumnLayoutBase.php @@ -4,6 +4,7 @@ use Drupal\Component\Utility\NestedArray; use Drupal\Core\Form\FormStateInterface; +use Drupal\Core\Form\SubformStateInterface; use Drupal\layout_builder\Plugin\Layout\MultiWidthLayoutBase; /** @@ -19,12 +20,23 @@ abstract class MultiColumnLayoutBase extends MultiWidthLayoutBase { */ public function buildConfigurationForm(array $form, FormStateInterface $form_state) { $form = parent::buildConfigurationForm($form, $form_state); - $input = $form_state->getUserInput(); + $element_parents = ['layout_paragraphs', 'config', 'column_widths']; + $input = $form_state->getUserInput(); + if ($form_state instanceof SubformStateInterface) { + $input = $form_state->getCompleteFormState()->getUserInput(); + } $columns_width = NestedArray::getValue($input, $element_parents); if (!array_key_exists($columns_width, $this->getWidthOptions())) { - NestedArray::setValue($input, $element_parents, $this->getDefaultWidth()); - $form_state->setUserInput($input); + $columns_width = $this->getDefaultWidth(); + NestedArray::setValue($input, $element_parents, $columns_width); + if ($form_state instanceof SubformStateInterface) { + $form_state->getCompleteFormState()->setUserInput($input); + } + else { + $form_state->setUserInput($input); + } + } return $form; } diff --git a/html/modules/custom/ncms_paragraphs/ncms_paragraphs.module b/html/modules/custom/ncms_paragraphs/ncms_paragraphs.module index 83736d52..19f400ce 100644 --- a/html/modules/custom/ncms_paragraphs/ncms_paragraphs.module +++ b/html/modules/custom/ncms_paragraphs/ncms_paragraphs.module @@ -6,6 +6,7 @@ */ use Drupal\Core\Form\FormStateInterface; +use Drupal\ncms_paragraphs\Entity\NcmsParagraphGeneric; use Drupal\ncms_paragraphs\Entity\NcmsParagraphInterface; use Drupal\ncms_paragraphs\Helpers\StringHelper; @@ -15,18 +16,20 @@ use Drupal\ncms_paragraphs\Helpers\StringHelper; function ncms_paragraphs_entity_bundle_info_alter(array &$bundles) { foreach (array_keys($bundles['paragraph'] ?? []) as $paragraph_type) { $class_name = '\\Drupal\ncms_paragraphs\\Entity\\Paragraph\\' . StringHelper::makeCamelCase($paragraph_type, FALSE); - if (!class_exists($class_name)) { - continue; + if (class_exists($class_name)) { + $bundles['paragraph'][$paragraph_type]['class'] = $class_name; + $bundles['paragraph'][$paragraph_type]['label'] = ucfirst(str_replace('_', ' ', $paragraph_type)); + } + else { + $bundles['paragraph'][$paragraph_type]['class'] = NcmsParagraphGeneric::class; } - $bundles['paragraph'][$paragraph_type]['class'] = $class_name; - $bundles['paragraph'][$paragraph_type]['label'] = ucfirst(str_replace('_', ' ', $paragraph_type)); } } /** * Implements hook_form_FORM_ID_alter(). */ -function ncms_paragraphs_form_layout_paragraphs_component_form_alter(&$form, FormStateInterface $form_state) { +function ncms_paragraphs_form_layout_paragraphs_component_form_alter(&$form, FormStateInterface &$form_state) { /** @var \Drupal\layout_paragraphs\Form\EditComponentForm $form_object */ $form_object = $form_state->getFormObject(); $paragraph = $form_object->getParagraph(); @@ -34,42 +37,6 @@ function ncms_paragraphs_form_layout_paragraphs_component_form_alter(&$form, For if ($paragraph instanceof NcmsParagraphInterface) { $paragraph->entityFormAlter($form, $form_state); } - - // Don't trigger "Required" messages when canceling the add/edit form. - $form['actions']['cancel']['#limit_validation_errors'] = []; - - // Add our library to improve the display. - $form['#attached']['library'][] = 'ncms_paragraphs/paragraph_edit_form'; - - // Move the behavior plugin from a stand-alone fieldset into existing field - // groups. - if (!empty($form['#fieldgroups']) && !empty($form['behavior_plugins'])) { - - $form['behavior_plugins']['#parents'] = ['behavior_plugins']; - $form['behavior_plugins'] = $form_object->behaviorPluginsForm($form['behavior_plugins'], $form_state, $form); - unset($form['behavior_plugins']['#process']); - - $group_name = 'group_settings'; - if (empty($form['#fieldgroups'][$group_name])) { - $group = clone end($form['#fieldgroups']); - $group->children = ['behavior_plugins']; - $group->format_settings['formatter'] = 'close'; - $group->weight = $group->weight + 1; - $group->group_name = $group_name; - $form['#fieldgroups'][$group->group_name] = $group; - } - else { - $form['#fieldgroups'][$group_name]->children[] = 'behavior_plugins'; - } - $form['#fieldgroups'][$group_name]->label = t('Additional settings'); - $form['#group_children']['behavior_plugins'] = $group_name; - } - - if (!empty($form['field_dataset'])) { - // Hide the fieldset. - $form['field_dataset']['widget'][0]['#type'] = 'container'; - } - } /** diff --git a/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphBase.php b/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphBase.php index 475f38e4..ec090f85 100644 --- a/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphBase.php +++ b/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphBase.php @@ -13,11 +13,56 @@ abstract class NcmsParagraphBase extends Paragraph implements NcmsParagraphInter /** * {@inheritdoc} */ - public function entityFormAlter(&$form, FormStateInterface $form_state) {} + public function entityFormAlter(&$form, FormStateInterface $form_state) { + /** @var \Drupal\layout_paragraphs\Form\EditComponentForm $form_object */ + $form_object = $form_state->getFormObject(); + // Move the behavior plugin from a stand-alone fieldset into existing field + // groups. + if (!empty($form['#fieldgroups']) && !empty($form['behavior_plugins'])) { + $form['behavior_plugins']['#parents'] = ['behavior_plugins']; + $form['behavior_plugins'] = $form_object->behaviorPluginsForm($form['behavior_plugins'], $form_state, $form); + unset($form['behavior_plugins']['#process']); + $group_name = 'group_settings'; + if (empty($form['#fieldgroups'][$group_name])) { + $group = clone end($form['#fieldgroups']); + $group->children = ['behavior_plugins']; + $group->format_settings['formatter'] = 'close'; + $group->weight = $group->weight + 1; + $group->group_name = $group_name; + $form['#fieldgroups'][$group->group_name] = $group; + } + else { + $form['#fieldgroups'][$group_name]->children[] = 'behavior_plugins'; + } + $form['#fieldgroups'][$group_name]->label = $this->t('Additional settings'); + $form['#group_children']['behavior_plugins'] = $group_name; + } + + // Don't trigger "Required" messages when canceling the add/edit form. + $form['actions']['cancel']['#limit_validation_errors'] = []; + + // Add our library to improve the display. + $form['#attached']['library'][] = 'ncms_paragraphs/paragraph_edit_form'; + + if (!empty($form['field_dataset'])) { + // Hide the fieldset. + $form['field_dataset']['widget'][0]['#type'] = 'container'; + } + } /** * {@inheritdoc} */ public function preprocess(&$variables) {} + /** + * {@inheritdoc} + */ + public function isFullWidth() { + if (!$this->hasField('field_full_width')) { + return FALSE; + } + return $this->get('field_full_width')->value; + } + } diff --git a/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphGeneric.php b/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphGeneric.php new file mode 100644 index 00000000..f25b6220 --- /dev/null +++ b/html/modules/custom/ncms_paragraphs/src/Entity/NcmsParagraphGeneric.php @@ -0,0 +1,10 @@ +getBehaviorSetting('layout_paragraphs', 'parent_uuid'))) { + // Interactive content widgets that are embedded inside other paragraphs + // should never display in full width. + return FALSE; + } + return parent::isFullWidth(); + } + } diff --git a/html/modules/custom/ncms_paragraphs/src/Entity/Paragraph/InteractiveContent2Columns.php b/html/modules/custom/ncms_paragraphs/src/Entity/Paragraph/InteractiveContent2Columns.php new file mode 100644 index 00000000..237b9d78 --- /dev/null +++ b/html/modules/custom/ncms_paragraphs/src/Entity/Paragraph/InteractiveContent2Columns.php @@ -0,0 +1,73 @@ +getFormObject(); + + // Move the behavior plugin from a stand-alone fieldset into existing field + // groups. + if (!empty($form['#fieldgroups']) && !empty($form['layout_paragraphs'])) { + + // First, build out the full layout paragraphs subform, so that we have + // it available. Coming in this has only a process property and would be + // built later. + $form['layout_paragraphs']['#parents'] = ['layout_paragraphs']; + $subform_state = SubformState::createForSubform($form['layout_paragraphs'], $form, $form_state); + $form['layout_paragraphs'] = $form_object->layoutParagraphsBehaviorForm($form['layout_paragraphs'], $subform_state, $form); + + // Having the type be a container is important, otherwise field group + // refuses to put this into groups. + $form['layout_paragraphs']['#type'] = 'container'; + + $input = $form_state->getUserInput(); + if (empty($input['_triggering_element_name'])) { + // Somehow we need to unset the process here on the first rendering of + // the form, otherwise the grouping into field groups, as defined via + // the Field UI in the drupal backend, does not work. Processing has + // already happened in layoutParagraphsBehaviorForm() above, so that + // should not be an issue per-se. + // But on the other hand, we cannot unset the process unconditionally, + // otherwise the form validation fails when switching layouts. See + // MultiColumnLayoutBase::buildConfigurationForm for the additional + // modifcations to the user input array. Unsetting the process array + // here, somehow leads to the changes in + // MultiColumnLayoutBase::buildConfigurationForm not being transmitted + // up-chain and would eventually lead to a validation error triggered + // in FormValidator::performRequiredValidation. + unset($form['layout_paragraphs']['#process']); + } + $group_name = 'group_layout'; + if (empty($form['#fieldgroups'][$group_name])) { + $group = clone end($form['#fieldgroups']); + $group->children = ['layout_paragraphs']; + $group->format_settings['formatter'] = 'close'; + $group->weight = $group->weight + 1; + $group->group_name = $group_name; + $form['#fieldgroups'][$group->group_name] = $group; + } + else { + $form['#fieldgroups'][$group_name]->children[] = 'layout_paragraphs'; + } + $form['#fieldgroups'][$group_name]->label = $this->t('Layout'); + $form['#group_children']['layout_paragraphs'] = $group_name; + } + + } + +} diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.theme b/html/themes/custom/common_design_subtheme/common_design_subtheme.theme index b32c1b40..6dd0f500 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.theme +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.theme @@ -227,17 +227,6 @@ function common_design_subtheme_preprocess_paragraph__image_with_text(&$variable } } -/** - * Implements hook_preprocess_paragraph__sub_article(). - * - * Add a class to the sub-article paragraph indicating whether the article has - * a hero or not as it's difficult to access from within the twig templates. - */ -function common_design_subtheme_preprocess_paragraph__interactive_content(&$variables) { - $paragraph = $variables['paragraph']; - $variables['full_width'] = $paragraph->hasField('field_full_width') && $paragraph->get('field_full_width')->value; -} - /** * Implements hook_preprocess_paragraph__section_index(). * diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content-2-columns.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content-2-columns.html.twig index 69f2e309..dfa21343 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content-2-columns.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content-2-columns.html.twig @@ -48,7 +48,7 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, not paragraph.isPublished() ? 'paragraph--unpublished', 'gho-interactive-content-2-columns', - 'content-width', + paragraph.isFullWidth ? 'gho-interactive-content--full-width' : 'content-width', ] %} {% block paragraph %} diff --git a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content.html.twig b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content.html.twig index fcaeeb7e..53d20227 100644 --- a/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/paragraphs/paragraph--interactive-content.html.twig @@ -50,7 +50,7 @@ not paragraph.isPublished() ? 'paragraph--unpublished', 'gho-aside', 'gho-interactive-content', - full_width ? 'gho-interactive-content--full-width' : 'content-width', + paragraph.isFullWidth ? 'gho-interactive-content--full-width' : 'content-width', ] %} {% block paragraph %}