From 33bda3667ee5051ad751bc15acbab60f8e99552e Mon Sep 17 00:00:00 2001
From: Ajit Bohra <ajit@lubus.in>
Date: Wed, 4 Apr 2018 20:46:06 +0530
Subject: [PATCH] Fix frontend view

---
 readme.txt                  |  4 +--
 src/components/inspector.js | 61 +++++++++++++++++++------------------
 src/index.js                | 23 ++++++++------
 src/style.scss              |  7 +++++
 src/utils/get-style.js      |  2 +-
 5 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/readme.txt b/readme.txt
index 0b619e0..b68b9bc 100644
--- a/readme.txt
+++ b/readme.txt
@@ -11,7 +11,7 @@ License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Extend gutenberg blocks with additional background options
 
 == Description ==
->**Disclaimer:** Plugin development is in progress & we are constantly improving the code. If you think code can be improved or have any suggestion feel free to send a PR or [open an issue](https://github.com/lubusIN/block-background/issues).
+>**Disclaimer:** Experimental feature plugin to extend gutenberg block. Have a suggestion feel free to send a PR or [open an issue](https://github.com/lubusIN/block-background/issues).
 
 Extend gutenberg blocks with additional background options
 
@@ -48,6 +48,6 @@ If you have any suggestions/Feature request that you would like to see in the up
 
 ***v1.0***
 
-Released on 29th March 2018
+Released on
 
  - Initial plugin release
diff --git a/src/components/inspector.js b/src/components/inspector.js
index 0222a29..4c30c7f 100644
--- a/src/components/inspector.js
+++ b/src/components/inspector.js
@@ -125,41 +125,44 @@ const Inspector = ( props ) => {
 				{ 'image' === backgroundType &&
 					(
 						<MediaUpload
-							key="mediupload"
+							key="mediaupload"
 							onSelect={ onSelectImage }
 							type="image"
-							render={ ( { open } ) => (
-								<Fragment>
-									<Button
-										className="button-link"
-										onClick={ open }>
-										{ ! mediaID ?
-											__( 'Set background image' ) :
-
-											<img src={ mediaURL } />
-										}
-									</Button>
-
-									{
-										mediaID &&
-										<Fragment>
-											<p className="editor-post-featured-image__howto">
-												{ __( 'Click the image to edit or update' ) }
-											</p>
-											<Button
-												className="button-link"
-												style={ { marginBottom: '20px' } }
-												onClick={ onRemoveImage }>
-												{ __( 'Remove background image' ) }
-											</Button>
-										</Fragment>
-									}
-								</Fragment>
-							) }
+							value={ mediaID }
+							render={
+								( { open } ) => (
+									<Fragment>
+										<Button
+											className="button-link"
+											onClick={ open }>
+											{ ! mediaID ?
+												__( 'Set background image' ) :
+												<img src={ mediaURL } />
+											}
+										</Button>
+									</Fragment>
+								)
+							}
 						/>
 					)
 				}
 
+				{
+					// Actions for background image selected
+					( 'image' === backgroundType && mediaID ) &&
+						<Fragment>
+							<p className="editor-post-featured-image__howto">
+								{ __( 'Click the image to edit or update' ) }
+							</p>
+							<Button
+								className="button-link"
+								style={ { marginBottom: '20px' } }
+								onClick={ onRemoveImage }>
+								{ __( 'Remove background image' ) }
+							</Button>
+						</Fragment>
+				}
+
 				{ ( 'image' === backgroundType && mediaID ) &&
 				(
 					<ToggleControl
diff --git a/src/index.js b/src/index.js
index 03e3497..db70e1d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,7 +24,7 @@ import './style.scss';
  * @param {Object} settings Original block settings.
  * @return {Object} Filtered block settings.
  */
-function addAttribute( settings ) {
+function addAttributes( settings ) {
 	// Use Lodash's assign to gracefully handle if attributes are undefined
 	settings.attributes = assign( settings.attributes, backgroundSettings );
 	return settings;
@@ -58,7 +58,10 @@ function withInspectorControl( BlockEdit ) {
 function withBackground( BlockListBlock ) {
 	const WrappedComponent = ( props ) => {
 		let wrapperProps = props.wrapperProps;
-		wrapperProps = { ... wrapperProps, style: getStyle( props.block.attributes ) };
+		wrapperProps = {
+			... wrapperProps,
+			style: getStyle( props.block.attributes ),
+		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
@@ -78,15 +81,17 @@ function withBackground( BlockListBlock ) {
  * @return {Object} Filtered props applied to save element.
  */
 function addBackground( extraProps, blockType, attributes ) {
-	return assign(
-		extraProps,
-		{
-			style: getStyle( attributes ),
-		}
-	);
+	extraProps.style = getStyle( attributes );
+	const { backgroundType, solidColor, gradient, imageID } = attributes;
+
+	if ( backgroundType && ( solidColor || gradient || imageID ) ) {
+		extraProps.className = classnames( extraProps.className, 'has-background' );
+	}
+
+	return extraProps;
 }
 
-addFilter( 'blocks.registerBlockType', 'lubus/background/attribute', addAttribute );
+addFilter( 'blocks.registerBlockType', 'lubus/background/attribute', addAttributes );
 addFilter( 'blocks.BlockEdit', 'lubus/background/inspector', withInspectorControl );
 addFilter( 'editor.BlockListBlock', 'lubus/background/withBackground', withBackground );
 addFilter( 'blocks.getSaveContent.extraProps', 'lubus/background/addAssignedBackground', addBackground );
diff --git a/src/style.scss b/src/style.scss
index 3e5e69f..903f030 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,3 +1,10 @@
 .wp-block-paragraph{
 	background: transparent !important;
 }
+
+/* .bb-has-background{
+	.editor-block-list__block-edit div div{
+		padding: 5px 10px;
+	}
+}
+ */
diff --git a/src/utils/get-style.js b/src/utils/get-style.js
index 362c80f..50404bf 100644
--- a/src/utils/get-style.js
+++ b/src/utils/get-style.js
@@ -32,7 +32,7 @@ function getStyle( attributes ) {
 			break;
 
 		case 'image':
-			// TOOD: Reafctor
+			// TOOD: Refactor
 			if ( overlay && ( 'color' === overlayType || 'gradient' === overlayType ) ) {
 				switch ( overlayType ) {
 					case 'color':