Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #40236
    David Perez
    Participant

    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>
    );
    },
    },
    );

    #40246
    Zac Gordon
    Keymaster

    Hi David!

    What is the specific problem you’re having?

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.