WordPress5.0 加载block样式


在上一节中已经讲到block通过内联style属性应用了自己的样式。虽然这可能适用于非常简单的block,但您很快就会发现通过将样式提取到单独的样式表文件来编写样式变得更加容易。

编辑器将自动为每个block生成类名,以简化样式。可以从传递给编辑和保存功能的对象参数访问它:

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-02', {
    title: 'Hello World (Step 2)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function( props ) {
        return el( 'p', { className: props.className }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', {}, 'Hello saved content.' );
    }
} );

使用前缀的block名称生成类名称wp-block-,将/命名空间分隔符替换为单个名称空间分隔符-

.wp-block-gutenberg-boilerplate-es5-hello-world-step-02 {
    color: green;
    background: #cfc;
    border: 2px solid #9c9;
    padding: 20px;
}

仅在编辑器中引入css

和js一样blcok的编辑器特定样式应通过分配editor_styles已注册的block:

<?php

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step02-editor',
        plugins_url( 'step-02/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );
    wp_register_style(
        'gutenberg-boilerplate-es5-step02-editor',
        plugins_url( 'step-02/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'step-02/editor.css' )
    );

    register_block_type( 'gutenberg-boilerplate-esnext/hello-world-step-02', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step02-editor',
        'editor_style'  => 'gutenberg-boilerplate-es5-step02-editor',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

同时为编辑器和前端页面引入css

虽然block的js通常只需要在编辑器中加载,但css样式在网站前端页面和编辑器都需要加载。

当注册一个block,你可以指定一个或两个style,并editor_style分别指派风格总是加载只加载在编辑器中块或样式。

<?php

function gutenberg_boilerplate_block() {
    wp_register_style(
        'gutenberg-boilerplate-es5-step02',
        plugins_url( 'step-02/style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'step-02/style.css' )
    );

    register_block_type( 'gutenberg-boilerplate-esnext/hello-world-step-02', array(
        'style' => 'gutenberg-boilerplate-es5-step02',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

由于您的块可能在两个上下文中共享某些样式,因此您可以将其style.css视为基本样式表,将特定于编辑器的样式放在其中editor.css

联系我们

WPMEE


Copyright © 甘肃第四维网络技术有限公司 2019
本站由UCloud提供云计算服务