ckeditor5 cannot switch between heading with class paragraph with style or other block elements with class let alone styled spans

Solution!?

https://github.com/rgpublic/ckeditor_custom_heading

Via rgpublic in Allow CKEditor 5 to create a <h2 class="something"> directly

(The module did not work when i tried it.)

That overall approach, custom headings see below, is one good answer: if you want a single list showing all options at once.

Ended up going with the approach of hiding inapplicable styles, so what you get is a list of block types (H2, paragraph, etc) and then you can apply any relevant styles to them— seems a little better than having H2, H2 green, H2 blue, H3, H3 green, H3 blue etc all in one list.

Here is my CSS for that:

/* Hide style previews. */
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
  display: none !important;
}
/* Hide group labels. */
.ck.ck-style-panel__style-group .ck.ck-label {
  display: none;
}
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
  height: auto !important;
  border: none !important;
}
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label {
  height: auto !important;
  line-height: inherit !important;
  padding: 10px !important;
}
.ck.ck-button.ck-style-grid__button.ck-off.ck-button_with-text,
.ck.ck-button.ck-style-grid__button.ck-on.ck-button_with-text {
  min-height: auto;
  border-radius: 0;
}

/** Hide disabled styles from dropdown grid. */
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled="true"] {
  display: none;
}
/* tighten up the whitespace in the style grid, and convert it from a grid to a list, to make long lists of styles more scannable: */
/** Show style panel in a list instead of a grid, and tighten whitespace */
:root .ck.ck-style-panel {
  padding: var(--ck-spacing-small);
}

:root .ck.ck-style-panel .ck-style-grid {
  --ck-style-panel-columns: 1;
  --ck-style-panel-button-width: 360px;
  --ck-style-panel-button-height: 80px;
  column-gap: var(--ck-spacing-small);
  row-gap: 0;
}

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
  padding: 0;
}

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * {
  padding: var(--ck-spacing-small);
  margin: 0;
}

You put this in a CKEditor5-specific stylesheet that you can put in your regular, front-end, non-admin theme with two lines in your theme’s *.info.yml:

ckeditor5-stylesheets:
  - css/ckeditor5-tweaks.css

based on a fantastic answer from James Wilson in Drupal’s Slack, https://drupal.slack.com/archives/C01GWN3QYJD/p1699445645695819?thread_ts=1698795564.505889&cid=C01GWN3QYJD

There is a feeble workaround for this. Clearly not ideal though: Create all the styles you want and apply them to the HTML tags that you want.

h2.green|Green H2
h3.green|Green H3
h4.green|Green H4
h5.green|Green H5
p.green|Green
li.green|Green list item

(Edited above to make clear that every label, annoyingly, has to be unique.

Hide disabled styles (i.e., the grayed out ones) from the UI with custom CSS.

/** Hide disabled styles from dropdown grid. */
:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled="true"] {
  display: none;
}

Optionally, tighten up the whitespace in the style grid, and convert it from a grid to a list, to make long lists of styles more scannable:

/** Show style panel in a list instead of a grid, and tighten whitespace */
:root .ck.ck-style-panel {
  padding: var(--ck-spacing-small);
}

:root .ck.ck-style-panel .ck-style-grid {
  --ck-style-panel-columns: 1;
  --ck-style-panel-button-width: 360px;
  --ck-style-panel-button-height: 80px;
  column-gap: var(--ck-spacing-small);
  row-gap: var(--ck-spacing-small);
}

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
  padding: 0;
}

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * {
  padding: var(--ck-spacing-small);
  margin: 0;
}

Other people running into the problem:

https://www.drupal.org/forum/support/post-installation/2022-11-30/how-do-i-configure-the-styles-dropdown-in-ckeditor-5

(The “upstream bug” that is marked fixed i don’t think would have helped anyone; if you are in one type of element you still cannot select the style of any other type, so you have text you want to turn into a certain type of list like the original poster and you feel you cannot because those list styles are grayed out— you have to know to first select list, and then the styles for lists are unlocked. The upstream bug just ensures that there is some way to get there, that list items are technically allowed in the format, not that there will be an intuitive way or even a button to make the list item, and so enable the style.)

