What's wrong?

[David Perez]

Hello, I’m not familiar yet with Gutenberg, and I have problems to identify where is the error.

I want to make a cover image with text and a button, but not yet how to make it…

I give you an example:
/**
* Block dependencies
*/
import classnames from ‘classnames’;
import icon from ‘./../icon’;
import ‘./style.scss’;

/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const {
registerBlockType,
Editable,
MediaUpload,
ImagePlaceHolder,
} = wp.blocks;

/**
* Register block
*/
export default registerBlockType(
‘closemarketing/imagen-destacada’,
{
title: ‘Imagen destacada con mensaje’,
category: ‘common’,
icon: icon,
keywords: [
‘closemarketing’,
‘destacada’,
‘imagen’,
],
attributes: {
message: {
type: ‘array’,
source: ‘children’,
selector: ‘.message-body’,
},
url: {
type: ‘string’,
},
id: {
type: ‘number’,
},
},
edit: props => {
const { url, id } = attributes;
const onSelectImage = img => {
props.setAttributes( {
imgID: img.id,
imgURL: img.url,
imgAlt: img.alt,
} );
};
const onRemoveImage = () => {
props.setAttributes({
imgID: null,
imgURL: null,
imgAlt: null,
});
}
const onChangeMessage = value => {
props.setAttributes( { message: value } )
};
const style = url ?
{ backgroundImage: ‘url(${ url })’ } :
undefined;

if ( ! url ) {
const hasTitle = ! isEmpty( title );
const icon = hasTitle ? undefined : ‘format-image’;
const label = hasTitle ? (
<Editable
tagName=”h2″
value={ title }
focus={ focus }
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { title: value } ) }
inlineToolbar
/>
) : __( ‘Cover Image’ );

return (
<ImagePlaceHolder key=”cover-image-placeholder”
{ …{ icon, label, onSelectImage } }
/>,
);
}

return (
<section
key=”preview”
data-url={ url }
style={ style }
className={ ‘imagen-destacada’ }
>
{ title || !! focus ? (
<Editable
tagName=”h2″
placeholder={ __( ‘Write title…’ ) }
value={ title }
focus={ focus }
onFocus={ setFocus }
onChange={ ( value ) => setAttributes( { title: value } ) }
inlineToolbar
/>
) : null }
</section>,
);
},
save: props => {
return (
<div className=”message-body”>
{ props.attributes.message }
</div>
);
},
},
);

[Zac Gordon]

Hi David!

What is the specific problem you’re having?

[Author]

Posts