diff --git a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css index 7ef64b3df3ef9cf118ab0b515fcbd18406516e26..8866cf47ea51aec5650ef47de58e453e9cd0db93 100644 --- a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css +++ b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css @@ -30,3 +30,14 @@ drupal-media { drupal-media .media-library-item__edit { right: 10px; } + +/** + * Allow alignment to display in CKEditor. + */ +drupal-media[data-align=left], +drupal-media[data-align=right] { + display: inline; +} +drupal-media[data-align=center] { + display: flex; +} diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js index 9f643f8f203487484fc9c86b9f595e305c7c645f..31bfe22d3b5c0d911cf9970ca65bbff30379ba77 100644 --- a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js +++ b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js @@ -242,32 +242,13 @@ }); } - // Allow entity_embed.editor.css to respond to changes (for example in alignment). - this.element.setAttributes(this.data.attributes); - // 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']}`); - } - // Remove old attributes. + // Remove old attributes from drupal-media element within the widget. if (this.oldData) { Object.keys(this.oldData.attributes).forEach(attrName => { this.element.removeAttribute(attrName); }); } - + // Add attributes to drupal-media element within the widget. this.element.setAttributes(this.data.attributes); // 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 74cc11970c01278a62aee938deb1ab5dfe3f6994..f95d963d7fb214fc3e6005b476226c962ad69064 100644 --- a/core/modules/media/js/plugins/drupalmedia/plugin.js +++ b/core/modules/media/js/plugins/drupalmedia/plugin.js @@ -178,18 +178,6 @@ }); } - 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']); - } - if (this.oldData) { Object.keys(this.oldData.attributes).forEach(function (attrName) { _this.element.removeAttribute(attrName); diff --git a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php index 4ebf604b5c51471886e89ac2428801c0bbed8e1d..1e651dbc982fe183223d5214a8559bdd3e2455b5 100644 --- a/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php +++ b/core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php @@ -1041,9 +1041,15 @@ public function testAlignment() { $this->waitForEditor(); $this->assignNameToCkeditorIframe(); $this->getSession()->switchToIFrame('ckeditor'); + // Wait for preview to load. + $this->assertNotEmpty($img = $assert_session->waitForElement('css', 'drupal-media img')); + // Assert the drupal-media element starts without a data-align attribute. + $drupal_media = $assert_session->elementExists('css', 'drupal-media'); + $this->assertFalse($drupal_media->hasAttribute('data-align')); + // Assert that setting the data-align property in the dialog adds the // `align-right', `align-left` or `align-center' class on the widget, - // caption figure and drupal-media tag. + // caption figure and drupal-media element. $alignments = [ 'right', 'left', @@ -1051,21 +1057,12 @@ public function testAlignment() { ]; foreach ($alignments as $alignment) { $this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', $alignment); + // Wait for preview to load. + $this->assertNotEmpty($img = $assert_session->waitForElement('css', 'drupal-media img')); // 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. @@ -1077,10 +1074,7 @@ public function testAlignment() { // remove the attribute from the drupal-media element in the CKEditor. $this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', 'none'); - // Assert that neither the widget nor the caption figure have alignment - // classes. - $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.caption-drupal-media:not([class*="align-"])', 2000)); - // Assert drupal-media element no longer has data-align attribute. + // Assert the drupal-media element no longer has data-align attribute. $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'drupal-media .caption-drupal-media:not(.align-center)', 2000)); $drupal_media = $assert_session->elementExists('css', 'drupal-media'); $this->assertFalse($drupal_media->hasAttribute('data-align'));