diff --git a/package-lock.json b/package-lock.json
index 4f30e2a..f8ce358 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1489,9 +1489,9 @@
       }
     },
     "cgb-scripts": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/cgb-scripts/-/cgb-scripts-1.9.5.tgz",
-      "integrity": "sha512-TxCiPU6HOy5slXzpja589gynMlCDHiLzJy3DrhuD7uCDMJn5il85W3hQaeyteIbkTKr69VzKHVMNzB3Rq1Gm4w==",
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/cgb-scripts/-/cgb-scripts-1.9.6.tgz",
+      "integrity": "sha512-6R7zs77xUTgzsvV7w3e5a7tZWoDroYOSsDJRt42rKQTAQBOfWTRFE8y7wcmYkjrFMlTOOkekMnD4qlYt+Ps79Q==",
       "requires": {
         "autoprefixer": "7.2.6",
         "babel-core": "6.26.0",
diff --git a/package.json b/package.json
index a9bc3b8..4612ea9 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "eject": "cgb-scripts eject"
   },
   "dependencies": {
-    "cgb-scripts": "1.9.5",
+    "cgb-scripts": "1.9.6",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "memize": "^1.0.5",
diff --git a/src/blocks/before-and-after/index.js b/src/blocks/before-and-after/index.js
index e55bb23..ad61f5c 100644
--- a/src/blocks/before-and-after/index.js
+++ b/src/blocks/before-and-after/index.js
@@ -7,24 +7,17 @@
 /**
  * Block Dependencies
  */
-import icons from "../icons";
+import icons from '../icons';
 /**
  * Internal block libraries
  */
 
 const { __ } = wp.i18n; // Import __() from wp.i18n
-const {
-	registerBlockType,
-	MediaUpload,
-	BlockControls,
-	InnerBlocks,
-} = wp.blocks; 
-const {
-	Button,
-	Toolbar,
-	Tooltip,
-	Dashicon,
-} = wp.components;
+const { registerBlockType } = wp.blocks;
+
+const { MediaUpload } = wp.editor;
+
+const { Button } = wp.components;
 /**
  * Register: aa Gutenberg Block.
  *
@@ -37,71 +30,65 @@ const {
  * @return {?WPBlock}          The block, if it has been successfully
  *                             registered; otherwise `undefined`.
  */
-registerBlockType("cgb/block-before-and-after", {
-	
-	title: __("Before & After"), // Block title.
-	icon: "image-flip-horizontal", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
-	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
-	keywords: [__("before-and-after — CGB Block"), __("Before & After")],
+registerBlockType('cgb/block-before-and-after', {
+	title: __('Before & After'), // Block title.
+	icon: 'image-flip-horizontal', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
+	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
+	keywords: [__('before-and-after — CGB Block'), __('Before & After')],
 	attributes: {
 		beforeImgURL: {
-			type: "string",
+			type: 'string',
 		},
 		beforeImgID: {
-			type: "number"
+			type: 'number',
 		},
 
 		afterImgURL: {
-			type: "string",
+			type: 'string',
 		},
 		afterImgID: {
-			type: "number"
+			type: 'number',
 		},
-
 	},
 
 	// The "edit" property must be a valid function.
 	edit: props => {
-
 		const onSelectBeforeImage = img => {
 			props.setAttributes({
 				beforeImgID: img.id,
 				beforeImgURL: img.url,
-
 			});
 		};
 		const onRemoveBeforeImage = () => {
 			props.setAttributes({
 				beforeImgID: null,
 				beforeImgURL: null,
-	
 			});
-        };
-        
+		};
+
 		const onSelectAfterImage = img => {
 			props.setAttributes({
 				afterImgID: img.id,
 				afterImgURL: img.url,
-
 			});
 		};
 		const onRemoveAfterImage = () => {
 			props.setAttributes({
 				afterImgID: null,
 				afterImgURL: null,
-
 			});
 		};
 
 		return [
-	
 			<div className={props.className}>
-        <div className="flex align--centre">
-					<div style={{
-						flex: 1,
-						display: 'flex',
-						justifyContent: 'center'
-						}}>
+				<div className="flex align--centre">
+					<div
+						style={{
+							flex: 1,
+							display: 'flex',
+							justifyContent: 'center',
+						}}
+					>
 						{!props.attributes.beforeImgID ? (
 							<MediaUpload
 								onSelect={onSelectBeforeImage}
@@ -118,23 +105,22 @@ registerBlockType("cgb/block-before-and-after", {
 							/>
 						) : (
 							<div className="position-relative">
-								<img
-									src={props.attributes.beforeImgURL}
-								/>
-								
-									<Button className="remove-image" onClick={onRemoveBeforeImage}>
-										{icons.remove}
-									</Button>
-								
+								<img src={props.attributes.beforeImgURL} />
+
+								<Button className="remove-image" onClick={onRemoveBeforeImage}>
+									{icons.remove}
+								</Button>
 							</div>
 						)}
 					</div>
 
-					<div style={{
-						flex: 1,
-						display: 'flex',
-						justifyContent: 'center'
-					}}>
+					<div
+						style={{
+							flex: 1,
+							display: 'flex',
+							justifyContent: 'center',
+						}}
+					>
 						{!props.attributes.afterImgID ? (
 							<MediaUpload
 								onSelect={onSelectAfterImage}
@@ -151,41 +137,49 @@ registerBlockType("cgb/block-before-and-after", {
 							/>
 						) : (
 							<div className="position-relative">
-								<img
-									src={props.attributes.afterImgURL}
-								/>
-								
-									<Button className="remove-image" onClick={onRemoveAfterImage}>
-										{icons.remove}
-									</Button>
-								
+								<img src={props.attributes.afterImgURL} />
+
+								<Button className="remove-image" onClick={onRemoveAfterImage}>
+									{icons.remove}
+								</Button>
 							</div>
 						)}
 					</div>
-                </div>
-			</div>
+				</div>
+			</div>,
 		];
 	},
 
 	// The "save" property must be specified and must be a valid function.
 	save: function(props) {
-	
 		return (
 			<div className={props.className}>
-                <div className="be__container">
-                    <div id="be__comparison">
-                        <figure className="be__figure" style={{
-                          backgroundImage: `url( ${props.attributes.beforeImgURL} )`
-                        }}>
-                            <div className="be__handle"></div>
-                            <div className="be__divisor" style={{
-                                backgroundImage: `url( ${props.attributes.afterImgURL} )` 
-                            }} ></div>
-                        </figure>
-                        <input type="range" min="0" max="100" value="50" className="be__slider" />
-                    </div>
-                </div>
+				<div className="be__container">
+					<div id="be__comparison">
+						<figure
+							className="be__figure"
+							style={{
+								backgroundImage: `url( ${props.attributes.beforeImgURL} )`,
+							}}
+						>
+							<div className="be__handle" />
+							<div
+								className="be__divisor"
+								style={{
+									backgroundImage: `url( ${props.attributes.afterImgURL} )`,
+								}}
+							/>
+						</figure>
+						<input
+							type="range"
+							min="0"
+							max="100"
+							value="50"
+							className="be__slider"
+						/>
+					</div>
+				</div>
 			</div>
 		);
-	}
-});
\ No newline at end of file
+	},
+});
diff --git a/src/blocks/features-list/index.js b/src/blocks/features-list/index.js
index c39b0c0..d7782ea 100644
--- a/src/blocks/features-list/index.js
+++ b/src/blocks/features-list/index.js
@@ -3,8 +3,8 @@
  *
  * A simple block to show a feature
  */
-import classnames from "classnames";
-import icons from "../icons";
+import classnames from 'classnames';
+import icons from '../icons';
 import Inspector from './inspector';
 
 /**
@@ -12,20 +12,15 @@ import Inspector from './inspector';
  */
 
 const { __ } = wp.i18n; // Import __() from wp.i18n
+const { registerBlockType } = wp.blocks;
 const {
-	registerBlockType,
 	RichText,
 	MediaUpload,
 	BlockControls,
 	InnerBlocks,
-	BlockAlignmentToolbar
-} = wp.blocks; 
-const {
-	Button,
-	Toolbar,
-	Tooltip,
-	Dashicon
-} = wp.components;
+	BlockAlignmentToolbar,
+} = wp.editor;
+const { Button } = wp.components;
 /**
  * Register: aa Gutenberg Block.
  *
@@ -38,108 +33,112 @@ const {
  * @return {?WPBlock}          The block, if it has been successfully
  *                             registered; otherwise `undefined`.
  */
-registerBlockType("cgb/block-feature", {
+registerBlockType('cgb/block-feature', {
 	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
-	title: __("Feature"), // Block title.
-	icon: "heart", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
-	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
-	keywords: [__("feature"), __("Feature List")],
+	title: __('Feature'), // Block title.
+	icon: 'heart', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
+	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
+	keywords: [__('feature'), __('Feature List')],
 	attributes: {
 		title: {
-			type: "string",
-			source: "children",
-			selector: "h3"
+			type: 'string',
+			source: 'children',
+			selector: 'h3',
 		},
 		description: {
-			type: "array",
-			source: "children",
-			selector: ".feature__description"
+			type: 'array',
+			source: 'children',
+			selector: '.feature__description',
 		},
 		imgURL: {
-			type: "string",
-			source: "attribute",
-			attribute: "src",
-			selector: "img"
+			type: 'string',
+			source: 'attribute',
+			attribute: 'src',
+			selector: 'img',
 		},
 		imgID: {
-			type: "number"
+			type: 'number',
 		},
 		imgAlt: {
-			type: "string",
-			source: "attribute",
-			attribute: "alt",
-			selector: "img"
+			type: 'string',
+			source: 'attribute',
+			attribute: 'alt',
+			selector: 'img',
 		},
 		circularImg: {
-			type: "boolean",
-			default: "false",
+			type: 'boolean',
+			default: 'false',
 		},
 		link: {
-			type: "string",
-			default: "/contact"
+			type: 'string',
+			default: '/contact',
 		},
 		buttonText: {
-			type: "string",
-			default: "Find out more"
+			type: 'string',
+			default: 'Find out more',
 		},
 		blockAlignment: {
 			type: 'string',
-			default: 'center'
+			default: 'center',
 		},
 	},
 
-	getEditWrapperProps( attributes ) {
+	getEditWrapperProps(attributes) {
 		const { blockAlignment } = attributes;
-		if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
-			return { 'data-align': blockAlignment }
+		if (
+			'left' === blockAlignment ||
+			'right' === blockAlignment ||
+			'full' === blockAlignment
+		) {
+			return { 'data-align': blockAlignment };
 		}
 	},
 
 	// The "edit" property must be a valid function.
 	edit: props => {
-		const { attributes: { blockAlignment, imgURL, imgAlt, buttonText, link, circularImg }, className } = props;
-		// This control which editable will be focused and falls back to the title editable
-		const focusedEditable = props.focus
-			? props.focus.editable || "title"
-			: null;
+		const {
+			attributes: {
+				blockAlignment,
+				imgURL,
+				imgAlt,
+				buttonText,
+				link,
+				circularImg,
+			},
+			className,
+		} = props;
+
 		const attributes = props.attributes;
 
 		const onChangeTitle = value => {
 			props.setAttributes({ title: value });
 		};
-		const onFocusTitle = focus => {
-			props.setFocus(_.extend({}, focus, { editable: "title" }));
-		};
 
 		const onChangeDescription = value => {
 			props.setAttributes({ description: value });
 		};
-		const onFocusDescription = focus => {
-			props.setFocus(_.extend({}, focus, { editable: "description" }));
-		};
 
 		const onSelectImage = img => {
-
 			let thumb = img.url;
 
 			props.setAttributes({
-				imgID	: img.id,
-				imgAlt: img.alt
+				imgID: img.id,
+				imgAlt: img.alt,
 			});
 
-			if(props.attributes.circularImg) {
+			if (props.attributes.circularImg) {
 				const image = new wp.api.models.Media({ id: img.id })
-				.fetch()
-				.done(res => {
-					thumb = res.media_details.sizes['thumbnail'].source_url;
-					props.setAttributes({
-						imgURL: thumb
-					});					
-				})
+					.fetch()
+					.done(res => {
+						thumb = res.media_details.sizes['thumbnail'].source_url;
+						props.setAttributes({
+							imgURL: thumb,
+						});
+					});
 			} else {
 				props.setAttributes({
-					imgURL: img.url
-				});	
+					imgURL: img.url,
+				});
 			}
 		};
 
@@ -147,7 +146,7 @@ registerBlockType("cgb/block-feature", {
 			props.setAttributes({
 				imgID: null,
 				imgURL: null,
-				imgAlt: null
+				imgAlt: null,
 			});
 		};
 
@@ -161,7 +160,7 @@ registerBlockType("cgb/block-feature", {
 
 		const updateAlignment = nextAlign => {
 			props.setAttributes({
-				blockAlignment: nextAlign
+				blockAlignment: nextAlign,
 			});
 		};
 
@@ -171,29 +170,29 @@ registerBlockType("cgb/block-feature", {
 
 		const imgClasses = classnames(
 			'center-block',
-			circularImg ? `image--circle` : null
+			circularImg ? `image--circle` : null,
 		);
 
 		return [
-			<div>
+			<div key="first">
 				<Inspector
-					{ ...{ 
-						onChangeLink, 
-						onChangeButtonText, 
+					{...{
+						onChangeLink,
+						onChangeButtonText,
 						onChangeImgType,
-					...props } }
+						...props,
+					}}
 				/>
-			
+
 				<BlockControls key="controls">
 					<BlockAlignmentToolbar
-						value={ blockAlignment }
-						onChange={ updateAlignment }
-						controls={["left", "right", "center"]}
+						value={blockAlignment}
+						onChange={updateAlignment}
+						controls={['left', 'right', 'center']}
 					/>
 				</BlockControls>
-			
-				<div className={className}
-					style={ { textAlign: blockAlignment } }>
+
+				<div className={className} style={{ textAlign: blockAlignment }}>
 					<div className="feature__img mb1">
 						{!attributes.imgID ? (
 							<MediaUpload
@@ -211,13 +210,9 @@ registerBlockType("cgb/block-feature", {
 							/>
 						) : (
 							<div class="position--relative">
-								<img
-									class={imgClasses}
-									src={imgURL}
-									alt={imgAlt}
-								/>
+								<img class={imgClasses} src={imgURL} alt={imgAlt} />
 								{props.focus ? (
-									<Button className="remove-image" onClick={ onRemoveImage }>
+									<Button className="remove-image" onClick={onRemoveImage}>
 										{icons.remove}
 									</Button>
 								) : null}
@@ -227,66 +222,65 @@ registerBlockType("cgb/block-feature", {
 					<div className="feature__content">
 						<RichText
 							tagName="h3"
-							placeholder={__("Feature title")}
+							placeholder={__('Feature title')}
 							onChange={onChangeTitle}
 							value={attributes.title}
-							focus={focusedEditable === "title"}
-							onFocus={onFocusTitle}
 						/>
 
 						<div className="feature__description">
 							<RichText
 								tagName="div"
 								multiline="p"
-								placeholder={__("Feature description")}
+								placeholder={__('Feature description')}
 								onChange={onChangeDescription}
 								value={attributes.description}
-								focus={focusedEditable === "description"}
-								onFocus={onFocusDescription}
 							/>
 							<InnerBlocks />
-							<a href={ link } class="button w100 button--primary">
-								{ buttonText }
+							<a href={link} class="button w100 button--primary">
+								{buttonText}
 							</a>
 						</div>
 					</div>
 				</div>
-			</div>
+			</div>,
 		];
 	},
 
 	// The "save" property must be specified and must be a valid function.
 	save: function(props) {
-
-		const { attributes: { blockAlignment, imgURL, imgAlt, title, description, buttonText, link }, classNames } = props;
+		const {
+			attributes: {
+				blockAlignment,
+				imgURL,
+				imgAlt,
+				title,
+				description,
+				buttonText,
+				link,
+			},
+			classNames,
+		} = props;
 
 		const classes = classnames(
 			classNames,
-			blockAlignment ? `flex--align${blockAlignment}` : null
+			blockAlignment ? `flex--align${blockAlignment}` : null,
 		);
 
 		return (
-			<div className={ classes }
-			style = { { textAlign: blockAlignment } }>
+			<div className={classes} style={{ textAlign: blockAlignment }}>
 				<div className="featured__image-wrapper">
-					<img
-						class="image--circle"
-						src={ imgURL }
-						alt={ imgAlt }
-					/>
+					<img class="image--circle" src={imgURL} alt={imgAlt} />
 				</div>
 
 				<div className="feature__content">
-					<h3 className="feature__title">{ title }</h3>
-					<div className="feature__description">
-						{ description }
-					</div>
+					<h3 className="feature__title">{title}</h3>
+					<div className="feature__description">{description}</div>
 					<InnerBlocks.Content />
-					<a href={ link } class="button button--primary">
-						{ buttonText }
+					<a href={link} class="button button--primary">
+						{buttonText}
 					</a>
 				</div>
 			</div>
 		);
-	}
+	},
 });
diff --git a/src/blocks/features-list/inspector.js b/src/blocks/features-list/inspector.js
index 7a24bbc..36120b4 100644
--- a/src/blocks/features-list/inspector.js
+++ b/src/blocks/features-list/inspector.js
@@ -3,50 +3,48 @@
  */
 const { __ } = wp.i18n;
 const { Component } = wp.element;
-const {
-	InspectorControls,
-} = wp.blocks;
-const {
-	PanelBody,
-	PanelRow,
-	TextControl,
-	ToggleControl,
-} = wp.components;
+const { InspectorControls } = wp.editor;
+const { PanelBody, PanelRow, TextControl, ToggleControl } = wp.components;
 
 /**
  * Create an Inspector Controls wrapper Component
  */
 export default class Inspector extends Component {
-	constructor( props ) {
-		super( ...arguments );
+	constructor(props) {
+		super(...arguments);
 	}
 
 	render() {
-		const { attributes: { link, buttonText, circularImg }, onChangeLink, onChangeButtonText, onChangeImgType } = this.props;
+		const {
+			attributes: { link, buttonText, circularImg },
+			onChangeLink,
+			onChangeButtonText,
+			onChangeImgType,
+		} = this.props;
 		return (
 			<InspectorControls key="inspector">
-				<PanelBody title={ __( 'Link Options' ) }>
+				<PanelBody title={__('Link Options')}>
 					<PanelRow>
 						<TextControl
-							label={ __( 'Link URL' ) }
-							value={ link }
-							onChange={ onChangeLink }
+							label={__('Link URL')}
+							value={link}
+							onChange={onChangeLink}
 						/>
 					</PanelRow>
 					<PanelRow>
 						<TextControl
-							label={ __( 'Link Text' ) }
-							value={ buttonText }
-							onChange={ onChangeButtonText }
+							label={__('Link Text')}
+							value={buttonText}
+							onChange={onChangeButtonText}
 						/>
 					</PanelRow>
 				</PanelBody>
-				<PanelBody title={ __('Image Options') }>
+				<PanelBody title={__('Image Options')}>
 					<PanelRow>
 						<ToggleControl
-							label={ __( 'Circular Image' ) }
-							checked={ !!circularImg }
-							onChange={ onChangeImgType }
+							label={__('Circular Image')}
+							checked={!!circularImg}
+							onChange={onChangeImgType}
 						/>
 					</PanelRow>
 				</PanelBody>
diff --git a/src/blocks/section/index.js b/src/blocks/section/index.js
index c9fc75e..ad3f455 100644
--- a/src/blocks/section/index.js
+++ b/src/blocks/section/index.js
@@ -3,8 +3,7 @@
  *
  * Wrap another block in a section
  */
-import classnames from "classnames";
-import icons from "../icons";
+import classnames from 'classnames';
 import Inspector from './inspector';
 
 /**
@@ -14,17 +13,45 @@ import Inspector from './inspector';
 const { __ } = wp.i18n; // Import __() from wp.i18n
 const {
 	registerBlockType,
-	InnerBlocks,
-	InspectorControls,
-	BlockControls,
-	BlockDescription,
-	BlockAlignmentToolbar
 } = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE
+
 const {
-	TextControl,
-	Dashicon
-} = wp.components;
-const validAlignments = ["wide", "full"];
+	InnerBlocks,
+	BlockControls,
+	BlockAlignmentToolbar,
+} = wp.editor;
+
+const validAlignments = ['wide', 'full'];
+
+const attributes = {
+	verticalPadding: {
+		type: 'number',
+		default: 1,
+	},
+	horizontalPadding: {
+		type: 'number',
+		default: 0,
+	},
+	topMargin: {
+		type: 'number',
+		default: 0,
+	},
+	bottomMargin: {
+		type: 'number',
+		default: 1,
+	},
+	sectionBackgroundColor: {
+		type: 'string',
+		default: 'transparent',
+	},
+	alignment: {
+		type: 'string',
+	},
+	id: {
+		type: 'string',
+	},
+};
+
 /**
  * Register: aa Gutenberg Block.
  *
@@ -37,40 +64,13 @@ const validAlignments = ["wide", "full"];
  * @return {?WPBlock}          The block, if it has been successfully
  *                             registered; otherwise `undefined`.
  */
-registerBlockType("cgb/block-section", {
+registerBlockType('cgb/block-section', {
 	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
-	title: __("Section"), // Block title.
-	icon: "editor-table", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
-	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
-	keywords: [__("team"), __("Section")],
-	attributes: {
-		verticalPadding: {
-			type: "number",
-			default: 1
-		},
-		horizontalPadding: {
-			type: "number",
-			default: 0			
-		},
-		topMargin: {
-			type: "number",
-			default: 0
-		},
-		bottomMargin: {
-			type: "number",
-			default: 1
-		},
-		sectionBackgroundColor: {
-			type: "string",
-			default: "transparent"
-		},
-		alignment: {
-			type: "string"
-		},
-		id: {
-			type: "string"
-		}
-	},
+	title: __('Section'), // Block title.
+	icon: 'editor-table', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
+	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
+	keywords: [__('team'), __('Section')],
+	attributes,
 
 	// The "edit" property must be a valid function.
 	edit: props => {
@@ -96,56 +96,65 @@ registerBlockType("cgb/block-section", {
 
 		const updateAlignment = nextAlign => {
 			props.setAttributes({
-				alignment: nextAlign
+				alignment: nextAlign,
 			});
 		};
 
 		const onChangeSectionID = value => {
 			props.setAttributes({
-				id: value
-			})
+				id: value,
+			});
 		};
 
-		const { attributes: { alignment, sectionBackgroundColor, verticalPadding, horizontalPadding, topMargin, bottomMargin }, x } = props;
+		const {
+			attributes: {
+				alignment,
+				sectionBackgroundColor,
+				verticalPadding,
+				horizontalPadding,
+				topMargin,
+				bottomMargin,
+			},
+		} = props;
 
 		return [
-
 			<div>
 				<Inspector
-					{ ...{ 
-						onChangeVerticalPadding, 
+					{...{
+						onChangeVerticalPadding,
 						onChangeHorizontalPadding,
-						onChangeMarginTop, 
-						onChangeMarginBottom, 
-						onChangeSectionBackgroundColor, 
+						onChangeMarginTop,
+						onChangeMarginBottom,
+						onChangeSectionBackgroundColor,
 						onChangeSectionID,
-					...props } }
+						...props,
+					}}
 				/>
 				<BlockControls key="controls">
 					<BlockAlignmentToolbar
 						value={alignment}
 						onChange={updateAlignment}
-						controls={["full", "wide"]}
+						controls={['full', 'wide']}
 					/>
 				</BlockControls>
-			
-				<div 
+
+				<div
 					className="transition-all"
 					style={{
 						backgroundColor: sectionBackgroundColor,
-						paddingTop: verticalPadding + "rem",
-						paddingBottom: verticalPadding + "rem",
-						paddingLeft: horizontalPadding + "rem",
-						paddingRight: horizontalPadding + "rem",
-						marginTop: topMargin + "rem",
-						marginBottom: bottomMargin + "rem"
+						paddingTop: verticalPadding + 'rem',
+						paddingBottom: verticalPadding + 'rem',
+						paddingLeft: horizontalPadding + 'rem',
+						paddingRight: horizontalPadding + 'rem',
+						marginTop: topMargin + 'rem',
+						marginBottom: bottomMargin + 'rem',
 					}}
 				>
 					<div>
 						<InnerBlocks />
 					</div>
 				</div>
-			</div>
+			</div>,
 		];
 	},
 
@@ -153,24 +162,33 @@ registerBlockType("cgb/block-section", {
 		const { alignment } = attributes;
 
 		if (-1 !== validAlignments.indexOf(alignment)) {
-			return { "data-align": alignment };
+			return { 'data-align': alignment };
 		}
 	},
 
 	// The "save" property must be specified and must be a valid function.
 	save: props => {
 		const classes = classnames(
-			"transition-all",
-			props.attributes.alignment ? `align${props.attributes.alignment}` : null
+			'transition-all',
+			props.attributes.alignment ? `align${props.attributes.alignment}` : null,
 		);
 
 		// if it is wide or full show a container
 
 		const innerClasses = classnames(
-			props.attributes.alignment == "wide" ? "container" : null
+			props.attributes.alignment == 'wide' ? 'container' : null,
 		);
 
-		const { attributes: { id, sectionBackgroundColor, verticalPadding, horizontalPadding, topMargin, bottomMargin } } = props;
+		const {
+			attributes: {
+				id,
+				sectionBackgroundColor,
+				verticalPadding,
+				horizontalPadding,
+				topMargin,
+				bottomMargin,
+			},
+		} = props;
 
 		return (
 			<div
@@ -178,12 +196,12 @@ registerBlockType("cgb/block-section", {
 				className={classes}
 				style={{
 					backgroundColor: sectionBackgroundColor,
-					paddingTop: verticalPadding + "rem",
-					paddingBottom: verticalPadding + "rem",
-					paddingLeft: horizontalPadding + "rem",
-					paddingRight: horizontalPadding + "rem",
-					marginTop: topMargin + "rem",
-					marginBottom: bottomMargin + "rem"
+					paddingTop: verticalPadding + 'rem',
+					paddingBottom: verticalPadding + 'rem',
+					paddingLeft: horizontalPadding + 'rem',
+					paddingRight: horizontalPadding + 'rem',
+					marginTop: topMargin + 'rem',
+					marginBottom: bottomMargin + 'rem',
 				}}
 			>
 				<div className={innerClasses}>
@@ -193,4 +211,54 @@ registerBlockType("cgb/block-section", {
 		);
 	},
 
+	deprecated: [
+		{
+			attributes,
+			save: props => {
+				const classes = classnames(
+					'transition-all',
+					props.attributes.alignment
+						? `align${props.attributes.alignment}`
+						: null,
+				);
+
+				// if it is wide or full show a container
+
+				const innerClasses = classnames(
+					props.attributes.alignment == 'wide' ? 'container' : null,
+				);
+
+				const {
+					attributes: {
+						id,
+						sectionBackgroundColor,
+						verticalPadding,
+						horizontalPadding,
+						topMargin,
+						bottomMargin,
+					},
+				} = props;
+
+				return (
+					<div
+						id={id}
+						className={classes}
+						style={{
+							backgroundColor: sectionBackgroundColor,
+							paddingTop: verticalPadding + 'rem',
+							paddingBottom: verticalPadding + 'rem',
+							paddingLeft: horizontalPadding + 'rem',
+							paddingRight: horizontalPadding + 'rem',
+							marginTop: topMargin + 'rem',
+							marginBottom: bottomMargin + 'rem',
+						}}
+					>
+						<div className={innerClasses}>
+							<InnerBlocks.Content />
+						</div>
+					</div>
+				);
+			},
+		},
+	],
 });
diff --git a/src/blocks/section/inspector.js b/src/blocks/section/inspector.js
index 8f0b521..ae933fd 100644
--- a/src/blocks/section/inspector.js
+++ b/src/blocks/section/inspector.js
@@ -3,73 +3,68 @@
  */
 const { __ } = wp.i18n;
 const { Component } = wp.element;
-const {
-	InspectorControls,
-	ColorPalette,
-} = wp.blocks;
-const {
-	PanelBody,
-	PanelRow,
-	PanelColor,
-	TextControl,
-} = wp.components;
+const { ColorPalette } = wp.blocks;
+const { InspectorControls } = wp.editor;
+const { PanelBody, PanelRow, PanelColor, TextControl } = wp.components;
 
 /**
  * Create an Inspector Controls wrapper Component
  */
 export default class Inspector extends Component {
-	constructor( props ) {
-		super( ...arguments );
+	constructor(props) {
+		super(...arguments);
 	}
 
 	render() {
-		const { attributes: { verticalPadding, horizontalPadding }, onChangeHorizontalPadding, onChangeVerticalPadding } = this.props;
+		const {
+			attributes: { verticalPadding, horizontalPadding },
+			onChangeHorizontalPadding,
+			onChangeVerticalPadding,
+		} = this.props;
 		return (
-	<InspectorControls key="inspector">
-	<PanelBody title={ __( 'Section Spacings' ) }>
-		<PanelRow>
-			<TextControl
-				label={ __( 'Vertical padding (rem)' ) }
-				value={ verticalPadding }
-				onChange={ onChangeVerticalPadding }
-			/>
-		</PanelRow>
-		<PanelRow>
-			<TextControl
-				label={ __( 'Horizontal padding (rem)' ) }
-				value={ horizontalPadding }
-				onChange={ onChangeHorizontalPadding }
-				name="horizontalPadding"
-			/>
-		</PanelRow>
-		<PanelRow>
-	<TextControl
-							label={ __( 'Top Margin (rem)' ) }
-	value={ this.props.attributes.topMargin }
-	onChange={ this.props.onChangeMarginTop }
+			<InspectorControls key="inspector">
+				<PanelBody title={__('Section Spacings')}>
+					<PanelRow>
+						<TextControl
+							label={__('Vertical padding (rem)')}
+							value={verticalPadding}
+							onChange={onChangeVerticalPadding}
+						/>
+						<TextControl
+							label={__('Horizontal padding (rem)')}
+							value={horizontalPadding}
+							onChange={onChangeHorizontalPadding}
+							name="horizontalPadding"
 						/>
-	<TextControl
-							label={ __( 'Bottom Margin (rem)' ) }
-							value={ this.props.attributes.bottomMargin }
-							onChange={ this.props.onChangeMarginBottom }
+					</PanelRow>
+					<PanelRow>
+						<TextControl
+							label={__('Top Margin (rem)')}
+							value={this.props.attributes.topMargin}
+							onChange={this.props.onChangeMarginTop}
+						/>
+						<TextControl
+							label={__('Bottom Margin (rem)')}
+							value={this.props.attributes.bottomMargin}
+							onChange={this.props.onChangeMarginBottom}
 						/>
 					</PanelRow>
 
-	<PanelColor
-						title={ __( 'Section Background Color' ) }
-	colorValue={ this.props.attributes.sectionBackgroundColor }
+					<PanelColor
+						title={__('Section Background Color')}
+						colorValue={this.props.attributes.sectionBackgroundColor}
 					>
-	<ColorPalette
-							value={ this.props.attributes.sectionBackgroundColor }
-							onChange={ this.props.onChangeSectionBackgroundColor }
+						<ColorPalette
+							value={this.props.attributes.sectionBackgroundColor}
+							onChange={this.props.onChangeSectionBackgroundColor}
 						/>
 					</PanelColor>
 
-	<PanelRow>
+					<PanelRow>
 						<TextControl
-							label={ __( 'Section ID' ) }
-							value={ this.props.attributes.id }
-							onChange={ this.props.onChangeSectionID }
+							label={__('Section ID')}
+							value={this.props.attributes.id}
+							onChange={this.props.onChangeSectionID}
 						/>
 					</PanelRow>
 				</PanelBody>
diff --git a/src/blocks/text-and-image/index.js b/src/blocks/text-and-image/index.js
index 3033093..cb24669 100644
--- a/src/blocks/text-and-image/index.js
+++ b/src/blocks/text-and-image/index.js
@@ -14,18 +14,46 @@ import Inspector from './inspector';
  */
 
 const { __ } = wp.i18n; // Import __() from wp.i18n
-const {
-	registerBlockType,
-	MediaUpload,
-	BlockControls,
-	InnerBlocks,
-} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE
-const {
-	Button,
-	Toolbar,
-	Tooltip,
-	Dashicon,
-} = wp.components;
+const { registerBlockType } = wp.blocks;
+
+const { MediaUpload, BlockControls, InnerBlocks } = wp.editor;
+
+const { Button, Toolbar, Tooltip, Dashicon } = wp.components;
+
+const attributes = {
+	message: {
+		type: 'array',
+		source: 'children',
+		selector: '.message-body',
+	},
+	imgURL: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'src',
+		selector: 'img',
+	},
+	imgID: {
+		type: 'number',
+	},
+	imgAlt: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'alt',
+		selector: 'img',
+	},
+	textFirstAlignment: {
+		type: 'boolean',
+		default: false,
+	},
+	columnWidth: {
+		type: 'number',
+		default: 50,
+	},
+	imgExtension: {
+		type: 'boolean',
+		default: false,
+	},
+};
 /**
  * Register: aa Gutenberg Block.
  *
@@ -38,160 +66,223 @@ const {
  * @return {?WPBlock}          The block, if it has been successfully
  *                             registered; otherwise `undefined`.
  */
-registerBlockType( 'cgb/block-text-and-image', {
+registerBlockType('cgb/block-text-and-image', {
 	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
-	title: __( 'Text & Image' ), // Block title.
+	title: __('Text & Image'), // Block title.
 	icon: 'image-flip-horizontal', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
 	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
-	keywords: [ __( 'text-and-image — CGB Block' ), __( 'Text and Image' ) ],
-	attributes: {
-		message: {
-			type: 'array',
-			source: 'children',
-			selector: '.message-body',
-		},
-		imgURL: {
-			type: 'string',
-			source: 'attribute',
-			attribute: 'src',
-			selector: 'img',
-		},
-		imgID: {
-			type: 'number',
-		},
-		imgAlt: {
-			type: 'string',
-			source: 'attribute',
-			attribute: 'alt',
-			selector: 'img',
-		},
-		textFirstAlignment: {
-			type: 'boolean',
-			default: false,
-		},
-		columnWidth: {
-			type: 'number',
-			default: 50,
-		},
-	},
+	keywords: [__('text-and-image — CGB Block'), __('Text and Image')],
+	attributes,
 
 	// The "edit" property must be a valid function.
 	edit: props => {
+		const {
+			attributes: {
+				imgID,
+				imgURL,
+				imgAlt,
+				textFirstAlignment,
+				imgExtension,
+				columnWidth,
+			},
+			className,
+			setAttributes,
+			isSelected,
+		} = props;
+
 		const onSelectImage = img => {
-			props.setAttributes( {
+			setAttributes({
 				imgID: img.id,
 				imgURL: img.url,
 				imgAlt: img.alt,
-			} );
+			});
 		};
 		const onRemoveImage = () => {
-			props.setAttributes( {
+			setAttributes({
 				imgID: null,
 				imgURL: null,
 				imgAlt: null,
-			} );
+			});
 		};
 		const toggleTextFirstAlignment = () => {
-			props.setAttributes( {
-				textFirstAlignment: ! props.attributes.textFirstAlignment,
-			} );
+			setAttributes({
+				textFirstAlignment: !textFirstAlignment,
+			});
 		};
 		const onChangeColumnWidth = value => {
-			props.setAttributes( {
+			setAttributes({
 				columnWidth: value,
-			} );
+			});
+		};
+
+		const onChangeImgExtension = value => {
+			setAttributes({ imgExtension: value });
 		};
+
 		return [
-			<div>
+			<div key="first">
 				<Inspector
-					{ ...{ onChangeColumnWidth, ...props } }
+					{...{ onChangeColumnWidth, onChangeImgExtension, ...props }}
 				/>
-			
-				<div className={ props.className }>
-					
+
+				<div className={className}>
 					<BlockControls key="custom-controls">
 						<Toolbar className="components-toolbar">
-							<Tooltip text={ __( 'Switch image/text alignment' ) }>
+							<Tooltip text={__('Switch image/text alignment')}>
 								<Button
 									className="components-button components-icon-button components-toolbar__control"
-									onClick={ toggleTextFirstAlignment }
+									onClick={toggleTextFirstAlignment}
 								>
 									<Dashicon icon="image-flip-horizontal" />
 								</Button>
 							</Tooltip>
 						</Toolbar>
 					</BlockControls>
-					
+
 					<div
 						className="flex row"
-						style={ {
-							flexDirection: props.attributes.textFirstAlignment ?
-								'row-reverse' :
-								'row',
-						} }
+						style={{
+							flexDirection: textFirstAlignment ? 'row-reverse' : 'row',
+						}}
 					>
-						<div className="message-body" style={ {
-							width: props.attributes.columnWidth	+ '%',
-						} }>
+						<div
+							className="message-body"
+							style={{
+								width: columnWidth + '%',
+							}}
+						>
 							<InnerBlocks />
 						</div>
-						<div style={ {
-							flex: 1,
-						} }>
-							{ ! props.attributes.imgID ? (
+						<div
+							style={{
+								flex: 1,
+							}}
+						>
+							{!imgID ? (
 								<MediaUpload
-									onSelect={ onSelectImage }
+									onSelect={onSelectImage}
 									type="image"
-									value={ props.attributes.imgID }
-									render={ ( { open } ) => (
+									value={imgID}
+									render={({ open }) => (
 										<Button
 											className="components-button button button-large"
-											onClick={ open }
+											onClick={open}
 										>
 											Open Media Library
 										</Button>
-									) }
+									)}
 								/>
 							) : (
-								<div className="position-relative">
-									<img
-										src={ props.attributes.imgURL }
-										alt={ props.attributes.imgAlt }
-									/>
-								
-										<Button className="remove-image" onClick={ onRemoveImage }>
-											{ icons.remove }
+								<div
+									className="position-relative"
+									style={{
+										marginRight:
+											imgExtension && !textFirstAlignment
+												? 'calc(50% - 50vw)'
+												: '',
+										marginLeft:
+											imgExtension && textFirstAlignment
+												? 'calc(50% - 50vw)'
+												: '',
+									}}
+								>
+									<img src={imgURL} alt={imgAlt} />
+
+									{isSelected ? (
+										<Button className="remove-image" onClick={onRemoveImage}>
+											{icons.remove}
 										</Button>
-								
+									) : null}
 								</div>
-							) }
+							)}
 						</div>
 					</div>
 				</div>
-			</div>
+			</div>,
 		];
 	},
 
 	// The "save" property must be specified and must be a valid function.
-	save: function( props ) {
-		const colOrder = props.attributes.textFirstAlignment ?
-			'row-reverse' :
-			'row';
+	save: function(props) {
+		const colOrder = props.attributes.textFirstAlignment
+			? 'row-reverse'
+			: 'row';
+
+		const {
+			attributes: {
+				columnWidth,
+				imgExtension,
+				textFirstAlignment,
+				imgURL,
+				imgAlt,
+			},
+			className,
+		} = props;
+
 		return (
-			<div className={ props.className }>
-				<div className="flex row" style={ { flexDirection: colOrder } }>
-					<div className="message-body" style={ {
-						width: props.attributes.columnWidth	+ '%',
-					} }>
+			<div className={className}>
+				<div className="flex row" style={{ flexDirection: colOrder }}>
+					<div
+						className="message-body"
+						style={{
+							width: columnWidth + '%',
+						}}
+					>
 						<InnerBlocks.Content />
 					</div>
-					<div className="image-wrapper" style={ {
-						flex: 1,
-					} }>
-						<img src={ props.attributes.imgURL } alt={ props.attributes.imgAlt } />
+					<div
+						className="image-wrapper"
+						style={{
+							flex: 1,
+
+							marginRight:
+								imgExtension && !textFirstAlignment ? 'calc(50% - 50vw)' : '',
+							paddingRight: imgExtension && !textFirstAlignment ? '0' : '',
+							marginLeft:
+								imgExtension && textFirstAlignment ? 'calc(50% - 50vw)' : '',
+							paddingLeft: imgExtension && textFirstAlignment ? '0' : '',
+						}}
+					>
+						<img src={imgURL} alt={imgAlt} />
 					</div>
 				</div>
 			</div>
 		);
 	},
-} );
+
+	deprecated: [
+		{
+			attributes,
+			save: function(props) {
+				const colOrder = props.attributes.textFirstAlignment
+					? 'row-reverse'
+					: 'row';
+				return (
+					<div className={props.className}>
+						<div className="flex row" style={{ flexDirection: colOrder }}>
+							<div
+								className="message-body"
+								style={{
+									width: props.attributes.columnWidth + '%',
+								}}
+							>
+								<InnerBlocks.Content />
+							</div>
+							<div
+								className="image-wrapper"
+								style={{
+									flex: 1,
+								}}
+							>
+								<img
+									src={props.attributes.imgURL}
+									alt={props.attributes.imgAlt}
+								/>
+							</div>
+						</div>
+					</div>
+				);
+			},
+		},
+	],
+});
diff --git a/src/blocks/text-and-image/inspector.js b/src/blocks/text-and-image/inspector.js
index e4526ff..d39c1f0 100644
--- a/src/blocks/text-and-image/inspector.js
+++ b/src/blocks/text-and-image/inspector.js
@@ -3,38 +3,42 @@
  */
 const { __ } = wp.i18n;
 const { Component } = wp.element;
-const {
-	InspectorControls,
-} = wp.blocks;
-const {
-	PanelBody,
-	PanelRow,
-	RangeControl,
-} = wp.components;
+const { InspectorControls } = wp.editor;
+const { PanelBody, PanelRow, RangeControl, ToggleControl } = wp.components;
 
 /**
  * Create an Inspector Controls wrapper Component
  */
 export default class Inspector extends Component {
 	render() {
-		const { attributes: { columnWidth }, onChangeColumnWidth } = this.props;
+		const {
+			attributes: { columnWidth, imgExtension },
+			onChangeColumnWidth,
+			onChangeImgExtension,
+		} = this.props;
 
 		return (
 			<InspectorControls>
-				<PanelBody
-					title={ __( 'Column Width (%)' ) }
-				>
+				<PanelBody title={__('Column Width (%)')}>
 					<PanelRow>
-
 						<RangeControl
-							value={ columnWidth }
-							onChange={ onChangeColumnWidth }
-							min={ 10 }
-							max={ 90 }
-							step={ 10 }
+							value={columnWidth}
+							onChange={onChangeColumnWidth}
+							min={10}
+							max={90}
+							step={10}
 							allowReset="true"
 						/>
+					</PanelRow>
+				</PanelBody>
 
+				<PanelBody title={__('Image Options')}>
+					<PanelRow>
+						<ToggleControl
+							label={__('Extend image to edge')}
+							checked={imgExtension}
+							onChange={onChangeImgExtension}
+						/>
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>