How to have a consistent HTML Class markup like twenty-twenty-two and three

  • Resolved hisfarsha

    (@hisfarsha)


    1 year, 6 months ago

    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 🙏

Viewing 4 replies - 1 through 4 (of 4 total)
  • threadi

    (@threadi)

    1 year, 6 months ago

    You use the Block Editor for content maintenance? Then the HTML codes come from its generation. Take a look at what you see in the code view there before the content is saved.

    Thread Starter hisfarsha

    (@hisfarsha)

    1 year, 6 months ago

    Yes, the content is created using the WP Editor. If you mean check the HTML of the block from the editor side, then it’s strange: It displays the markup as I would want it, yet when it is published on the front end it changes.

    The HTML on the backend:

    <figure class="wp-block-image alignleft size-large">
… …
</figure>

    HTML generated on the front end:

    <div class="wp-block-image">
<figure class="alignleft size-large">
… …
</figure>
</div>

    I’ve reduced this test theme to the absolute minimum, just the basic files for the theme to work, so there’s nothing in the theme that should be interfering.

    If I use the twenty-twenty-two or twenty-twenty-three theme the markup is correct, meaning it’s the same on both the back end and front end as i would expect it to be.

    threadi

    (@threadi)

    1 year, 6 months ago

    I can understand what you mean. The reason is that you don’t use a block theme. Thereby this filter function takes effect here: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/layout.php#L502

    Theoretically you could try to deactivate this filter:

    remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container');

    I have not tested now.

    Thread Starter hisfarsha

    (@hisfarsha)

    1 year, 6 months ago

    I have applied that to my functions file and that has solved the issue. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to have a consistent HTML Class markup like twenty-twenty-two and three’ is closed to new replies.