Блок Гутенберга не загружает мои стили в интерфейс моего сайта - PullRequest
Новая
       6

Блок Гутенберга не загружает мои стили в интерфейс моего сайта

0 голосов
/ 06 февраля 2019

Я недавно пытался копаться в гуттенбергских блоках.Я следовал «учебному пособию» на WordPress для того, чтобы получить базовую настройку (create-guten-block также давал мне проблемы со стилем, поэтому я решил попробовать установить его самостоятельно).Однако по какой-то причине стили не применяются к фронтэнду моего сайта.

Я следовал нескольким различным учебникам о том, что может происходить.Включение удаления плагина 'jetpack' пока не повезло.Я использовал сценарий enqueue вместо регистрации.Я также попытался разделить элементы на разные функции и добавить их отдельно.

FILE), массив ('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');

Насколько я могу судить по нескольким учебникам, которые я прочитал, это правильный способ добавления таблиц стилей.Тем не менее, я ничего не получаю на переднем конце.Даже не сетевой запрос .... Есть ли что-то еще, что я должен делать?Спасибо

1 Ответ

0 голосов
/ 06 февраля 2019

Вы делаете это неправильно, вместо регистрации вы должны ставить в очередь активы, как это - 

/**
 * 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' );

Вам лучше использовать такие инструменты, как - Создать блок Гутен , чтобы вы могли сосредоточиться больше временина сборке, а не на настройке параметров.

...