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}} /-->
/assets/img/default-cover.jpg
, for ex.