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

Question

我正在使用一组自定义 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 工作——我很想学习如何最好地建立这样一个项目。谢谢。

Answer 1

我会尽可能懒惰地使用 DirectoryIterator 并扫描 '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 文件，其名称与文件夹完全相同。在该文件夹中，您存储了一个 name-of-the-folder_render_callback 函数。如果存在该文件，请包含它并在 register_block_type 参数中使用 name-of-the-folder_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() );
        }
    }
}

虽然未经测试。

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

How can I build a wordpress gutenberg multiple blocks plugin that support dynamic content

wordpress

plugins

wordpress-gutenberg

gutenberg-blocks