0

So in our new architecture for themes, we want to use Gutenberg themes with html templates.

Problem is, when we need to call anything from the theme folder, we have to use the full URL. So if the folder name would be to change for any reason (and we might change it) well, every image loaded from the template breaks.

In PHP, you can simply run the function bloginfo() to get that. But is there the same thing in HTML templates?

Example:

<!-- wp:template-part {"slug":"top","tagName":"div","align":"full","className":"l-top","layout":{"inherit":true}} /-->
<!-- wp:template-part {"slug":"header","tagName":"header","align":"full","className":"l-header","layout":{"inherit":true}} /-->
<!-- wp:group {"tagName":"main","align":"full", "className":"l-main t-page", "layout":{"inherit":true}} -->
<main class="wp-block-group alignfull l-main t-page">

    <!-- wp:cover {
        "url":"/wp-content/themes/base-theme/assets/img/default-cover.jpg",
        "dimRatio":0,
        "isDark":false,
        "align":"full",
    } -->
    <div class="wp-block-cover alignfull is-light is-style-title-banner">
        <span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
        <img class="wp-block-cover__image-background" alt="" src="/wp-content/themes/base-theme/assets/img/default-cover.jpg" data-object-fit="cover"/>
        <div class="wp-block-cover__inner-container">
            <!-- wp:post-title {"level":1} /-->
        </div>
    </div>
    <!-- /wp:cover -->
    <!-- wp:yoast-seo/breadcrumbs /-->
    <!-- wp:post-content {"className":"wp-container__inner","layout":{"inherit":true}} /-->

</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","align":"full","layout":{"inherit":true}} /-->
2
  • What about putting the assets in a separate folder from the theme, like on the root, and just call /assets/img/default-cover.jpg, for ex.
    – deflime
    Jun 21 at 18:32
  • Because that doesnt respect the WP structure. Things related to the theme should be in the theme and nowhere else.
    – Fredy31
    Jun 21 at 18:34

1 Answer 1

1

At the time of writing this isn't possible, twentytwentytwo works around this by registering patterns in a subfolder then using a pattern block.

This way they can define patterns in PHP then use the functions. This is how they show the bird in the header and include localised strings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.