Add consistent default margins for left- or right-aligned widgets in CKEditor

Created on 2 August 2019, over 5 years ago
Updated 24 May 2024, 7 months ago

Problem/Motivation

In #2994696-220: Render embedded media items in CKEditor , we discovered that CKEditor widgets (e.g., embedded images or media items) which can be aligned to the left or right are displayed without any margins by default, butting up right against the text that flows around them. Unless, that is, the frontend theme (which is used by CKEditor) was thoughtful enough to include some margins in its styling. That's kind of icky -- margins are nice and make things look better.

Proposed resolution

Add generic margins for CKEditor widgets which can be aligned left or right -- i.e., anything that can interact with filter_align.

Remaining tasks

Figure out the best approach to do this, and do it. Wim Leers suggested:

[Let's] add margins in a follow-up (and then target all CKEditor widgets (by using the selector .cke_widget_wrapper). Then things stay consistent :)

Sounds good :) Will need manual testing and screenshots.

User interface changes

TBD

API changes

TBD

Data model changes

TBD

Release notes snippet

TBD

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Media 

Last updated about 22 hours ago

Created by

🇺🇸United States phenaproxima Massachusetts

Live updates comments and jobs are added and updated live.
  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Needs usability review

    Used to alert the usability topic maintainer(s) that an issue significantly affects (or has the potential to affect) the usability of Drupal, and their signoff is needed. When adding this tag, make it easy to review the issue. Make sure the issue summary describes the problem and the proposed solution. Screenshots usually help a lot! To get sign-off on issues with the "Needs usability review" tag, post about them in the #ux channel on Drupal Slack, and/or attend a UX meeting to demo the patch and get direct feedback from designers/UX folks/product management on next steps. If an issue represents a significant new feature, UI change, or change to the general "user experience" of Drupal, use Needs product manager review instead. See the scope of responsibilities for product managers.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024