diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css
index 03cc0fc766..92c52d69e1 100644
--- a/core/modules/media_library/css/media_library.theme.css
+++ b/core/modules/media_library/css/media_library.theme.css
@@ -88,13 +88,6 @@
outline: none;
}
-.media-library-add-form-input-wrapper {
- padding: 16px;
- border: 1px solid #bfbfbf;
- border-radius: 2px;
- background: #fcfcfa;
-}
-
.media-library-add-form--without-input .form-item {
margin: 0 0 1em;
}
@@ -103,6 +96,13 @@
outline: none;
}
+.media-library-add-form__input-wrapper {
+ padding: 16px;
+ border: 1px solid #bfbfbf;
+ border-radius: 2px;
+ background: #fcfcfa;
+}
+
/* Style the media add upload form. */
.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
margin-bottom: 0;
@@ -113,12 +113,12 @@
}
/* Style the media add oEmbed form. */
-.media-library-add-form--oembed .media-library-add-form-input-wrapper {
+.media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: flex;
}
@media screen and (max-width: 37.5em) {
- .media-library-add-form--oembed .media-library-add-form-input-wrapper {
+ .media-library-add-form--oembed .media-library-add-form__input-wrapper {
display: block;
}
}
diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php
index 9139fd4345..d5ec0f16f1 100644
--- a/core/modules/media_library/src/Form/AddFormBase.php
+++ b/core/modules/media_library/src/Form/AddFormBase.php
@@ -110,6 +110,8 @@ protected function getMediaType(FormStateInterface $form_state) {
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
+ // @todo Remove the ID when we can use selectors to replace content via
+ // AJAX in https://www.drupal.org/project/drupal/issues/2821793.
$form['#prefix'] = '
';
$form['#suffix'] = '
';
$form['#attached']['library'][] = 'media_library/style';
@@ -210,7 +212,7 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
],
'preview' => [
'#type' => 'container',
- '#weight' => 1,
+ '#weight' => 10,
'#attributes' => [
'class' => [
'media-library-add-form__preview',
@@ -219,7 +221,7 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
],
'fields' => [
'#type' => 'container',
- '#weight' => 2,
+ '#weight' => 20,
'#attributes' => [
'class' => [
'media-library-add-form__fields',
@@ -233,7 +235,7 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
'#type' => 'submit',
'#value' => $this->t('Remove'),
'#name' => 'media-' . $delta . '-remove-button' . $id_suffix,
- '#weight' => 3,
+ '#weight' => 30,
'#attributes' => [
'class' => ['media-library-add-form__remove-button'],
'aria-label' => $this->t('Remove @label', ['@label' => $media->getName()]),
@@ -441,7 +443,7 @@ public function updateFormCallback(array &$form, FormStateInterface $form_state)
// Update the form and shift focus to the added media items.
else {
$response->addCommand(new ReplaceCommand("#$wrapper_id", $form));
- $response->addCommand(new InvokeCommand('#media-library-add-form-wrapper .media-library-add-form__added-media', 'focus'));
+ $response->addCommand(new InvokeCommand('.media-library-add-form__added-media', 'focus'));
}
return $response;
diff --git a/core/modules/media_library/src/Form/FileUploadForm.php b/core/modules/media_library/src/Form/FileUploadForm.php
index 97cf08fe73..283ae74e97 100644
--- a/core/modules/media_library/src/Form/FileUploadForm.php
+++ b/core/modules/media_library/src/Form/FileUploadForm.php
@@ -122,11 +122,11 @@ protected function buildInputElement(array $form, FormStateInterface $form_state
$slots = $state->getAvailableSlots();
- // Add a container to group the input elements.
+ // Add a container to group the input elements for styling purposes.
$form['container'] = [
'#type' => 'container',
'#attributes' => [
- 'class' => ['media-library-add-form-input-wrapper'],
+ 'class' => ['media-library-add-form__input-wrapper'],
],
];
diff --git a/core/modules/media_library/src/Form/OEmbedForm.php b/core/modules/media_library/src/Form/OEmbedForm.php
index ec543b0fbb..4af94334c0 100644
--- a/core/modules/media_library/src/Form/OEmbedForm.php
+++ b/core/modules/media_library/src/Form/OEmbedForm.php
@@ -91,11 +91,11 @@ protected function buildInputElement(array $form, FormStateInterface $form_state
$media_type = $this->getMediaType($form_state);
$providers = $media_type->getSource()->getProviders();
- // Add a container to group the input elements.
+ // Add a container to group the input elements for styling purposes.
$form['container'] = [
'#type' => 'container',
'#attributes' => [
- 'class' => ['media-library-add-form-input-wrapper'],
+ 'class' => ['media-library-add-form__input-wrapper'],
],
];
diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
index f8003b6e90..7fbc75b2ce 100644
--- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
+++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php
@@ -832,7 +832,7 @@ public function testWidgetUpload() {
$page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri));
$assert_session->assertWaitOnAjaxRequest();
// Assert the focus is shifted to the added media items.
- $this->assertJsCondition('jQuery("#media-library-add-form-wrapper .media-library-add-form__added-media").is(":focus")');
+ $this->assertJsCondition('jQuery(".media-library-add-form__added-media").is(":focus")');
// Assert the media item fields are shown and the vertical tabs are no
// longer shown.
$assert_session->elementExists('css', '.media-library-add-form__fields');
@@ -842,8 +842,7 @@ public function testWidgetUpload() {
$assert_session->elementExists('css', '.media-library-add-form__remove-button')->click();
$assert_session->assertWaitOnAjaxRequest();
// Assert the remove message is shown.
- $filename = $png_image->filename;
- $assert_session->pageTextContains("The media item $filename has been removed.");
+ $assert_session->pageTextContains("The media item $png_image->filename has been removed.");
// Assert the focus is shifted to the first tabbable element of the add
// form, which should be the source field.
$this->assertJsCondition('jQuery("#media-library-add-form-wrapper :tabbable").is(":focus")');
@@ -949,7 +948,7 @@ public function testWidgetOEmbed() {
$assert_session->pageTextNotContains('Add or select media');
$assert_session->pageTextContains('Custom video title');
- // Assert removing an uploaded media item before save works as expected.
+ // Assert removing an added oEmbed media item before save works as expected.
$assert_session->elementExists('css', '.media-library-open-button[name^="field_unlimited_media"]')->click();
$assert_session->assertWaitOnAjaxRequest();
$assert_session->pageTextContains('Add or select media');
@@ -959,7 +958,7 @@ public function testWidgetOEmbed() {
$page->pressButton('Add');
$assert_session->assertWaitOnAjaxRequest();
// Assert the focus is shifted to the added media items.
- $this->assertJsCondition('jQuery("#media-library-add-form-wrapper .media-library-add-form__added-media").is(":focus")');
+ $this->assertJsCondition('jQuery(".media-library-add-form__added-media").is(":focus")');
// Assert the media item fields are shown and the vertical tabs are no
// longer shown.
$assert_session->elementExists('css', '.media-library-add-form__fields');