return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>javascript - How can I add Block Style support to the core HTML block in Gutenberg?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How can I add Block Style support to the core HTML block in Gutenberg?

    javascript - How can I add Block Style support to the core HTML block in Gutenberg?

    programmeradmin2浏览0评论

    The HTML block in Gutenberg can be given styles like so:

    // JS file, enqueued using the action "enqueue_block_editor_assets"
wp.blocks.registerBlockStyle( 'core/html', {
    name: 'full-width-video',
    label: 'Full Width Video'
} );

    To compare, I also applied that style to the core/preformatted. I selected it for both blocks on a post.

    However, the class does not get added to the Custom HTML block:

    <div class="wp-block-html">(html that I entered)</div>

<pre class="wp-block-preformatted is-style-full-width-video">(html that i entered)</pre>

    I believe it is one of the "supports" options that prevents the styles from being applied but I am not sure how to edit that for a core block.

    Anyone know how I can add support for styles on the core HTML block?

    Thanks!

    The HTML block in Gutenberg can be given styles like so:

    // JS file, enqueued using the action "enqueue_block_editor_assets"
wp.blocks.registerBlockStyle( 'core/html', {
    name: 'full-width-video',
    label: 'Full Width Video'
} );

    To compare, I also applied that style to the core/preformatted. I selected it for both blocks on a post.

    However, the class does not get added to the Custom HTML block:

    <div class="wp-block-html">(html that I entered)</div>

<pre class="wp-block-preformatted is-style-full-width-video">(html that i entered)</pre>

    I believe it is one of the "supports" options that prevents the styles from being applied but I am not sure how to edit that for a core block.

    Anyone know how I can add support for styles on the core HTML block?

    Thanks!

    • javascript
    • block-editor
    Share Improve this question asked May 8, 2020 at 20:51 Radley SustaireRadley Sustaire 1,3813 gold badges14 silver badges21 bronze badges
    Add a comment  | 

    1 Answer 1

    Reset to default 2

    Block Style Variations allow providing alternative styles to existing blocks using filters, as explained here.

    Here are some examples for your case using the server-side functions (php). You can either add the css style inline:

    register_block_style(
    'core/html',
    array(
        'name'         => 'full-width-video',
        'label'        => __( 'Full Width Video' ),
        'inline_style' => '.wp-block-html.is-style-full-width-video { width:100%; }',
    )
);

    Or reference an enqueued stylesheet that contains that class

    wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );

// ...

register_block_style(
    'core/html',
    array(
        'name'         => 'full-width-video',
        'label'        => __( 'Full Width Video' ),
        'style_handle' => 'myguten-style',
    )
);

    register_block_style should be hooked in an init action.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论