Answer the question
In order to leave comments, you need to log in
How to create a new Gutenberg block, an image with a button?
Unable to create block with link.
I need to create a block wrapped in a link, the block will contain an image and text.
The image and text were created successfully.
To create, I used https://github.com/ahmadawais/create-guten-block
But I can’t understand how to create a link, I didn’t find anything in the search (
Maybe someone did something similar, the main thing is to have a link)
The code of what I have there is:
/**
* BLOCK: gutensnails
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/
// Import CSS.
const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;
// Import our CSS files
import './style.scss';
import './editor.scss';
registerBlockType('card-block/main', {
title: 'Categoty link2',
icon: 'heart',
category: 'common',
attributes: {
title: {
source: 'text',
selector: '.card__title'
},
body: {
type: 'array',
source: 'children',
selector: '.card__body'
},
imageAlt: {
attribute: 'alt',
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"
alt="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.url }); } }
type="image"
value={ attributes.imageID }
render={ ({ open }) => getImageButton(open) }
/>
<PlainText
onChange={ content => setAttributes({ title: content }) }
value={ attributes.title }
placeholder="Your card title"
className="heading"
/>
<RichText
onChange={ content => setAttributes({ body: content }) }
value={ attributes.body }
multiline="p"
placeholder="Your card text"
formattingControls={ ['bold', 'italic', 'underline'] }
isSelected={ attributes.isSelected }
/>
</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="card">
{ cardImage(attributes.imageUrl, attributes.imageAlt) }
<div className="card__content">
<h3 className="card__title">{ attributes.title }</h3>
<div className="card__body">
{ attributes.body }
</div>
</div>
</div>
);
}
});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question