Example Team Member Block

Readme.md

Team Member Block

This was part of the Team Member Gutenberg block plugin. This plugin was to help other developer have an example to create WordPress blocks using React JS.

This is an example use only!

block.json

{
	"apiVersion": 2,
	"name": "blocks-oe/team-members",
	"title": "Team Members",
	"category": "media",
	"icon": "groups",
	"description": "Team members block with name, bio, image and social links.",
	"keywords": ["Team", "Members", "Grid"],
	"supports": {
		"html": false,
		"align": ["wide"]
	},
	"textdomain": "team-members",
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css",
	"attributes": {
		"columns": {
			"type": "number",
			"default": 2
		}
	},
	"example": {
		"attributes": {
			"columns": 2
		},
		"innerBlocks": [
			{
				"name": "blocks-oe/team-member",
				"attributes": {
					"name": "Bob Hope",
					"bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nibh, tincidunt ut facilisis vitae, ullamcorper sit amet lectus.",
					"url": "https://picsum.photos/300/200",
					"socialLinks": [{"icon": "facebook"}, {"icon": "twitter"}, {"icon":"instagram"}]
				}
			},
			{
				"name": "blocks-oe/team-member",
				"attributes": {
					"name": "Barbera Smith",
					"bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nibh, tincidunt ut facilisis vitae, ullamcorper sit amet lectus.",
					"url": "https://picsum.photos/300/200",
					"socialLinks": [{"icon": "facebook"}, {"icon": "twitter"}, {"icon":"instagram"}]
				}
			}
		]
	}
}

edit.js

import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
	const { columns } = attributes;

	const onChangeColumns = ( newColumns ) => {
		setAttributes( { columns: newColumns } );
	};
	return (
		<div
			{ ...useBlockProps( {
				className: `has-${ columns }-columns`,
			} ) }
		>
			<InspectorControls>
				<PanelBody>
					<RangeControl
						label={ __( 'Columns', 'team-members' ) }
						min={ 1 }
						max={ 6 }
						onChange={ onChangeColumns }
						value={ columns }
					/>
				</PanelBody>
			</InspectorControls>
			<InnerBlocks
				allowedBlocks={ [ 'blocks-oe/team-member' ] }
				orientation="horizontal"
				template={ [
					[ 'blocks-oe/team-member' ],
					[ 'blocks-oe/team-member' ],
					[ 'blocks-oe/team-member' ],
				] }
			/>
		</div>
	);
}

editor.scss

.wp-block-blocks-oe-team-members {
	display: block;

	@for $i from 1 through 6 {
		&.has-#{$i}-columns {
			> .block-editor-inner-blocks > .block-editor-block-list__layout > {

				[data-type="blocks-oe/team-member"] {
					width: calc(100% / #{$i} - 20px);
				}

				.block-list-appender {
					align-self: stretch;
					width: calc(100% / #{$i} - 20px);
					border: 1px dashed;
					display: flex;
					align-items: center;
					justify-content: center;
					min-height: 70px;
				}
			}
		}
	}

	> .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		flex-wrap: wrap;
		margin-left: -10px;
		margin-right: -10px;

		[data-type="blocks-oe/team-member"] {
			max-width: none;
			margin: 0;
		}

		> [data-type="blocks-oe/team-member"] {
			margin: 10px;

			.block-editor-media-placeholder {
				margin-bottom: 20px;
			}

			.wp-block-blocks-oe-team-member-img {
				position: relative;
				margin-bottom: 20px;

				&.is-loading img {
					opacity: 0.3;
				}

				.components-spinner {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}

			h4 {
				color: #222;
				font-size: 22px;
				font-size: bold;
				margin: 0;
			}

			p {
				color: #565656;
				font-size: 16px;
				font-weight: 300;
				margin-bottom: 5px;
				margin-top: 5px;
			}

			.wp-block-blocks-oe-team-member-social-links {

				ul {
					list-style: none;
					padding: 0;
					margin: 15px -5px 0;

					li {
						display: inline-block;
						margin: 5px;

						span.dashicon {
							color: #4e4e4e;
						}

						&.is-selected {
							outline: 2px solid rgb(208, 40, 227);
						}

						button {
							background: none;
							border: none;
							padding: 0;
							cursor: pointer;
							margin: 0;
						}

						&.wp-block-blocks-oe-team-member-add-icon-li {

							button {
								outline: 1px dashed;
							}
						}
					}
				}
			}

			.wp-block-blocks-oe-team-member-link-form {
				background: #fff;
				border: 1px solid;
				padding: 10px;
				margin-top: 10px;
			}
		}
	}
}

index.js

import { registerBlockType, createBlock } from '@wordpress/blocks';
import './team-member';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType( 'blocks-oe/team-members', {
	edit: Edit,
	save,
	transforms: {
		from: [
			{
				type: 'block',
				blocks: [ 'core/gallery' ],
				transform: ( { images, columns } ) => {
					const innerBlocks = images.map( ( { url, id, alt } ) => {
						return createBlock( 'blocks-oe/team-member', {
							alt,
							id,
							url,
						} );
					} );
					return createBlock(
						'blocks-oe/team-members',
						{
							columns: columns || 2,
						},
						innerBlocks
					);
				},
			},
			{
				type: 'block',
				blocks: [ 'core/image' ],
				isMultiBlock: true,
				transform: ( attributes ) => {
					const innerBlocks = attributes.map(
						( { url, id, alt } ) => {
							return createBlock( 'blocks-oe/team-member', {
								alt,
								id,
								url,
							} );
						}
					);
					return createBlock(
						'blocks-oe/team-members',
						{
							columns:
								attributes.length > 3 ? 3 : attributes.length,
						},
						innerBlocks
					);
				},
			},
		],
	},
} );

save.js

import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

export default function save( { attributes } ) {
	const { columns } = attributes;
	return (
		<div
			{ ...useBlockProps.save( {
				className: `has-${ columns }-columns`,
			} ) }
		>
			<InnerBlocks.Content />
		</div>
	);
}

style.scss

.wp-block-blocks-oe-team-members {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;

	@for $i from 1 through 6 {
		&.has-#{$i}-columns {

			.wp-block-blocks-oe-team-member {
				width: calc(100% / #{$i} - 20px);
			}
		}
	}

	.wp-block-blocks-oe-team-member {
		margin: 10px;

		img {
			margin-bottom: 20px;
		}

		h4 {
			color: #222;
			font-size: 22px;
			font-size: bold;
			margin: 0;
		}

		p {
			color: #565656;
			font-size: 16px;
			font-weight: 300;
			margin-bottom: 5px;
			margin-top: 5px;
		}

		.wp-block-blocks-oe-team-member-social-links {

			ul {
				list-style: none;
				padding: 0;
				margin: 15px -5px 0;

				li {
					display: inline-block;
					margin: 5px;

					a {
						text-decoration: none;
					}

					span.dashicon {
						color: #4e4e4e;
					}
				}
			}
		}
	}
}