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

Question

我最近一直在尝试深入研究 guttenberg 块。我一直在关注 wordpress 上的 'tutorial' 以获得基本设置（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 这样的工具，这样您就可以将更多时间用于构建内容而不是计算设置。

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

Gutenberg Block not loading my styles to the front-end of my site

wordpress-gutenberg

gutenberg-blocks