block editor - Gutenberg: Why doesn't the button core-component render on the frontend

I'm new to custom block development for the block editor and I came across a problem and couldn't find an answer anywhere.

When I use a component from wpponents (in my case <Button /> in my custom block, I can see it in the back end but it doesn't get rendered in the frontend.

import './style.scss';
import './editor.scss';


const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Button } = wpponents;

registerBlockType( 'cgb/block-buttonblock', {
    title: __( 'buttonblock - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → /.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'buttonblock — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    edit: function( props ) {
        return (
            <div className={ props.className }>
                <p>— Hello from the backend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="">
                            create-guten-block
                        </a>
                    </code>.
                </p>
                <Button isDefault>
                    Click me on the Backend!
                </Button>
            </div>
        );
    },

    save: function( props ) {
        return (
            <div>
                <Button>
                    Click me on the Frontend!
                </Button>
                <p>— Hello from the frontend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block.
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="">
                            create-guten-block
                        </a>
                    </code>.
                </p>

                <p>
                    Check
                </p>

            </div>
        );
    },
} );

I expected it to render on the frontend like in the backend.

I'm new to custom block development for the block editor and I came across a problem and couldn't find an answer anywhere.

When I use a component from wpponents (in my case <Button /> in my custom block, I can see it in the back end but it doesn't get rendered in the frontend.

import './style.scss';
import './editor.scss';


const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Button } = wpponents;

registerBlockType( 'cgb/block-buttonblock', {
    title: __( 'buttonblock - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'buttonblock — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    edit: function( props ) {
        return (
            <div className={ props.className }>
                <p>— Hello from the backend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="https://github/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>
                <Button isDefault>
                    Click me on the Backend!
                </Button>
            </div>
        );
    },

    save: function( props ) {
        return (
            <div>
                <Button>
                    Click me on the Frontend!
                </Button>
                <p>— Hello from the frontend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block.
                </p>
                <p>
                    It was created via{ ' ' }
                    <code>
                        <a href="https://github/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>

                <p>
                    Check
                </p>

            </div>
        );
    },
} );

I expected it to render on the frontend like in the backend.

• block-editor

Share Improve this question edited Feb 27, 2019 at 14:42 Tom J Nowell♦ 61.2k77 gold badges7979 silver badges150150 bronze badges asked Feb 27, 2019 at 14:23 SteveSteve 15033 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The wpponents library is intended for UI purposes, e.g. the publish button, the inserter modal, etc in the back end. They aren't intended for frontend usage. Much in the same way you wouldn't use WP Admin styles and HTML classes on UI intended for the frontend.

For example the core/button block makes use of a div with HTML classes rather than the <Button> component.

Of course, you might choose to use these components in your block as a part of their editing UI, but they shouldn't be used for final output.

I expected it to render on the frontend like in the backend.

If it did appear for some reason, it'd probably appear as a completely unstyled button that did nothing when clicked. React components in the editor aren't rendered using React on the frontend. A block gets saved as static HTML. Of course you can use your own React components to generate the output to be saved, but don't use the WP core component library for that, it's not what it was intended for