From 0df5ad93bef045bf19c817b11422b88021c121f8 Mon Sep 17 00:00:00 2001
From: effulgentsia <alex.bronstein@acquia.com>
Date: Sat, 21 Sep 2019 18:34:48 -0700
Subject: [PATCH] Issue #3081983 by oknate, Wim Leers: Double Alignment classes
 on widget wrapper for embedded media in CKEditor

---
 .../js/plugins/drupalmedia/plugin.es6.js      | 19 +++++++++----------
 .../media/js/plugins/drupalmedia/plugin.js    | 13 ++++++-------
 .../CKEditorIntegrationTest.php               | 15 ++++++++++++++-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
index a56ce5200cb..68b10fdf8c3 100644
--- a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
+++ b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js
@@ -244,20 +244,19 @@
           // Convert data-align attribute to class so we're not applying styles
           // to data attributes.
           // @todo Consider removing this in https://www.drupal.org/project/drupal/issues/3072279
+          // Remove any align classes from from the widget wrapper. These
+          // classes are moved to the wrapper so that the alignment will still
+          // display within CKEditor.
+          const classes = this.element.getParent().$.classList;
+          for (let i = 0; i < classes.length; i++) {
+            if (classes[i].indexOf('align-') === 0) {
+              this.element.getParent().removeClass(classes[i]);
+            }
+          }
           if (this.data.attributes.hasOwnProperty('data-align')) {
             this.element
               .getParent()
               .addClass(`align-${this.data.attributes['data-align']}`);
-          } else {
-            // If data-align property is removed, remove any align classes from
-            // from the widget wrapper. These classes are moved to the wrapper
-            // so that the alignment will still display within CKEditor.
-            const classes = this.element.getParent().$.classList;
-            for (let i = 0; i < classes.length; i++) {
-              if (classes[i].indexOf('align-') === 0) {
-                this.element.getParent().removeClass(classes[i]);
-              }
-            }
           }
 
           // Track the previous state to allow checking if preview needs
diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.js b/core/modules/media/js/plugins/drupalmedia/plugin.js
index e26e3a79ef7..06d8232da75 100644
--- a/core/modules/media/js/plugins/drupalmedia/plugin.js
+++ b/core/modules/media/js/plugins/drupalmedia/plugin.js
@@ -178,15 +178,14 @@
 
           this.element.setAttributes(this.data.attributes);
 
+          var classes = this.element.getParent().$.classList;
+          for (var i = 0; i < classes.length; i++) {
+            if (classes[i].indexOf('align-') === 0) {
+              this.element.getParent().removeClass(classes[i]);
+            }
+          }
           if (this.data.attributes.hasOwnProperty('data-align')) {
             this.element.getParent().addClass('align-' + this.data.attributes['data-align']);
-          } else {
-            var classes = this.element.getParent().$.classList;
-            for (var i = 0; i < classes.length; i++) {
-              if (classes[i].indexOf('align-') === 0) {
-                this.element.getParent().removeClass(classes[i]);
-              }
-            }
           }
 
           this.oldData = CKEDITOR.tools.clone(this.data);
diff --git a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
index c0e49d9992a..768a0c70b48 100644
--- a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
+++ b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
@@ -1042,9 +1042,22 @@ class CKEditorIntegrationTest extends WebDriverTestBase {
     ];
     foreach ($alignments as $alignment) {
       $this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', $alignment);
-      // Now verify the result.
+      // Now verify the result. Assert the first element within the
+      // <drupal-media> element has the alignment class.
       $selector = sprintf('drupal-media[data-align="%s"] .caption-drupal-media.align-%s', $alignment, $alignment);
       $this->assertNotEmpty($assert_session->waitForElementVisible('css', $selector, 2000));
+      foreach ($alignments as $wrapper_alignment) {
+        $selector = sprintf('.cke_widget_drupalmedia.align-%s', $wrapper_alignment);
+        if ($wrapper_alignment === $alignment) {
+          // Assert that the alignment class exists on the wrapper.
+          $assert_session->elementExists('css', $selector);
+        }
+        else {
+          // Assert that the other alignment classes don't exist on the wrapper.
+          $assert_session->elementNotExists('css', $selector);
+        }
+      }
+
       // Assert that the resultant downcast drupal-media element has the proper
       // `data-align` attribute.
       $this->pressEditorButton('source');