diff -u b/core/modules/editor/src/Form/EditorImageDialog.php b/core/modules/editor/src/Form/EditorImageDialog.php
--- b/core/modules/editor/src/Form/EditorImageDialog.php
+++ b/core/modules/editor/src/Form/EditorImageDialog.php
@@ -209,8 +209,8 @@
       // Transform absolute image URLs to relative image URLs: prevent problems
       // on multisite set-ups and prevent mixed content errors.
       $file_url = file_url_transform_relative($file_url);
-      if (!$form_state->getValue(['attributes', 'src'])) {
-        $form_state->setValue(['attributes', 'src'], $file_url);
+      if (!$form_state->getValue(array('attributes', 'src'))) {
+        $form_state->setValue(array('attributes', 'src'), $file_url);
       }
       $form_state->setValue(array('attributes', 'data-entity-uuid'), $file->uuid());
       $form_state->setValue(array('attributes', 'data-entity-type'), 'file');
diff -u b/core/modules/image/image.install b/core/modules/image/image.install
--- b/core/modules/image/image.install
+++ b/core/modules/image/image.install
@@ -73,7 +73,7 @@
       continue;
     }
     $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
-    $matches = [];
+    $matches = array();
     if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
       $new_attributes = array_filter(explode(' ', $matches[1]));
       $new_attributes[] = 'data-image-style';
diff -u b/core/modules/image/image.module b/core/modules/image/image.module
--- b/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -5,19 +5,12 @@
  * Exposes global functionality for creating image styles.
  */
 
-use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Entity\EntityInterface;
-use Drupal\filter\Entity\FilterFormat;
-use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Image\ImageInterface;
-use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\file\Entity\File;
-use Drupal\file\FileInterface;
 use Drupal\field\FieldStorageConfigInterface;
 use Drupal\field\FieldConfigInterface;
 use Drupal\image\Entity\ImageStyle;
