扩展古腾堡核心/映像

Question

我已经为Gutenberg设置了JavaScript环境，现在正在尝试扩展核心/图像块以包装HTML。

wp.hooks.addFilter(
'blocks.getSaveElement',
'slug/modify-get-save-content-extra-props',
modifyGetSaveContentExtraProps
);
/**
* Wrap image block in div.
* 
* @param {object} element 
* @param {object} blockType 
* @param {object} attributes 
* 
* @return The element.
*/
function modifyGetSaveContentExtraProps(element, blockType, attributes) {
// Check if that is not an image block.
if (blockType.name !== 'core/image') {
return element;
}
// Return the block with div wrapper.
return (
<div className='nice-img'>
<a href={attributes.url}>
{element}
</a>
</div >
);
}

除了这段代码在控制台中抛出大量块验证错误(编辑帖子时(之外，代码还包装了包括标题在内的整个{element}。我需要以某种方式将标题放在{element}之外.

我在这里黑暗中射击。谁能指出我正确的方向？

Answer 1

好吧，我最终到达了那里。扩展核心映像基本上不是要走的路。相反，最好的选择是创建一个新块。如果你很少接触 React，这是一个陡峭的学习曲线。

本教程帮助很大：https://css-tricks.com/learning-gutenberg-7-building-our-block-custom-card-block/

以下代码使用自定义图像大小为我完成这项工作。就我而言，我也在使用灯箱插件。

// Used to create the $asset_file for functions.php enqueue
import editor from '@wordpress/editor'
import blocks from '@wordpress/blocks'
import components from '@wordpress/components'
const {MediaUpload, PlainText} = wp.editor;
const {registerBlockType} = wp.blocks;
const {Button} = wp.components;
registerBlockType('card-block/main', {
title: 'Fancy Image',
icon: <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M448 384H64v-48l71.51-71.52a12 12 0 0 1 17 0L208 320l135.51-135.52a12 12 0 0 1 17 0L448 272z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M464 64H48a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-352 56a56 56 0 1 1-56 56 56 56 0 0 1 56-56zm336 264H64v-48l71.51-71.52a12 12 0 0 1 17 0L208 320l135.51-135.52a12 12 0 0 1 17 0L448 272z"></path></g></svg>,
category: 'common',
attributes: {
title: {
source: 'text',
selector: '.card__title'
},
body: {
type: 'array',
source: 'children',
selector: '.card__body'
},
imageAlt: {
attribute: 'alt',
selector: '.card__image'
},
imageHref: {
attribute: 'href',
selector: '.card__image'
},
imageUrl: {
attribute: 'src',
selector: '.card__image'
}
},
edit({attributes, className, setAttributes}) {
const getImageButton = (openEvent) => {
if (attributes.imageUrl) {
return (
<img
src={attributes.imageUrl}
onClick={openEvent}
className="image"
/>
);
}
else {
return (
<div className="button-container">
<Button
onClick={openEvent}
className="button button-large"
>
Pick an image
</Button>
</div>
);
}
};
return (<div className="container">
<MediaUpload
onSelect={media => {setAttributes({imageAlt: media.alt, imageUrl: media.sizes['post-image'].url, imageHref: media.url});}}
type="image"
value={attributes.imageID}
render={({open}) => getImageButton(open)}
/>
<PlainText
onChange={content => setAttributes({title: content})}
value={attributes.title}
placeholder="Image caption"
/>
</div>
);
},
save({attributes}) {
const cardImage = (src, alt) => {
if (!src) return null;
if (alt) {
return (
<img
className="card__image"
src={src}
alt={alt}
/>
);
}
// No alt set, so let's hide it from screen readers
return (
<img
className="card__image"
src={src}
alt=""
aria-hidden="true"
/>
);
};
return (
<div className="nice-img">
<figure className="wp-block-image">
<a data-lightbox="gallery" href={attributes.imageHref}>
{cardImage(attributes.imageUrl, attributes.imageAlt)}
</a>
<figcaption>{attributes.title}</figcaption>
</figure>
</div>
);
}
});