block editor - Problem creating a two level list that is text only (not links)

admin管理员组

文章数量:1122846

Using the Gutenberg editor, I am trying to create a 2 level list using the list block. I want this list to behave as text-only bullet points, not as links. Each entry of the top level works fine, but when there is a hover (or finger in mobile) over any entry on the second level, the block of the all the entries on that level changes to black and only one of the second level lights up. How do I disable this "feature" on the second level so that the list just behaves like text when hovered or touched?

I was able to fix this by creating the SCSS class below, and applying it to a column block and placing the list inside it. I suspect I'm not the first person who wants a set of bullet point that don't act as links. Is there an easier way of doing this in wordpress without creating special CSS?

 $textColor: #333333; // Replace this with your desired text color

.text-list {
  ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;
      margin-left: 20px;
      display: block !important;
      visibility: visible !important;
      background-color: transparent !important;
      
      // Apply the same style recursively to nested lists
      ul {
        list-style-type: square; // Example for deeper levels; adjust as needed
        margin-left: 20px;
      }

      li {
        display: list-item !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: $textColor !important; // Use variable for text color
        background-color: transparent !important;
        transition: none !important;

        &:hover, &:focus, &:active {
          color: $textColor !important; // Ensure original text color on hover
          background-color: transparent !important;
          opacity: 1 !important;
          visibility: visible !important;
          transition: none !important;
        }

        // Apply styles recursively to nested list items
        ul {
          list-style-type: circle; // Adjust bullet style for nested levels
          margin-left: 20px;

          li {
            color: $textColor !important;
            background-color: transparent !important;
            display: list-item !important;
            visibility: visible !important;
            opacity: 1 !important;
            transition: none !important;

            &:hover, &:focus, &:active {
              color: $textColor !important;
              background-color: transparent !important;
              display: list-item !important;
              visibility: visible !important;
              opacity: 1 !important;
              transition: none !important;
            }
            // Continue nesting as necessary
            ul {
              list-style-type: square;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
  &:hover {
    ul {
      background-color: transparent !important;

      li {
        color: $textColor !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;

        ul {
          background-color: transparent !important;

          li {
            color: $textColor !important;
            background-color: transparent !important;
            opacity: 1 !important;
            visibility: visible !important;
            transition: none !important;
          }
        }
      }
    }

    background-color: transparent !important;
    color: $textColor !important; // Set the default text color for the entire block
  }
}

本文标签： block editorProblem creating a two level list that is text only (not links)