Run HTML template files through a code formatter on safe to make markup more readable

[fabiankaegy]

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.

[pbking]

Yes! I look at so much block markup these days and had considered working on this very thing. This would definitely be a great enhancement.

Do you think formatted JSON would be useful as well? (Especially as I write more block bindings, the JSON is getting unwieldy.)