[upstream] CKEditor 4.7 regression: Styles dropdown broken

I follow all provided step.
I checked with Drupal 8.37, 8.4. But still not able to reproduce this issue.I am able see the "Button" option is there.

I tested your step via https://simplytest.me/ ?
Attaching a screenshot.

Please explain your steps in more details.

This is definitely still a problem. I created #2913989: Object Styles no longer can be applied in ckeditor's Styles dropdown with the same problem before I found this one. It happens on all Object Styles, not just a tags. We discovered this today when our Behat tests blew up.

By the way, the double click trick did work for links, but it doesn't work for items like lists.

So this is an issue in the Ckeditor library. https://github.com/ckeditor/ckeditor-dev/issues/862

This patch is a FunctionalJavascript test to ensure that the styles can be applied correctly. It passes successfully in 8.3. The only change in 8.4 that I made is the submit button is now "Save" instead of "Save and publish". So this should fail in 8.4. This can be used to test a fix for this problem.

Here is the fix that was implemented in https://github.com/ckeditor/ckeditor-dev/issues/862.

it works ! thanks a lot for the patch! tested on 8.4.0

I found one issue still after applying this patch.

I applied the following styles to ckeditor:
a.btn|Button
a.btn.secondary|Button Second
a.btn.tertiary|Button Third
a.btn.quarternary|Button Fourth

I can only see the first button style in the dropdown. I noticed that when you add the styles, Drupal does not update Allowed HTML tags correctly. Previously it added the new class to the allowed tags but now it does not add it. After I added the new classes to the allowed HTML tags the buttons appeared in the list.

Thanks all!

This patch appears to be changing JavaScript in a vendor library, which we can't do. It looks like there is an upstream issue for this already in https://github.com/ckeditor/ckeditor-dev/issues/862, so I'm guessing this will be fixed for Drupal once that fix is in a release?

Updating the summary with the screenshot from the duplicate issue.

Re #22, yes, unfortunately this fix is only in CKEditor 4.8, so that #2908864: Update CKEditor library to 4.7.3 will not fix this.

Marked #2914341: [upstream] CKEditor not populating style dropdown as a duplicate of this. I skipped reading this issue initially because it has a vague title.

Quoting myself at #2914341-3: [upstream] CKEditor not populating style dropdown:

I tried:

a.button|Button
p.fancy|Fancy
blockquote.callout|Callout

And only p.fancy works.

So I can unfortunately confirm this bug. This bug still exists in CKEditor 4.7.3, which was just committed at #2908864: Update CKEditor library to 4.7.3.

Pinged CKEditor maintainer @mlewand to get a 4.7.x bugfix release out. We don't want to wait for 4.8.x.

Chromium--

If you want to still look at adding the patch from #16, it is just a test to make sure that Drupal's implementation with the library works.

#28: I realize that, and while it's very cool you wrote that, I'm a bit torn about whether it makes sense to add to our test coverage or not. This is a rare CKEditor regression. We don't need or want to add such tests for every CKEditor feature that Drupal supports by default, because that'd mean duplicating all of CKEditor's test coverage.

Thoughts?

Yep, I hear you on not wanting to reproduce CKEditor's test coverage. I think my thought process was not to check that ckeditor does what it is supposed to do standalone, but that it does what Drupal asks it to do when integrated. That's a thin line I realize. We already have the functional test CKEditorStylesComboAdminTest, but it is obviously for the admin interface and never checks to see if what Drupal supplies to CKEditor actually works. I know javascript tests are expensive performance-wise, but I would think it would help to take the extra step to make sure that the final output from a javascript heavy module is as expected. It was a little surprising to me that there weren't more javascript tests in the module.

I guess I'm looking at it from my client's side in that if we didn't have the Behat (javascript) tests in place for these things we would have pushed to them a release that they would consider broken. Either way, I'm fine. I'm not familiar enough with what should and shouldn't get coverage in core. At some point we have to assume that a 3rd party's API is going to do what it claims.

BTW, thanks for the work you all do to keep core stable!

For everyone who just updated to 8.4.0 and faces this issue:
One possible workaround is to replace the ckeditor.js with that one from Drupal 8.3.7 (should be version 4.6.2), then everything should work well again.
But let's hope that there's soon a new CKEditor 4.7.x release!

Here is an patch to downgrade to CKEditor 3.6.2 in composer.json:

"drupal/core": {
    "Downgrade CkEditor until https://www.drupal.org/node/2911749 is fixed": "https://www.drupal.org/files/issues/2911749-ckeditor_downgrade_3.6.2.patch"
},

As a stop gap, #17 still works on 8.4.0. #32 will not work when running via composer.

This is a re-roll of #17 against ckeditor 4.7.3 released with drupal 8.4.1.

This bug is still happening on Drupal 8.4.2, after trying to use the Styles dropdown, it won't work.

Reroll for 8.4.2.

Last patch applies cleanly for us on 8.4.2 and fixes our problems. Thanks Sam152. Hope this gets fixed soon.

The latest patch is working for me as well, I'm on D8.4.0. Thanks for this!

