Updates to feature block to include extra layout style

package.json

@@ -8,7 +8,7 @@
     "eject": "cgb-scripts eject"
   },
   "dependencies": {
-    "cgb-scripts": "1.9.6",
+    "cgb-scripts": "1.9.7",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "memize": "^1.0.5",

src/blocks/editor.scss

@@ -9,7 +9,7 @@
 body.gutenberg-editor-page .editor-post-title,
 body.gutenberg-editor-page .editor-default-block-appender,
 body.gutenberg-editor-page .editor-block-list__block {
-    max-width: 940px;
+	max-width: 940px;
 }
 
 .image--circle {
@@ -37,9 +37,6 @@ button {
 	}
 }
 
-.wp-block-cgb-block-text-and-image {
-}
-
 .team-member__content {
 	background-color: #f9f9f9;
 }
@@ -55,3 +52,23 @@ button {
 	display: block;
 	margin: 0 auto;
 }
+
+/**
+* Feature Block
+**/
+.wp-block-cgb-block-feature {
+	&.block {
+		.remove-image {
+			z-index: 999;
+		}
+		.feature__content.has-image {
+			position: absolute;
+		}
+		.image-wrapper {
+			margin: 0;
+			img {
+				width: 100%;
+			}
+		}
+	}
+}

src/blocks/features-list/constants.js

@@ -0,0 +1,63 @@
+export const attributes = {
+	title: {
+		type: 'string',
+		source: 'children',
+		selector: 'h3',
+	},
+	textColor: {
+		type: 'string',
+		default: 'transparent',
+	},
+	backgroundColor: {
+		type: 'string',
+		default: 'transparent',
+	},
+	imgDimness: {
+		type: 'number',
+		default: '50',
+	},
+	description: {
+		type: 'array',
+		source: 'children',
+		selector: '.feature__description',
+	},
+	imgURL: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'src',
+		selector: 'img',
+	},
+	imgID: {
+		type: 'number',
+	},
+	imgAlt: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'alt',
+		selector: 'img',
+	},
+	circularImg: {
+		type: 'boolean',
+		default: 'false',
+	},
+	link: {
+		type: 'string',
+		default: '/contact',
+	},
+	showButton: {
+		type: 'boolean',
+		default: true,
+	},
+	buttonText: {
+		type: 'string',
+		default: 'Find out more',
+	},
+	blockAlignment: {
+		type: 'string',
+		default: 'center',
+	},
+	type: {
+		type: 'string',
+		default: 'list',
+	},
+};

src/blocks/features-list/editor/featureBlock.js

@@ -0,0 +1,128 @@
+/**
+ * Internal block libraries
+ */
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const { MediaUpload, RichText, InnerBlocks } = wp.editor;
+const { Button } = wp.components;
+import classnames from 'classnames';
+import icons from '../../icons';
+/**
+ * Create an Inspector Controls wrapper Component
+ */
+export default class FeatureBlock extends Component {
+	constructor( props ) {
+		super( ...arguments );
+	}
+
+	hexToRgbA( color = '#fff' ) {
+		const hex = color.replace( '#', '' );
+		const r = parseInt( hex.substring( 0, 2 ), 16 );
+		const g = parseInt( hex.substring( 2, 4 ), 16 );
+		const b = parseInt( hex.substring( 4, 6 ), 16 );
+
+		const result =
+			'rgba(' +
+			r +
+			',' +
+			g +
+			',' +
+			b +
+			',' +
+			this.props.attributes.imgDimness / 100 +
+			')';
+		return result;
+	}
+
+	render() {
+		const {
+			attributes: {
+				imgID,
+				imgURL,
+				imgAlt,
+				title,
+				description,
+				showButton,
+				link,
+				buttonText,
+				textColor,
+				backgroundColor,
+			},
+			onSelectImage,
+			onRemoveImage,
+			onChangeTitle,
+			onChangeDescription,
+			isSelected,
+		} = this.props;
+
+		const contentClass = classnames(
+			'feature__content',
+			imgID ? 'has-image' : null
+		);
+
+		return (
+			<div className="position-relative overflow-hidden">
+				<figure className="image-wrapper position-relative">
+					{ ! imgID ? (
+						<MediaUpload
+							onSelect={ onSelectImage }
+							type="image"
+							value={ imgID }
+							render={ ( { open } ) => (
+								<Button
+									className="components-button button button-large"
+									onClick={ open }
+								>
+									Open Media Library
+								</Button>
+							) }
+						/>
+					) : (
+						<div className="position-relative">
+							<img src={ imgURL } alt={ imgAlt } />
+							{ isSelected ? (
+								<Button className="remove-image" onClick={ onRemoveImage }>
+									{ icons.remove }
+								</Button>
+							) : null }
+						</div>
+					) }
+				</figure>
+
+				<div
+					className={ contentClass }
+					style={ {
+						color: textColor,
+						backgroundColor:
+							backgroundColor !== 'transparent' ?
+								this.hexToRgbA( backgroundColor ) :
+								'transparent',
+					} }
+				>
+					<RichText
+						tagName="h3"
+						placeholder={ __( 'Feature title' ) }
+						onChange={ onChangeTitle }
+						value={ title }
+					/>
+
+					<div className="feature__description">
+						<RichText
+							tagName="div"
+							multiline="p"
+							placeholder={ __( 'Feature description' ) }
+							onChange={ onChangeDescription }
+							value={ description }
+						/>
+						<InnerBlocks />
+						{ showButton ? (
+							<a href={ link } className="button w100 button--primary">
+								{ buttonText }
+							</a>
+						) : null }
+					</div>
+				</div>
+			</div>
+		);
+	}
+}

