When the newly introduced "Show element IDs in the editor" option and the core "Show Blocks" feature are enabled at the same time in CKEditor 5, a visual conflict occurs. The ID badge directly overlaps the HTML tag label (e.g., h2, p) in the top-left corner, making both labels hard to read.
1. Enable "Show element IDs in the editor" in the text format configuration.
2. Ensure the "Show Blocks" button is in the active toolbar.
3. Create a piece of content, add an ID to a heading or paragraph, and toggle "Show Blocks" on.
4. Observe that the blue ID badge sits directly on top of the block label.
Add a small CSS adjustment to introduce proper spacing or offset for the ID badge when it coexists with the core Show Blocks styles.
Minor visual fix in the CKEditor 5 editing view to prevent overlapping labels.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | ss-fix.PNG | 23.73 KB | angel_devoeted |
| ss3.PNG | 28.45 KB | angel_devoeted |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #4
dieterholvoet commentedComment #5
angel_devoeted commentedThanks @dieterholvoet.
It looks good to me.
Comment #7
dieterholvoet commented