0

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 wp.components (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 } = wp.components;

registerBlockType( 'cgb/block-buttonblock', {
    title: __( 'buttonblock - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/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.com/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.com/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.

1 Answer 1

0

The wp.components 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

1
  • 1
    Thank you. I wish the documentation on Gutenberg would be more detailled.
    – Steve
    Feb 28, 2019 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.