Allow CKEditor styles for <drupal-media>

Drupal 8.9.0-beta1 → was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule → and the Allowed changes during the Drupal 8 and 9 release cycles → .

I am trying to reproduce the issue with the above mentioned steps in 9.1.x however fail to add class in dropdown according to step 5(Add the following dropdown style: 'drupal-media.test-class|Test'.) and got the below error, Can someone help in this,

"The provided list of styles is syntactically incorrect."

I suspect the problem here is that the "drupal-media" element is actually a CKEditor "widget", and the procedure for declaring a style is compatible with a widget has some extra steps.

@vsujeetkumar - The issue you're experiencing is #2911527: Allow dashes in Styles dropdown's element names → . Give patch #57 a try.

Also, we have no patch, so setting back to 'Active'.

I've made a little module like this:

function media_editor_widget_styles_editor_js_settings_alter(array &$settings) {
  foreach ($settings['editor']['formats'] as &$format) {

    $format['editorSettings']['stylesSet'][] = [
      'name' => 'Float Right',
      'type' => 'widget',
      'widget' => 'drupalmedia',
      'attributes' => [
        'class' => 'float-right',
      ],
    ];
  }
}

And I get a style option in the dropdown, however it doesn't seem to apply to the element...

I think I might need to add something to the widget config? I've read through media/js/plugins/drupalmedia/plugin.js but I'm not familiar with CKEditor plugins...

I can see `allowedContent` contains an empty classes hash...

On Drupal 8.9.1. I have patch #57 from #5 applied. Attempting to add the style text-muted|Faded secondary text to custom styles results in the following error:
The provided list of styles is syntactically incorrect.
Am I missing something?

Thank you Nicholas, for pointing me in the right direction. I have a custom theme based on Classy that uses the Bootstrap 4 library. I am adding Bootstrap text formatting and typography classes to the styles drop down. I did not differentiate between inline styles and styles that need to be applied to a block element.

Inline styles:
cite|Cite
code|Code
var|Variable

Block styles:
small.text-muted|Text Muted
h1.display-1|H1 Display 1
footer.blockquote-footer|Blockquote Footer

Thanks again.

Patrick - you might need a . (dot) before text-muted otherwise it's only going to apply to <text-muted> elements.

.text-muted|Faded secondary text

Drupal 9.1.0-alpha1 → will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule → and the Allowed changes during the Drupal 9 release cycle → .

Drupal 9.2.0-alpha1 → will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule → and the Allowed changes during the Drupal core release cycle → .

I think this is a really good idea -- it is currently rather difficult to apply any basic styling to Media in a CKEditor field, which is a rather fundamental requirement for using Media at all.

The media widget discards any classes added by CKEditor on 'downcasting'. That's why using a custom module like in #6 doesn't work.

This patch should fix this.

Fixing code styling issue and using the latest branch.

@phma Interdiff is missing in #16, It will help to understand what the changes has been done.

And this patch needs Reroll, as it has changes in core/modules/media/js/plugins/drupalmedia/plugin.es6.js file.

Update es6 file then compile the code with yarn.

Fixed CS errors.

Drupal 9.3.0-rc1 → was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule → and the Allowed changes during the Drupal core release cycle → .

Hi,
I have added the patch to the site, I am able to apply the class to the style dropdown at CK editor, but the class not able to add to the image source after drupal-media tag.

I have same issue as Lan, I have applied the patch, I can add the class to the style dropdown options, however when I select the style for my embedded media document it does not apply it. I just want to provide an option for my client to be able to bold or feature certain documents that are embedded into a page with their media library.

Hi, tried patch #18,
I am also able to add 'test-class' from dropdown styles.I added an image from the media library and then selected 'test class' from the style dropdown. But class is not applied to the added media.
CKEditor source mode shows only '<'drupal-media'>' after the patch is applied.

Drupal 9.5.0-beta2 → and Drupal 10.0.0-beta2 → were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule → and the Allowed changes during the Drupal core release cycle → .

Drupal 9.4.0-alpha1 → was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule → and the Allowed changes during the Drupal core release cycle → .

Applied patch #18 but its not adding class attribute to drupal-media tag.

After patch:

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Re-rolled patch against 9.5.x

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened → , as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule → and the Allowed changes during the Drupal core release cycle → .

I tested the patch from #28 with CKEditor 4, using a style configured as "drupal-media.img-thumbnail|Imageborder," and it did not add the class to drupal-media.

I'm also looking a solution for it.

I fixed it in a different way

/**
 * Implements hook_form_alter().
 */
function st_ckeditor_form_alter(&$form, FormStateInterface $formState, $formId) {
  $step = $formState->get('step');
  if ($formId === 'entity_embed_dialog' && $step === 'embed') {
    // Retrieve the saved 'entity_class' value from the embed attributes.
    $entityClass = $formState->get('entity_element')["data-entity-class"] ?? 'none';
    // Add a new field to the form for class assignment.
    $form['entity_class'] = [
      '#type' => 'radios',
      '#title' => t('Entity Class'),
      '#description' => t('Choose a class to be added to the entity.'),
      '#default_value' => $entityClass,
      '#options' => [
        'none' => t('None'),
        'wysiwyg-padding-right' => t('Padding Right'),
        'wysiwyg-padding-left' => t('Padding Left'),
      ],
    ];
    // Change the form submit handler.
    $form['#submit'][] = 'st_ckeditor_media_entity_embed_submit';
  }
}

/**
 * Custom submit handler for the media_entity_embed_dialog form.
 */
function st_ckeditor_media_entity_embed_submit($form, FormStateInterface $formState) {
  // Get the value of the 'entity_class' field.
  $entityClass = $formState->getValue('entity_class');
  // Store the entity class in the embed button attributes.
  $formState->setValue(['attributes', 'data-entity-class'], $entityClass);
}

This will never get fixed for CKEditor 4.

For CKEditor 5, this is blocked on https://github.com/ckeditor/ckeditor5/issues/14274#issuecomment-1744624793.

📌 [Style] Warn the user about styles for unsupported elements Needs work just made this easier to discover 👍

For those wanting to implement this sooner... This module seems to be very promising: https://www.drupal.org/project/ckeditor5_inline_styles →

I don't think this is blocked upstream. The upstream issue indicates that each plugin that provides its own block level widget needs to be updated to integrate with the Styles plugin, like they had to do for Table widgets. There's no action in the upstream issue we're waiting on. I think we just need to update our custom plugin's code to allow for this.

I had to do this for a custom plugin of mine. I wrote up some important tidbits on how to do it here.

When I asked around among colleagues today, I was pointed to this blog post: https://dev.acquia.com/blog/drupalelementstyle-add-styles-drupal-media-c....

@bkosborne - Is this solution functionally equivalent to the plugin you authored?