block.js

/**
 * BLOCK: Social Links
 */

import classnames from 'classnames';
import icons from './icons';

// Import CSS
import './style.scss';
import './editor.scss';

// Internationalization
const { __ } = wp.i18n; 

// Register block controls
const { 
	registerBlockType,
	RichText,
	AlignmentToolbar,
	BlockControls,
	InspectorControls,
  	BlockDescription,
  	ColorPalette,
	BlockAlignmentToolbar,
	MediaUpload,
} = wp.blocks;

// Register components
const {
	Toolbar,
	Button,
	PanelBody,
	PanelRow,
	PanelColor,
	FormToggle,
} = wp.components;

// Register the block
registerBlockType( 'test/social-links', {
	title: __( 'Social Links' ),
	icon: 'admin-users',
	category: 'common',
	keywords: [
		__( 'testimonial' ),
		__( 'quote' ),
	],
	attributes: {
		twitter: {
            type: 'url',
		},
		facebook: {
            type: 'url',
		},
		instagram: {
            type: 'url',
		},
	},

	edit: function( props ) {

		// Social media icons
		const SocialMediaIcons = ( props ) => (
			<ul class="social-links">
				{ props.attributes.twitter && (
					<li>
						<a href={ props.attributes.twitter } target="_blank"><i class="fab fa-twitter"></i></a>
					</li>
				) }

				{ props.attributes.facebook && (
					<li>
						<a href={ props.attributes.facebook } target="_blank"><i class="fab fa-facebook-square"></i></a>
					</li>
				) }

				{ props.attributes.instagram && (
					<li>
						<a href={ props.attributes.instagram } target="_blank"><i class="fab fa-instagram"></i></a>
					</li>
				) }
			</ul>
		);

		return [
			!! props.focus && (
				// Show the block controls on focus
				<InspectorControls key="inspector">
					<TextControl
						label={ __( 'Twitter URL' ) }
						type="url"
						value={ props.attributes.twitter }
						onChange={ ( value ) => props.setAttributes( { twitter: value } ) }
					/>

					<TextControl
						label={ __( 'Facebook URL' ) }
						type="url"
						value={ props.attributes.facebook }
						onChange={ ( value ) => props.setAttributes( { facebook: value } ) }
					/>

					<TextControl
						label={ __( 'Instagram URL' ) }
						type="url"
						value={ props.attributes.instagram }
						onChange={ ( value ) => props.setAttributes( { instagram: value } ) }
					/>
				</InspectorControls>
			),

			<div className={ 'social-icons' }>
				<SocialMediaIcons { ...props } />
			</div>
		];
	},

	// Save the block
	save: function( props ) {
		return (
			<div className={ 'social-icons' }>
				<SocialMediaIcons { ...props } /> 
			</div>
		);
	},
} );