Multiple Blocks: Padding setting in JSON is no longer working

[iamtakashi]

Description

This is likely caused by the work reducing the specificity, but now, with the Gutenberg plugin active, the default overrides the padding for the blocks that use unordered or ordered list elements.

I've noticed this issue in the following blocks, but there might be more.

• Archives Block,
• Categories List Block,
• Latest Comments Block,
• Table of Contents Block (the cause might be a different issue)

Step-by-step reproduction instructions

1. Go to the editor
2. Add one of the blocks affected by this issue
3. Change the padding for the block in the JSON
4. Notice it's overridden by the default
5. Deactivate Gutenberg plugin, and see the difference.

Screenshots, screen recording, code snippet

Environment info

• WP 6.5.2
• Gutenberg Trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

@tellthemachines if I remember correctly, you have been doing work around specificity. Mind taking a look?

[tellthemachines]

@iamtakashi which theme are you testing with? I can't find that :where(ol,ul) rule anywhere in core so assume it's coming from a theme stylesheet? Theme stylesheets are loaded after block global styles in the DOM so they will override global styles.

[t-hamano]

:where(ol,ul) is probably defined by Twenty Twenty-Four theme. This is because the List block uses element as a selector. I was able to reproduce this issue with a customized TT4 theme.

Testing Instructions

• Activate TT4 theme.
• In theme.json, add the following code:

  {
  ...
  "styles": {
      "blocks": {
          ...
          "core/archives": {
              "spacing": {
                  "padding": {
                      "left": "3em"
                  }
              }
          },
          ...
      },
      ...
  },
  ...
  }

• Insert an Archive block.
• Check the CSS applied on the front end.

WP6.5

Latest Gutenberg

The fundamental problem may be that the List block's selector affects other blocks. #56469 has been submitted to add the block class name to the List block selector.

[tellthemachines]

Oh, good detective work there @t-hamano ! Yes, that's a side-effect of the specificity reduction but ultimately the best solution would be a classname for the list block.

[iamtakashi]

Hi @tellthemachines @t-hamano, Thanks for looking into it.

Yes, I usually set padding to the List block like TT4 and other list type blocks accordingly, and the padding value can vary depending on the block.

[aaronrobertshaw]

It's also worth noting that Gutenberg's reset stylesheet for the iframed editor will have a non-zero specificity as well. Any stylesheet that adds styles for ul,ol will break global styles configuration on these blocks. For example, Twenty Twenty One's padding styles reset for lists.