Ok, I give you attached. Thanks Zac.
/**
* Block dependencies
*/
import icon from './../icon';
import './editor.scss';
import icons from './icons';
/**
* Internal block libraries
*/
const { Fragment } = wp.element;
const {
registerBlockType,
MediaUpload,
UrlInput,
RichText
} = wp.blocks;
const {
Button,
IconButton,
Tooltip,
TextControl
} = wp.components;
/**
* Register example block
*/
export default registerBlockType(
'closemarketing/col-teximgtel',
{
title: '3 Columnas, texto y teléfono',
category: 'common',
icon: icon,
keywords: [
'closemarketing',
'destacada',
'imagen',
],
attributes: {
imgURL: {
type: 'string',
source: 'attribute',
attribute: 'src',
selector: 'img',
},
imgID: {
type: 'number',
},
imgAlt: {
type: 'string',
source: 'attribute',
attribute: 'alt',
selector: 'img',
},
message: {
type: 'array',
source: 'children',
selector: '.message-body',
},
title: {
type: 'array',
source: 'children',
selector: '.message-body',
},
phone: {
type: 'array',
source: 'children',
selector: '.message-body',
},
claim: {
type: 'array',
source: 'children',
selector: '.message-body',
},
text: {
type: 'string',
source: 'text',
selector: 'a',
},
url: {
type: 'string',
source: 'attribute',
attribute: 'href',
selector: 'a',
}
},
edit: props => {
const { attributes: { imgID, imgURL, imgAlt, title, message, text, url, phone, claim },
className, setAttributes, isSelected } = props;
const onSelectImage = img => {
setAttributes( {
imgID: img.id,
imgURL: img.url,
imgAlt: img.alt,
} );
};
const onRemoveImage = () => {
setAttributes({
imgID: null,
imgURL: null,
imgAlt: null,
});
};
const onChangeMessage = message => { setAttributes( { message } ) };
const onChangeTitle = title => { setAttributes( { title } ) };
const onChangePhone = phone => { setAttributes( { phone } ) };
const onChangeClaim = claim => { setAttributes( { claim } ) };
return (
<div className={ className }>
<div className="one-third first">
<RichText
tagName="h2"
placeholder={ 'Añade el Título' }
onChange={ onChangeTitle }
value={ title }
/>
<RichText
tagName="div"
placeholder={ 'Añade el texto' }
onChange={ onChangeMessage }
value={ message }
/>
{ isSelected ? (
<Fragment>
<TextControl
id="example-input-field"
label="Enlace del botón"
value={ text }
onChange={ text => setAttributes( { text } ) }
/>
<p>{ 'URL del botón' }</p>
<form
className="blocks-format-toolbar__link-modal-line blocks-format-toolbar__link-modal-line"
onSubmit={ event => event.preventDefault() }
>
<Tooltip text="Add Link">
{icon}
</Tooltip>
<UrlInput
className="url"
value={ url }
onChange={ url => setAttributes( { url } ) }
/>
<IconButton
icon="editor-break"
label="Guardar"
type="submit"
/>
</form>
</Fragment>
) : (
<p>
<button><a href={ url }>
{ text || 'Editar enlace' }
</a></button>
</p>
)}
</div>
<div className="one-third">
{ ! imgID ? (
<MediaUpload
onSelect={ onSelectImage }
type="image"
value={ imgID }
render={ ( { open } ) => (
<Button
className={ "button button-large" }
onClick={ open }
>
{ icons.upload }
{ 'Sube una imagen' }
</Button>
) }
>
</MediaUpload>
) : (
<p class="image-wrapper">
<img
src={ imgURL }
alt={ imgAlt }
/>
{ isSelected ? (
<Button
className="remove-image"
onClick={ onRemoveImage }
>
{ icons.remove }
</Button>
) : null }
</p>
)}
</div>
<div className="one-third">
<RichText
tagName="h2"
placeholder="Teléfono"
onChange={ onChangePhone }
value={ phone }
/>
<RichText
tagName="div"
placeholder="Añade el texto"
onChange={ onChangeClaim }
value={ claim }
/>
</div>
</div>
);
},
save: props => {
const { imgURL, imgAlt, title, message, text, url, phone, claim } = props.attributes;
return (
<div class="one-third first">
<h2 class="widget-title">
{ title }
</h2>
<p class="message-body">
{ message }
</p>
<button><a href={ url }>{ text }</a></button>
</div>
<div class="one-third">
<p>
<img
src={ imgURL }
alt={ imgAlt }
/>
</p>
</div>
<div class="one-third">
<h2 class="widget-title">{ phone }</h2>
<p class="message-body">{ claim }</p>
</div>
);
},
},
);