reverted: --- b/core/modules/editor/src/Form/EditorImageDialog.php +++ a/core/modules/editor/src/Form/EditorImageDialog.php @@ -209,9 +209,7 @@ // 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); + $form_state->setValue(array('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'); } reverted: --- b/core/modules/image/image.install +++ a/core/modules/image/image.install @@ -61,25 +61,3 @@ return $requirements; } - -/** - * Add allowed attributes to existing html filters. - */ -function 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_image_style.status')) { - continue; - } - $allowed_html = $config->get('filters.filter_html.settings.allowed_html'); - $matches = array(); - if (!empty($allowed_html) && preg_match('/]*)>/', $allowed_html, $matches)) { - $new_attributes = array_filter(explode(' ', $matches[1])); - $new_attributes[] = 'data-image-style'; - $allowed_html = preg_replace('/]*)>/', '', $allowed_html); - $config->set('filters.filter_html.settings.allowed_html', $allowed_html); - $config->save(); - } - } -} 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 @@ -494,56 +494,26 @@ * @see \Drupal\editor\Form\EditorImageDialog::buildForm() */ function image_form_editor_image_dialog_alter(&$form, FormStateInterface $form_state) { - /** @var \Drupal\editor\Entity\Editor $editor */ + /** @var \Drupal\editor\EditorInterface $editor */ $editor = $form_state->getBuildInfo()['args'][0]; - $filters = $editor->getFilterFormat()->filters()->getAll(); - // Alter the editor image dialog when image style functionality is available, - // unless the responsive image style filter is also in use. - if ((isset($filters['filter_image_style']) && $filters['filter_image_style']->status)) { - $filter_image_style_status = TRUE; - } - else { - $filter_image_style_status = FALSE; - } - - if ((isset($filters['filter_responsive_image_style']) && $filters['filter_responsive_image_style']->status)) { - $filter_responsive_image_style_status = TRUE; - } - else { - $filter_responsive_image_style_status = FALSE; - } - - if ($filter_image_style_status && !$filter_responsive_image_style_status) { - // Get the image from the form. + // Alter the editor image dialog when image style functionality is available. + if ($editor->getFilterformat()->filters('filter_image_style')->status) { + // Get the image () that is being edited on the client. $image_element = $form_state->getStorage()['image_element']; - // Disallow the user from specifying image dimensions manualy. - $form['dimensions']['#access'] = FALSE; - // Get an array of image styles to present as options for selection. $image_style_options = image_style_options(FALSE); - // Create a form item for image style selection. - $form['image_style'] = array( - '#type' => 'item', - '#field_prefix' => '
', - '#field_suffix' => '
', - ); - // Add a select element to choose an image style. $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], + '#default_value' => isset($image_element['data-image-style']) ? $image_element['data-image-style'] : NULL, '#options' => $image_style_options, '#required' => TRUE, - '#wrapper_attributes' => array('class' => array('container-inline')), - '#attributes' => array('class' => array('container-inline')), - '#parents' =>array('attributes', 'data-image-style'), ); - // Validate that the image shown in the text editor matches the image style. $form['actions']['save_modal']['#validate'][] = 'image_form_editor_image_dialog_validate'; } } @@ -560,11 +530,10 @@ function image_form_editor_image_dialog_validate(array &$form, FormStateInterface &$form_state) { if (!empty($form_state->getValue('fid')[0])) { - // Get the image style attributes. $attributes = &$form_state->getValue('attributes'); /** @var \Drupal\image\ImageStyleInterface $image_style */ - $image_style = \Drupal::service('entity_type.manager')->getStorage('image_style')->load($attributes['data-image-style']); + $image_style = ImageStyle::load($attributes['data-image-style']); /** @var \Drupal\file\FileInterface $file */ $file = File::load($form_state->getValue('fid')[0]); @@ -572,10 +541,14 @@ // Get the URI of the image from the file. $uri = $file->getFileUri(); + // Transform absolute image URLs to relative image URLs: prevent problems + // on multisite set-ups and prevent mixed content errors. + $image_url = file_create_url($uri); + $image_url = file_url_transform_relative($image_url); // 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'] = $image_style->buildUrl($uri); + $attributes['src'] = $image_style->buildUrl($image_url); /** @var \Drupal\Core\Image\ImageInterface $image */ $image = \Drupal::service('image.factory')->get($uri); diff -u b/core/modules/image/js/plugins/drupalimagestyle/plugin.js b/core/modules/image/js/plugins/drupalimagestyle/plugin.js --- b/core/modules/image/js/plugins/drupalimagestyle/plugin.js +++ b/core/modules/image/js/plugins/drupalimagestyle/plugin.js @@ -26,7 +26,7 @@ } // Override default features definitions for drupalimagestyle. CKEDITOR.tools.extend(widgetDefinition.features, { - responsiveimage: { + drupalimagestyle: { requiredContent: 'img[data-image-style]' } }, true); diff -u b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php --- b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php +++ b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php @@ -2,6 +2,7 @@ namespace Drupal\image\Plugin\CKEditorPlugin; +use Drupal\ckeditor\CKEditorPluginManager; use Drupal\Component\Plugin\PluginBase; use Drupal\editor\Entity\Editor; use Drupal\ckeditor\CKEditorPluginInterface; @@ -62,22 +63,12 @@ } // Automatically enable this plugin if the text format associated with this - // text editor uses the filter_image_style filter and the DrupalImage button - // is enabled. + // text editor uses the filter_image_style filter and the drupalimagestyle + // button is enabled. $format = $editor->getFilterFormat(); if ($format->filters('filter_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; + $toolbarButtons = CKEditorPluginManager::getEnabledButtons($editor); + return in_array('drupalimagestyle', $toolbarButtons); } return FALSE; diff -u b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php --- b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php +++ b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php @@ -37,22 +37,28 @@ protected $entityTypeManager; /** + * The entity repository. + * * @var \Drupal\Core\Entity\EntityRepositoryInterface */ protected $entityRepository; /** + * The image factory. + * * @var \Drupal\Core\Image\ImageFactory */ protected $imageFactory; /** + * The renderer. + * * @var \Drupal\Core\Render\RendererInterface */ protected $renderer; /** - * Constructs a Drupal\image\Plugin\Filter\FilterImageStyle object. + * Constructs a \Drupal\image\Plugin\Filter\FilterImageStyle object. * * @param array $configuration * A configuration array containing information about the plugin instance. @@ -90,8 +96,8 @@ */ public function process($text, $langcode) { if (stristr($text, 'data-image-style') !== FALSE) { - // Load all the image styles so each img found in the text can be checked - // to ensure it has a valid image style. + // Load all the image styles so each imgage found in the text can be + // checked to ensure it has a valid image style. $image_styles = $this->loadImageStyles(); // Load the text that is being processed into XML to find images. @@ -107,6 +113,7 @@ $image_style_id = $dom_element->getAttribute('data-image-style'); // If the image style is not a valid one, then don't transform the HTML. + // @TODO: File a follow-up. See #222-26. if (empty($file_uuid) || !in_array($image_style_id, $image_styles)) { continue; } @@ -185,6 +192,7 @@ */ protected function prepareImageAttributes(\DOMElement $dom_element) { // Remove attributes that are no longer needed. + // @TODO: File a follow-up. See #222-27. $dom_element->removeAttribute('data-entity-type'); $dom_element->removeAttribute('data-entity-uuid'); $dom_element->removeAttribute('data-image-style'); diff -u b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php --- b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php +++ b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php @@ -56,8 +56,8 @@ // Add text formats. $format = FilterFormat::create([ - 'format' => 'filtered_html', - 'name' => 'Filtered HTML', + 'format' => $this->randomMachineName(), + 'name' => $this->randomString(), 'weight' => 0, 'filters' => [ 'filter_image_style' => ['status' => TRUE] @@ -67,7 +67,7 @@ // Set up text editor. $this->editor = Editor::create([ - 'format' => 'filtered_html', + 'format' => $format->id(), 'editor' => 'ckeditor', 'image_upload' => [ 'max_size' => 100, @@ -135,8 +135,6 @@ $form_builder->processForm($form_id, $form, $form_state); }); - // If image style is selected, image dimensions should not be available. - $this->assertFalse($form['dimensions']['#access']); // Image style should be medium. $this->assertEquals('medium', $form['image_style']['selection']['#default_value']); } reverted: --- b/core/modules/system/css/components/container-inline.module.css +++ a/core/modules/system/css/components/container-inline.module.css @@ -11,7 +11,3 @@ .container-inline .details-wrapper { display: block; } -/* Allow items inside inline items to render themselves as blocks. */ -.container-inline .container-block { - display: block; -} diff -u b/core/profiles/standard/config/install/filter.format.basic_html.yml b/core/profiles/standard/config/install/filter.format.basic_html.yml --- b/core/profiles/standard/config/install/filter.format.basic_html.yml +++ b/core/profiles/standard/config/install/filter.format.basic_html.yml @@ -40,12 +40,13 @@ - filter_image_style: - id: filter_image_style - provider: image - status: true - weight: 10 - settings: { } editor_file_reference: id: editor_file_reference provider: editor status: true + weight: 10 + settings: { } + filter_image_style: + id: filter_image_style + provider: image + status: true weight: 11 settings: { } + diff -u b/core/profiles/standard/config/install/filter.format.full_html.yml b/core/profiles/standard/config/install/filter.format.full_html.yml --- b/core/profiles/standard/config/install/filter.format.full_html.yml +++ b/core/profiles/standard/config/install/filter.format.full_html.yml @@ -10,12 +10,6 @@ roles: - administrator filters: - filter_image_style: - id: filter_image_style - provider: image - status: true - weight: 7 - settings: { } filter_align: id: filter_align provider: filter @@ -42,0 +37,6 @@ + filter_image_style: + id: filter_image_style + provider: image + status: true + weight: 12 + settings: { } reverted: --- b/core/themes/classy/css/components/container-inline.css +++ a/core/themes/classy/css/components/container-inline.css @@ -7,12 +7,10 @@ .container-inline .label:after { content: ':'; } +.form-type-radios .container-inline label:after { -.form-type-radios .container-inline label:after, -.container-inline .form-type-checkbox label:after { content: ''; } +.form-type-radios .container-inline .form-type-radio { -.form-type-radios .container-inline .form-type-radio, -.container-inline .form-type-checkbox { margin: 0 1em; } .container-inline .form-actions, only in patch2: unchanged: --- a/core/modules/image/image.post_update.php +++ b/core/modules/image/image.post_update.php @@ -7,6 +7,7 @@ use Drupal\Core\Entity\Entity\EntityViewDisplay; use Drupal\Core\Entity\Entity\EntityFormDisplay; +use Drupal\filter\Entity\FilterFormat; /** * Saves the image style dependencies into form and view display entities. @@ -20,3 +21,26 @@ function image_post_update_image_style_dependencies() { $display->save(); } } + +/** + * Add filter image style to basic_html and full_html filters. + */ +function image_enable_filter_image_style() { + $filters = ['basic_html' => 11, 'full_html' => 12]; + foreach ($filters as $filter => $weight) { + if ($filter = FilterFormat::load($filter)) { + $filter->setFilterConfig('filter_image_style', ['status' => TRUE, 'weight' => $weight]); + if (($filter = $filter->filters('filter_html')) && $filter->status) { + $config = $filter->getConfiguration(); + $allowed_html = !empty($config['settings']['allowed_html']) ? $config['settings']['allowed_html'] : NULL; + $matches = []; + if ($allowed_html && preg_match('/]*)>/', $allowed_html, $matches)) { + $new_attributes = array_filter(explode(' ', $matches[1])); + $new_attributes[] = 'data-image-style'; + $config['settings']['allowed_html'] = preg_replace('/]*)>/', '', $allowed_html); + $filter->setFilterConfig('filter_html', $config); + } + } + } + } +}