-use Drupal\image\ImageStyleInterface;
 
 /**
  * Image style constant for user presets in the database.
@@ -68,20 +61,20 @@
 function image_help($route_name, RouteMatchInterface $route_match) {
   switch ($route_name) {
     case 'help.page.image':
-      $field_ui_url = \Drupal::moduleHandler()->moduleExists('field_ui') ? \Drupal::url('help.page', ['name' => 'field_ui']) : '#';
+      $field_ui_url = \Drupal::moduleHandler()->moduleExists('field_ui') ? \Drupal::url('help.page', array('name' => 'field_ui')) : '#';
 
       $output = '';
       $output .= '<h3>' . t('About') . '</h3>';
-      $output .= '<p>' . t('The Image module allows you to create fields that contain image files and to configure <a href=":image_styles">Image styles</a> that can be used to manipulate the display of images. See the <a href=":field">Field module help</a> and the <a href=":field_ui">Field UI help</a> pages for terminology and general information on entities, fields, and how to create and manage fields. For more information, see the <a href=":image_documentation">online documentation for the Image module</a>.', [':image_styles' => \Drupal::url('entity.image_style.collection'), ':field' => \Drupal::url('help.page', ['name' => 'field']), ':field_ui' => $field_ui_url, ':image_documentation' => 'https://www.drupal.org/documentation/modules/image']) . '</p>';
+      $output .= '<p>' . t('The Image module allows you to create fields that contain image files and to configure <a href=":image_styles">Image styles</a> that can be used to manipulate the display of images. See the <a href=":field">Field module help</a> and the <a href=":field_ui">Field UI help</a> pages for terminology and general information on entities, fields, and how to create and manage fields. For more information, see the <a href=":image_documentation">online documentation for the Image module</a>.', array(':image_styles' => \Drupal::url('entity.image_style.collection'), ':field' => \Drupal::url('help.page', array('name' => 'field')), ':field_ui' => $field_ui_url, ':image_documentation' => 'https://www.drupal.org/documentation/modules/image')) . '</p>';
       $output .= '<h3>' . t('Uses') . '</h3>';
       $output .= '<dt>' . t('Defining image styles') . '</dt>';
-      $output .= '<dd>' . t('The concept of image styles is that you can upload a single image but display it in several ways; each display variation, or <em>image style</em>, is the result of applying one or more <em>effects</em> to the original image. As an example, you might upload a high-resolution image with a 4:3 aspect ratio, and display it scaled down, square cropped, or black-and-white (or any combination of these effects). The Image module provides a way to do this efficiently: you configure an image style with the desired effects on the <a href=":image">Image styles page</a>, and the first time a particular image is requested in that style, the effects are applied. The resulting image is saved, and the next time that same style is requested, the saved image is retrieved without the need to recalculate the effects. Drupal core provides several effects that you can use to define styles; others may be provided by contributed modules.', [':image' => \Drupal::url('entity.image_style.collection')]);
+      $output .= '<dd>' . t('The concept of image styles is that you can upload a single image but display it in several ways; each display variation, or <em>image style</em>, is the result of applying one or more <em>effects</em> to the original image. As an example, you might upload a high-resolution image with a 4:3 aspect ratio, and display it scaled down, square cropped, or black-and-white (or any combination of these effects). The Image module provides a way to do this efficiently: you configure an image style with the desired effects on the <a href=":image">Image styles page</a>, and the first time a particular image is requested in that style, the effects are applied. The resulting image is saved, and the next time that same style is requested, the saved image is retrieved without the need to recalculate the effects. Drupal core provides several effects that you can use to define styles; others may be provided by contributed modules.', array(':image' => \Drupal::url('entity.image_style.collection')));
       $output .= '<dt>' . t('Naming image styles') . '</dt>';
       $output .= '<dd>' . t('When you define an image style, you will need to choose a displayed name and a machine name. The displayed name is shown in administrative pages, and the machine name is used to generate the URL for accessing an image processed in that style. There are two common approaches to naming image styles: either based on the effects being applied (for example, <em>Square 85x85</em>), or based on where you plan to use it (for example, <em>Profile picture</em>).') . '</dd>';
       $output .= '<dt>' . t('Configuring image fields') . '</dt>';
       $output .= '<dd>' . t('A few of the settings for image fields are defined once when you create the field and cannot be changed later; these include the choice of public or private file storage and the number of images that can be stored in the field. The rest of the settings can be edited later; these settings include the field label, help text, allowed file extensions, image resolution restrictions, and the subdirectory in the public or private file storage where the images will be stored. The editable settings can also have different values for different entity sub-types; for instance, if your image field is used on both Page and Article content types, you can store the files in a different subdirectory for the two content types.') . '</dd>';
       $output .= '<dd>' . t('For accessibility and search engine optimization, all images that convey meaning on web sites should have alternate text. Drupal also allows entry of title text for images, but it can lead to confusion for screen reader users and its use is not recommended. Image fields can be configured so that alternate and title text fields are enabled or disabled; if enabled, the fields can be set to be required. The recommended setting is to enable and require alternate text and disable title text.') . '</dd>';
-      $output .= '<dd>' . t('When you create an image field, you will need to choose whether the uploaded images will be stored in the public or private file directory defined in your settings.php file and shown on the <a href=":file-system">File system page</a>. This choice cannot be changed later. You can also configure your field to store files in a subdirectory of the public or private directory; this setting can be changed later and can be different for each entity sub-type using the field. For more information on file storage, see the <a href=":system-help">System module help page</a>.', [':file-system' => \Drupal::url('system.file_system_settings'), ':system-help' => \Drupal::url('help.page', ['name' => 'system'])]) . '</dd>';
+      $output .= '<dd>' . t('When you create an image field, you will need to choose whether the uploaded images will be stored in the public or private file directory defined in your settings.php file and shown on the <a href=":file-system">File system page</a>. This choice cannot be changed later. You can also configure your field to store files in a subdirectory of the public or private directory; this setting can be changed later and can be different for each entity sub-type using the field. For more information on file storage, see the <a href=":system-help">System module help page</a>.', array(':file-system' => \Drupal::url('system.file_system_settings'), ':system-help' => \Drupal::url('help.page', array('name' => 'system')))) . '</dd>';
       $output .= '<dd>' . t('The maximum file size that can be uploaded is limited by PHP settings of the server, but you can restrict it further by configuring a <em>Maximum upload size</em> in the field settings (this setting can be changed later). The maximum file size, either from PHP server settings or field configuration, is automatically displayed to users in the help text of the image field.') . '</dd>';
       $output .= '<dd>' . t('You can also configure a minimum and/or maximum resolution for uploaded images. Images that are too small will be rejected. Images that are to large will be resized. During the resizing the <a href="http://wikipedia.org/wiki/Exchangeable_image_file_format">EXIF data</a> in the image will be lost.') . '</dd>';
       $output .= '<dd>' . t('You can also configure a default image that will be used if no image is uploaded in an image field. This default can be defined for all instances of the field in the field storage settings when you create a field, and the setting can be overridden for each entity sub-type that uses the field.') . '</dd>';
@@ -108,9 +101,9 @@
  * Implements hook_theme().
  */
 function image_theme() {
-  return [
+  return array(
     // Theme functions in image.module.
-    'image_style' => [
+    'image_style' => array(
       // HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft
       // allows the alt attribute to be omitted in some cases. Therefore,
       // default the alt attribute to an empty string, but allow code using
@@ -123,49 +116,49 @@
       // - http://dev.w3.org/html5/spec/Overview.html#alt
       // The title attribute is optional in all cases, so it is omitted by
       // default.
-      'variables' => [
+      'variables' => array(
         'style_name' => NULL,
         'uri' => NULL,
         'width' => NULL,
         'height' => NULL,
         'alt' => '',
         'title' => NULL,
-        'attributes' => [],
-      ],
-    ],
+        'attributes' => array(),
+      ),
+    ),
 
     // Theme functions in image.admin.inc.
-    'image_style_preview' => [
-      'variables' => ['style' => NULL],
+    'image_style_preview' => array(
+      'variables' => array('style' => NULL),
       'file' => 'image.admin.inc',
-    ],
-    'image_anchor' => [
+    ),
+    'image_anchor' => array(
       'render element' => 'element',
       'file' => 'image.admin.inc',
-    ],
-    'image_resize_summary' => [
-      'variables' => ['data' => NULL, 'effect' => []],
-    ],
-    'image_scale_summary' => [
-      'variables' => ['data' => NULL, 'effect' => []],
-    ],
-    'image_crop_summary' => [
-      'variables' => ['data' => NULL, 'effect' => []],
-    ],
-    'image_rotate_summary' => [
-      'variables' => ['data' => NULL, 'effect' => []],
-    ],
+    ),
+    'image_resize_summary' => array(
+      'variables' => array('data' => NULL, 'effect' => array()),
+    ),
+    'image_scale_summary' => array(
+      'variables' => array('data' => NULL, 'effect' => array()),
+    ),
+    'image_crop_summary' => array(
+      'variables' => array('data' => NULL, 'effect' => array()),
+    ),
+    'image_rotate_summary' => array(
+      'variables' => array('data' => NULL, 'effect' => array()),
+    ),
 
     // Theme functions in image.field.inc.
-    'image_widget' => [
+    'image_widget' => array(
       'render element' => 'element',
       'file' => 'image.field.inc',
-    ],
-    'image_formatter' => [
-      'variables' => ['item' => NULL, 'item_attributes' => NULL, 'url' => NULL, 'image_style' => NULL],
+    ),
+    'image_formatter' => array(
+      'variables' => array('item' => NULL, 'item_attributes' => NULL, 'url' => NULL, 'image_style' => NULL),
       'file' => 'image.field.inc',
-    ],
-  ];
+    ),
+  );
 }
 
 /**
@@ -190,17 +183,17 @@
     $image = \Drupal::service('image.factory')->get($uri);
     if ($image->isValid()) {
       // Check the permissions of the original to grant access to this image.
-      $headers = \Drupal::moduleHandler()->invokeAll('file_download', [$original_uri]);
+      $headers = \Drupal::moduleHandler()->invokeAll('file_download', array($original_uri));
       // Confirm there's at least one module granting access and none denying access.
       if (!empty($headers) && !in_array(-1, $headers)) {
-        return [
+        return array(
           // Send headers describing the image's size, and MIME-type.
           'Content-Type' => $image->getMimeType(),
           'Content-Length' => $image->getFileSize(),
           // By not explicitly setting them here, this uses normal Drupal
           // Expires, Cache-Control and ETag headers to prevent proxy or
           // browser caching of private images.
-        ];
+        );
       }
     }
     return -1;
@@ -246,14 +239,10 @@
  */
 function image_style_options($include_empty = TRUE) {
   $styles = ImageStyle::loadMultiple();
-  $options = [];
+  $options = array();
   if ($include_empty && !empty($styles)) {
     $options[''] = t('- None -');
   }
-  /**
-   * @var string $name
-   * @var \Drupal\image\ImageStyleInterface $style
-   */
   foreach ($styles as $name => $style) {
     $options[$name] = $style->label();
   }
@@ -294,21 +283,21 @@
   $style = ImageStyle::load($variables['style_name']);
 
   // Determine the dimensions of the styled image.
-  $dimensions = [
+  $dimensions = array(
     'width' => $variables['width'],
     'height' => $variables['height'],
-  ];
+  );
 
   $style->transformDimensions($dimensions, $variables['uri']);
 
-  $variables['image'] = [
+  $variables['image'] = array(
     '#theme' => 'image',
     '#width' => $dimensions['width'],
     '#height' => $dimensions['height'],
     '#attributes' => $variables['attributes'],
     '#uri' => $style->buildUrl($variables['uri']),
     '#style_name' => $variables['style_name'],
-  ];
+  );
 
   if (isset($variables['alt']) || array_key_exists('alt', $variables)) {
     $variables['image']['#alt'] = $variables['alt'];
@@ -535,49 +524,49 @@
     $image_style_options = image_style_options(FALSE);
 
     // Create a form item for image style selection.
-    $form['image_style'] = [
+    $form['image_style'] = array(
       '#type' => 'item',
       '#field_prefix' => '<div class="container-inline clearfix">',
       '#field_suffix' => '</div>',
-    ];
+    );
 
     // Add a select element to choose an image style.
-    $form['image_style']['selection'] = [
+    $form['image_style']['selection'] = array(
       '#title' => t('Image style'),
       '#type' => 'select',
       '#default_value' => isset($image_element['data-image-style']) ? $image_element['data-image-style'] : array_keys($image_style_options)[0],
       '#options' => $image_style_options,
       '#required' => TRUE,
-      '#wrapper_attributes' => ['class' => ['container-inline']],
-      '#attributes' => ['class' => ['container-inline']],
-      '#parents' =>['attributes', 'data-image-style'],
-    ];
+      '#wrapper_attributes' => array('class' => array('container-inline')),
+      '#attributes' => array('class' => array('container-inline')),
+      '#parents' =>array('attributes', 'data-image-style'),
+    );
 
     // Add a checkbox to toggle preview of the image style.
-    $form['image_style']['preview_toggle'] = [
+    $form['image_style']['preview_toggle'] = array(
       '#type' => 'checkbox',
       '#title' => t('Show preview'),
-    ];
+    );
 
     // Create a set of image style previews that display if toggled on.
     $image_styles = ImageStyle::loadMultiple();
     /** @var \Drupal\image\ImageStyleInterface $image_style */
     foreach ($image_styles as $image_style_id => $image_style) {
-      $preview_arguments = [
+      $preview_arguments = array(
         '#theme' => 'image_style_preview',
         '#style' => $image_style,
-      ];
-      $form['image_style']['preview_' . $image_style_id] = [
+      );
+      $form['image_style']['preview_' . $image_style_id] = array(
         '#type' => 'fieldset',
-        '#title' => t('Preview of %image-style image style', ['%image-style' => $image_style->label()]),
+        '#title' => t('Preview of %image-style image style', array('%image-style' => $image_style->label())),
         '#markup' => \Drupal::service('renderer')->render($preview_arguments),
-        '#states' => [
+        '#states' => array(
           'visible' => [
-            ':input[name="image_style[preview_toggle]"]' => ['checked' => TRUE],
-            ':input[name="attributes[data-image-style]"]' => ['value' => $image_style_id],
+            ':input[name="image_style[preview_toggle]"]' => array('checked' => TRUE),
+            ':input[name="attributes[data-image-style]"]' => array('value' => $image_style_id),
           ],
-        ],
-      ];
+        ),
+      );
     }
 
     // Attach the image admin library.
@@ -622,10 +611,10 @@
 
     if ($image->isValid()) {
       // Get the original width and height of the image.
-      $dimensions = [
+      $dimensions = array(
         'width' => $image->getWidth(),
         'height' => $image->getHeight()
-      ];
+      );
 
       // Transform the 'width' and 'height' dimensions of the image based on the
       // image style.
reverted:
--- b/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * @file
- * Drupal Responsive Image Style plugin.
- *
- * This alters the existing CKEditor image2 widget plugin, which is already
- * altered by the Drupal Image plugin, to data-responsive-image-style attribute
- * to be set.
- *
- * @ignore
- */
-
-(function (CKEDITOR) {
-
-  'use strict';
-
-  CKEDITOR.plugins.add('drupalresponsiveimagestyle', {
-    requires: 'drupalimage',
-
-    beforeInit: function (editor) {
-      // Override the image2 widget definition to handle the additional
-      // data-responsive-image-style attributes.
-      editor.on('widgetDefinition', function (event) {
-        var widgetDefinition = event.data;
-        if (widgetDefinition.name !== 'image') {
-          return;
-        }
-        // Override default features definitions for drupalresponsiveimagestyle.
-        CKEDITOR.tools.extend(widgetDefinition.features, {
-          responsiveimage: {
-            requiredContent: 'img[data-responsive-image-style]'
-          }
-        }, true);
-
-        // Override requiredContent & allowedContent.
-        var requiredContent = widgetDefinition.requiredContent.getDefinition();
-        requiredContent.attributes['data-responsive-image-style'] = '';
-        widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
-        widgetDefinition.allowedContent.img.attributes += ',!data-responsive-image-style';
-
-        // Override downcast().
-        var originalDowncast = widgetDefinition.downcast;
-        widgetDefinition.downcast = function (element) {
-          var img = originalDowncast.call(this, element);
-          if (!img) {
-            img = findElementByName(element, 'img');
-          }
-          img.attributes['data-responsive-image-style'] = this.data['data-responsive-image-style'];
-          return img;
-        };
-
-        // Override upcast().
-        var originalUpcast = widgetDefinition.upcast;
-        widgetDefinition.upcast = function (element, data) {
-          if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
-            return;
-          }
-          // Don't initialize on pasted fake objects.
-          else if (element.attributes['data-cke-realelement']) {
-            return;
-          }
-
-          // Parse the data-responsive-image-style attribute.
-          data['data-responsive-image-style'] = element.attributes['data-responsive-image-style'];
-
-          // Upcast after parsing so correct element attributes are parsed.
-          element = originalUpcast.call(this, element, data);
-
-          return element;
-        };
-
-        // Protected; keys of the widget data to be sent to the Drupal dialog.
-        // Append to the values defined by the drupalimage plugin.
-        // @see core/modules/ckeditor/js/plugins/drupalimage/plugin.js
-        CKEDITOR.tools.extend(widgetDefinition._mapDataToDialog, {
-          'data-responsive-image-style': 'data-responsive-image-style'
-        });
-      // Low priority to ensure drupalimage's event handler runs first.
-      }, null, null, 20);
-    }
-  });
-
-  /**
-   * Finds an element by its name.
-   *
-   * Function will check first the passed element itself and then all its
-   * children in DFS order.
-   *
-   * @param {CKEDITOR.htmlParser.element} element
-   *   The element to search.
-   * @param {string} name
-   *   The element name to search for.
-   *
-   * @return {?CKEDITOR.htmlParser.element}
-   *   The found element, or null.
-   */
-  function findElementByName(element, name) {
-    if (element.name === name) {
-      return element;
-    }
-
-    var found = null;
-    element.forEach(function (el) {
-      if (el.name === name) {
-        found = el;
-        // Stop here.
-        return false;
-      }
-    }, CKEDITOR.NODE_ELEMENT);
-    return found;
-  }
-
-})(CKEDITOR);
reverted:
--- b/core/modules/responsive_image/responsive_image.install
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * @file
- * Install, update and uninstall functions for the responsive image module.
- */
-
-/**
- * Add allowed attributes to existing html filters.
- */
-function responsive_image_update_8001() {
-  $config_factory = \Drupal::configFactory();
-  foreach ($config_factory->listAll('filter.format') as $name) {
-    $config = $config_factory->getEditable($name);
-    if (!$config->get('filters.filter_responsive_image_style.status')) {
-      continue;
-    }
-    $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
-    $matches = [];
-    if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
-      $new_attributes = array_filter(explode(' ', $matches[1]));
-      $new_attributes[] = 'data-responsive-image-style';
-      $allowed_html = preg_replace('/<img([^>]*)>/', '<img ' . implode(' ', array_unique($new_attributes)) . '>', $allowed_html);
-      $config->set('filters.filter_html.settings.allowed_html', $allowed_html);
-      $config->save();
-    }
-  }
-}
reverted:
--- b/core/modules/responsive_image/responsive_image.module
+++ a/core/modules/responsive_image/responsive_image.module
@@ -5,20 +5,14 @@
  * Responsive image display formatter for image fields.
  */
 
-use Drupal\Component\Utility\Unicode;
-use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Image\ImageInterface;
 use Drupal\Core\Template\Attribute;
 use Drupal\Core\Logger\RfcLogLevel;
+use Drupal\Component\Utility\Unicode;
-use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\breakpoint\BreakpointInterface;
-use Drupal\filter\Entity\FilterFormat;
-use Drupal\file\Entity\File;
-use Drupal\file\FileInterface;
 use Drupal\image\Entity\ImageStyle;
 use Drupal\responsive_image\Entity\ResponsiveImageStyle;
+use Drupal\Core\Image\ImageInterface;
+use Drupal\breakpoint\BreakpointInterface;
-use Drupal\responsive_image\ResponsiveImageStyleInterface;
 
 /**
  * The machine name for the empty image breakpoint image style option.
@@ -34,26 +28,25 @@
     case 'help.page.responsive_image':
       $output = '';
       $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('The Responsive Image module provides an image formatter that allows browsers to select which image file to display based on media queries or which image file types the browser supports, using the HTML 5 picture and source elements and/or the sizes, srcset and type attributes. For more information, see the <a href=":responsive_image">online documentation for the Responsive Image module</a>.', array( ':responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image')) . '</p>';
-      $output .= '<p>' . t('The Responsive Image module provides an image formatter that allows browsers to select which image file to display based on media queries or which image file types the browser supports, using the HTML 5 picture and source elements and/or the sizes, srcset and type attributes. For more information, see the <a href=":responsive_image">online documentation for the Responsive Image module</a>.', [':responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image']) . '</p>';
       $output .= '<h3>' . t('Uses') . '</h3>';
       $output .= '<dl>';
       $output .= '<dt>' . t('Defining responsive image styles') . '</dt>';
+      $output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', array(':responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection'))) . '</dd>';
-      $output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', [':responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection')]) . '</dd>';
       $output .= '<dl>';
       $output .= '<dt>' . t('Fallback image style') . '</dt>';
       $output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. Because the responsive images module uses the Picturefill library so that responsive images can work in older browsers, the fallback image should only appear on a site if an error occurs.)</dd>');
       $output .= '<dt>' . t('Breakpoint groups: viewport sizing vs art direction') . '</dt>';
+      $output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', array(':breakpoint_help' => \Drupal::url('help.page', array('name' => 'breakpoint')))) . '</dd>';
-      $output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', [':breakpoint_help' => \Drupal::url('help.page', ['name' => 'breakpoint'])]) . '</dd>';
       $output .= '<dt>' . t('Breakpoint settings: sizes vs image styles') . '</dt>';
       $output .= '<dd>' . t('While you have the option to provide only one image style per breakpoint, the sizes option allows you to provide more options to browsers as to which image file it can display, even when using multiple breakpoints for art direction. Breakpoints are defined in the configuration files of the theme.</dd>');
       $output .= '<dt>' . t('Sizes field') . '</dt>';
       $output .= '<dd>' . t('Once the sizes option is selected, you can let the browser know the size of this image in relation to the site layout, using the <em>Sizes</em> field. For a hero image that always fills the entire screen, you could simply enter 100vw, which means 100% of the viewport width. For an image that fills 90% of the screen for small viewports, but only fills 40% of the screen when the viewport is larger than 40em (typically 640px), you could enter "(min-width: 40em) 40vw, 90vw" in the Sizes field. The last item in the comma-separated list is the smallest viewport size: other items in the comma-separated list should have a media condition paired with an image width. <em>Media conditions</em> are similar to a media query, often a min-width paired with a viewport width using em or px units: e.g. (min-width: 640px) or (min-width: 40em). This is paired with the <em>image width</em> at that viewport size using px, em or vw units. The vw unit is viewport width and is used instead of a percentage because the percentage always refers to the width of the entire viewport.</dd>');
       $output .= '<dt>' . t('Image styles for sizes') . '</dt>';
+      $output .= '<dd>' . t('Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the <a href=":image_styles">Image styles page</a> that is provided by the <a href=":image_help">Image module</a>.', array(':image_styles' => \Drupal::url('entity.image_style.collection'), ':image_help' => \Drupal::url('help.page', array('name' => 'image')))) . '</dd>';
-      $output .= '<dd>' . t('Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the <a href=":image_styles">Image styles page</a> that is provided by the <a href=":image_help">Image module</a>.', [':image_styles' => \Drupal::url('entity.image_style.collection'), ':image_help' => \Drupal::url('help.page', ['name' => 'image'])]) . '</dd>';
       $output .= '</dl></dd>';
       $output .= '<dt>' . t('Using responsive image styles in Image fields') . '</dt>';
+      $output .= '<dd>' . t('After defining responsive image styles, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format <em>Responsive image</em>, click the Edit icon, and select one of the responsive image styles that you have created. For general information on how to manage fields and their display see the <a href=":field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href=":field_help">Field module help page</a>.', array(':field_ui' => (\Drupal::moduleHandler()->moduleExists('field_ui')) ? \Drupal::url('help.page', array('name' => 'field_ui')) : '#', ':field_help' => \Drupal::url('help.page', array('name' => 'field')))) . '</dd>';
-      $output .= '<dd>' . t('After defining responsive image styles, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format <em>Responsive image</em>, click the Edit icon, and select one of the responsive image styles that you have created. For general information on how to manage fields and their display see the <a href=":field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href=":field_help">Field module help page</a>.', [
-          ':field_ui' => (\Drupal::moduleHandler()->moduleExists('field_ui')) ? \Drupal::url('help.page', ['name' => 'field_ui']) : '#', ':field_help' => \Drupal::url('help.page', ['name' => 'field'])]) . '</dd>';
       $output .= '</dl>';
       return $output;
 
@@ -66,25 +59,25 @@
  * Implements hook_theme().
  */
 function responsive_image_theme() {
+  return array(
+    'responsive_image' => array(
+      'variables' => array(
-  return [
-    'responsive_image' => [
-      'variables' => [
         'uri' => NULL,
+        'attributes' => array(),
+        'responsive_image_style_id' => array(),
-        'attributes' => [],
-        'responsive_image_style_id' => [],
         'height' => NULL,
         'width' => NULL,
+      ),
+    ),
+    'responsive_image_formatter' => array(
+      'variables' => array(
-      ],
-    ],
-    'responsive_image_formatter' => [
-      'variables' => [
         'item' => NULL,
         'item_attributes' => NULL,
         'url' => NULL,
         'responsive_image_style_id' => NULL,
+      ),
+    ),
+  );
-      ],
-    ],
-  ];
 }
 
 /**
@@ -105,18 +98,18 @@
   // provided in the responsive image formatter.
   $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
   if ($responsive_image_style) {
+    $variables['responsive_image'] = array(
-    $variables['responsive_image'] = [
       '#type' => 'responsive_image',
       '#responsive_image_style_id' => $variables['responsive_image_style_id'],
+    );
-    ];
   }
   else {
+    $variables['responsive_image'] = array(
-    $variables['responsive_image'] = [
       '#theme' => 'image',
+    );
-    ];
   }
   $item = $variables['item'];
+  $attributes = array();
-  $attributes = [];
   // Do not output an empty 'title' attribute.
   if (Unicode::strlen($item->title) != 0) {
     $attributes['title'] = $item->title;
@@ -133,7 +126,7 @@
     $variables['responsive_image']['#uri'] = $item->uri;
   }
 
+  foreach (array('width', 'height') as $key) {
-  foreach (['width', 'height'] as $key) {
     $variables['responsive_image']["#$key"] = $item->$key;
   }
   $variables['responsive_image']['#attributes'] = $attributes;
@@ -197,10 +190,10 @@
         $variables['attributes'][$attribute] = $value;
       }
     }
+    $variables['img_element'] = array(
-    $variables['img_element'] = [
       '#theme' => 'image',
       '#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+    );
-    ];
   }
   else {
     $variables['output_image_tag'] = FALSE;
@@ -208,14 +201,14 @@
     // unnecessary preloading of images in older browsers. See
     // http://scottjehl.github.io/picturefill/#using-picture and
     // http://scottjehl.github.io/picturefill/#gotchas for more information.
+    $variables['img_element'] = array(
-    $variables['img_element'] = [
       '#theme' => 'image',
+      '#srcset' => array(
+        array(
-      '#srcset' => [
-        [
           'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+        ),
+      ),
+    );
-        ],
-      ],
-    ];
   }
 
   if (isset($variables['attributes'])) {
@@ -246,25 +239,25 @@
  * can contain image style mappings of mixed types (both 'image_style' and
  * 'sizes'). For example:
  * @code
+ * $responsive_img_style = ResponsiveImageStyle::create(array(
- * $responsive_img_style = ResponsiveImageStyle::create([
  *   'id' => 'style_one',
  *   'label' => 'Style One',
  *   'breakpoint_group' => 'responsive_image_test_module',
+ * ));
+ * $responsive_img_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
- * ]);
- * $responsive_img_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
  *   'image_mapping_type' => 'image_style',
  *   'image_mapping' => 'thumbnail',
+ * ))
+ * ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array(
- * ])
- * ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
  *   'image_mapping_type' => 'sizes',
+ *   'image_mapping' => array(
- *   'image_mapping' => [
  *     'sizes' => '(min-width: 700px) 700px, 100vw',
+ *     'sizes_image_styles' => array(
- *     'sizes_image_styles' => [
  *       'large' => 'large',
  *       'medium' => 'medium',
+ *     ),
+ *   ),
+ * ))
- *     ],
- *   ],
- * ])
  * ->save();
  * @endcode
  * The above responsive image style will result in a <picture> tag like this:
@@ -374,9 +367,9 @@
   $width = isset($variables['width']) && !empty($variables['width']) ? $variables['width'] : $image->getWidth();
   $height = isset($variables['height']) && !empty($variables['height']) ? $variables['height'] : $image->getHeight();
   $extension = pathinfo($image->getSource(), PATHINFO_EXTENSION);
+  $sizes = array();
+  $srcset = array();
+  $derivative_mime_types = array();
-  $sizes = [];
-  $srcset = [];
-  $derivative_mime_types = [];
   foreach ($multipliers as $multiplier => $image_style_mapping) {
     switch ($image_style_mapping['image_mapping_type']) {
       // Create a <source> tag with the 'sizes' attribute.
@@ -384,7 +377,7 @@
         // Loop through the image styles for this breakpoint and multiplier.
         foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $image_style_name) {
           // Get the dimensions.
+          $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $width, 'height' => $height), $variables['uri']);
-          $dimensions = responsive_image_get_image_dimensions($image_style_name, ['width' => $width, 'height' => $height], $variables['uri']);
           // Get MIME type.
           $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension);
           $derivative_mime_types[] = $derivative_mime_type;
@@ -420,9 +413,9 @@
   }
   // Sort the srcset from small to large image width or multiplier.
   ksort($srcset);
+  $source_attributes = new Attribute(array(
-  $source_attributes = new Attribute([
     'srcset' => implode(', ', array_unique($srcset)),
+  ));
-  ]);
   $media_query = trim($breakpoint->getMediaQuery());
   if (!empty($media_query)) {
     $source_attributes->setAttribute('media', $media_query);
@@ -455,10 +448,10 @@
 function responsive_image_get_image_dimensions($image_style_name, array $dimensions, $uri) {
   // Determine the dimensions of the styled image.
   if ($image_style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) {
+    $dimensions = array(
-    $dimensions = [
       'width' => 1,
       'height' => 1,
+    );
-    ];
   }
   elseif ($entity = ImageStyle::load($image_style_name)) {
     $entity->transformDimensions($dimensions, $uri);
@@ -519,197 +512,3 @@
     $libraries['drupal.ajax']['dependencies'][] = 'responsive_image/ajax';
   }
 }
-
-/**
- * Implements hook_form_FORM_ID_alter() for EditorImageDialog.
- *
- * Alters the image dialog form for text editor, to allow the user to select a
- * responsive image style.
- *
- * @see \Drupal\editor\Form\EditorImageDialog::buildForm()
- */
-function responsive_image_form_editor_image_dialog_alter(&$form, FormStateInterface $form_state) {
-  /** @var \Drupal\editor\Entity\Editor $editor */
-  $editor = $form_state->getBuildInfo()['args'][0];
-  $filters = $editor->getFilterFormat()->filters()->getAll();
-
-  // Alter the editor image dialog when responsive image style functionality is
-  // available.
-  if (isset($filters['filter_responsive_image_style']) && $filters['filter_responsive_image_style']->status) {
-
-    // Get the image from the form.
-    $image_element = $form_state->getStorage()['image_element'];
-
-    // Disallow the user from specifying image dimensions manually.
-    $form['dimensions']['#access'] = FALSE;
-
-    // Remove the image style selection, if it exists; it does not make sense to
-    // use FilterImageStyle when already using FilterPictureMapping!
-    if (isset($form['image_style'])) {
-      unset($form['image_style']);
-      // Remove its #validate callback as well.
-      $validators = &$form['actions']['save_modal']['#validate'];
-      $index = array_search('image_form_editor_image_dialog_validate', $validators);
-      if ($index !== FALSE) {
-        unset($validators[$index]);
-      }
-    }
-
-    // Get an array of image styles to present as options for selection.
-    $responsive_image_options = [];
-    $responsive_image_styles = ResponsiveImageStyle::loadMultiple();
-    if ($responsive_image_styles && !empty($responsive_image_styles)) {
-      /**
-       * @var string $responsive_image_style_id
-       * @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style
-       */
-      foreach ($responsive_image_styles as $responsive_image_style_id => $responsive_image_style) {
-        if ($responsive_image_style->hasImageStyleMappings()) {
-          $responsive_image_options[$responsive_image_style_id] = $responsive_image_style->label();
-        }
-      }
-    }
-    $responsive_image_style_keys = array_keys($responsive_image_options);
-
-    // Create a form item for responsive image style selection.
-    $form['responsive_image_style'] = [
-      '#type' => 'item',
-    ];
-
-    // Add a select element to choose an image style.
-    $form['responsive_image_style']['selection'] = [
-      '#title' => t('Responsive image style'),
-      '#type' => 'select',
-      '#default_value' => isset($image_element['data-responsive-image-style']) ? $image_element['data-responsive-image-style'] : $responsive_image_style_keys[0],
-      '#options' => $responsive_image_options,
-      '#required' => TRUE,
-      '#wrapper_attributes' => ['class' => ['container-inline']],
-      '#attributes' => ['class' => ['container-inline']],
-      '#parents' => ['attributes', 'data-responsive-image-style'],
-    ];
-
-    // Add a checkbox to toggle preview of the responsive image style.
-    $form['responsive_image_style']['preview_toggle'] = [
-      '#type' => 'checkbox',
-      '#title' => t('Show preview'),
-    ];
-
-    // Create a set of responsive image style previews that display if toggled
-    // on.
-    /**
-     * @var string $responsive_image_style_id
-     * @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style
-     */
-    foreach ($responsive_image_styles as $responsive_image_style_id => $responsive_image_style) {
-      if ($responsive_image_style->hasImageStyleMappings()) {
-        $preview_arguments = [
-          '#theme' => 'responsive_image',
-          '#uri' => \Drupal::config('image.settings')->get('preview_image'),
-          '#responsive_image_style_id' => $responsive_image_style_id,
-        ];
-        $form['responsive_image_style']['preview_' . $responsive_image_style_id] = [
-          '#type' => 'fieldset',
-          '#title' => t('Preview of %responsive-image-style responsive image style', ['%responsive-image-style' => $responsive_image_style->label()]),
-          '#markup' => \Drupal::service('renderer')->render($preview_arguments),
-          '#states' => [
-            'visible' => [
-              ':input[name="responsive_image_style[preview_toggle]"]' => ['checked' => TRUE],
-              ':input[name="attributes[data-responsive-image-style]"]' => ['value' => $responsive_image_style_id],
-            ],
-          ],
-        ];
-      }
-    }
-
-    // Validate that the image shown in the text editor matches the responsive
-    // image style.
-    $form['actions']['save_modal']['#validate'][] = 'responsive_image_form_editor_image_dialog_validate';
-  }
-}
-
-/**
- * Form validation handler for EditorImageDialog.
- *
- * Ensures the image shown in the text editor matches the chosen picture mapping
- * at the smallest breakpoint.
- *
- * @see \Drupal\editor\Form\EditorImageDialog::buildForm()
- * @see \Drupal\editor\Form\EditorImageDialog::validateForm()
- * @see responsive_image_form_editor_image_dialog_alter()
- */
-function responsive_image_form_editor_image_dialog_validate(array &$form, FormStateInterface $form_state) {
-  if (!empty($form_state->getValue('fid')[0])) {
-
-    // Get the responsive image style attributes.
-    $attributes = &$form_state->getValue('attributes');
-
-    // Remove data-image-style if present.
-    if (array_key_exists('data-image-style', $attributes)) {
-      unset($attributes['data-image-style']);
-    }
-
-    /** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */
-    $responsive_image_style = \Drupal::service('entity_type.manager')->getStorage('responsive_image_style')->load($attributes['data-responsive-image-style']);
-
-    /** @var \Drupal\file\FileInterface $file */
-    $file = File::load($form_state->getValue('fid')[0]);
-
-    // Get the URI of the image from the file.
-    $uri = $file->getFileUri();
-
-    /** @var \Drupal\Core\Image\ImageInterface $image */
-    $image = \Drupal::service('image.factory')->get($uri);
-
-    if ($image->isValid()) {
-      // Get the original width and height of the image.
-      $dimensions = [
-        'width' => $image->getWidth(),
-        'height' => $image->getHeight(),
-      ];
-    }
-    else {
-      // Use default values if the image is not valid.
-      $dimensions = [
-        'width' => 1000,
-        'height' => 1000,
-      ];
-    }
-
-    // Select the first (i.e. smallest) breakpoint and the 1x multiplier. We
-    // choose to show the image in the editor as if it were being viewed in the
-    // narrowest viewport, so that when the user starts to edit this content
-    // again on a mobile device, it will work fine.
-    $breakpoint_machine_names = array_keys($responsive_image_style->getKeyedImageStyleMappings());
-    $image_style_mapping = $responsive_image_style->getKeyedImageStyleMappings()[$breakpoint_machine_names[0]];
-    switch ($image_style_mapping['image_mapping_type']) {
-      case 'sizes':
-        // More than one image style can be mapped. Use the smallest one.
-        $transformed_dimensions = $dimensions;
-        foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $mapped_image_style) {
-          $new_dimensions = responsive_image_get_image_dimensions($mapped_image_style, $dimensions, $uri);
-          if (!$transformed_dimensions || $transformed_dimensions['width'] >= $new_dimensions['width']) {
-            $image_style_name = $mapped_image_style;
-            $transformed_dimensions = $new_dimensions;
-          }
-        }
-        break;
-
-      case 'image_style':
-        $image_style_name = $image_style_mapping['image_mapping'];
-        $transformed_dimensions = responsive_image_get_image_dimensions($image_style_name, $dimensions, $uri);
-        break;
-    }
-
-    // Set the 'src' attribute to the image style URL. FilterImageStyle will
-    // look at the 'data-editor-file-uuid' attribute, not the 'src' attribute to
-    // render the appropriate output.
-    $attributes['src'] = _responsive_image_image_style_url($image_style_name, $uri);
-
-    // Set the 'width' and 'height' attributes to the image style's transformed
-    // dimensions.
-    if ($image->isValid()) {
-      $attributes['width'] = $transformed_dimensions['width'];
-      $attributes['height'] = $transformed_dimensions['height'];
-    }
-  }
-}
reverted:
--- b/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<?php
-
-namespace Drupal\responsive_image\Plugin\CKEditorPlugin;
-
-use Drupal\Component\Plugin\PluginBase;
-use Drupal\editor\Entity\Editor;
-use Drupal\ckeditor\CKEditorPluginInterface;
-use Drupal\ckeditor\CKEditorPluginContextualInterface;
-
-/**
- * Defines the "drupalresponsiveimagestyle" plugin.
- *
- * @CKEditorPlugin(
- *   id = "drupalresponsiveimagestyle",
- *   label = @Translation("Responsive image style"),
- *   module = "ckeditor"
- * )
- */
-class DrupalResponsiveImageStyle extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface {
-
-  /**
-   * {@inheritdoc}
-   */
-  public function isInternal() {
-    return FALSE;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getDependencies(Editor $editor) {
-    return [];
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getLibraries(Editor $editor) {
-    return [];
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getFile() {
-    return drupal_get_path('module', 'responsive_image') . '/js/plugins/drupalresponsiveimagestyle/plugin.js';
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getConfig(Editor $editor) {
-    return [];
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function isEnabled(Editor $editor) {
-    if (!$editor->hasAssociatedFilterFormat()) {
-      return FALSE;
-    }
-
-    // Automatically enable this plugin if the text format associated with this
-    // text editor uses the filter_responsive_image_style filter and the
-    // DrupalImage button is enabled.
-    $format = $editor->getFilterFormat();
-    if ($format->filters('filter_responsive_image_style')->status) {
-      $enabled = FALSE;
-      $settings = $editor->getSettings();
-      foreach ($settings['toolbar']['rows'] as $row) {
-        foreach ($row as $group) {
-          foreach ($group['items'] as $button) {
-            if ($button === 'DrupalImage') {
-              $enabled = TRUE;
-            }
-          }
-        }
-      }
-      return $enabled;
-    }
-
-    return FALSE;
-  }
-
-}
reverted:
--- b/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
+++ /dev/null
@@ -1,258 +0,0 @@
-<?php
-
-namespace Drupal\responsive_image\Plugin\Filter;
-
-use Drupal\Component\Utility\Html;
-use Drupal\Core\Annotation\Translation;
-use Drupal\Core\Entity\EntityRepositoryInterface;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
-use Drupal\Core\Image\ImageFactory;
-use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
-use Drupal\Core\Render\RendererInterface;
-use Drupal\file\FileInterface;
-use Drupal\filter\Annotation\Filter;
-use Drupal\filter\FilterProcessResult;
-use Drupal\filter\Plugin\FilterBase;
-use Drupal\responsive_image\ResponsiveImageStyleInterface;
-use Symfony\Component\DependencyInjection\ContainerInterface;
-
-/**
- * Provides a filter to render inline images as responsive images.
- *
- * @Filter(
- *   id = "filter_responsive_image_style",
- *   module = "responsive_image",
- *   title = @Translation("Display responsive image styles"),
- *   description = @Translation("Uses the data-responsive-image-style attribute on &lt;img&gt; tags to display responsive images."),
- *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE
- * )
- */
-class FilterResponsiveImageStyle extends FilterBase implements ContainerFactoryPluginInterface {
-
-  /**
-   * The entity type manager.
-   *
-   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
-   */
-  protected $entityTypeManager;
-
-  /**
-   * @var \Drupal\Core\Entity\EntityRepositoryInterface
-   */
-  protected $entityRepository;
-
-  /**
-   * @var \Drupal\Core\Image\ImageFactory
-   */
-  protected $imageFactory;
-
-  /**
-   * @var \Drupal\Core\Render\RendererInterface
-   */
-  protected $renderer;
-
-  /**
-   * Constructs a Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle object.
-   *
-   * @param array $configuration
-   *   A configuration array containing information about the plugin instance.
-   * @param string $plugin_id
-   *   The plugin_id for the plugin instance.
-   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
-   *   The entity type manager.
-   * @param \Drupal\Core\Entity\EntityRepositoryInterface $entity_repository
-   *   The entity repository.
-   * @param \Drupal\Core\Image\ImageFactory $image_factory
-   *   The image factory.
-   * @param \Drupal\Core\Render\RendererInterface $renderer
-   *   The renderer.
-   */
-  public function __construct(array $configuration, $plugin_id, $plugin_definition, EntityTypeManagerInterface $entity_type_manager, EntityRepositoryInterface $entity_repository, ImageFactory $image_factory, RendererInterface $renderer) {
-    parent::__construct($configuration, $plugin_id, $plugin_definition);
-
-    $this->entityTypeManager = $entity_type_manager;
-    $this->entityRepository = $entity_repository;
-    $this->imageFactory = $image_factory;
-    $this->renderer = $renderer;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
-    return new static($configuration, $plugin_id, $plugin_definition, $container->get('entity_type.manager'), $container->get('entity.repository'), $container->get('image.factory'), $container->get('renderer'));
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function process($text, $langcode) {
-    if (stristr($text, 'data-responsive-image-style') !== FALSE) {
-      // Load all the responsive image styles so each img found in the text can
-      // be checked to ensure it has a valid responsive image style.
-      $responsive_image_styles = $this->loadResponsiveImageStyles();
-
-      // Load the text that is being processed into XML to find images.
-      $dom = Html::load($text);
-      $xpath = new \DOMXPath($dom);
-
-      // Process each img element DOM element found with the necessary
-      // attributes.
-      /** @var \DOMElement $dom_element */
-      foreach ($xpath->query('//*[@data-entity-type="file" and @data-entity-uuid and @data-responsive-image-style]') as $dom_element) {
-        // Get the UUID and responsive image style for the file.
-        $file_uuid = $dom_element->getAttribute('data-entity-uuid');
-        $responsive_image_style_id = $dom_element->getAttribute('data-responsive-image-style');
-
-        // If the responsive image style is not a valid one, then don't
-        // transform the HTML.
-        if (empty($file_uuid) || !in_array($responsive_image_style_id, array_keys($responsive_image_styles))) {
-          continue;
-        }
-
-        // Transform the HTML for the img element by applying a responsive image
-        // style.
-        $altered_img = $this->getResponsiveImageStyleHtml($file_uuid, $responsive_image_style_id, $dom_element);
-
-        // Load the altered HTML into a new DOMDocument and retrieve the element.
-        $updated_node = Html::load(trim($altered_img))->getElementsByTagName('body')
-          ->item(0)
-          ->childNodes
-          ->item(0);
-
-        // Import the updated node from the new DOMDocument into the original
-        // one, importing also the child nodes of the updated node.
-        $updated_node = $dom->importNode($updated_node, TRUE);
-
-        // Finally, replace the original image node with the new image node.
-        $dom_element->parentNode->replaceChild($updated_node, $dom_element);
-      }
-
-      // Process the filter with the newly updated DOM.
-      return new FilterProcessResult(Html::serialize($dom));
-    }
-
-    // Process the filter if no image style img elements are found.
-    return new FilterProcessResult($text);
-  }
-
-  /**
-   * Loads the responsive image styles.
-   *
-   * @return string[]
-   */
-  protected function loadResponsiveImageStyles() {
-    return array_keys($this->entityTypeManager->getStorage('responsive_image_style')->loadMultiple());
-  }
-
-  /**
-   * Get the the width and height of an image based on the file UUID.
-   *
-   * @param string $file_uuid
-   *   The UUID for the file.
-   *
-   * @return array
-   *   The image information.
-   */
-  protected function getImageInfo($file_uuid) {
-    /** @var \Drupal\file\FileInterface $file; */
-    $file = $this->entityRepository->loadEntityByUuid('file', $file_uuid);
-
-    // Determine uri, width and height of the source image.
-    $image_uri = $image_width = $image_height = NULL;
-    $image = $this->imageFactory->get($file->getFileUri());
-    if ($image->isValid()) {
-      $image_uri = $file->getFileUri();
-      $image_width = $image->getWidth();
-      $image_height = $image->getHeight();
-    }
-
-    return [
-      'uri' => $image_uri,
-      'width' => $image_width,
-      'height' => $image_height
-    ];
-  }
-
-  /**
-   * Removes attributes that will be generated from image style theme function.
-   *
-   * @param \DOMElement $dom_element
-   *   The DOM element for the img element.
-   *
-   * @return array
-   *  The attributes array.
-   */
-  protected function prepareResponsiveImageAttributes(\DOMElement $dom_element) {
-    // Remove attributes that are no longer needed.
-    $dom_element->removeAttribute('data-entity-type');
-    $dom_element->removeAttribute('data-entity-uuid');
-    $dom_element->removeAttribute('data-responsive-image-style');
-
-    // Remove attributes that are generated by the image style.
-    $dom_element->removeAttribute('width');
-    $dom_element->removeAttribute('height');
-    $dom_element->removeAttribute('src');
-
-    // Responsive image styles should override image styles.
-    if ($dom_element->hasAttribute('data-responsive-image-style')) {
-      $dom_element->removeAttribute('data-responsive-image-style');
-    }
-
-    // Make sure all non-regenerated attributes are retained.
-    $attributes = [];
-    for ($i = 0; $i < $dom_element->attributes->length; $i++) {
-      $attr = $dom_element->attributes->item($i);
-      $attributes[$attr->name] = $attr->value;
-    }
-
-    return $attributes;
-  }
-
-  /**
-   * Get the HTML for the img element after image style is applied.
-   *
-   * @param string $file_uuid
-   *   The UUID for the file.
-   * @param string $responsive_image_style_id
-   *   The ID for the responsive image style.
-   * @param \DOMElement $dom_element
-   *  The DOM element for the image element.
-   *
-   * @return string
-   *   The img element with the image style applied.
-   */
-  protected function getResponsiveImageStyleHtml($file_uuid, $responsive_image_style_id, \DOMElement $dom_element) {
-    $image_info = $this->getImageInfo($file_uuid);
-
-    // Remove attributes that will be generated by the image style.
-    $attributes = $this->prepareResponsiveImageAttributes($dom_element);
-
-    // Re-render as a responsive image.
-    $responsive_image = [
-      '#theme' => 'responsive_image',
-      '#responsive_image_style_id' => $responsive_image_style_id,
-      '#uri' => $image_info['uri'],
-      '#width' => $image_info['width'],
-      '#height' => $image_info['height'],
-      '#attributes' => $attributes,
-    ];
-
-    return $this->renderer->render($responsive_image);
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function tips($long = FALSE) {
-    if ($long) {
-      $responsive_image_styles = $this->loadResponsiveImageStyles();
-      $list = '<code>' . implode('</code>, <code>', array_keys($responsive_image_styles)) . '</code>';
-      return t('
-        <p>You can make images responsive by adding a <code>data-responsive-image-style</code> attribute, whose values is one of the responsive image style machine names: !responsive-image-style-machine-name-list.</p>', ['!responsive-image-style-machine-name-list' => $list]);
-    }
-    else {
-      return t('You can make images responsive by adding a data-responsive-image-style attribute.');
-    }
-  }
-}
reverted:
--- b/core/modules/responsive_image/tests/src/Kernel/EditorResponsiveImageStyleDialogTest.php
+++ /dev/null
@@ -1,151 +0,0 @@
-<?php
-
-namespace Drupal\Tests\responsive_image\Kernel;
-
-use Drupal\Core\Form\FormState;
-use Drupal\Core\Render\RendererInterface;
-use Drupal\Core\Render\RenderContext;
-use Drupal\editor\Entity\Editor;
-use Drupal\editor\Form\EditorImageDialog;
-use Drupal\filter\Entity\FilterFormat;
-use Drupal\KernelTests\Core\Entity\EntityKernelTestBase;
-use Drupal\node\Entity\NodeType;
-
-/**
- * Tests EditorImageDialog alteration to add responsive image style selection.
- *
- * @see responsive_image_form_editor_image_dialog_alter()
- *
- * @group responsive_image
- */
-class EditorResponsiveImageStyleDialogTest extends EntityKernelTestBase {
-
-  /**
-   * Filter format for testing.
-   *
-   * @var \Drupal\filter\FilterFormatInterface
-   */
-  protected $format;
-
-  /**
-   * Modules to enable.
-   *
-   * @var array
-   */
-  public static $modules = [
-    'ckeditor',
-    'editor',
-    'editor_test',
-    'file',
-    'image',
-    'node',
-    'responsive_image',
-    'system',
-    'user'
-  ];
-
-  /**
-   * Sets up the test.
-   */
-  protected function setUp() {
-    parent::setUp();
-
-    $this->installEntitySchema('file');
-    $this->installSchema('system', ['key_value_expire']);
-    $this->installSchema('node', ['node_access']);
-    $this->installSchema('file', ['file_usage']);
-    $this->installConfig(['node']);
-
-    // Add text formats.
-    $this->format = FilterFormat::create([
-      'format' => 'filtered_html',
-      'name' => 'Filtered HTML',
-      'weight' => 0,
-      'filters' => [
-        'filter_image_style' => ['status' => TRUE],
-        'filter_responsive_image_style' => ['status' => TRUE]
-      ],
-    ]);
-    $this->format->save();
-
-    // Set up text editor.
-    $editor = Editor::create([
-      'format' => 'filtered_html',
-      'editor' => 'ckeditor',
-      'image_upload' => [
-        'max_size' => 100,
-        'scheme' => 'public',
-        'directory' => '',
-        'status' => TRUE,
-      ],
-    ]);
-    $editor->save();
-
-    // Install the image module config so we have the medium image style.
-    $this->installConfig('image');
-
-    // Create a node type for testing.
-    $type = NodeType::create(['type' => 'page', 'name' => 'page']);
-    $type->save();
-    node_add_body_field($type);
-    $this->installEntitySchema('user');
-    \Drupal::service('router.builder')->rebuild();
-  }
-
-  /**
-   * Tests that editor image dialog works as expected.
-   */
-  public function testEditorImageStyleDialog() {
-    $input = [
-      'editor_object' => [
-        'src' => '/core/modules/image/sample.png',
-        'alt' => 'Balloons floating above a field.',
-        'width' => '800',
-        'height' => '600',
-        'data-entity-type' => 'file',
-        'data-entity-uuid' => 'some-uuid',
-        'data-image-style' => 'medium',
-        'data-responsive-image-style' => 'narrow',
-      ],
-      'dialogOptions' => [
-        'title' => 'Edit Image',
-        'dialogClass' => 'editor-image-dialog',
-        'autoResize' => 'true',
-      ],
-      '_drupal_ajax' => '1',
-      'ajax_page_state' => [
-        'theme' => 'bartik',
-        'theme_token' => 'some-token',
-        'libraries' => '',
-      ],
-    ];
-    $form_state = (new FormState())
-      ->setRequestMethod('POST')
-      ->setUserInput($input)
-      ->addBuildInfo('args', [$this->format]);
-
-    $form_builder = $this->container->get('form_builder');
-    $form_object = new EditorImageDialog(\Drupal::entityTypeManager()->getStorage('file'));
-    $form_id = $form_builder->getFormId($form_object, $form_state);
-    $form = [];
-
-    /** @var \Drupal\Core\Render\RendererInterface $renderer */
-    $renderer = \Drupal::service('renderer');
-    $renderer->executeInRenderContext(new RenderContext(), function() use (&$form, $form_builder, $form_id, &$form_state) {
-      $form = $form_builder->retrieveForm($form_id, $form_state);
-      $form_builder->prepareForm($form_id, $form, $form_state);
-      $form_builder->processForm($form_id, $form, $form_state);
-    });
-
-    // If responsive image style is selected, image dimensions should not be
-    // available.
-    $this->assertFalse($form['dimensions']['#access']);
-
-    // If responsive image style is selected, image style should not be
-    // available.
-    $attributes = $form_state->getValue('attributes');
-    $this->assertFalse(isset($form['image_style']));
-    $this->assertFalse(isset($attributes['data-image-style']));
-  }
-
-}
reverted:
--- b/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php
-
-namespace Drupal\Tests\responsive_image\Unit;
-
-use Drupal\Core\Entity\EntityRepository;
-use Drupal\Core\Entity\EntityStorageInterface;
-use Drupal\Core\Entity\EntityTypeManager;
-use Drupal\Core\Image\ImageFactory;
-use Drupal\Core\Render\Renderer;
-use Drupal\Tests\UnitTestCase;
-use Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle;
-
-/**
- * @coversDefaultClass \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle
- * @group image
- */
-class FilterResponsiveImageStyleTest extends UnitTestCase {
-
-  /**
-   * @var \Drupal\filter\Plugin\Filter\FilterHtml
-   */
-  protected $filter;
-
-  /**
-   * @var \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle
-   */
-  protected $filterResponsiveImageStyle;
-
-  /**
-   * {@inheritdoc}
-   */
-  protected function setUp() {
-    parent::setUp();
-
-    $configuration = [];
-    $plugin_id = '';
-    $plugin_definition = ['provider' => 'responsive_image'];
-    $entityTypeManager = $this->prophesize(EntityTypeManager::class);
-    $entityRepository = $this->prophesize(EntityRepository::class);
-    $imageFactory = $this->prophesize(ImageFactory::class);
-    $renderer = $this->prophesize(Renderer::class);
-
-    $this->filterResponsiveImageStyle = $this->getMockBuilder('Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle')
-      ->setConstructorArgs([
-        $configuration,
-        $plugin_id,
-        $plugin_definition,
-        $entityTypeManager->reveal(),
-        $entityRepository->reveal(),
-        $imageFactory->reveal(),
-        $renderer->reveal()
-      ])
-      ->setMethods([
-        'loadResponsiveImageStyles',
-        'getResponsiveImageStyleHtml'
-      ])
-      ->getMock();
-  }
-
-  public function testProcessWithoutImage() {
-    $output = $this->filterResponsiveImageStyle->process('<a></a>', 'en');
-    $this->assertEquals('<a></a>', $output);
-  }
-
-  /**
-   * @covers ::process
-   */
-  public function testProcessWithImage() {
-    $original_src = 'image.png';
-    $original_uuid = 'abcd-1234-ghij-5678';
-    $original_image_style = 'medium';
-    $original_responsive_image_style = 'narrow';
-    $original_width = '400';
-    $original_height = '300';
-    $original_alt = 'A wooly mammoth trumpets as a crevasse breaks open in the glacier.';
-
-    $original_img = '<img src="' . $original_src .'" width="' . $original_width .'" height="' . $original_height .'" alt="' . $original_alt .'" data-entity-uuid="' . $original_uuid . '" data-entity-type="file" data-image-style="' . $original_image_style . '" data-responsive-image-style="' . $original_responsive_image_style . '" />';
-    $original_text = '<p>' . $original_img . '</p>';
-
-    $expected_src = 'styles/max_325x325/public/inline-images/image.png';
-    $expected_srcset = 'styles/max_325x325/public/inline-images/image.png 325w, styles/max_650x650/public/inline-images/image.png 650w, styles/max_1300x1300/public/inline-images/image.png 1300w';
-    $expected_sizes = '(min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw';
-
-    $expected_img = '<img srcset="' . $expected_srcset .'" sizes="' . $expected_sizes .'" src="' . $expected_src .'" alt="' . $original_alt .'" />';
-    $expected_text = '<p>' . $expected_img . '</p>';
-
-    $this->filterResponsiveImageStyle
-      ->method('loadResponsiveImageStyles')
-      ->willReturn([
-        'narrow',
-        'wide'
-      ]);
-
-    $this->filterResponsiveImageStyle
-      ->method('getResponsiveImageStyleHtml')
-      ->with(
-        $this->equalTo($original_uuid),
-        $this->equalTo($original_image_style),
-        $this->anything()
-      )
-      ->willReturn($expected_img);
-
-    $output = $this->filterResponsiveImageStyle->process($original_text, 'en');
-    $this->assertEquals($expected_text, $output);
-  }
-}