.../media/css/filter.media_embed.css} | 12 +++++--- .../plugins/drupalmedia/ckeditor.drupalmedia.css | 10 ------- .../media/js/plugins/drupalmedia/plugin.es6.js | 8 +++++ .../modules/media/js/plugins/drupalmedia/plugin.js | 1 + core/modules/media/media.libraries.yml | 6 ++++ core/modules/media/media.routing.yml | 2 +- .../src/Plugin/CKEditorPlugin/DrupalMedia.php | 32 +++++--------------- .../modules/media/src/Plugin/Filter/MediaEmbed.php | 12 ++++++-- core/themes/classy/classy.libraries.yml | 6 ---- .../themes/stable/css/media/filter.media_embed.css | 34 ++++++++++++++++++++++ core/themes/stable/stable.info.yml | 5 ++++ 11 files changed, 80 insertions(+), 48 deletions(-) diff --git a/core/themes/classy/css/components/media-embed.css b/core/modules/media/css/filter.media_embed.css similarity index 57% rename from core/themes/classy/css/components/media-embed.css rename to core/modules/media/css/filter.media_embed.css index 3245be1914..c53ea56d9c 100644 --- a/core/themes/classy/css/components/media-embed.css +++ b/core/modules/media/css/filter.media_embed.css @@ -1,14 +1,18 @@ /** * @file - * Styles for media embeds. + * Media Embed filter: default styling for media embed errors. */ -.media-embed-error { +/** + * The caption filter's styling overrides ours, so add a more specific selector to account for that. + */ +.media-embed-error, +.caption > .media-embed-error { background-color: #ebebeb; - background-image: url(../../../../modules/media/images/icons/no-thumbnail.png); + background-image: url(../images/icons/no-thumbnail.png); background-repeat: no-repeat; background-position: center top; - padding: 100px 20px 20px 20px; + padding: 100px 20px 20px; background-size: 100px 100px; max-width: 200px; text-align: center; diff --git a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css index 82bda3e66b..c0764a5ba1 100644 --- a/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css +++ b/core/modules/media/css/plugins/drupalmedia/ckeditor.drupalmedia.css @@ -64,13 +64,3 @@ drupal-media .caption { margin-bottom: 1em; } -.media-embed-error { - background-color: #ebebeb; - background-image: url(../../../images/icons/no-thumbnail.png); - background-repeat: no-repeat; - background-position: center top; - padding: 100px 20px 20px; - background-size: 100px 100px; - max-width: 200px; - text-align: center; -} diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js index 5d6d33a10f..8e6c08ba75 100644 --- a/core/modules/media/js/plugins/drupalmedia/plugin.es6.js +++ b/core/modules/media/js/plugins/drupalmedia/plugin.es6.js @@ -177,8 +177,11 @@ }); } + // 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 if (this.data.attributes.hasOwnProperty('data-align')) { this.element .getParent() @@ -271,6 +274,11 @@ /** * Loads an media embed preview and runs a callback after insertion. * + * Note the absence of caching, that's because this uses a GET request (which is cacheable) and the server takes + * special care to make the responses privately cacheable (i.e. per session) in the browser. + * + * @see \Drupal\media\Controller\MediaFilterController::preview() + * * @param {function} callback * A callback function that will be called after the preview has * loaded. Receives the widget instance. diff --git a/core/modules/media/js/plugins/drupalmedia/plugin.js b/core/modules/media/js/plugins/drupalmedia/plugin.js index 2a135edcba..6290c9ecfd 100644 --- a/core/modules/media/js/plugins/drupalmedia/plugin.js +++ b/core/modules/media/js/plugins/drupalmedia/plugin.js @@ -139,6 +139,7 @@ }); } + this.element.setAttributes(this.data.attributes); if (this.data.attributes.hasOwnProperty('data-align')) { this.element.getParent().addClass('align-' + this.data.attributes['data-align']); } diff --git a/core/modules/media/media.libraries.yml b/core/modules/media/media.libraries.yml index 686e774521..d38fe369f5 100644 --- a/core/modules/media/media.libraries.yml +++ b/core/modules/media/media.libraries.yml @@ -31,3 +31,9 @@ filter.caption: css/filter.caption.css: {} dependencies: - filter/caption + +media_embed: + version: VERSION + css: + component: + css/filter.media_embed.css: {} diff --git a/core/modules/media/media.routing.yml b/core/modules/media/media.routing.yml index a93052883c..19dadf9e01 100644 --- a/core/modules/media/media.routing.yml +++ b/core/modules/media/media.routing.yml @@ -44,7 +44,7 @@ media.filter.preview: path: '/media/{filter_format}/preview' defaults: _controller: '\Drupal\media\Controller\MediaFilterController::preview' - methods: [GET] + methods: [GET] requirements: _entity_access: 'filter_format.use' _custom_access: '\Drupal\media\Controller\MediaFilterController::formatUsesMediaEmbedFilter' diff --git a/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php b/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php index c83030f286..35717d5a76 100644 --- a/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php +++ b/core/modules/media/src/Plugin/CKEditorPlugin/DrupalMedia.php @@ -4,7 +4,6 @@ use Drupal\ckeditor\CKEditorPluginContextualInterface; use Drupal\ckeditor\CKEditorPluginCssInterface; -use Drupal\Core\Asset\LibraryDiscoveryInterface; use Drupal\Core\Extension\ModuleExtensionList; use Drupal\Core\Plugin\ContainerFactoryPluginInterface; use Symfony\Component\DependencyInjection\ContainerInterface; @@ -33,13 +32,6 @@ class DrupalMedia extends PluginBase implements ContainerFactoryPluginInterface, */ protected $moduleExtensionList; - /** - * The library discovery service. - * - * @var \Drupal\Core\Asset\LibraryDiscoveryInterface - */ - protected $libraryDiscovery; - /** * Constructs a new DrupalMedia plugin object. * @@ -51,13 +43,10 @@ class DrupalMedia extends PluginBase implements ContainerFactoryPluginInterface, * The plugin implementation definition. * @param \Drupal\Core\Extension\ModuleExtensionList $extension_list_module * The module extension list. - * @param \Drupal\Core\Asset\LibraryDiscoveryInterface $library_discovery - * The library discovery service. */ - public function __construct(array $configuration, $plugin_id, $plugin_definition, ModuleExtensionList $extension_list_module, LibraryDiscoveryInterface $library_discovery) { + public function __construct(array $configuration, $plugin_id, $plugin_definition, ModuleExtensionList $extension_list_module) { parent::__construct($configuration, $plugin_id, $plugin_definition); $this->moduleExtensionList = $extension_list_module; - $this->libraryDiscovery = $library_discovery; } /** @@ -68,8 +57,7 @@ public static function create(ContainerInterface $container, array $configuratio $configuration, $plugin_id, $plugin_definition, - $container->get('extension.list.module'), - $container->get('library.discovery') + $container->get('extension.list.module') ); } @@ -92,6 +80,8 @@ public function getDependencies(Editor $editor) { */ public function getLibraries(Editor $editor) { return [ + 'core/jquery', + 'core/drupal', 'core/drupal.ajax', ]; } @@ -127,20 +117,14 @@ public function isEnabled(Editor $editor) { /** * {@inheritdoc} * - * @todo Generalize this in https://www.drupal.org/project/drupal/issues/3072063 + * @todo Improve this in https://www.drupal.org/project/drupal/issues/3072063 */ public function getCssFiles(Editor $editor) { - $files = [ + return [ + $this->moduleExtensionList->getPath('media') . '/css/filter.media_embed.css', $this->moduleExtensionList->getPath('media') . '/css/plugins/drupalmedia/ckeditor.drupalmedia.css', + $this->moduleExtensionList->getPath('system') . '/css/components/hidden.module.css', ]; - // Get current version of 'hidden.module.css', taking into account module - // and theme overrides. - $library = $this->libraryDiscovery->getLibraryByName('system', 'base'); - foreach (preg_grep('/hidden\.module\.css$/', array_column($library['css'], 'data')) as $file) { - $files[] = $file; - break; - } - return $files; } } diff --git a/core/modules/media/src/Plugin/Filter/MediaEmbed.php b/core/modules/media/src/Plugin/Filter/MediaEmbed.php index ca9a034118..3145258cba 100644 --- a/core/modules/media/src/Plugin/Filter/MediaEmbed.php +++ b/core/modules/media/src/Plugin/Filter/MediaEmbed.php @@ -218,6 +218,11 @@ protected function renderMissingMediaIndicator() { '#type' => 'html_tag', '#tag' => 'div', '#value' => $this->t('The referenced media source is missing and needs to be re-embedded.'), + '#attached' => [ + 'library' => [ + 'media/media_embed', + ], + ], '#attributes' => [ 'class' => [ 'media-embed-error', @@ -279,9 +284,10 @@ public function process($text, $langcode) { // at least the caption and visual structure won't get lost. foreach ($node->attributes as $attribute) { if ($attribute->nodeName == 'class') { - // We don't want to overwrite existing class of the embed (or the - // missing media indicator), but we need to merge in classes such as - // those added by filter_align in order for those filters to function + // We don't want to overwrite the existing CSS class of the embedded + // media (or if the media entity can't be loaded, the missing media + // indicator). But, we need to merge in CSS classes added by other + // filters, such as filter_align, in order for those filters to work // properly. $build['#attributes']['class'] = array_unique(array_merge($build['#attributes']['class'], explode(' ', $attribute->nodeValue))); } diff --git a/core/themes/classy/classy.libraries.yml b/core/themes/classy/classy.libraries.yml index 4597badff5..f970f86b15 100644 --- a/core/themes/classy/classy.libraries.yml +++ b/core/themes/classy/classy.libraries.yml @@ -68,12 +68,6 @@ indented: component: css/components/indented.css: {} -media_embed_error: - version: VERSION - css: - component: - css/components/media-embed.css: { weight: -10 } - messages: version: VERSION css: diff --git a/core/themes/stable/css/media/filter.media_embed.css b/core/themes/stable/css/media/filter.media_embed.css new file mode 100644 index 0000000000..9842664516 --- /dev/null +++ b/core/themes/stable/css/media/filter.media_embed.css @@ -0,0 +1,34 @@ +/** + * @file + * Media Embed filter: default styling for media embed errors. + */ + +/** + * The caption filter's styling overrides ours, so add a more specific selector to account for that. + */ +.media-embed-error, +.caption > .media-embed-error { + background-color: #ebebeb; + background-image: url(../../images/media/icons/no-thumbnail.png); + background-repeat: no-repeat; + background-position: center top; + padding: 100px 20px 20px; + background-size: 100px 100px; + max-width: 200px; + text-align: center; +} + +.media-embed-error.align-left { + margin-right: 1em; + margin-bottom: 1em; +} + +.media-embed-error.align-right { + margin-left: 1em; + margin-bottom: 1em; +} + +.media-embed-error.align-center { + margin-top: 1em; + margin-bottom: 1em; +} diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml index 91deed83a2..2d2aa148c5 100644 --- a/core/themes/stable/stable.info.yml +++ b/core/themes/stable/stable.info.yml @@ -158,6 +158,11 @@ libraries-override: component: css/oembed.frame.css: css/media/oembed.frame.css + media/media_embed: + css: + component: + css/filter.media_embed.css: css/media/filter.media_embed.css + menu_ui/drupal.menu_ui.adminforms: css: theme: