Block Controls not showing – WordPress Development Stack Exchange

Question

I’m building my first Gutenberg block and the problem that I have is that the block control toolbar doesn’t show.
I’ve spend hours comparing my code with other Gutenberg blocks, but couldn’t find what is wrong in my code.
I would highly appreciate if someone could look at my code and advice.

Here is my code:

import { registerBlockType } from 'wordpress user/blocks';
import { 
    RichText,
    InspectorControls,
    ColorPalette,
    MediaUpload
        } from 'wordpress user/block-editor';
import { 
    PanelBody,
    IconButton } from 'wordpress user/components';
 
registerBlockType( 'luxworx-blocks/author-block', {
    apiVersion: 2,
    title: 'Luxworx: Author Block',
    icon: 'universal-access-alt',
    category: 'design',
    example: {},
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: 'h2'
        },
        body: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        textColor: {
            type: 'string',
            default: 'black'
        },
        bgColor: {
            type: 'string',
            default: 'white'
        },
        authorImage: {
            type: 'string',
            default: null
        }
    },

    edit( {attributes, setAttributes}) {

        // Custom functions
        function updateTitle (newTitle) {
            setAttributes( { title: newTitle}) 
        }
        function updateBody (newBody) {
            setAttributes( { body: newBody}) 
        }
        function onTextColorChange (newColor) {
            setAttributes( {textColor: newColor})
        }
        function onBgColorChange (newColor2) {
            setAttributes( {bgColor: newColor2})
        }
        function onSelectImage(newImage) {
            setAttributes( {authorImage: newImage.sizes.full.url })
        }
 
        return (
            <InspectorControls key="lx-authors-block-setting" style={ { marginBottom:'40px'} }>
                <PanelBody title={ 'Color setting' }>
                    <p><strong>Select text color:</strong></p>
                    <ColorPalette value={ attributes.textColor }
                                    onChange={ onTextColorChange } />
                    <p><strong>Select block bacground color:</strong></p>
                    <ColorPalette value={ attributes.bgColor }
                                    onChange={ onBgColorChange } />
                </PanelBody>
                <PanelBody title={ 'Author image'}>
                    <p><strong>Select author image:</strong></p>
                    <MediaUpload
                        onSelect={ onSelectImage }
                        type="image"
                        value={ attributes.authorImage }
                        render={ ( { open } ) => (
                            <IconButton
                                onClick={ open }
                                icon="upload"
                                className="editor-media-placeholder__button button is-default">
                                Author Image
                            </IconButton>
                        ) } />
                        
                </PanelBody>
            </InspectorControls>,
            <div className="lx-authors-block wp-block" key="container" style={{ backgroundColor: attributes.bgColor}}>
                <img src={ attributes.authorImage} className="lx-authors-image" />
                <div className="lx-author-info">
                    <RichText   
                                placeholder="Authors name"
                                tagName="h2"
                                value={attributes.title}
                                onChange={updateTitle}
                                style={ {color: attributes.textColor }} />
                    
                    <RichText  
                                placeholder="Authors bio"
                                tagName="p"
                                value={attributes.body}
                                onChange={updateBody}
                                style={ {color:attributes.textColor}} />
                </div>
            </div> 
        );
    },
    save( {attributes}) {
        
        return (
            <div className="lx-authors-block wp-block" style={{ backgroundColor: attributes.bgColor }}>
                <img src={ attributes.authorImage} className="lx-authors-image" />
                <div className="lx-author-info">
                    <h2 style={ { color: attributes.textColor }}>{attributes.title}</h2>
                    <RichText.Content tagName="p"
                                    value={attributes.body}
                                    style={ {color:attributes.textColor}}
                                    />
                </div>
            </div>
        );
    },
} );

0
Sally CJ 2 months 2021-07-24T12:19:05-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse