When creating our own custom theme in WordPress 6.1 (maybe previous versions too, we’ve only noticed this recently) we see that if we add an image to our post, the way the image is marked up is different from how it gets marked up in twenty-twenty-two or twenty-twenty-three.
Example:
In twenty-twenty-two and twenty-twenty-three if we add an image and align it then the code generated is:
<figure class="wp-block-image alignleft size-large>
… …
</figure>which is what we want. However in our basic custom theme when we specify an alignment the code generated wraps the figure in a div like this:
<div class="wp-block-image">
<figure class="alignleft size-large">
… …
</figure>
</div> How do we achieve the same structure that twenty-twenty-two and three generate?
I’ve tried searching for this but can’t find anything, and I’m not entirely sure what I should be searching for.
Our theme uses a “classic” file structure, so functions.php, style.css etc – we haven’t moved to theme.json files yet.
Any help appreciated 🙏