diff --git a/core/lib/Drupal/Core/Field/WidgetBase.php b/core/lib/Drupal/Core/Field/WidgetBase.php index b1579f2445..30d5a2bf16 100644 --- a/core/lib/Drupal/Core/Field/WidgetBase.php +++ b/core/lib/Drupal/Core/Field/WidgetBase.php @@ -241,8 +241,20 @@ protected function formMultipleElements(FieldItemListInterface $items, array &$f ], ]; } - } + // Allow modules to alter the field multiple widget form element. + $context = [ + 'form' => $form, + 'widget' => $this, + 'items' => $items, + 'delta' => $delta, + 'default' => $this->isDefaultValueWidget($form_state), + ]; + \Drupal::moduleHandler()->alter([ + 'field_widget_multiple_form', + 'field_widget_multiple_' . $this->getPluginId() . '_form', + ], $elements, $form_state, $context); + } return $elements; } diff --git a/core/modules/field/field.api.php b/core/modules/field/field.api.php index 130f923180..1fd8427e8c 100644 --- a/core/modules/field/field.api.php +++ b/core/modules/field/field.api.php @@ -183,6 +183,7 @@ function hook_field_widget_info_alter(array &$info) { * @see \Drupal\Core\Field\WidgetBaseInterface::form() * @see \Drupal\Core\Field\WidgetBase::formSingleElement() * @see hook_field_widget_WIDGET_TYPE_form_alter() + * @see hook_field_widget_multiple_form_alter() */ function hook_field_widget_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) { // Add a css class to widget form elements for all fields of type mytype. @@ -212,6 +213,7 @@ function hook_field_widget_form_alter(&$element, \Drupal\Core\Form\FormStateInte * @see \Drupal\Core\Field\WidgetBaseInterface::form() * @see \Drupal\Core\Field\WidgetBase::formSingleElement() * @see hook_field_widget_form_alter() + * @see hook_field_widget_multiple_WIDGET_TYPE_form_alter() */ function hook_field_widget_WIDGET_TYPE_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) { // Code here will only act on widgets of type WIDGET_TYPE. For example, @@ -220,6 +222,77 @@ function hook_field_widget_WIDGET_TYPE_form_alter(&$element, \Drupal\Core\Form\F $element['#autocomplete_route_name'] = 'mymodule.autocomplete_route'; } +/** + * Alter forms for multivalue field widgets provided by other modules. + * + * To adjust the individual widgets for the values themselves, use + * hook_field_widget_form_alter() instead. + * + * @param array $elements + * The field widget form elements as constructed by + * \Drupal\Core\Field\WidgetBaseInterface::formMultipleElements(). + * @param \Drupal\Core\Form\FormStateInterface $form_state + * The current state of the form. + * @param array $context + * An associative array containing the following key-value pairs: + * - form: The form structure to which widgets are being attached. This may be + * a full form structure, or a sub-element of a larger form. + * - widget: The widget plugin instance. + * - items: The field values, as a + * \Drupal\Core\Field\FieldItemListInterface object. + * - delta: The order of this item in the array of subelements (0, 1, 2, etc). + * - default: A boolean indicating whether the form is being shown as a dummy + * form to set default values. + * + * @see \Drupal\Core\Field\WidgetBaseInterface::form() + * @see \Drupal\Core\Field\WidgetBase::formSingleElement() + * @see hook_field_widget_form_alter() + * @see hook_field_widget_multiple_WIDGET_TYPE_form_alter() + */ +function hook_field_widget_multiple_form_alter(array &$elements, \Drupal\Core\Form\FormStateInterface $form_state, array $context) { + // Add a css class to the overall element of any widget. + $elements['#attributes']['class'][] = 'myclass'; +} + +/** + * Alter multi-value widget forms for a widget provided by another module. + * + * Modules can implement hook_field_widget_multiple_WIDGET_TYPE_form_alter() to + * modify a specific widget form, rather than using + * hook_field_widget_form_alter() and checking the widget type. + * + * To modify the widget for individual items, use + * hook_field_widget_WIDGET_TYPE_form_alter() instead. + * + * @param array $elements + * The field widget form elements as constructed by + * \Drupal\Core\Field\WidgetBaseInterface::formMultipleElements(). + * @param \Drupal\Core\Form\FormStateInterface $form_state + * The current state of the form. + * @param array $context + * An associative array. See hook_field_widget_form_alter() for the structure + * and content of the array. + * + * @see \Drupal\Core\Field\WidgetBaseInterface::form() + * @see \Drupal\Core\Field\WidgetBase::formSingleElement() + * @see hook_field_widget_multiple_form_alter() + */ +function hook_field_widget_multiple_WIDGET_TYPE_form_alter(array &$elements, \Drupal\Core\Form\FormStateInterface $form_state, array $context) { + // Alter the overall title for the multivalue widget (the table header, + // above the rows). + $elements['#title'] = t('Review your %title entries', ['%title' => $elements['#title']]); + + if (!empty($elements['#description'])) { + // Add a paragraph to the description, above all the rows. + $elements['#description'] = [ + '#markup' => $elements['#description'], + ]; + } + else { + $elements['#description'] = t('These items might be out of date.'); + } +} + /** * @} End of "defgroup field_widget". */ diff --git a/core/modules/media/media.module b/core/modules/media/media.module index 296945973a..5e2c982c7a 100644 --- a/core/modules/media/media.module +++ b/core/modules/media/media.module @@ -9,6 +9,7 @@ use Drupal\Core\Entity\EntityInterface; use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Render\Element; +use Drupal\Core\Render\Markup; use Drupal\Core\Routing\RouteMatchInterface; use Drupal\Core\Session\AccountInterface; use Drupal\Core\Url; @@ -66,6 +67,16 @@ function media_theme() { 'media' => [ 'render element' => 'elements', ], + 'media_reference_help' => [ + 'render element' => 'elements', + 'variables' => [ + 'table' => NULL, + 'label' => NULL, + 'types' => NULL, + 'media_add_page' => NULL, + 'media_list' => NULL, + ], + ], ]; } @@ -170,5 +181,25 @@ function media_form_field_ui_field_storage_add_form_alter(&$form, FormStateInter ]; } $form['add']['new_storage_type']['#weight'] = 0; - $form['add']['description_wrapper']['#weight'] = 1; + $form['add']['description_wrapper']['#weight'] = 1;} + +/** + * Implements hook_field_widget_multiple_WIDGET_TYPE_form_alter(). + */ +function media_field_widget_multiple_entity_reference_autocomplete_form_alter(array &$elements, FormStateInterface $form_state, array $context) { + // Add a description to inform users where they can find and add new media. + // Only add the description on autocomplete widgets for entity reference + // field pointing to media. + if (!empty($elements[0]['target_id']['#type']) && ($elements[0]['target_id']['#type'] === 'entity_autocomplete') && ($elements[0]['target_id']['#target_type'] === 'media')) { + $elements['#theme'] = 'media_reference_help'; + + // Use the user-defined label for the field to indicate that the form allows + // reusing existing media. + $elements['#label'] = $elements['#title']; + if (!empty($elements[0]['target_id']['#selection_settings']['target_bundles'])) { + $elements['#types'] = implode(", ", $elements[0]['target_id']['#selection_settings']['target_bundles']); + $elements['#media_add_page'] = Url::fromRoute('entity.media.add_page')->toString(); + $elements['#media_list'] = Url::fromRoute('entity.media.collection')->toString(); + } + } } diff --git a/core/modules/media/templates/media-reference-help.html.twig b/core/modules/media/templates/media-reference-help.html.twig new file mode 100644 index 0000000000..44c9a8a1f8 --- /dev/null +++ b/core/modules/media/templates/media-reference-help.html.twig @@ -0,0 +1,46 @@ +{# +/** + * @file + * Theme override for media reference fields. + * + * @todo I have no idea what I'm doing. + * + * @see template_preprocess_field_multiple_value_form() + */ +#} +
+ {{ label }} +

