无法通过单击来选择我的区块

时间:2021-02-24 作者:Kasia

上传照片后,我的区块被选中,因此我可以更改属性。但当我选择另一个区块时,单击该照片,我无法选择我的区块。我只能通过列表视图进行选择。有人知道我怎么修吗?

blocks.registerBlockType( \'testblock/my-image\', {
    apiVersion: 2,
    title: \'My image\',
    icon: \'format-image\',
    category: \'media\',
    example: {
        attributes: {
            id: \'123\',
            alt: \'\',
            url: \'http://mypage/wp-content/uploads/2021/02/hairdrayer.jpg\'
        },
    },
    attributes: {
        id: {
            type: \'number\',
            default: 0
        },
        alt: {
            type: \'string\',
            default: ""
        },
        url: {
            type: \'string\',
            default: ""
        }
    },
    edit: ( props ) => {                
        return (
        <>
            {
                <InspectorControls>
                    <PanelBody title="Image Settings" initialOpen={ true }>
                        { props.attributes.id != 0 && 
                        <>
                        <PanelRow>
                            <TextControl 
                                onChange={ newAlt => props.setAttributes({ alt: newAlt }) }
                                value={ props.attributes.alt }
                                help="Describe the purpose of the image. Leave empty if the image is purely decorative."
                                label="Alt Text"
                            />
                        </PanelRow>
                        </>
                        }
                    </PanelBody>
                </InspectorControls>
            }
                    
            { props.attributes.id === 0 && 
            <MediaPlaceholder
                onSelect={ (media) => {
                    props.setAttributes({ 
                        id: media.id,
                        alt: media.alt, 
                        url: media.url
                    })
                }}
                allowedTypes = { [ \'image/gif\', \'image/jpeg\', \'image/png\', \'image/svg+xml\' ] }
                multiple = { false }
                labels = { { 
                    title: \'Responsive image\',
                    instructions: \'Upload an image file, pick one from your media library.\'                     
                } }
            />
            }

            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                      
        </>
        );
    },
    save: ( props ) => {
        return (
            <img 
                src={ props.attributes.url }
                alt={ props.attributes.alt }
            />                          
        );
    },
});

1 个回复
最合适的回答,由SO网友:Vortac 整理而成

使用时apiVersion: 2 您必须使用新的useBlockProps 钩子为自定义块实现标准块行为。在你的情况下,你会;“告诉”;编辑处理您的<img> 作为块包装器。这需要在Edit 并且在Save 并在此详细说明:https://make.wordpress.org/core/2020/11/18/block-api-version-2/

或者,您可以省略apiVersion: 2 然后再试一次。编辑器将自动向块中添加包装器元素,以启用标准块行为。

希望这有帮助。

相关推荐