Again, telling people when switching styles in CKEditor5 doesn’t work at all was the big fix for Drupal: [Style] Add tests for inability to apply styles to , , , etc. in CKEditor 5 — and allows applying it to all elements [#3326261] | Drupal.org

Meanwhile over in CKEditor 5 land, documentation does not address this limitation head-on:

https://ckeditor.com/docs/ckeditor5/latest/features/style.html https://ckeditor.com/docs/ckeditor5/latest/features/headings.html

One workaround is custom headings:

https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements

Which is what rgpublic did as noted above.

This would be an improvement:

Styles Feature: Allow specifying multiple (block) elements to apply to · Issue #12771 · ckeditor/ckeditor5

And this would make the styles dropdown work like CKEditor4:

[Style] Style dropdown should insert (some) elements. · Issue #14372 · ckeditor/ckeditor5

Also raised as a workaround/approach to this: CKEditor 5 support for Content Templates [#3273358] | Drupal.org


The most basic things are so much harder than they should be.

Thought this didn’t work, maybe it was the stack overflow answer that definitely didn’t work for CKeditor5 that i’m thinking about though https://www.thenoisyspider.com/how-to-find-ckeditor-version-drupal8.html


And then there’s embedding video and other media in CKEditor…

You have requested a non-existent parameter “ckeditor_media_embed_install”

Fixed on fully upgraded CKEditor5 versions i think.

Tangentially related, CKEditor5 Embedded Content | Drupal.org

Background

ckeditor5 - Drupal - 181 new items - Slack

  24 days ago

Current experience with Drupal and CKEditor5:My list of h2.brand-color, h2.secondary-color, etc. styles does not work at all as expected.You are at a new line, and go to select “H2 brand color” and— it’s greyed out and you cannot select it?  What?  Why?  You type your heading text, highlight it— and you still cannot tell this gosh-darned newfangled ckeditor to make your text into your special heading!  (If your sitebuilder has helpfully removed the Heading plugin to use only the Styles plugin so it is less confusing, you are not able to get your heading at all without editing source.  Not good.)This is a big missing piece that i’m not finding tracked in an issue of its own for Drupal (mentioned by the amazingly ubiquitous WimLeers in #3326261 as the non-critical piece) and on CKEditor has very little traction yet, [Style] Style dropdown should insert (some) elements. · Issue #14372 · ckeditor/ckeditor5.There are a couple ways we could go with this, and the best UX for a given direction is not necessarily compatible with a different direction.

  1. Scoped styles are the way to go, make changing between different block-level elements happen by going to the Heading listing, the ordered list, etc. and the Styles dropdown only applies classes (in general).  In this case it would be best for the styles that do not apply to not be shown at all, rather than greyed out.
  1. If a style exists, it is shown, and it always works.  On a new line?  You can select from the Styles dropdown and make it a heading or ordered list or anything that is defined in a style.  In an existing pararaph, heading, or any other element?  Switching to a style that has the element defined will convert the element you are on to the one in the style you select.  (That is, we push for https://github.com/ckeditor/ckeditor5/issues/14372 )

Whichever approach we go for, it’s worth making a conscious decision and starting to go in that direction now.  Sound about right?  Thoughts on which way to go, or counter-arguments that this is a false dichotomy or there are still better approaches?

34 replies


  22 days ago

You must first create a <h2> , CKE5’s Style cannot yet create new elements. Upstream issue: https://github.com/ckeditor/ckeditor5/issues/14372 /cc @Witek Socha

#14372 [Style] Style dropdown should insert (some) elements.

The main difference between CKEditor 4 and 5 in styling is the ability to insert and rename elements. CKEditor 4 added the elements from the Styles list like containers or headings:Screen.Recording.2023-06-12.at.11.57.40.movCKEditor 5 only allows styling when the cursor is in the element.Screen.Recording.2023-06-12.at.14.05.49.movPotential improvements are that styling will allow to insert/rename of some elements to allow for example insertion of divs (rel: #13341).

Labels

type:improvement, domain:ui/ux, squad:core, package:style

Comments

2

ckeditor/ckeditor5 | Jun 12th | Added by GitHub

  22 days ago

https://www.drupal.org/project/drupal/issues/3326261 added explicit test coverage for all reported use cases. Hence they’re all guaranteed to work :+1: :slightly_smiling_face:

Drupal.org

[Style] Add tests for inability to apply styles to , , , etc. in CKEditor 5 — and allows applying it to all elements

Problem/Motivation Using a style ul.test|Test I would expect to be able to apply to lists but the styles dropdown is completely greyed out. This was working in CKEditor 4. Steps to reproduce Create a text format with a style. Add style ul.test|Test Create a page and in CKEditor create a list and see the style dropdown is greyed out. Proposed resolution Be able to apply styles to lists in CKEditor 5.

Dec 9th, 2022

  22 days ago

But you must create the element first, then apply a style to it.

  22 days ago

I think that’s the source of all your troubles. You’re right that this is different compared to CKEditor 4. But most sites have been using it in this way already anyway.

  22 days ago

That’s why this is one of the few reports about the absence of that feature (and the very first very detailed report — thank you!)

  17 days ago

Thanks for the detailed report, feedback, and suggestions! :bow: Being totally open, we don’t plan to focus on the style dropdown. Maybe it’s an area for open-source contribution from the Drupal side? Happy to collaborate.

  16 days ago

Yeah, what i was trying to get at is that the current site builder and content editor experience is really rotten if you want three styles (classes) to be applicable to ten HTML elements (as evidenced by https://www.drupal.org/forum/support/post-installation/2022-11-30/how-do-i-configure-the-styles-dropdown-in-ckeditor-5 ), and that what we need to provide is:

or

(edited)

#14206 Introduce unique, toggleable styles in the Styles plugin

ckeditor/ckeditor5 | May 22nd | Added by GitHub

#14372 [Style] Style dropdown should insert (some) elements.

ckeditor/ckeditor5 | Jun 12th | Added by GitHub

  16 days ago

To maybe make the example really clear, it is very annoying both as a sitebuilder and a content editor that, given that i must use the Heading dropdown to set the element anyway, that i cannot then add a style to any element by setting the styles to this:

.green|Green .black|Black .black-dot|Black ● .blue|Blue

As the sitebuilder, whatever, i can copy all that onto h2, h3, h4, h5, h6, p, li… but for the content editor to have to go through six × four = 24 unusable styles to be able to apply the one available to them— that’s not sufficiently usable and… ok the 2am is talking but i am shocked this passing for “fine for me” in the CKEditor world, seems it is used only for simple styles?

  16 days ago

i am shocked this passing for “fine for me” in the CKEditor world

The experience is not ideal, for sure. Style dropdown requires a serious rethink from the usability, and architecture perspective. And the gaps are mostly visible in the advanced usage, as you pointed out. But given the scope, and being not a simple, quick fix, we just won’t have manpower to push this year into our timeline. We have been able to increase the scope of it to style more elements, but we needed to shift priorities to other plugins and features.

  16 days ago

that i cannot then add a style to any element by setting the styles to this:

Wait, you want to be able to apply 4 different styles to >6 different elements?! :open_mouth:  That hardly seems to be a 90% use case? :sweat_smile:

  16 days ago

I get that it’s frustrating for you today, but it’d really help if you could explain what kind of information architecture requires this kind of complexity for the site’s content authors :pray:

  16 days ago

There is a feeble workaround for this. Clearly not ideal though:

h2.green|Green h3.green|Green h4.green|Green h5.green|Green p.green|Green li.green|Green

/** Hide disabled styles from dropdown grid. */ :root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button[aria-disabled=“true”] { display: none; }

/** Show style panel in a list instead of a grid, and tighten whitespace */ :root .ck.ck-style-panel { padding: var(–ck-spacing-small); }

:root .ck.ck-style-panel .ck-style-grid { –ck-style-panel-columns: 1; –ck-style-panel-button-width: 360px; –ck-style-panel-button-height: 80px; column-gap: var(–ck-spacing-small); row-gap: var(–ck-spacing-small); }

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { padding: 0; }

:root .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview * { padding: var(–ck-spacing-small); margin: 0; }

(edited)

  16 days ago

I can sympathize with this use case. I seem to remember CKE4 working this way; if I had a style in the style dropdown for an H4 and I applied it to some text, the text automatically also became H4. It seems like nothing maybe, but it removed a step.For the issue with the colors, I wonder if it makes sense to create a style span.color that you could then use on multiple elements. For example:<h2><span class=“color”>…</span></h2>
<p><span class=“color”>…</span></p>I’ve not tried this, but it seems like it could work(?). (edited)

  16 days ago

Thank you— yeah, i was considering adding span as an element to do that— the only suggestion from the validator was to add span in the ‘source edit’ block though— especially since for the paragraph use case allowing specific words to be colored is at least plausible.  Everywhere else though it’s a hack that makes mistakes likely— seventeen out of nineteen letters in a heading getting the color applied, etc.

  16 days ago

Yes, I can see that possibility.

  16 days ago

@wimleers (he/him) you do understand i am not talking about being able to make my h3 green and blue and black at once, right?  I am talking about having six levels of headings and letting people make an h1 through h6 (we let the page title be replaced with a header image + rich text, so h1 is in play) be set to any of those three colors— ideally enforced to be only one at a time, but i stopped looking for ideal a while ago.  Then on this site the design lets headings have a black dot at the end (heaven help us if we allow the dot to be different colors too).Three colors plus dot we are at four styles, and it would be weird if you couldn’t apply them to each level of heading.Basically if .class worked without demanding you specify a single element or there were a pseudo header element or a match all * element or h1|h2|h3|h4|h5|h6.brand-color was accepted as a single style, this would be cool.  But to both be told you have to select the element and the style class separately, and be told you cannot have your style easily (for sitebuilder and the content editor) available on multiple element types— that is a bit of a showstopper.  (Again if i could do h*.brand-color in the Styles definition there’d be no complaints.)James Wilson’s CSS for hiding the unusable styles from the person editing is an absolute lifesaver and what we will be doing on this site i think.I think Aaron’s approach is probably the best general compromise available— add a span plugin to make Styles (or an alt-styles) work the same way as bold, italic, etc— that is, you can use them anywhere!  And it is up to the applier to select text first, make sure they have the entire line they want selected.  But we do want another plugin, because one shouldn’t have to add the source editor for that.  Especially since there’s another frustration that once you have gotten into the point of adding your span styles and getting this message:

The Style plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span class="green blue">. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

dragging the Source Editing button into the active toolbar doesn’t make the Source options vertical tab show up— i think i saw a bug for that already filed.   Workaround i just found: toggle disabling/enabling “Limit allowed HTML tags and correct faulty HTML” (and probably any filter) and the Source Editing options become available.But once you do add <span class> to the source edit, span.brand-color etc styles do work exactly as Aaron postulated.

There is a feeble workaround for this. Clearly not ideal though:

h2.green|Green h3.green|Green h4.green|Green

(edited)

From a thread in

ckeditor5 | Nov 8th | View reply

  16 days ago

(it’s not related to Style) Have you checked the options to style headings via the Heading plugin?

  16 days ago

Yes i linked to that!  (A couple times i think.)  I’m thrashing back and forth in my mind between that approach to restoring the old “force the element to change” approach and the other two styles-are-separate approaches.  I think conceptually i do prefer the selection of header being separate from the application of style (an editor shouldn’t have to see HX, HX Green, HX Blue times six, but rather select a heading and then have a couple styles they can apply— hence going for James Wilson’s solution).

Yeah, what i was trying to get at is that the current site builder and content editor experience is really rotten if you want three styles (classes) to be applicable to ten HTML elements (as evidenced by https://www.drupal.org/forum/support/post-installation/2022-11-30/how-do-i-configure-the-styles-dropdown-in-ckeditor-5 ), and that what we need to provide is:

or

(edited)

From a thread in

ckeditor5 | Nov 8th | View reply

  16 days ago

And thank you, i don’t want that to be lost: Drupal could absolutely build on the Heading plugin, and yeah, i’m being so noisy here because i think this is something that Drupal has to give sitebuilders a pretty easy way of doing.  Ditching the heading dropdown for only the styles dropdown was pretty popular with CKEditor 4, and with a little Drupal coding we could make it easy to do the same thing except using only the heading plugin for CKEditor 5.  Either that, or Drupal could give a checkbox to apply James’ styles.  (Or we could do both, and provide documentation explaining how to use both approaches, and urging any particular site to pick one of the two approaches!)

ckeditor.comckeditor.com

Headings | CKEditor 5 Documentation

Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included. (65 kB)

https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements

There is a feeble workaround for this. Clearly not ideal though:

h2.green|Green h3.green|Green h4.green|Green

(edited)

From a thread in

ckeditor5 | Nov 8th | View reply

:male-scientist:  16 days ago

Tightly coupling visual styles with semantics is a dangerous game if it allows for content folks to unwittingly produce illogical heading structures.  While I agree that the UI to configure and select things needs some TLC, decoupling the two concepts seems like the most a11y friendly approach, while still allowing designers to break free of the shackles of heading sizing. (edited)

  16 days ago

^ this is one reason why projects of a significant size should have processes in place to review content edits by a core team of webmasters, who know how to look out for things like:

  16 days ago

Side note, another way to workaround complex DOM structures and applying styles manually in wysiwyg (may not be a good fit for headings with a matrix of stackable optional classes, but worth a look) is the CKEditor Templates module.

  16 days ago

Also worth pointing out on this topic:

Breaking free of the shackles of heading size

Decoupling heading level from style is a good solution Eg, h2.h4 a la Bootstrap.  However putting the font-size/style on an arbitrary class that could be added to a span  has its own set of pitfalls because there is no way to guarantee an “ideal” nested structure of h2 > span.h4.green  is actually wrapped inside the h2 so you could end up with p > span.h4.green.  And WAVE a11y tool (maybe others)  flags content that looks like it should be a heading when it doesn’t have the heading tag.

:male-scientist:  16 days ago

Often times, heading modifiers make the assumption they’re being applied to a block level element.  As James said, spans aren’t a panacea for all use cases, unfortunately.

  16 days ago

I support good content governance for both brand consistency and web accessibility, but sometimes the marketing team wants what they want, and they’re not going to understand why you won’t give it to them.

  16 days ago

And if you are answering to the Director of Communications, well, that’s that.

:male-scientist:  16 days ago

Hey, I answer to a director :smile:.  The only path forward for us is to not use ckeditor *to meet our designer’s needs for headings.https://www.drupal.org/project/layout_builder_block_headings (edited)

Drupal.org

Layout Builder Block Headings

The Layout Builder Block Headings module enhances site accessibility, lifts design constraints, and empowers site builders and content creators by allowing for the customization of both heading levels

Oct 28th, 2022

  16 days ago

And we’re back to the never ending dilema between structured content with mediocre admin ui tooling, and wysiwyg :stuck_out_tongue:

  16 days ago

It does worry me as someone who really wants to see Drupal succeed. I don’t want to see the limitations of CKEditor push people to another CMS, or (worse) to Gutenberg.

  8 days ago

@James Wilson sorry to revive an old thread, but I wanted to try your workaround and pasted

h2.green|Green h3.green|Green h4.green|Green h5.green|Green p.green|Green li.green|Green

Into my styles, but I get The label Green is not unique. error message and can’t submit the config form. (edited)

  8 days ago

Is there a setting or custom code that enables this approach?

  8 days ago

h2.green|Green heading 2 h3.green|Green heading 3 h4.green|Green heading 4 h5.green|Green heading 5 p.green|Green paragraph li.green|Green list item

  8 days ago

?

  8 days ago

Yup, okay — just wanted to be sure there wasn’t something I was missing. Thanks!