CKEditor 5 content squashed in off-canvas sidebar

@jptaranto has been helping to try and track this down so it would be great to get credit added for him.

He has pointed to https://git.drupalcode.org/project/drupal/-/blob/9.5.x/core/modules/cked... in 9.5.x which does not seem to exist on 10.0.x https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/modules/cke...

@acbramley: thanks for that research! That made it simpler to find where this change between 9.5 and 10 was introduced, and that issue was 📌 Refactor Drupal 10 settings tray / off-canvas to use modern CSS Fixed .

That being said … as a non-user of Settings Tray, it's not immediately clear to me what exactly the bug here is? 😅🙈 Could you please annotate the screenshot? 🙏

I think the last step in the steps to reproduce explains what is happening in the screenshot: "Notice there is no linebreak between the paragraphs".

@Wim Leers this is using Layout builder, it's when adding a new custom block with a WYSIWYG field on it, i.e the Basic block provided in the Umami demo profile.

Here's a screenshot of the whole page for more context.

Press Add Block (this opens the off canvas tray) > Create Custom Block (button at the top of the tray) > Basic Block

When inspecting elements inside the CKEditor, if I uncheck this CSS rule it fixes the display:

#drupal-off-canvas-wrapper [data-drupal-ck-style-fence] .ck.ck-content * {
  display: initial;
}

Reverting this removal fixes the display for me https://git.drupalcode.org/project/drupal/-/commit/983562f41496eed45777a...

Here's a patch.

The Needs Review Queue Bot → tested this issue. It 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.

Lint.

Here's another approach which solves the root cause to this problem. We could use revert for the reset to get the correct default values per element.

@acbramley thoughts on this approach?

@lauriii that does look cleaner, I am no CSS expert though so I don't really know which is more correct. It does fix the issue for me :)

Hey @lauriii - nice one! Yes I think this is the way do go. display: initial is causing all these block level elements to get display: inline instead!

Here's a little explainer for anyone interested: https://css-tricks.com/inherit-initial-unset-revert/

Thanks @jptaranto! If you think the change is ready, feel free to change the status to "Reviewed & tested by the community" 😊

Wow, a beautifully simple patch in the end! 🤩

Hi I have created a MR. Please merge. Thanks

@kunal_sahu there is no need to create an MR for a issue that already has an RTBC patch. This just creates more noise on the issue and confusion for the committers.

@kunal_sahu, I am removing credit as explained in #20 and per How is credit granted for Drupal core issues → .

Thanks for this. It fixed a a lot of problems.

There are still other problems with colours. the Source view and the hr are still there.

I have also added a patch for Drupal 9.5

Committed to 10.1.x and backported to 10.0.x and 9.5.x (via separate patch)

Thanks all

Automatically closed - issue fixed for 2 weeks with no activity.