Setup Block Elements For Editor

editElements.js

el('div', { className: props.className },
  el('div', {
    className: attributes.mediaID ? 'organic-profile-image image-active' : 'organic-profile-image image-inactive',
    style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {}
  },
  el(MediaUpload, {
    onSelect: onSelectImage,
    type: 'image',
    value: attributes.mediaID,
    render: function (obj) {
      return el(components.Button, {
        className: attributes.mediaID ? 'image-button' : 'button button-large',
        onClick: obj.open
      },
      !attributes.mediaID ? i18n.__('Upload Image') : el('img', { src: attributes.mediaURL })
      )
    }
  })
  ),
  el('div', { className: 'organic-profile-content', style: { textAlign: alignment } },
    el(RichText, {
      key: 'editable',
      tagName: 'h3',
      placeholder: 'Profile Name',
      keepPlaceholderOnFocus: true,
      value: attributes.title,
      onChange: function (newTitle) {
        props.setAttributes({ title: newTitle })
      }
    }),
    el(RichText, {
      tagName: 'h5',
      placeholder: i18n.__('Subtitle'),
      keepPlaceholderOnFocus: true,
      value: attributes.subtitle,
      onChange: function (newSubtitle) {
        props.setAttributes({ subtitle: newSubtitle })
      }
    }),
    el(RichText, {
      key: 'editable',
      tagName: 'p',
      placeholder: i18n.__('Write a brief bio...'),
      keepPlaceholderOnFocus: true,
      value: attributes.bio,
      onChange: function (newBio) {
        props.setAttributes({ bio: newBio })
      }
    }),
    el('div', { className: 'organic-profile-social' },
      attributes.facebookURL && el('a', {
        className: 'social-link',
        href: attributes.facebookURL,
        target: '_blank'
      },
      el('i', { className: 'fa fa-facebook' })
      ),
      attributes.twitterURL && el('a', {
        className: 'social-link',
        href: attributes.twitterURL,
        target: '_blank'
      },
      el('i', { className: 'fa fa-twitter' })
      ),
      attributes.instagramURL && el('a', {
        className: 'social-link',
        href: attributes.instagramURL,
        target: '_blank'
      },
      el('i', { className: 'fa fa-instagram' })
      ),
      attributes.linkedURL && el('a', { className: 'social-link',
        href: attributes.linkedURL,
        target: '_blank'
      },
      el('i', { className: 'fa fa-linkedin' })
      ),
      attributes.emailAddress && el('a', {
        className: 'social-link',
        href: 'mailto:' + attributes.emailAddress,
        target: '_blank'
      },
      el('i', { className: 'fa fa-envelope' })
      )
    )
  )
)