我试图找出如何只对前端实际使用的块使用css。在我当前的设置中，所有内容都捆绑到我的build/frontend.css 文件，所以只需使用多个块中的一个就可以加载所有css，因为它都在构建frontend.css 文件但如果我只使用一个hero块，我只希望在前端加载hero css，而不是整个css文件。

下面是我的文件夹结构的基本概念

build
  frontend.css
  frontend.js
src
  index.js
  frontend.css
  frontend.js
  hero
   -index.js
   -index.css
  callToAction
   -index.js
   -index.css
index.php

在我的php文件中：

// only load the frontend css and js if there is a block using it
add_filter( \'should_load_separate_core_block_assets\', \'__return_true\' );


add_action(\'init\', \'custom_register_gutenberg_blocks\');
function custom_register_gutenberg_blocks() {
    
    // register scripts - backend
    wp_register_script(\'custom-blocks-editor-scripts\',
        plugins_url(\'build/index.js\', __FILE__),
        array(\'wp-blocks\', \'wp-i18n\', \'wp-editor\'),
        filemtime( plugin_dir_path( __FILE__ ) . \'build/index.js\') // version
    );

    // register scripts - frontend
    wp_register_script(\'custom-blocks-frontend-scripts\',
        plugins_url(\'build/frontend.js\', __FILE__),
        array(\'wp-blocks\', \'wp-i18n\', \'wp-editor\'),
    );

    // register styles - backend
    wp_register_style(\'custom-blocks-editor-style\',
       plugins_url(\'build/index.css\', __FILE__),
       array(\'wp-edit-blocks\'),
    );

    // register styles - frontend
    wp_register_style(\'custom-blocks-frontend-styles\', 
        plugins_url(\'build/frontend.css\', __FILE__),
    );

   
    // Allow inlining small stylesheets on the frontend if possible.
    wp_style_add_data( \'custpm-blocks-frontend-styles\', \'path\', dirname( __FILE__ ) . \'/frontend.css\' );

   register_block_type(\'custom/hero\', array(
        \'editor_script\' => \'custom-blocks-editor-scripts\',
        \'editor_style\'  => \'custom-blocks-editor-style\',
        \'style\' => \'custom-blocks-frontend-styles\',
        \'script\' => \'custom-blocks-frontend-scripts\',
        \'render_callback\' => \'custom_hero\'
    ));
    
    function custom_hero($attributes) {
         ob_start(); ?>
           <div>
               Content output here
           </div>
        <?php return ob_get_clean();
    }
}

然后，例如，在我的hero块中，我从同一文件夹加载css文件

src/hero/index.js

import "./index.css";
import { registerBlockType } from "@wordpress/blocks";

registerBlockType("custom/hero", {
 // edit: (props) => {}
 // save: (props) => {}
});

因此，js文件只是从其特定的块文件夹加载css，但在php中，我称之为前端。构建文件夹中的css文件。

const型 def一ult型Conf我g级 = requ我re(\'@wordpress/scr我pt型s/conf我g级/webp一ck.conf我g级\');&#x个A.;&#x个A.;m级odule.ex个port型s = {&#x个A.;    ...def一ult型Conf我g级,&#x个A.;    ent型ry: {&#x个A.;        \'h类ero\': \'./src/h类ero\',&#x个A.;        \'c一ll-t型o-一ct型我on\': \'./src/c一llToA.ct型我on\',&#x个A.;    },&#x个A.;};&#x个A.;

"型;bu我ld:cust型om级"型;: "型;wp-scr我pt型s bu我ld foo/我ndex个.js b一r/我ndex个.js"型;&#x个A.