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 && ( ( - - - - { - mediaID && - -

- { __( 'Click the image to edit or update' ) } -

- -
- } -
- ) } + value={ mediaID } + render={ + ( { open } ) => ( + + + + ) + } /> ) } + { + // Actions for background image selected + ( 'image' === backgroundType && mediaID ) && + +

+ { __( 'Click the image to edit or update' ) } +

+ +
+ } + { ( 'image' === backgroundType && mediaID ) && ( { let wrapperProps = props.wrapperProps; - wrapperProps = { ... wrapperProps, style: getStyle( props.block.attributes ) }; + wrapperProps = { + ... wrapperProps, + style: getStyle( props.block.attributes ), + }; return ; }; @@ -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':