Board Member Custom Gutenberg Block

editor.css

.static-board-member {
     text-align: center;
     padding: 20px;
     background: #eee;
     border-radius: 8px;
}

.wp-block-clb-custom-blocks-board-member .static-board-member {
     border: none;
}

icon.js

const icon =  <svg width='20px' height='20px' viewBox='0 0 100 100' data-prefix='fas' data-icon='users' className='svg-inline--fa fa-users fa-w-20'
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'>
    <path fill='currentColor' d='M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'
    />
</svg>;

export default icon;

index.js

/**
 * Block dependencies
 */
//import classnames from 'classnames';
import icon from './icon';
import './style.css';
import './editor.css';

/**
 * Internal block libraries
 */

const { Fragment } = wp.element;
const {
    registerBlockType,
} = wp.blocks;
const {
    InspectorControls, RichText,
} = wp.editor;
const {
     Toolbar,
    Button,
    Tooltip,
    PanelBody,
    PanelRow,
    FormToggle,
    TextControl,
    IconButton,
    RangeControl,
} = wp.components;


/**
 * Register example block
 */
export default registerBlockType(
    'clb-custom-blocks/board-member',
    {
        title: 'Board Member',
        description:  'Add a new board member to the page.',
        category: 'common',
        icon: {
            foreground: '#fff',
            background: '#333',
            src: icon,
        },
        keywords: [
            'board',
            'member',
            'directors'
        ],
        attributes: {
             name: {
                type: 'string',
                source: 'text',
                selector: '.board-member-name',
             },
             title: {
                type: 'string',
                source: 'text',
                selector: '.board-member-title',
             },
             website: {
                type: 'string',
                source: 'text',
                selector: '.board-member-website',
             },
             bio: {
                 type: 'array',
                 source: 'children',
                 selector: '.board-member-bio-body',
             }
        },

        edit: props => {
            const { attributes: { name, title, website, bio }, className, isSelected, setAttributes } = props;
            const onChangeName = name => { setAttributes( { name } ) };
            const onChangeTitle = title => { setAttributes( { title } ) };
            const onChangeWebsite = website => { setAttributes( { website } ) };
            const onChangeBio = bio => { setAttributes( { bio } ) };

            return (
                <div className={ className }>
                { isSelected ? (
                     <div className ={ className + "-selected" } >
                     <TextControl
                          className='board-member-name-input'
                          label={ 'Name' }
                          value={ name }
                          placeholder={ 'Jane Doe' }
                          onChange={ onChangeName }
                     />
                     <TextControl
                          className='board-member-title-input'
                          label={ 'Title' }
                          value={ title }
                          placeholder={ 'Optional' }
                          onChange={ onChangeTitle }
                     />
                     <TextControl
                          className='board-member-website-input'
                          label={ 'Website' }
                          value={ website }
                          placeholder={ 'Optional' }
                          onChange={ onChangeWebsite }
                     />
                     <h4>Bio</h4>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={ 'Add your custom bio' }
                  		onChange={ onChangeBio }
                  		value={ bio }
              		/>
                    </div>
               ) : (
                  <div class="static-board-member">
                       <p>Board Member: {name}</p>
                  </div>
               )}
                </div>
            );
        },
        save: props => {
                    const { attributes: { name, title, website, bio } } = props;
                    return (
                        <div>
                             <div class="board-member-name">
                                 <h2>{ name }</h2>
                             </div>
                             <div class="board-member-title">
                                 { title }
                             </div>
                             <div class="board-member-website">
                                 { website }
                             </div>
                            <div class="bio-header">{'Bio'}</div>
                            <div class="board-member-bio-body">
                                { bio }
                            </div>
                        </div>
                    );
                },
    },
);

style.css

.entry-content .wp-block-clb-custom-blocks-board-member {
     padding: 20px;
     border: 1px solid #ddd;
}