+ {% trans %} + Create new {{ label|placeholder }} + {% endtrans %} +

+ {% trans %} + Create your media on the media add page (opens a new window), then add it by name to the field below. + {% endtrans %} +

+ {% trans %} + Use existing {{ label|placeholder }} + {% endtrans %} +

+{% if multiple %} +
+ {{ table }} +{% else %} + {% for element in elements %} + {{ element }} + {% endfor %} +{% endif %} + + {% trans %} + Type part of the media name. See the media list (opens a new window) to help locate media. Allowed media types: {{ types|placeholder }} +{# fixme #} + {% endtrans %} + {% if description.content %} + {{ description.content }} + {% endif %} + {% if button %} +
{{ button }}
+ {% endif %} +
+
diff --git a/core/modules/media/tests/src/FunctionalJavascript/MediaReferenceFieldHelpTest.php b/core/modules/media/tests/src/FunctionalJavascript/MediaReferenceFieldHelpTest.php index 7d22484238..19013cb0b3 100644 --- a/core/modules/media/tests/src/FunctionalJavascript/MediaReferenceFieldHelpTest.php +++ b/core/modules/media/tests/src/FunctionalJavascript/MediaReferenceFieldHelpTest.php @@ -3,6 +3,10 @@ namespace Drupal\Tests\media\FunctionalJavascript; use Drupal\Component\Utility\Html; +use Drupal\Core\Field\FieldStorageDefinitionInterface; +use Drupal\Core\Url; +use Drupal\field\Entity\FieldConfig; +use Drupal\field\Entity\FieldStorageConfig; /** * Tests related to media reference fields. @@ -53,4 +57,158 @@ public function testFieldCreationHelpText() { } } + /** + * Test our custom help texts when creating a field. + * + * @see media_field_widget_entity_reference_autocomplete_form_alter() + * @see media_field_widget_multiple_entity_reference_autocomplete_form_alter() + */ + public function testMediaAutocompleteWidgetTest() { + $assert_session = $this->assertSession(); + + $media_type1 = $this->createMediaType(); + $media_type2 = $this->createMediaType(); + $content_type = $this->createContentType(); + // The first field will have cardinality 1. + $storage1 = FieldStorageConfig::create([ + 'field_name' => 'field_card_1', + 'entity_type' => 'node', + 'type' => 'entity_reference', + 'cardinality' => 1, + 'settings' => [ + 'target_type' => 'media', + ], + ]); + $storage1->save(); + $field1 = FieldConfig::create([ + 'label' => 'Media (card 1)', + 'field_storage' => $storage1, + 'entity_type' => 'node', + 'bundle' => $content_type->id(), + 'settings' => [ + 'handler' => 'default', + 'handler_settings' => [ + 'target_bundles' => [ + $media_type1->id() => $media_type1->id(), + $media_type2->id() => $media_type2->id(), + ], + ], + ], + ]); + $field1->save(); + entity_get_form_display('node', $content_type->id(), 'default') + ->setComponent('field_card_1', [ + 'type' => 'entity_reference_autocomplete', + ]) + ->save(); + + // Do the same with a field with unlimited cardinality. + $storage2 = FieldStorageConfig::create([ + 'field_name' => 'field_card_unlimited', + 'entity_type' => 'node', + 'type' => 'entity_reference', + 'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED, + 'settings' => [ + 'target_type' => 'media', + ], + ]); + $storage2->save(); + $field2 = FieldConfig::create([ + 'label' => 'Media (card unlimited)', + 'field_storage' => $storage2, + 'entity_type' => 'node', + 'bundle' => $content_type->id(), + 'settings' => [ + 'handler' => 'default', + 'handler_settings' => [ + 'target_bundles' => [ + $media_type1->id() => $media_type1->id(), + $media_type2->id() => $media_type2->id(), + ], + ], + ], + ]); + $field2->save(); + entity_get_form_display('node', $content_type->id(), 'default') + ->setComponent('field_card_unlimited', [ + 'type' => 'entity_reference_autocomplete', + ]) + ->save(); + + // Check that both widgets display the expected help text on the form. + $this->drupalGet("/node/add/{$content_type->id()}"); + // Chedk the wrapper fieldsets are present. + $fieldset1 = $assert_session->elementExists('css', '#edit-field-card-1-wrapper fieldset'); + $fieldset2 = $assert_session->elementExists('css', '#edit-field-card-unlimited-wrapper fieldset'); + // Check some help texts are the ones we expect. + $this->assertEquals($field1->getLabel(), $fieldset1->find('css', 'legend')->getText()); + $this->assertEquals($field2->getLabel(), $fieldset2->find('css', 'legend')->getText()); + $h4s = $fieldset1->findAll('css', 'h4'); + $this->assertEquals("Create new {$field1->getLabel()}", $h4s[0]->getText()); + $this->assertEquals("Use existing {$field1->getLabel()}", $h4s[1]->getText()); + $h4s = $fieldset2->findAll('css', 'h4'); + $this->assertEquals("Create new {$field2->getLabel()}", $h4s[0]->getText()); + // The multiple-widget has an empty h4 in our way, that's why we use the + // next one instead. + $this->assertEquals("Use existing {$field2->getLabel()}", $h4s[2]->getText()); + $span1 = $assert_session->elementExists('css', 'span.reuse-media-help', $fieldset1); + $this->assertEquals("Create your media on the media add page (opens a new window), then add it by name to the field below.", $span1->getText()); + $link1 = $assert_session->elementExists('css', 'a', $span1); + $this->assertEquals("media add page", $link1->getText()); + $this->assertEquals(Url::fromRoute('entity.media.add_page')->toString(), $link1->getAttribute('href')); + $span2 = $assert_session->elementExists('css', 'span.reuse-media-help', $fieldset2); + $this->assertEquals("Create your media on the media add page (opens a new window), then add it by name to the field below.", $span2->getText()); + $link2 = $assert_session->elementExists('css', 'a', $span2); + $this->assertEquals("media add page", $link2->getText()); + $this->assertEquals(Url::fromRoute('entity.media.add_page')->toString(), $link2->getAttribute('href')); + $description1 = $assert_session->elementExists('css', '#edit-field-card-1-0-target-id--description', $fieldset1); + $this->assertEquals("Type part of the media name. See the media list (opens a new window) to help locate media. Allowed media types: {$media_type1->id()}, {$media_type2->id()}.", $description1->getText()); + $link3 = $assert_session->elementExists('css', 'a', $description1); + $this->assertEquals("media list", $link3->getText()); + $this->assertEquals(Url::fromRoute('entity.media.collection')->toString(), $link3->getAttribute('href')); + $description2 = $assert_session->elementExists('css', '#edit-field-card-unlimited-0-target-id--description', $fieldset2); + $this->assertEquals("Type part of the media name. See the media list (opens a new window) to help locate media. Allowed media types: {$media_type1->id()}, {$media_type2->id()}.", $description2->getText()); + $link4 = $assert_session->elementExists('css', 'a', $description2); + $this->assertEquals("media list", $link4->getText()); + $this->assertEquals(Url::fromRoute('entity.media.collection')->toString(), $link4->getAttribute('href')); + + // Create a non-media entity reference and make sure our help text is not + // showing up. + $storage3 = FieldStorageConfig::create([ + 'field_name' => 'field_not_a_media_field', + 'entity_type' => 'node', + 'type' => 'entity_reference', + 'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED, + 'settings' => [ + 'target_type' => 'node', + ], + ]); + $storage3->save(); + $field3 = FieldConfig::create([ + 'label' => 'No media here!', + 'field_storage' => $storage3, + 'entity_type' => 'node', + 'bundle' => $content_type->id(), + 'settings' => [ + 'handler' => 'default', + 'handler_settings' => [ + 'target_bundles' => [ + $content_type->id() => $content_type->id(), + ], + ], + ], + ]); + $field3->save(); + entity_get_form_display('node', $content_type->id(), 'default') + ->removeComponent('field_card_1') + ->removeComponent('field_card_unlimited') + ->setComponent('field_not_a_media_field', [ + 'type' => 'entity_reference_autocomplete', + ]) + ->save(); + $this->drupalGet("/node/add/{$content_type->id()}"); + $assert_session->pageTextNotContains('Create your media on the media add page (opens a new window), then add it by name to the field below.'); + $assert_session->pageTextNotContains('Type part of the media name. See the media list (opens a new window) to help locate media.'); + } + }