古腾堡前端块样式不适用

时间:2019-01-02 20:51:26

标签: php wordpress wordpress-gutenberg

我注册了一个块,该块向编辑器和块显示的前端添加了不同的样式。

正在显示编辑器样式,但是我无法显示前端样式。

这是我的index.php文件中的内容:

<?php

defined('ABSPATH') || exit;

// add_action engueue_block_editor_assets
add_action( 'enqueue_block_editor_assets', 'block_examples_02_stylesheets_block_enqueue_block_editor_assets');

// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_editor_assets() {
    wp_enqueue_script(
        // name of script
        'block-examples_02-stylesheets-block-editor',
        // full url of script location
        plugins_url( 'block.build.js', __FILE__ ),
        // dependencies of script
        array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
        // version number
        filemtime( plugin_dir_path( __FILE__) . 'block.build.js')
    );

    wp_enqueue_style(
        'block-examples_02-stylesheets-block-editor',
        plugins_url( 'editor.css', __FILE__ ),
        array('wp-edit-blocks'),
        filemtime( plugin_dir_path( __FILE__) . 'editor.css')
    );

}

// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');

// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {

    wp_enqueue_style(
        'block-examples_02-stylesheets-block',
        plugins_url( 'style.css', __FILE__ ),
        array('wp-blocks'),
        filemtime( plugin_dir_path( __FILE__) . 'style.css')
    );

}

1 个答案:

答案 0 :(得分:0)

好吧,所以看来删除“ wp-blocks”可以解决问题,并且该块现在可以反映出style.css文件中的样式。

// add_action engueue_block_editor_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets');

// plugin-name_block-name_function-name
function block_examples_02_stylesheets_block_enqueue_block_assets() {

    wp_enqueue_style(
        'block-examples_02-stylesheets-block',
        plugins_url( 'style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__) . 'style.css')
    );

}