css - Custom gutenberg block not rendering with styles on frontend

admin管理员组

文章数量:1426975

I've registered a custom block that's basically a wrapper for other content with some background color options.

Here's my registration code on the backend:

function mytheme_register_box_block() {
    register_block_type( 'mytheme/box', array(
        'attributes' => array(
            'className' => array(
                'type' => 'string',
                'default' => '',
            ),
        ),
        'supports' => array(
            'customClassName' => false,
        ),
        'editor_script' => 'mytheme-editor',
    ) );
}
add_action( 'init', 'mytheme_register_box_block' );

Here is the code for my block that's imported by my editor script:

const { InnerBlocks } = wp.editor;

export default {
    title: 'Box',
    description: 'Wrap content within an area to apply a colorscheme to.',
    icon: 'grid-view',
    category: 'layout',
    attributes: {
        className: {
            type: 'string',
        },
    },
    styles: [
        {
            name: 'default',
            label: 'Grey',
            isDefault: true,
        },
        {
            name: 'green',
            label: 'Green',
        },
        {
            name: 'orange',
            label: 'Orange',
        },
        {
            name: 'blue',
            label: 'Blue',
        },
        {
            name: 'cyan',
            label: 'Cyan',
        },
    ],
    edit: props => {
        return (
            <div className={ props.className }>
                { ( typeof props.insertBlocksAfter !== 'undefined' ) ? <InnerBlocks /> : <div>Lorem ipsum dolor sit amet.</div> }
            </div>
        )
    },
    save: ( { className } ) => {
        return (
            <div className={ className }>
                <InnerBlocks.Content />
            </div>
        )
    },
};

In Gutenberg the block renders fine and applies the styling, but when it's printed out on the frontend, it's simply rendered without the styling applied.

<div class="wp-block-mytheme-box">...</div>

The attributes list I have in the register_block_type call I just added to try and get it to work, but to no avail. I'm not sure what I'm missing.

I've registered a custom block that's basically a wrapper for other content with some background color options.

Here's my registration code on the backend:

function mytheme_register_box_block() {
    register_block_type( 'mytheme/box', array(
        'attributes' => array(
            'className' => array(
                'type' => 'string',
                'default' => '',
            ),
        ),
        'supports' => array(
            'customClassName' => false,
        ),
        'editor_script' => 'mytheme-editor',
    ) );
}
add_action( 'init', 'mytheme_register_box_block' );

Here is the code for my block that's imported by my editor script:

const { InnerBlocks } = wp.editor;

export default {
    title: 'Box',
    description: 'Wrap content within an area to apply a colorscheme to.',
    icon: 'grid-view',
    category: 'layout',
    attributes: {
        className: {
            type: 'string',
        },
    },
    styles: [
        {
            name: 'default',
            label: 'Grey',
            isDefault: true,
        },
        {
            name: 'green',
            label: 'Green',
        },
        {
            name: 'orange',
            label: 'Orange',
        },
        {
            name: 'blue',
            label: 'Blue',
        },
        {
            name: 'cyan',
            label: 'Cyan',
        },
    ],
    edit: props => {
        return (
            <div className={ props.className }>
                { ( typeof props.insertBlocksAfter !== 'undefined' ) ? <InnerBlocks /> : <div>Lorem ipsum dolor sit amet.</div> }
            </div>
        )
    },
    save: ( { className } ) => {
        return (
            <div className={ className }>
                <InnerBlocks.Content />
            </div>
        )
    },
};

In Gutenberg the block renders fine and applies the styling, but when it's printed out on the frontend, it's simply rendered without the styling applied.

<div class="wp-block-mytheme-box">...</div>

The attributes list I have in the register_block_type call I just added to try and get it to work, but to no avail. I'm not sure what I'm missing.

• block-editor
• css

Share Improve this question asked Jun 7, 2019 at 21:17 Doug WollisonDoug Wollison 37611 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

From what I can tell, registering it with 'customClassName' => false in the supports array in register_block_type prevents the actual style class from being saved to the raw text of the page. I had assumed it would dynamically insert it during the_content when it parses the blocks. In fact there's no point in me registering it on the PHP end since it's all edited and compiled via javascript.

Still, now I'm stuck with allowing custom class names on this block, though I could always just hide that panel in CSS like I am with the Text Settings (because I can opt out of custom/preset font sizes but not drop caps for some reason).

本文标签： cssCustom gutenberg block not rendering with styles on frontend