Block Controls not showing

时间：2021-07-24 作者：Lucas Wojnar

我正在构建我的第一个Gutenberg块，我遇到的问题是块控件工具栏不显示。我花了几个小时将我的代码与其他古腾堡块进行比较，但找不到代码中的错误。如果有人能看看我的代码和建议，我将不胜感激。

这是我的代码：

import { registerBlockType } from \'@wordpress/blocks\';
import { 
    RichText,
    InspectorControls,
    ColorPalette,
    MediaUpload
        } from \'@wordpress/block-editor\';
import { 
    PanelBody,
    IconButton } from \'@wordpress/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>
        );
    },
} );

2 个回复

SO网友:Sally CJ

你的edit 函数只是缺少一个[ 和], i、 e.您忘记实际返回数组，如下所示：

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 ]

或者您可以将元素包装成一个片段(<> 和</>) 或div 如果需要：

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>
    </>
);

根据您的回答更新，如@TomJNowell, 确实，您不应该手动添加wp-block 向您的div （但我没有注意到您在那里添加了它，因此我在原始答案中没有提到它），而是因为您的块类型使用block API version 2 （请注意apiVersion: 2, 在代码中），您应该使用useBlockProps 以确保正确识别块包装器，并使用适当的类（如wp-block.

但是，块编辑器手册stated 即：

如果元素包装器需要任何额外的自定义HTML属性，则需要将这些属性作为参数传递给useBlockProps 钩

因此{ ...useBlockProps() } className="lx-authors-block":

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

你应该通过className 作为useBlockProps 挂钩：

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

否则div 实际上不会有wp-block 除其他问题外div 将在编辑器中显示全宽：

因此，请确保使用正确的语法和return 代码应如下所示：

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

这样就可以得到正确的结果（注意块的宽度，它也是可聚焦的，例如，当你点击右上角的白色背景时）：

SO网友:Lucas Wojnar

我发现了一个问题。我的div包装缺少{…useBlockProps（）}，因此应该是：

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

。。。

小码农CODE

Block Controls not showing

相关推荐