admin管理员组文章数量:1302982
after uploading a photo my block is selected, so I can change properties. But when I select another block, then by clicking on that photo I can't select my block. I can select only through list view. Does anybody know how I can fix it?
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 }
/>
);
},
});
after uploading a photo my block is selected, so I can change properties. But when I select another block, then by clicking on that photo I can't select my block. I can select only through list view. Does anybody know how I can fix it?
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 Answer
Reset to default 8When using apiVersion: 2 you must use the new useBlockProps hook to implement standard block behavior for your custom block. In your case you would "tell" the editor to treat your <img> as a block wrapper. This needs to be implemented in Edit and in Save and is explained here in detail: https://make.wordpress/core/2020/11/18/block-api-version-2/
Alternatively you could leave out apiVersion: 2 and try again. The editor will automatically add a wrapper element to your block enabling standard block behaviour.
Hope this helps.
本文标签： theme developmentCan39t select my block by clicking on it
版权声明：本文标题：theme development - Can't select my block by clicking on it 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741725449a2394597.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论