WordPress / WordPress/create-block-theme
Run HTML template files through a code formatter on safe to make markup more readable
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 417
- Forks
- 66
- PR merge metrics
- No merged PRs in 30d
Description
Currently, template files that get saved via the Create Block Theme are just exported with whatever code formatting they already had. Especially when these templates are built in the site editor that means that the code isn't formatted at all.
Here is an example of the 404 template from the 2024 theme:
<!-- wp:template-part {"slug":"header","tagName":"header","area":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading" id="page-not-found">Page Not Found</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>The page you are looking for does not exist, or it has been moved. Please try searching using the form below.</p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","fontSize":"medium"} /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","area":"footer"} /-->
This code is much harder to read and review than if it would be indented properly.
Here is the same code formatted correctly:
<!-- wp:template-part {"slug":"header","tagName":"header","area":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)">
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading" id="page-not-found">Page Not Found</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>The page you are looking for does not exist, or it has been moved. Please try searching using the form below.</p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","fontSize":"medium"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","area":"footer"} /-->
This is a very basic example. But the more complex these templates get the more pronounced this issue is.
The reasons I think it would be worth including some standardized code formatting in Create Block Theme are:
- Especially in teams that work on a theme code often needs to get reviewed. Having the code formated nicely makes that much easier.
- If every person working on the code manually formats their code the Git diffs that get generated when the template is exported via Create Block Theme are much larger than they need to be which makes it much harder to understand what the actual change was.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the Create Block Theme template export path and inspect how HTML template files are generated and saved. Identify where a safe formatter could be integrated, then verify that exported templates are consistently readable without changing their intended markup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- tooling, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100