Gitenberg new block group

src/blocks-library/button-group/attributes.js

@@ -0,0 +1,47 @@
+const attributes = {
+	spacing: {
+		type: 'string',
+		default: ''
+	},
+
+	alignment: {
+		type: 'string',
+		default: 'left'
+	},
+	alignmentTablet: {
+		type: 'string',
+		default: ''
+	},
+	alignmentMobile: {
+		type: 'string',
+		default: ''
+	},
+
+	direction: {
+		type: 'string',
+		default: 'row'
+	},
+	directionTablet: {
+		type: 'string',
+		default: ''
+	},
+	directionMobile: {
+		type: 'string',
+		default: ''
+	},
+
+	width: {
+		type: 'string',
+		default: 'auto'
+	},
+	widthTablet: {
+		type: 'string',
+		default: 'auto'
+	},
+	widthMobile: {
+		type: 'string',
+		default: 'auto'
+	},
+};
+
+export default attributes;

src/blocks-library/button-group/edit.js

@@ -0,0 +1,105 @@
+/**
+* External dependencies
+*/
+import classnames from "classnames";
+import Inspector from './inspector';
+import './editor.scss';
+
+
+/**
+* WordPress dependencies
+*/
+import { __ } from '@wordpress/i18n';
+import {
+	Fragment,
+	Component
+} from '@wordpress/element';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+
+/**
+* Module Constants
+*/
+const baseClass = 'wp-block-getwid-button-group';
+
+
+/**
+* Module Constants
+*/
+const TEMPLATE = [
+	['core/button', {text: __('Button', 'getwid') }],
+	['core/button', {text: __('Button', 'getwid') }]
+];
+
+
+/**
+* Create an Component
+*/
+class Edit extends Component{
+
+	constructor(){
+		super( ...arguments );
+	}
+
+	render(){
+		const {
+			attributes:{
+				spacing,
+
+				alignment,
+				alignmentTablet,
+				alignmentMobile,
+
+				direction,
+				directionTablet,
+				directionMobile,
+
+				width,
+				widthTablet,
+				widthMobile,
+			},
+			setAttributes,
+			className
+		} = this.props;
+
+		const wrapperClasses = classnames(
+			`${baseClass}__wrapper`,
+			{
+				[`has-spacing-${spacing}`]: spacing !== '',
+
+				[`has-alignment-${alignment}`]: alignment !== 'left',
+				[`has-alignment-tablet-${alignmentTablet}`]: alignmentTablet !== '',
+				[`has-alignment-mobile-${alignmentMobile}`]: alignmentMobile !== '',
+
+				[`has-direction-${direction}`]: direction !== 'row',
+				[`has-direction-tablet-${directionTablet}`]: directionTablet !== '',
+				[`has-direction-mobile-${directionMobile}`]: directionMobile !== '',
+
+				[`has-width-${width}`]: width !== 'auto',
+				[`has-width-tablet-${widthTablet}`]: widthTablet !== 'auto',
+				[`has-width-mobile-${widthMobile}`]: widthMobile !== 'auto',
+			}
+		);
+
+		return(
+			<Fragment>
+
+				<Inspector { ...this.props } />
+
+				<div className={ className } >
+					<div className={wrapperClasses}>
+						<InnerBlocks
+							template={TEMPLATE}
+							allowedBlocks={['core/button', 'gitenberg/shields-badge']}
+							templateInsertUpdatesSelection={ false }
+						/>
+					</div>
+				</div>
+
+			</Fragment>
+		)
+
+	}
+}
+
+export default Edit;