Allow CKEditor styles for <drupal-media>

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.

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?

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

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.

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.

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.

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

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 modulename_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'][] = 'modulename_media_entity_embed_submit';
  }
}

/**
 * Custom submit handler for the media_entity_embed_dialog form.
 */
function modulename_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.

#3347721: [Style] Warn the user about styles for unsupported elements 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.

The instructions in that post are working, I was able to add data-attribution to the wrapper for a remote video.

This ticket looks relevant: https://www.drupal.org/project/drupal/issues/3406020