使用' template_include&#x27在模板中使用gutenberg块。

发布于 2025-01-27 06:55:15 字数 888 浏览 5 评论 0 原文

我需要覆盖主题之一模板中文件块仅通过编写相应的HTML注释而使用。 编辑 template/single.html 文件

<!-- wp:post-title /-->
<!-- wp:custom-block-i-defined /-->
<!-- fest -->
<div>Test</div>

因此,我尝试在我的插件中使用相同的内容

,并创建一个文件 plugin.template.html 。当我访问带有主题模板的单个页面时,它会使块很好,但是如果我使用

add_filter( 'template_include', 'override_template' );
function override_template( string $template ) {
    return 'path/to/the/plugin.template.html';
}

渲染页面,则只包含 fest div,但是检查页面会揭示任何没有的评论成为块。

我在使用错误的过滤器吗?我应该调用一些功能以“补充”块?

I needed to override one of the theme TwentyTwentyTwo template from a custom plugin, and I wanted to use one of Gutenberg's blocks.
I see that in the templates files blocks are used by just writing the corresponding html comment.
So I tried editing the template/single.html file in

<!-- wp:post-title /-->
<!-- wp:custom-block-i-defined /-->
<!-- fest -->
<div>Test</div>

and created a file plugin.template.html with the same content in my plugin.

When I visit a single page with the theme's template, it renders the blocks fine, but if I do so using

add_filter( 'template_include', 'override_template' );
function override_template( string $template ) {
    return 'path/to/the/plugin.template.html';
}

the rendered page only contains the Fest div, but inspecting the page reveals the comments that didn't become blocks.

Am I using a wrong filter? Should I call some function to "hydrate" the blocks?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

朕就是辣么酷 2025-02-03 06:55:15

同样,我想在插件中提供一个存档HTML模板。所以我希望这会有所帮助。
Filter Template_include 没有切割它,在运行调试并跟踪模板加载路由后,我找到了使用Filter GET_BLOCK_TEMPLATES 的解决方案。

这是我的插件代码的关键部分的简化版本: -

public function setup() {
    add_filter( 'get_block_templates', array( $this, 'manage_block_templates' ), 10, 3 );
}

public function manage_block_templates( $query_result, $query, $template_type ) {

    $theme = wp_get_theme();

    $template_contents = file_get_contents( plugin_dir_path( __DIR__ ) . 'templates/archive-ale.html' );
    $template_contents = str_replace( '~theme~', $theme->stylesheet, $template_contents );

    $new_block                 = new WP_Block_Template();
    $new_block->type           = 'wp_template';
    $new_block->theme          = $theme->stylesheet;
    $new_block->slug           = 'archive-ale';
    $new_block->id             = $theme->stylesheet . '//archive-ale';
    $new_block->title          = 'archive-ale';
    $new_block->description    = '';
    $new_block->source         = 'custom';
    $new_block->status         = 'publish';
    $new_block->has_theme_file = true;
    $new_block->is_custom      = true;
    $new_block->content        = $template_contents;

    $query_result[] = $new_block;

    return $query_result;
}

当模板位于子主题的模板文件夹中时,渲染效果很好,但是从插件内部,我必须将主题名称强加到模板中。为了避免标题和页脚无法显示。我得到的

模板部分已被删除或不可用:header

因此, str_replace

使用此方法,意味着我可以部署插件并完全是主题不可知论,但是我现在无法从网站编辑器中编辑模板。模板需要在主题文件夹中才能做到这一点。

我的存档 - 艾尔.html模板:

<!-- wp:template-part {"slug":"header","tagName":"header","theme":"~theme~"} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"fontSize":"clamp(2.75rem, 6vw, 3.25rem)"},"spacing":{"margin":{"bottom":"6rem"}}}} /-->

    <!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","align":"wide","layout":{"inherit":false}} -->
    <main class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
    <!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"fontSize":"var(--wp--custom--typography--font-size--huge, clamp(2.25rem, 4vw, 2.75rem))"} /-->    
    <!-- My block -->
    <!-- wp:multiple-blocks-plugin/hero /-->

    <!-- wp:columns {"align":"wide"} -->
    <div class="wp-block-columns alignwide"><!-- wp:column {"width":"650px"} -->
    <div class="wp-block-column" style="flex-basis:650px"><!-- wp:post-excerpt /-->
    
    <!-- wp:post-date {"format":"F j, Y","isLink":true,"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":""} -->
    <div class="wp-block-column"></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:spacer {"height":112} -->
    <div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    <!-- /wp:post-template -->
    
    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
    <!-- wp:query-pagination-previous {"fontSize":"small"} /-->
    
    <!-- wp:query-pagination-numbers /-->
    
    <!-- wp:query-pagination-next {"fontSize":"small"} /-->
    <!-- /wp:query-pagination --></main>
    <!-- /wp:query --></div>
    <!-- /wp:group -->
    
    <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
    

