Add "paragraph" as element in theme.json

[huubl]

What problem does this address?

I would like to set margin-bottom to the <p> tags for a classic theme with theme.json. There seems no way to do this for all <p> tags. This will help transforming a classic theme to a block theme.

What is your proposed solution?

[...]
  "elements": {
    "paragraph": {
      "spacing": {
        "margin": {
          "bottom": "15px"
        }
      }
    },
    [...]
  },
[...]

generating:

p {
    margin-bottom: 15px;
}

[t-hamano]

@huubl Thanks for the report.

If you want to apply a style to p tags, I think you can use the core/paragraph property. Does this approach solve your problem?

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "styles": {
        "blocks": {
            "core/paragraph": {
                "spacing": {
                    "margin": {
                        "bottom": "15px"
                    }
                }
            }
        }
    }
}

[huubl]

Hi @t-hamano,

Thanks for your comment!

I tried the setting the core/paragraph but found it was not working in my case. I took a closer look at it and I must admit that it is an exceptional situation and maybe opened an issue too fast :)

After some testing I now found that core/paragraph styles don't render in this case:

• using a classic theme (I used Twenty Seventeen for testing);
• with templates/index.html file added;
• and a page containing 'classic block' content.

What confused me was that the elements in the theme.json do render to css styles. That made me look for a paragraph setting in elements and found it doesn't exist.

This case is really specific and probably not worth changing anything, but still I'm wondering why a paragraph falls under blocks and not under elements? Maybe I don't quite understand what 'elements' is for.

[t-hamano]

Thank you for the detailed explanation, @huubl.

As you say, if there is no paragraph block (not the p element) on the page, this style would not render.

This problem could be solved by disabling should_load_separate_core_block_assets and always output styles:

add_filter( 'should_load_separate_core_block_assets','__return_false' );

However, I do not think this is an ideal solution, as it affects all blocks. Therefore, I would like to position this issue as an enhancement and leave it open.