Looks like it's been a month and doesn't look like bugfix release on upstream. Is it OK to go with #37 for now to unblock 8.4.x installs?

Update: 4.8.0 is expected to released in a week. I created #2926932: Update CKEditor library to 4.8.0 to follow up.

Temporary patch #37 apply well on 8.4.3 but did not fix the issue.

As I found out on my installation (8.4.2) we also defined styles like "a.btn|Button". These never appeared, even when the cursor was set on a link. BUT they appeared as soon as I double clicked on the link, then the Linkit plugin opened (which is also installed), i closed the dialog so that the entire link was still marked, and then the styles would appear in the style dropdown.

So I guess this has to be an issue that the entire HTML tag needs to be marked first for the styles to be available.

Added a patch with CKEditor 8.4.0 in the follow up issue #2926932: Update CKEditor library to 4.8.0.
The patch was created for Drupal 8.5.x, but also applies to Drupal 8.4.3.

Styles like "a.btn|Button" can now easily be selected.

Just ran into this issue too when trying to add theme classes as styles in CKEditor. As a workaround, I was able to target the <a> object by clicking on the link text in the WYSIWYG and then clicking "a element" from the element tree in the CKEditor footer bar.

Which then let me use the appropriate styles for <a> tags in the styles dropdown.

Please use the patch from #2926932: Update CKEditor library to 4.8.0.

I tried to convince core committers to commit CKEditor 4.8.0 to Drupal 8.4.x (#2926932-11: Update CKEditor library to 4.8.0), but they've said this will not happen (#2926932-13: Update CKEditor library to 4.8.0).

Drupal 8.5 will ship relatively soon and therefore Drupal 8.4.x only receives critical bugfixes. This is not considered critical.

So, I'm very sorry — for now the solution will be to apply the patch at #2926932-4: Update CKEditor library to 4.8.0 to your Drupal 8.4 site. Drupal 8.5 will ship with that patch applied.

I'm leaving this issue open until Drupal 8.5 has shipped, to make this more findable.

I just ran into this, thank you for adding a summary of steps forward.

I don't think we can do anything here as per #46, please upgrade to 8.5.x to fix this problem.

I can confirm that you can patch with composer, the patch applies to Drupal 8.4.4 and fixes the bug.

"extra": {
  "patches": {
    "drupal/core": {
      "Upgrade CKEditor to 4.8": "https://www.drupal.org/files/issues/update_ckeditor_library_to_4.8.0-2926932-4.patch"
    }
  }
}

I should note that my users also found this problem and it did not get fixed by D8.5 and CKEditor 4.8 as there is a different issue at play for us.

We had this specified for the styles dropdown:

p.subhead.primary|Primary Subhead
p.subhead.secondary|Secondary Subhead

This worked until some unspecified time -- my users are not sure because they only use these styles occasionally, but they think it was working in the fall, so possibly at 8.4. Sorry I can't be more specific. In any event I dug deeper and found that this was caused by the option: Limit allowed HTML tags and correct faulty HTML. The clue was this was turned on for Basic HTML and not for Full HTML and the styles dropdown was broken for the former and working for the latter. Turning this HTML limit option off fixed the problem, but was not a safe solution.

The problem seems to be that the JS on the page automatically adds the following to the allowed HTML tags:
<p class="subhead primary secondary">

Sadly this does not seem to work. Changing it to <p class> fixes the problem and, since I can trust the users who have access to the dropdown, this fixes the problem for us, but possibly not for others. In any event it appears that the JS is creating allowed HTML tags that don't work with the back end code, though I'm not sure if the JS is the problem or the way the allowed HTML tags are interpreted. Either way I thought I'd report that the bug still exists for me and how I fixed it, in case this helps others.

Scratch what I said above. It seems to have been some odd caching issue since after saving it changed my option back to <p class=" subhead primary secondary"> and it works fine. I'm not quite sure what happened since it was broken on my local, dev, test and live, all with caches flushed... and then it wasn't. I'll close this back up shortly.

I seem to be having the initial issue on my Drupal 8.5.1 site. I don't see the "a.btn.cta" style until after I double-click the link, dismiss the link modal, and then check the dropdown. is anybody else experiencing this issue?

a.btn.cta|Button

This is a re-roll of #37 from 8.5.x that addresses the recent CKEditor SA for those that are not able to upgrade immediately to 8.5.x but still need CKEditor 4.8.0 (with security fixes).

Still seeing this bug with with 8.5.3 but cautious of applying any patches because of the comment about security above (#55).

What is the latest with this?

I had this problem on D8.5.6.

I fixed it by editing the settings of the "Limit allowed HTML tags and correct faulty HTML" feature.

Originally the list of "Allowed HTML tags" was like this:

<a href hreflang> <em> <strong> ...

I changed it to this:

<a class href hreflang> <em> <strong> ...

@juhog - provided solution worked for me. Tried other options but missed very simple thing.
Thank you @juhog.

There should be some type of documentation for this issue. @juhog #57 provided the correct solution.

Custom unordered list class

CKEditor plugin settings
ul.unstyled-list|Unstyled list

Limit allowed HTML tags and correct faulty HTML
<ul class type>