Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "paragraph" as element in theme.json #49470

Open
huubl opened this issue Mar 30, 2023 · 3 comments
Open

Add "paragraph" as element in theme.json #49470

huubl opened this issue Mar 30, 2023 · 3 comments
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@huubl
Copy link
Contributor

huubl commented Mar 30, 2023

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
Copy link
Contributor

@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"
					}
				}
			}
		}
	}
}
@t-hamano t-hamano added [Type] Help Request Help with setup, implementation, or "How do I?" questions. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Mar 31, 2023
@huubl
Copy link
Contributor Author

huubl commented Apr 3, 2023

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
Copy link
Contributor

t-hamano commented Apr 5, 2023

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.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. and removed [Type] Help Request Help with setup, implementation, or "How do I?" questions. labels Apr 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
2 participants