Block Controls not showing

Question

Your edit function is just missing a [ and ], i.e. you forgot to actually return an array, like so:

return ([ // add that [
    <InspectorControls key="lx-authors-block-setting" style={ { marginBottom:'40px'} }>
        ...
    </InspectorControls>,
    <div className="lx-authors-block wp-block" key="container" style={{ backgroundColor: attributes.bgColor}}>
        ...
    </div>
]); // and add that ]

Or you could instead wrap the elements in a fragment (<> and </>) or div if you want:

return (
    <>
        <InspectorControls key="lx-authors-block-setting" style={ { marginBottom:'40px'} }>
            ...
        </InspectorControls>
        <div className="lx-authors-block wp-block" key="container" style={{ backgroundColor: attributes.bgColor}}>
            ...
        </div>
    </>
);

Update

In response to your answer, and as said by @TomJNowell, it’s true that you should not manually add the wp-block class to your div (but I didn’t notice you added it there, hence I didn’t mention it in my original answer) and instead, because your block type is using the block API version 2 (note the apiVersion: 2, in your code), you should use useBlockProps to ensure the block wrapper is recognized properly and added with the proper classes like the wp-block.

However, the block editor handbook stated that:

If the element wrapper needs any extra custom HTML attributes, these
need to be passed as an argument to the useBlockProps hook.

Therefore, instead of doing { ...useBlockProps() } className="lx-authors-block":

<div { ...useBlockProps() } className="lx-authors-block" key="editable" style={{ backgroundColor: attributes.bgColor}}>

You should actually pass the className as an argument to the useBlockProps hook:

<div { ...useBlockProps( {
    className: 'lx-authors-block',
    key: 'editable',
    style: { backgroundColor: attributes.bgColor },
} ) }>

Otherwise, the div will not actually going to have the wp-block class and among other issues, the div will appear full-width in the editor:

So make sure that you use the correct syntax and your return code should look like so:

return ([
    <InspectorControls key="lx-authors-block-setting" style={ { marginBottom:'40px'} }>
        ...
    </InspectorControls>,
    <div { ...useBlockProps( {
        className: 'lx-authors-block',
        key: 'editable',
        style: { backgroundColor: attributes.bgColor },
    } ) }>
        ...
    </div>
]);

Which then would give you the correct outcome like so (note the block width and it’s also focusable, e.g. when you click on the white background at the top-right corner):

Update

Related Posts: