Contrib.social

Allow to theme the style of the options

Open on Drupal.org →
Created on 6 February 2024, about 1 year ago
Updated 20 February 2024, about 1 year ago

Problem/Motivation

For now we only have unstyled labels in front of each switch with only some kine of uuid for each option.

In the fllowing example we have aria-labelledby="ck-editor__aria-label_e1adaf820d7fde1e67537b5f8cc0785f4"

<li class="ck ck-list__item">
  <button class="ck ck-button ck-on ck-button_with-text ck-switchbutton" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_e1adaf820d7fde1e67537b5f8cc0785f4" aria-pressed="true" data-cke-tooltip-position="s">
    <span class="ck ck-button__label" id="ck-editor__aria-label_e1adaf820d7fde1e67537b5f8cc0785f4">Arrow button dark</span>
      <span class="ck ck-button__toggle">
        <span class="ck ck-button__toggle__inner">
        </span>
      </span>
  </button>
</li>

Proposed resolution

It would be great if we could have for exemple an additionnal data-attribute matching with the applied classes eg 

<button ...  data-link-style="a.btn.btn-arrow-dark">

This way we could leverage back office theme css to provide extra styling by targetting the data-attribute.

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France ericdsd France

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ericdsd
  • Comment about 1 year ago →
    🇮🇳India ravi kant Jaipur

    @ericdsd
    If i am not wrong, this module is not providing option to add attributes.
    Also can you provide recreation steps for this issue?

  • Comment about 1 year ago →
    🇫🇷France ericdsd France
  • Comment about 1 year ago →
    🇫🇷France ericdsd France

    @Ravi Kant, i actually suggest to add data-attributes to the back office widget options to allow making it more "wysiwyg", not to change the markup genrated in the frontend by the module.

  • Comment about 1 year ago →
    🇺🇸United States justcaldwell Austin, Texas

    Rather than attempting to style the link dropdown UI, you can make the link/button style CSS available to the wysiwyg text area via [New API for adding theme-specific styles in CKEditor 5 | Drupal.org]( https://www.drupal.org/node/3259165 → ). With this approach, your editors will see the resulting style changes on their actual content as soon as they select a link style or styles.

  • Comment about 1 year ago →
    🇫🇷France ericdsd France

    Hi justcaldwell that's of course what i'll also do, but it's clearly easier for editor to see the layout of the button style they use. That's why having a way to target option to apply custom style would be very nice to have.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024