Gutenberg Block 没有将我的样式加载到我网站的前端

Question

我最近一直在尝试挖掘古腾堡区块。为了进行基本设置，我一直在关注 wordpress 上的“教程”（create-guten-block 也给我带来了样式问题，所以我决定尝试自己设置）。但是，由于某种原因，这些样式不适用于我的网站前端。

我遵循了几个不同的教程来了解可能发生的情况。包括到目前为止没有运气删除“jetpack”插件。我使用了入队脚本而不是注册。我还尝试将项目拆分为不同的功能并分别添加。

文件), 数组（'wp-blocks'，'wp-element'） );

wp_register_style(
    'wild-wonders-editor-style',
    plugins_url( 'dist/css/editor.css', __FILE__ ),
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'dist/css/editor.css' )
);

wp_register_style(
    'wild-wonders-hero-style',
    plugins_url( 'dist/css/blockStyle.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'dist/css/blockStyle.css' )
);


register_block_type( 'blocks/wild-wonders-blocks-hero', array(
    'editor_script' => 'wild-wonders-blocks-hero',
    'editor_style'  => 'wild-wonders-editor-style',
    'style' => 'wild-wonders-hero-style',
) );

} add_action('init', 'wild_wonders_blocks');

就我所阅读的几个教程而言，这是添加样式表的正确方法。但是，我在前端一无所获。甚至没有网络请求....还有什么我应该做的吗？谢谢

Answer 1

你做错了，而不是注册你应该排队资产，像这样 -

/**
 * Enqueue Gutenberg block assets for both frontend + backend.
 *
 * `wp-blocks`: includes block type registration and related functions.
 *
 * @since 1.0.0
 */
function my_block_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'my_block-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
        array( 'wp-editor' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );
} // End function my_block_cgb_block_assets().

// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'my_block_cgb_block_assets' );

/**
 * Enqueue Gutenberg block assets for backend editor.
 *
 * `wp-blocks`: includes block type registration and related functions.
 * `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
 * `wp-i18n`: To internationalize the block's text.
 *
 * @since 1.0.0
 */
function my_block_cgb_editor_assets() {
    // Scripts.
    wp_enqueue_script(
        'my_block-cgb-block-js', // Handle.
        plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );

    // Styles.
    wp_enqueue_style(
        'my_block-cgb-block-editor-css', // Handle.
        plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
        array( 'wp-edit-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: filemtime — Gets file modification time.
    );
} // End function my_block_cgb_editor_assets().

// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'my_block_cgb_editor_assets' );

您最好使用像 Create guten block 这样的工具，这样您就可以将更多时间集中在构建东西上，而不是计算设置。