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');