src/blocks/features-list/editor/inspector.js

@@ -0,0 +1,112 @@
+/**
+ * Internal block libraries
+ */
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const { InspectorControls, ColorPalette } = wp.editor;
+const {
+	PanelBody,
+	PanelRow,
+	PanelColor,
+	TextControl,
+	ToggleControl,
+	RangeControl,
+} = wp.components;
+
+/**
+ * Create an Inspector Controls wrapper Component
+ */
+export default class Inspector extends Component {
+	constructor( props ) {
+		super( ...arguments );
+	}
+
+	render() {
+		const {
+			attributes: {
+				link,
+				buttonText,
+				circularImg,
+				showButton,
+				type,
+				textColor,
+				backgroundColor,
+				imgDimness,
+			},
+			onChangeLink,
+			onChangeButtonText,
+			onChangeImgType,
+			onToggleButton,
+			onChangeBackgroundColor,
+			onChangeTextColor,
+			onChangeImgDimness,
+		} = this.props;
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody title={ __( 'Button Options' ) }>
+					<PanelRow>
+						<ToggleControl
+							label={ __( 'Show Button?' ) }
+							checked={ !! showButton }
+							onChange={ onToggleButton }
+						/>
+					</PanelRow>
+
+					{ showButton ? (
+						<div>
+							<PanelRow key="url">
+								<TextControl
+									label={ __( 'Button URL' ) }
+									value={ link }
+									onChange={ onChangeLink }
+								/>
+							</PanelRow>
+							<PanelRow key="text">
+								<TextControl
+									label={ __( 'Button Text' ) }
+									value={ buttonText }
+									onChange={ onChangeButtonText }
+								/>
+							</PanelRow>
+						</div>
+					) : null }
+				</PanelBody>
+
+				{ type === 'list' ? (
+					<PanelBody title={ __( 'Image Options' ) }>
+						<PanelRow>
+							<ToggleControl
+								label={ __( 'Circular Image' ) }
+								checked={ !! circularImg }
+								onChange={ onChangeImgType }
+							/>
+						</PanelRow>
+					</PanelBody>
+				) : (
+					<PanelBody title={ __( 'Image Dimness' ) }>
+						<PanelRow>
+							<RangeControl
+								value={ imgDimness }
+								onChange={ onChangeImgDimness }
+								min={ 0 }
+								max={ 100 }
+								step={ 10 }
+								allowReset="true"
+							/>
+						</PanelRow>
+					</PanelBody>
+				) }
+
+				<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor }>
+					<ColorPalette value={ textColor } onChange={ onChangeTextColor } />
+				</PanelColor>
+				<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor }>
+					<ColorPalette
+						value={ backgroundColor }
+						onChange={ onChangeBackgroundColor }
+					/>
+				</PanelColor>
+			</InspectorControls>
+		);
+	}
+}