nested Super Lists do not indent in Block editor

  • dmrzzz

    (@dmrzzz)


    1 year, 4 months ago

    When editing a page in the block editor, nested Super Lists do not visually indent; they are all displayed at the same level (aligned all the way to the left), making it impossible to see the structure.

    (Ditto for the rendered view, but that’s easier to work around with my own CSS, so I care much more about the editor view)

    I can reproduce easily as follows:

    <!-- wp:paragraph -->
    <p>Preceding paragraph</p>
    <!-- /wp:paragraph -->

    <!-- wp:createwithrani/superlist-block {"listStyle":"ol"} -->
    <ol class="wp-block-createwithrani-superlist-block ol"><!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 1</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item -->

    <!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2</p>
    <!-- /wp:paragraph -->

    <!-- wp:createwithrani/superlist-block -->
    <ul class="wp-block-createwithrani-superlist-block ul"><!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2.a</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item -->

    <!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2.b</p>
    <!-- /wp:paragraph -->

    <!-- wp:createwithrani/superlist-block {"listStyle":"ol"} -->
    <ol class="wp-block-createwithrani-superlist-block ol"><!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2.b.1</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item -->

    <!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2.b.2</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item --></ol>
    <!-- /wp:createwithrani/superlist-block --></li>
    <!-- /wp:createwithrani/superlist-item -->

    <!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 2.c</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item --></ul>
    <!-- /wp:createwithrani/superlist-block --></li>
    <!-- /wp:createwithrani/superlist-item -->

    <!-- wp:createwithrani/superlist-item -->
    <li class="wp-block-createwithrani-superlist-item"><!-- wp:paragraph -->
    <p>Item 3</p>
    <!-- /wp:paragraph --></li>
    <!-- /wp:createwithrani/superlist-item --></ol>
    <!-- /wp:createwithrani/superlist-block -->
    • click Exit code editor
    • Observe that the visual editor shows all three levels of nested lists aligned all the way to the left, making it impossible to see the structure.
    • (Optionally click Document Overview to see the structure)
    • Publish, and View Page
    • Observe that the rendered view likewise shows all three levels of nested lists aligned all the way to the left, making it impossible to see the structure.

    Here’s what I think is going on…

    In a regular list, <ul> and <ol> default to padding-left: 40px; in the browser, producing nice indentation.

    Unfortunately, for e.g. Super List <ol class="wp-block-createwithrani-superlist-block ol"> this desirable behavior gets overridden by the plugin’s inline

    .wp-block-createwithrani-superlist-block {
      --padding:var(--wp--custom--superlist-block--spacing--padding,inherit);
      padding:var(--padding);
    }

    which effectively results in padding:initial; (i.e. 0) since var --padding is set but empty (our parent element does not have a var --padding value for us to inherit).

    I don’t understand the reasoning behind the above CSS in the plugin, but I observe that temporarily customizing

    .wp-block-createwithrani-superlist-block {
      padding: var(--wp--custom--superlist-block--spacing--padding,revert-layer);
    }

    in Firefox Inspector makes the playground environment look much better.

    (Note that this customization must be applied directly to padding; customizing --padding: revert-layer is no good because the browser doesn’t have a default value for the var --padding)

    Viewing 2 replies - 1 through 2 (of 2 total)
    • Plugin Author Aurooba Ahmed

      (@aurooba)

      1 year, 4 months ago

      @dmrzzz Hallo!

      This is a good question/discussion. 🙂 Super List does its best not to presume too much about how you want to indent your nested super-lists. There are absolutely scenarios where you may not want them indented at all, and the plugin is intended to be as un-opinionated as I could reasonably make it (although admittedly there is some opinion in horizontal lists).

      Now – there are a few ways you can adjust this for yourself based on your preference:

      1. Use the Margin control for the block to set your desired indentation for nested lists.
      2. If you have a theme you’re working with, add the --wp--custom--superlist-block--spacing--margin variable in your editor stylesheet and set it to your preferred margin setting.
      3. If you work with theme.json you can add it there (theme.json is the reason the variable name is what it is 🙂 Code below that should work!
      {
      	"$schema": "https://schemas.wp.org/trunk/theme.json",
      	"version": 2,
      	"settings": {
      		"custom": {
      			"superlistBlock": {
      				"spacing": {
                                              "margin": "0 0 0 1rem"
                                      }  
      			}
      		}
      	}
      }

      Let me know if you have any other questions!

      Thread Starter dmrzzz

      (@dmrzzz)

      1 year, 4 months ago

      @aurooba, thanks for the quick response and the suggestions!

      I do see now that in the playground environment (Twenty Twenty-Five theme),

      1. Appearance > Themes, Customize
      2. Styles > Blocks > Super List
      3. click “Unlink sides” for Padding
      4. set left padding to 40px

      makes it look nice in both the editor and the frontend by adding this inline style rule:

      :root :where(.wp-block-createwithrani-superlist-block) {
        padding-left: 40px;
      }

      Unfortunately my real use case requires me to use a theme I can’t edit which doesn’t offer those customization controls 😢️, so at least for the moment I suppose I’ll need to find some other way to sneak either a style rule or custom setting into my editor.

      That said, while I love flexibility and customization, I also feel like it would be beneficial for the default behavior out of the box to match longstanding expectations for how lists behave (both in HTML and in WordPress).

      Back to the playground environment, if I create the same structure using vanilla WP Lists:

      <!-- wp:list {"ordered":true} -->
      <ol class="wp-block-list"><!-- wp:list-item -->
      <li>Item 1</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>Item 2<!-- wp:list -->
      <ul class="wp-block-list"><!-- wp:list-item -->
      <li>Item 2.a</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>Item 2.b<!-- wp:list {"ordered":true} -->
      <ol class="wp-block-list"><!-- wp:list-item -->
      <li>Item 2.b.1</li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>Item 2.b.2</li>
      <!-- /wp:list-item --></ol>
      <!-- /wp:list --></li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>Item 2.c</li>
      <!-- /wp:list-item --></ul>
      <!-- /wp:list --></li>
      <!-- /wp:list-item -->

      <!-- wp:list-item -->
      <li>Item 3</li>
      <!-- /wp:list-item --></ol>
      <!-- /wp:list -->

      then I get precisely the indentation behavior I expect, not because WP is being opinionated but because of the standard browser defaults for <ul> and <ol>.

      I’m definitely not an expert in CSS or WP, but it seems to me that if the plugin were to provide

      .wp-block-createwithrani-superlist-block {
        padding: var(--wp--custom--superlist-block--spacing--padding,revert-layer);
      }

      instead of

      .wp-block-createwithrani-superlist-block {
        --padding:var(--wp--custom--superlist-block--spacing--padding,inherit);
        padding:var(--padding);
      }

      we would still retain all the customizability we have now, but also benefit from desirable out-of-the-box default behavior in the common case when no customizations are applied.

      Thanks for considering this!

    Viewing 2 replies - 1 through 2 (of 2 total)

    The topic ‘nested Super Lists do not indent in Block editor’ is closed to new replies.