Inspector Options For The Profile Block

editInspectorControls.js

el(InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
  el(components.PanelBody, {
    title: i18n.__('Social Media Links'),
    className: 'block-social-links',
    initialOpen: true
  },
  el('p', {}, i18n.__('Add links to your social media profiles.')),
  // Facebook social media text field option.
  el(TextControl, {
    type: 'url',
    label: i18n.__('Facebook URL'),
    value: facebookURL,
    onChange: function (newFacebook) {
      props.setAttributes({ facebookURL: newFacebook })
    }
  }),
  // Twitter social media text field option.
  el(TextControl, {
    type: 'url',
    label: i18n.__('Twitter URL'),
    value: twitterURL,
    onChange: function (newTwitter) {
      props.setAttributes({ twitterURL: newTwitter })
    }
  }),
  // Instagram social media text field option.
  el(TextControl, {
    type: 'url',
    label: i18n.__('Instagram URL'),
    value: instagramURL,
    onChange: function (newInstagram) {
      props.setAttributes({ instagramURL: newInstagram })
    }
  }),
  // LinkedIn social media text field option.
  el(TextControl, {
    type: 'url',
    label: i18n.__('LinkedIn URL'),
    value: linkedURL,
    onChange: function (newLinkedIn) {
      props.setAttributes({ linkedURL: newLinkedIn })
    }
  }),
  // Email address text field option.
  el(TextControl, {
    type: 'text',
    label: i18n.__('Email Address'),
    value: emailAddress,
    onChange: function (newEmail) {
      props.setAttributes({ emailAddress: newEmail })
    }
  }))
),