Add background style to editor & frontend

block-background.php

@@ -78,7 +78,7 @@ public static function get_instance() {
 	private function init_hooks() {
 		// Set up localization on init Hook.
 		add_action( 'init', array( $this, 'load_textdomain' ), 0 );
-		add_action( 'init', array( $this, 'register_block_background' ) );
+		add_action( 'enqueue_block_editor_assets', array( $this, 'register_block_background' ) );
 	}
 
 	/**
@@ -183,20 +183,17 @@ public function register_block_background(){
 		);
 
 		// Style
-		/* wp_register_style(
+		wp_register_style(
 			'block-background',
 			BLOCKBG_PLUGIN_URL . $block_css,
 			array(
 				'wp-blocks',
 			),
 			filemtime(BLOCKBG_PLUGIN_DIR . $block_css)
-		) */;
+		);
 
-		// Register block type
-		register_block_type('lubus/block-background', array(
-			//'style'         => 'block-background',
-			'script'        => 'block-background-js',
-		));
+		wp_enqueue_style( 'block-background' );
+		wp_enqueue_script( 'block-background-js' );
 	}
 }
 

package.json

@@ -7,7 +7,9 @@
     "npm": ">=5.0.0"
   },
   "dependencies": {
-    "lodash.assign": "^4.2.0"
+    "classnames": "^2.2.5",
+    "lodash.assign": "^4.2.0",
+    "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
     "@wordpress/babel-preset-default": "1.0.3",

src/components/inspector.js

@@ -48,7 +48,6 @@ const Inspector = ( props ) => {
 			backgroundType: newType,
 			overlay: undefined,
 			overlayType: undefined,
-			opacity: undefined,
 		} );
 	};
 	const onChangeSolidColor = ( newColor ) => {
@@ -86,7 +85,7 @@ const Inspector = ( props ) => {
 	/>;
 
 	const gradientControl = <SelectControl
-		label={ __( 'Gradients' ) }
+		label={ __( 'Gradient Presets' ) }
 		options={ gradients.map( ( preset ) => {
 			return {
 				value: preset.colors,
@@ -100,7 +99,7 @@ const Inspector = ( props ) => {
 	// Inspector Controls
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Background' ) } initialOpen={ false } >
+			<PanelBody title={ __( 'Background Settings' ) } initialOpen={ true } >
 				<ButtonGroup aria-label={ __( 'Background Type' ) }>
 					{
 						options.backgroundType.map( ( type ) => {

src/data/attributes.js

@@ -9,7 +9,7 @@ const backgroundSettings = {
 		type: 'string',
 	},
 	gradient: {
-		type: 'array',
+		type: 'string',
 	},
 	mediaID: {
 		type: 'number',
@@ -18,13 +18,14 @@ const backgroundSettings = {
 		type: 'string',
 	},
 	overlay: {
-		type: 'string',
+		type: 'boolean',
 	},
 	overlayType: {
 		type: 'string',
 	},
 	opacity: {
-		type: 'string',
+		type: 'number',
+		default: 5,
 	},
 };
 

src/data/gradients.js

@@ -2,6 +2,10 @@
  * Gradients Preset Object
  */
 const gradients = [
+	{
+		name: 'Select Gradient',
+		colors: -1,
+	},
 	{
 		name: 'Berimbolo',
 		colors: [

src/index.js

@@ -2,6 +2,7 @@
  * External Dependencies
  */
 import assign from 'lodash.assign';
+import classnames from 'classnames';
 
 /**
  * WordPress Dependencies
@@ -14,6 +15,8 @@ const { getWrapperDisplayName } = wp.element;
 */
 import backgroundSettings from './data/attributes';
 import Inspector from './components/inspector';
+import getStyle from './utils/get-style';
+import './style.scss';
 
 /**
  * Filters registered block settings, extending attributes with background settings
@@ -24,7 +27,6 @@ import Inspector from './components/inspector';
 function addAttribute( settings ) {
 	// Use Lodash's assign to gracefully handle if attributes are undefined
 	settings.attributes = assign( settings.attributes, backgroundSettings );
-
 	return settings;
 }
 
@@ -38,8 +40,8 @@ function addAttribute( settings ) {
 function withInspectorControl( BlockEdit ) {
 	const WrappedBlockEdit = ( props ) => {
 		return [
-			<BlockEdit key="block-edit-background" { ...props } />,
 			props.isSelected && <Inspector { ... { ...props } } />,
+			<BlockEdit key="block-edit-background" { ...props } />,
 		];
 	};
 	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'block-background' );
@@ -56,7 +58,7 @@ function withInspectorControl( BlockEdit ) {
 function withBackground( BlockListBlock ) {
 	const WrappedComponent = ( props ) => {
 		let wrapperProps = props.wrapperProps;
-		wrapperProps = { ...wrapperProps, 'data-test': 'editTest' };
+		wrapperProps = { ... wrapperProps, style: getStyle( props.block.attributes ) };
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
@@ -75,11 +77,16 @@ function withBackground( BlockListBlock ) {
  *
  * @return {Object} Filtered props applied to save element.
  */
-function addAssignedBackground( extraProps, blockType, attributes ) {
-	return Object.assign( extraProps, { style: { backgroundColor: 'red' } } );
+function addBackground( extraProps, blockType, attributes ) {
+	return assign(
+		extraProps,
+		{
+			style: getStyle( attributes ),
+		}
+	);
 }
 
 addFilter( 'blocks.registerBlockType', 'lubus/background/attribute', addAttribute );
 addFilter( 'blocks.BlockEdit', 'lubus/background/inspector', withInspectorControl );
 addFilter( 'editor.BlockListBlock', 'lubus/background/withBackground', withBackground );
-addFilter( 'blocks.getSaveContent.extraProps', 'lubus/background/addAssignedBackground', addAssignedBackground );
+addFilter( 'blocks.getSaveContent.extraProps', 'lubus/background/addAssignedBackground', addBackground );

src/style.scss

@@ -0,0 +1,3 @@
+.wp-block-paragraph{
+	background: transparent !important;
+}

src/utils/get-overlay.js

@@ -0,0 +1,29 @@
+/**
+ * External Dependencies
+ */
+import tinycolor from 'tinycolor2';
+
+/**
+ * Generate overlay
+ *
+ * @param {string} colors comma seperated list of colors
+ * @param {number} opacity overlay opacity
+ *
+ * @returns {string} color overlay
+ */
+const getOverlay = ( colors, opacity ) => {
+	const objColors = colors.split( ',' );
+	const overlayAlpha = opacity / 10;
+
+	const cssColor = objColors.map( ( colorCode )=> {
+		const color = tinycolor( colorCode );
+		color.toRgbString(); // "rgb(255, 0, 0)"
+		color.setAlpha( overlayAlpha );
+		color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
+		return color;
+	} ).join( ',' );
+
+	return cssColor;
+};
+
+export default getOverlay;

src/utils/get-style.js

@@ -0,0 +1,80 @@
+/**
+ * Internal Dependencies
+ */
+import getOverlay from './get-overlay';
+
+/**
+ * Generate Style Object for background
+ */
+
+function getStyle( attributes ) {
+	// Block Settings
+	const {
+		backgroundType,
+		solidColor,
+		gradient,
+		mediaURL,
+		overlay,
+		overlayType,
+		opacity,
+	} = attributes;
+
+	// Style
+	let style = {};
+
+	switch ( backgroundType ) {
+		case 'color':
+			style = { background: solidColor };
+			break;
+
+		case 'gradient':
+			style = { background: `linear-gradient(to bottom, ${ gradient })` };
+			break;
+
+		case 'image':
+			// TOOD: Reafctor
+			if ( overlay && ( 'color' === overlayType || 'gradient' === overlayType ) ) {
+				switch ( overlayType ) {
+					case 'color':
+						if ( solidColor ) {
+							const overlaySolid = `${ solidColor }, ${ solidColor }`;
+							style = {
+								background: `linear-gradient(to bottom, ${ getOverlay( overlaySolid, opacity ) } ), url( ${ mediaURL } )`,
+								backgroundSize: 'cover',
+							};
+						} else {
+							style = {
+								background: `url( ${ mediaURL } )`,
+								backgroundSize: 'cover',
+							};
+						}
+						break;
+
+					case 'gradient':
+						if ( gradient ) {
+							style = {
+								background: `linear-gradient(to bottom, ${ getOverlay( gradient, opacity ) }), url( ${ mediaURL } )`,
+								backgroundSize: 'cover',
+							};
+						} else {
+							style = {
+								background: `url( ${ mediaURL } )`,
+								backgroundSize: 'cover',
+							};
+						}
+
+						break;
+				}
+			} else {
+				style = {
+					background: `url( ${ mediaURL } )`,
+					backgroundSize: 'cover',
+				};
+			}
+
+			break;
+	}
+	return style;
+}
+
+export default getStyle;