Similarly, I wanted to deliver an archive HTML template in my plugin. So I hope this helps.
The filter template_include didn't cut it and after running debug and tracing the template loading route I found a solution with the filter get_block_templates.

Here's a simplified version of the key parts of my plugin code:-

public function setup() {
    add_filter( 'get_block_templates', array( $this, 'manage_block_templates' ), 10, 3 );
}

public function manage_block_templates( $query_result, $query, $template_type ) {

    $theme = wp_get_theme();

    $template_contents = file_get_contents( plugin_dir_path( __DIR__ ) . 'templates/archive-ale.html' );
    $template_contents = str_replace( '~theme~', $theme->stylesheet, $template_contents );

    $new_block                 = new WP_Block_Template();
    $new_block->type           = 'wp_template';
    $new_block->theme          = $theme->stylesheet;
    $new_block->slug           = 'archive-ale';
    $new_block->id             = $theme->stylesheet . '//archive-ale';
    $new_block->title          = 'archive-ale';
    $new_block->description    = '';
    $new_block->source         = 'custom';
    $new_block->status         = 'publish';
    $new_block->has_theme_file = true;
    $new_block->is_custom      = true;
    $new_block->content        = $template_contents;

    $query_result[] = $new_block;

    return $query_result;
}

When the template was in the template folder of the child theme the render was fine, but from inside the plugin I had to force the theme name into the template. To avoid the header and footer failing to display. I was getting

Template part has been deleted or is unavailable: header

Hence the str_replace.

Using this method means I can just deploy a plugin and be totally theme agnostic, but I now can't edit the template from the site editor. The template needs to be in the theme folder to do that.

My archive-ale.html template:

<!-- wp:template-part {"slug":"header","tagName":"header","theme":"~theme~"} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"fontSize":"clamp(2.75rem, 6vw, 3.25rem)"},"spacing":{"margin":{"bottom":"6rem"}}}} /-->

    <!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","align":"wide","layout":{"inherit":false}} -->
    <main class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
    <!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"fontSize":"var(--wp--custom--typography--font-size--huge, clamp(2.25rem, 4vw, 2.75rem))"} /-->    
    <!-- My block -->
    <!-- wp:multiple-blocks-plugin/hero /-->

    <!-- wp:columns {"align":"wide"} -->
    <div class="wp-block-columns alignwide"><!-- wp:column {"width":"650px"} -->
    <div class="wp-block-column" style="flex-basis:650px"><!-- wp:post-excerpt /-->
    
    <!-- wp:post-date {"format":"F j, Y","isLink":true,"style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":""} -->
    <div class="wp-block-column"></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:spacer {"height":112} -->
    <div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    <!-- /wp:post-template -->
    
    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
    <!-- wp:query-pagination-previous {"fontSize":"small"} /-->
    
    <!-- wp:query-pagination-numbers /-->
    
    <!-- wp:query-pagination-next {"fontSize":"small"} /-->
    <!-- /wp:query-pagination --></main>
    <!-- /wp:query --></div>
    <!-- /wp:group -->
    
    <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
    
心是晴朗的。 2025-02-03 06:55:15

上面我的解决方案是添加位于插件文件夹中的HTML模板的一种方法。

要覆盖现有的主题模板,请使用相同的过滤器,但要找到覆盖的模板sl,然后覆盖内容属性,或完全从阵列中删除它并附加新的。

我仍然想知道是否应将来自插件的模板复制到激活上的主题模板文件夹中,以便用户可以使用站点编辑器进行进一步的修改。

My solution, above, is one way to ADD an HTML template residing in the plugin folders.

To override an existing theme template use the same filter but find the template slug to override and then overwrite the content property, or remove it completely from the array and append your new one.

I'm still wondering if a template from a plugin should really be copied to the theme template folder on activation so that the user can then use the site editor to make further modifications.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文