Bullet lists will not indent as block

Hi @SomebodySysop! Not sure if you're still looking for an answer on this, or that I have one, but I thought I'd throw out some things to consider:

1) Safari seems to be the outlier here, in that it appears to be applying the margin of a child element (the <p class="Indent1">) to the containing <li>. Whereas the other browsers are (correctly?) applying the margin to the paragraph, so there is extra space between the list marker and the contents of the <p>. I don't know who's right, but you might be able to add some CSS to account for the disparity (if a list of indented paragraphs is really what you require).

2) The only way I could produce code similar to your demo was to a) select several paragraphs, b) indent them, then c) turn them into a list. Obviously this is possible, but you're really creating a list of indented paragraph items, not an indented list, if that makes sense. This isn't the way the plugin was intended to work with lists (see below).

3) The indent plugin (provided by CKEditor 5) is not intended to act on a "root-level" list as a block. If you select all items in a single level list, you'll see that the indent icon is disabled. It supports indentation in lists by nesting an additional ol/ul within a given list item. Then it's up to your theme to set the margin on lists nested within list items.

4) To indent a list as a block, you could enable the Styles plugin, then add something like this to your Styles in the text format config:

ul.Indent1|Unordered list indent 1
ul.Indent2|Unordered list indent 2
ul.Indent3|Unordered list indent 3
...
ol.Indent1|Ordered list indent 1
ol.Indent2|Ordered list indent 2
ol.Indent3|Ordered list indent 3
...

Obviously this gets messy, as Styles requires a unique entry for each element/class combination, as well as a unique "human friendly" name for each style.

I hope some of that makes sense and/or helps.

Thank you for the response. I better understand why it works the way it does. But, I still miss being able create the "list of indented paragraph items" like I could before.

I'm going to try the new ckeditor5 plugin pack to see if it helps: https://ckeditor.com/blog/drupal-ckeditor-5-plugin-pack/?utm_source=The+...

If not, I'll try your suggestions.

Again, thanks!

Understood — good luck!

I experimented with plugin-pack's indent feature, as I need indent support for headers. Unfortunately it turned out to be a no-go for me. As far as I could tell, it does not support indentation with classes. It uses inline styles, and the indent appears to be hard-coded to '40px' per level. Kinda kills the ability to style lists in the theme.

If that's not a concern, it may be great for your needs.

Turns out there's content on our site that has the structure you described, so I ended up writing the CSS below to address this. Not something that can be added to the module, I don't think, as it likely needs to be tweaked for the specific needs of a given site.

The CSS needs to be in your front-facing theme, as well as pulled into your CKEditor 5 styles → . This is only works for current browsers with support for :has(), is:() etc.

li:has(> p.Indent1)  { margin-left: 2rem; }
li:has(> p.Indent2)  { margin-left: 4rem; }
li:has(> p.Indent3)  { margin-left: 6rem; }
li:has(> p.Indent4)  { margin-left: 8rem; }
li:has(> p.Indent5)  { margin-left: 10rem; }
li:has(> p.Indent6)  { margin-left: 12rem; }
li:has(> p.Indent7)  { margin-left: 14rem; }
li:has(> p.Indent8)  { margin-left: 16rem; }
li:has(> p.Indent9)  { margin-left: 18rem; }
li:has(> p.Indent10) { margin-left: 20rem; }

li:has(> p[class*="Indent"]) > p {
  margin-left: 0;
  margin-bottom: 0;
}

li:has(> p[class*="Indent"]) :is(ul, ol) li {
  margin-left: 0;
}

This essentially moves indent/margin applied to a <p> in a list item to the containing <li> (as Safari seems to do natively).

If your theme has other classnames that would match on the "Indent" substring in the last two rules, you could use :has() instead, e.g. replace:

li:has(> p[class*="Indent"]) ...

with

li:has(> p:has(.Indent1, .Indent2, .Indent3, .Indent4, .Indent5, .Indent6, .Indent7, .Indent8, .Indent9, .Indent10) ...

Thanks much! Will definitely give it a try!

On a similar scenario, I tried the CSS solution from https://www.drupal.org/project/ckeditor_indentblock/issues/3404739#comme... 💬 Bullet lists will not indent as block Active and it worked as expected!