Forum Replies Created
Viewing 8 posts - 1 through 8 (of 8 total)
-
Posts
-
Hello Zac, I’ve managed to work, but when I go to the editor it says that the block has been modified externally, and it breaks it.
I don’t understand what I need else…
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> ); }, }, );When I put <div></div> gives the same error. Sorry I don’t understand the fragment from wp.element. In which video can i see it?
Hello Zac,
I’ve written in Gutenberg Github and they replied me:@media screen and ( min-width: 768px ) {
.edit-post-visual-editor .editor-post-title,
.edit-post-visual-editor .editor-block-list__block {
max-width: 1100px;
}
}
Viewing 8 posts - 1 through 8 (of 8 total)