Question

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

我遵循了一些有关可能发生的情况的不同教程。到目前为止，包括删除'jetpack'插件都不算幸运。我使用排队脚本而不是注册。我还尝试将项目拆分为不同的功能，然后分别添加。

FILE）， array（'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）没有将我的样式加载到我的网站的前端

1 个答案: