如何构建一个支持动态内容的wordpress gutenberg多块插件



我正在用一组自定义的Gutenberg块创建一个自定义的Wordpress主题。以前,我把所有的块都作为单独的插件工作,我开始把它们组合成一个插件,因为我认为维护和更新会更容易。我以前的文件夹结构是这样的:

wp-content
|
+-- plugins
|  |
|  +-- dir 1
|  |  +-- build
|  |  +-- node_modules
|  |  +-- src
|  |  |  +-- index.js (includes edit and save functions)
|  |
|  +-- dir 2
|  |  +-- build
|  |  +-- node_modules
|  |  +-- src
|  |  |  +-- index.js (includes edit and save functions)

我的新文件夹结构如下(从该项目中学到:https://github.com/rmorse/multiple-blocks-plugin)

wp-content
|
+-- plugins
|  |
|  +-- multiple-blocks-plugin
|  |  |
|  |  +-- blocks
|  |  |  |
|  |  |  +-- dir 1
|  |  |  |  +-- build
|  |  |  |  +-- src
|  |  |  |  |  +-- edit.js
|  |  |  |  |  +-- index.js
|  |  |  |  |  +-- save.js
|  |  |  |  +-- block.json
|  |  |  |
|  |  |  +-- dir 2
|  |  |  |  +-- build
|  |  |  |  +-- src
|  |  |  |  |  +-- edit.js
|  |  |  |  |  +-- index.js
|  |  |  |  |  +-- save.js
|  |  |  |  +-- block.json
|  |  |  |
|  |  |  +-- dir 3
|  |  |  |  +-- build
|  |  |  |  +-- src
|  |  |  |  |  +-- edit.js
|  |  |  |  |  +-- index.js
|  |  |  |  +-- block.json
|  |  |  |  +-- index.php (the callback function is stored here)
|  |  | 
|  |  +-- build
|  |  +-- node_modules
|  |  +-- multiple-blocks-plugin.php

multiple-blocks-plugin.php文件中,我维护了一个使用register_block_type()函数注册的所有插件的列表。这些函数告诉Wordpress查找block.json文件,我的所有设置和属性现在都存储在那里。我的一个区块是使用动态内容(一个应该总是显示最新三篇帖子的新闻区块(。我的主要问题是,当函数存储在新的文件夹结构中时,我无法获得读取callback_function的新设置。我的目标是将我的所有块重建为动态的,但我想维护单个插件+多个块的设置。

这是为/blocks/news/注册所有不同块和故障块的功能

function create_block_multiple_blocks_block_init()
{
register_block_type(plugin_dir_path(__FILE__) . 'blocks/column-block/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/column-block-prices/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/column-block-services/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/column-block-specialists/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/counter/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/counter-list/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/cta-banner/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/gallery/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/gallery-image/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/image-text-block/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/hero/');
register_block_type_from_metadata(plugin_dir_path(__FILE__) . 'blocks/news/', array(
"callback_function" => "news_register_block"
));
register_block_type(plugin_dir_path(__FILE__) . 'blocks/opening-hours/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/opening-hours-list/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/process/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/process-list/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/why-choose-us/');
register_block_type(plugin_dir_path(__FILE__) . 'blocks/why-choose-us-list/');
}
add_action('init', 'create_block_multiple_blocks_block_init');

问题

如何设置一个使用动态块的项目,其中所有块都存储在一个插件中?我是Wordpress开发的新手——我习惯于在Sitecore工作——我很想学习如何最好地设置这样一个项目。非常感谢。

我会使用DirectoryTerator尽可能地懒惰,并扫描"blocks"目录。也许我会让它看起来像一个block.json,然后让它注册这个目录。

foreach ( $blocks = new DirectoryIterator( __DIR__ . '/blocks' ) as $item ) {
if ( $item -> isDir() && !$item -> isDot() ) if ( file_exists( $item -> getPathname() . '/block.json' ) ) register_block_type( $item -> getPathname() ); 
}

下一步可能是包含一个与文件夹名称完全相同的php文件。在该文件夹中存储一个名为-folder_render_callback的函数。如果存在所述文件,请将其包括在内,并在register_block_type参数中使用文件夹名称render_callback。

foreach ( $blocks = new DirectoryIterator( __DIR__ . '/blocks' ) as $item ) {
if ( $item -> isDir() && !$item -> isDot() ) if ( file_exists( $item -> getPathname() . '/block.json' ) ) {
if ( file_exists( $item -> getPathname() . '/' . $item -> getBasename() . '.php' ) ) {
include( $item -> getPathname() . '/' . $item -> getBasename() . '.php' );
register_block_type( $item -> getPathname() , array( 'render_callback' => $item -> getBasename() . '_render_callback' ) );
} else {
register_block_type( $item -> getPathname() );
}
}
}

不过,未经测试。

相关内容

  • 没有找到相关文章

最新更新