Styling blocks and elements inside template parts with theme.json

[matiasbenedetto]

What?

Theme.json: adding capabilities to style blocks and elements at the scope level of a template part

⚠️ This is a draft, working, up to this moment, only server side. So the rendered styles are rendered correctly on the frontend (public version of the posts) but not on the editor.

Why?

To be able to style blocks or elements just for a particular template part and not for the entire site.

How?

Testing Instructions

Add some settings in order to style elements or block inside a template part.

Let's say you have 2 template parts defined in your theme.json file:

	"templateParts": [
        {
            "area": "header",
            "name": "header"
        },
        {
            "area": "footer",
            "name": "footer"
        }
    ]

Then you are able to define styles for the blocks or elements inside each of those template parts previously defined.

Examples:
You can add styles.templateParts.header.elements.link to style link elements inside the header template part.
You can add styles.templateParts.footer.blocks.core/site-title to style site-title block inside the footer template part.

"styles": {
    "templateParts": {
        "header": {
            "blocks": {
                "core/site-title": {
                    "color": {
                        "text": "lemonchiffon"
                    }
                },
                "core/site-tagline": {
                    "color": {
                        "text": "cyan"
                    }
                }
            },
            "elements": {
                "link": {
                    "color": {
                        "text": "yellow"
                    }
                }
            }
        },
        "footer": {
            "blocks": {
                "core/site-title": {
                    "color": {
                        "text": "red"
                    }
                }
            }
        }
    },
}

Fixes: #43347