Fix frontend view

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

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

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 );

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;
+ }
+}
+ */

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':