Move JS prefix to localized variable, drop unneeded block name reference

includes/js/block.js

@@ -4,8 +4,7 @@
 
 (function ( wp, undefined ) {
 	'use strict';
-	const prefix          = 'displayfeaturedimagegenesis',
-	      DFIGBlockObject = {
+	const DFIGBlockObject = {
 		el: wp.element.createElement,
 	};
 
@@ -45,7 +44,7 @@
 				} );
 				if ( params.placeholder && ! attributes[ params.required ] ) {
 					render = DFIGBlockObject.el( 'div', {
-						className: prefix + '-placeholder',
+						className: DFIGBlockObject.params.prefix + '-placeholder',
 					}, params.placeholder );
 				}
 
@@ -63,7 +62,7 @@
 						),
 					),
 					DFIGBlockObject.el( InspectorControls, {},
-						_getPanels( props, params, params.block ),
+						_getPanels( props, params ),
 						onChangeSelect( false, false, props )
 					)
 				];
@@ -80,11 +79,10 @@
 	 *
 	 * @param props
 	 * @param params
-	 * @param blockName
 	 * @return {Array}
 	 * @private
 	 */
-	function _getPanels( props, params, blockName ) {
+	function _getPanels( props, params ) {
 		const panels    = [],
 		      PanelBody = wp.components.PanelBody;
 		Object.keys( params.panels ).forEach( function ( key, index ) {
@@ -93,8 +91,8 @@
 				panels[ index ] = DFIGBlockObject.el( PanelBody, {
 					title: IndividualPanel.title,
 					initialOpen: IndividualPanel.initialOpen,
-					className: prefix + '-panel-' + key
-				}, _getControls( props, IndividualPanel.attributes, blockName ) );
+					className: DFIGBlockObject.params.prefix + '-panel-' + key
+				}, _getControls( props, IndividualPanel.attributes ) );
 			}
 		} );
 
@@ -106,11 +104,10 @@
 	 *
 	 * @param props
 	 * @param fields
-	 * @param blockName
 	 * @return {Array}
 	 * @private
 	 */
-	function _getControls( props, fields, blockName ) {
+	function _getControls( props, fields ) {
 		const controls = [];
 		Object.keys( fields ).forEach( function ( key, index ) {
 			if ( fields.hasOwnProperty( key ) ) {
@@ -120,7 +117,7 @@
 				}
 				const IndividualField = fields[key],
 				      control         = _getControlType( IndividualField.method, IndividualField.type );
-				controls[index] = DFIGBlockObject.el( control, _getIndividualControl( key, IndividualField, props, blockName ) );
+				controls[index] = DFIGBlockObject.el( control, _getIndividualControl( key, IndividualField, props ) );
 			}
 		} );
 
@@ -163,19 +160,18 @@
 	 * @param key
 	 * @param field
 	 * @param props
-	 * @param blockName
 	 * @return {{label: *, value: *, className: string, onChange: onChange}}
 	 * @private
 	 */
-	function _getIndividualControl( key, field, props, blockName ) {
+	function _getIndividualControl( key, field, props ) {
 		const {attributes, setAttributes} = props;
 		const control = {
 			label: field.label,
 			value: attributes[key],
-			className: prefix + '-' + key,
+			className: DFIGBlockObject.params.prefix + '-' + key,
 			onChange: ( value ) => {
 				if ( 'taxonomy' === key ) {
-					onChangeSelect( key, value, props, blockName );
+					onChangeSelect( key, value, props );
 				}
 				setAttributes( {[key]: value} );
 			}
@@ -203,12 +199,12 @@
 	 * @param select_id
 	 * @param value
 	 * @param props
-	 * @param blockName
 	 */
-	function onChangeSelect( select_id, value, props, blockName ) {
-		if ( prefix + '/term' !== blockName ) {
+	function onChangeSelect( select_id, value, props ) {
+		if ( DFIGBlockObject.params.prefix + '/term' !== props.name ) {
 			return;
 		}
+		console.log( props );
 		const data = _getAjaxData( select_id, value, props );
 		_doAjaxUpdate( data, select_id, props );
 	}
@@ -223,7 +219,7 @@
 	 */
 	function _getAjaxData( select_id, value, props ) {
 		const data         = {
-			      action: prefix + '_block',
+			      action: DFIGBlockObject.params.prefix + '_block',
 			      security: DFIGBlockObject.params.security
 		      },
 		      {attributes} = props;
@@ -271,7 +267,7 @@
 	 * @private
 	 */
 	function _modifySelectInput( options, key, attributes ) {
-		const selectID = $( '.' + prefix + '-' + key + ' select' ),
+		const selectID = $( '.' + DFIGBlockObject.params.prefix + '-' + key + ' select' ),
 		      oldValue = attributes[key] || '';
 		selectID.empty();
 		_updateSelectOptions( options, selectID, oldValue );

includes/js/block.min.js

@@ -1 +1 @@
-!function(e,t){"use strict";const n="displayfeaturedimagegenesis",o={el:e.element.createElement};function r(e,r,c,l){if(n+"/term"!==l)return;!function(e,r,c){const{attributes:l,setAttributes:s}=c;$.post(o.params.ajax_url,e,function(e){if(t!==e.success&&!1===e.success)return!1;const o=$.parseJSON(e);!function(e,t,o){const r=$("."+n+"-"+t+" select"),c=o[t]||"";r.empty(),function(e,t,n){$.each(e,function(e,o){const r=$("<option />").val(e).text(o),c=e?"append":"prepend";t.val(n),t[c](r)})}(e,r,c)}(o,"term",l),r&&s({term:""})})}(function(e,t,r){const c={action:n+"_block",security:o.params.security},{attributes:l}=r;c.taxonomy="taxonomy"===e?t:l.taxonomy;return c}(e,r,c),e,c)}o.init=function(t){const c=e.blocks.registerBlockType,l=e.components.ServerSideRender,s=e.blockEditor.InspectorControls;c(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:c=>{const{attributes:a,setAttributes:i}=c,u=e.element.Fragment,m=e.blockEditor.BlockControls,p=e.blockEditor.BlockAlignmentToolbar;let b=o.el(l,{block:t.block,attributes:a});return t.placeholder&&!a[t.required]&&(b=o.el("div",{className:n+"-placeholder"},t.placeholder)),[b,o.el(u,null,o.el(m,null,o.el(p,{value:a.blockAlignment,controls:["wide","full"],onChange:e=>{i({blockAlignment:e})}}))),o.el(s,{},function(t,c,l){const s=[],a=e.components.PanelBody;return Object.keys(c.panels).forEach(function(i,u){if(c.panels.hasOwnProperty(i)){const m=c.panels[i];s[u]=o.el(a,{title:m.title,initialOpen:m.initialOpen,className:n+"-panel-"+i},function(t,c,l){const s=[];return Object.keys(c).forEach(function(a,i){if(c.hasOwnProperty(a)){if(-1!==["blockAlignment","className"].indexOf(a))return;const u=c[a],m=function(t,n){const{TextControl:o,SelectControl:r,RangeControl:c,CheckboxControl:l,TextareaControl:s}=e.components,a=o;return"select"===t?r:"number"===t&&"number"===n?c:"checkbox"===t?l:"textarea"===t?s:a}(u.method,u.type);s[i]=o.el(m,function(e,t,o,c){const{attributes:l,setAttributes:s}=o,a={label:t.label,value:l[e],className:n+"-"+e,onChange:t=>{"taxonomy"===e&&r(e,t,o,c),s({[e]:t})}};return"select"===t.method?a.options=t.options:"number"===t.method?(a.min=t.min,a.max=t.max,"number"!==t.type?a.type="number":a.initialPosition=t.min):"checkbox"===t.method&&(a.checked=l[e]),a}(a,u,t,l))}}),s}(t,m.attributes,l))}}),s}(c,t,t.block),r(!1,!1,c))]},save:e=>null})},o.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==o.params&&Object.keys(o.params.blocks).forEach(function(e,t){o.params.blocks.hasOwnProperty(e)&&o.init(o.params.blocks[e])})}(wp);
+!function(e,t){"use strict";const n={el:e.element.createElement};function o(e,o,r){if(n.params.prefix+"/term"!==r.name)return;console.log(r),function(e,o,r){const{attributes:a,setAttributes:s}=r;$.post(n.params.ajax_url,e,function(e){if(t!==e.success&&!1===e.success)return!1;const r=$.parseJSON(e);!function(e,t,o){const r=$("."+n.params.prefix+"-"+t+" select"),a=o[t]||"";r.empty(),function(e,t,n){$.each(e,function(e,o){const r=$("<option />").val(e).text(o),a=e?"append":"prepend";t.val(n),t[a](r)})}(e,r,a)}(r,"term",a),o&&s({term:""})})}(function(e,t,o){const r={action:n.params.prefix+"_block",security:n.params.security},{attributes:a}=o;r.taxonomy="taxonomy"===e?t:a.taxonomy;return r}(e,o,r),e,r)}n.init=function(t){const r=e.blocks.registerBlockType,a=e.components.ServerSideRender,s=e.blockEditor.InspectorControls;r(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:r=>{const{attributes:c,setAttributes:l}=r,i=e.element.Fragment,p=e.blockEditor.BlockControls,u=e.blockEditor.BlockAlignmentToolbar;let m=n.el(a,{block:t.block,attributes:c});return t.placeholder&&!c[t.required]&&(m=n.el("div",{className:n.params.prefix+"-placeholder"},t.placeholder)),[m,n.el(i,null,n.el(p,null,n.el(u,{value:c.blockAlignment,controls:["wide","full"],onChange:e=>{l({blockAlignment:e})}}))),n.el(s,{},function(t,r){const a=[],s=e.components.PanelBody;return Object.keys(r.panels).forEach(function(c,l){if(r.panels.hasOwnProperty(c)){const i=r.panels[c];a[l]=n.el(s,{title:i.title,initialOpen:i.initialOpen,className:n.params.prefix+"-panel-"+c},function(t,r){const a=[];return Object.keys(r).forEach(function(s,c){if(r.hasOwnProperty(s)){if(-1!==["blockAlignment","className"].indexOf(s))return;const l=r[s],i=function(t,n){const{TextControl:o,SelectControl:r,RangeControl:a,CheckboxControl:s,TextareaControl:c}=e.components,l=o;return"select"===t?r:"number"===t&&"number"===n?a:"checkbox"===t?s:"textarea"===t?c:l}(l.method,l.type);a[c]=n.el(i,function(e,t,r){const{attributes:a,setAttributes:s}=r,c={label:t.label,value:a[e],className:n.params.prefix+"-"+e,onChange:t=>{"taxonomy"===e&&o(e,t,r),s({[e]:t})}};return"select"===t.method?c.options=t.options:"number"===t.method?(c.min=t.min,c.max=t.max,"number"!==t.type?c.type="number":c.initialPosition=t.min):"checkbox"===t.method&&(c.checked=a[e]),c}(s,l,t))}}),a}(t,i.attributes))}}),a}(r,t),o(!1,!1,r))]},save:e=>null})},n.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==n.params&&Object.keys(n.params.blocks).forEach(function(e,t){n.params.blocks.hasOwnProperty(e)&&n.init(n.params.blocks[e])})}(wp);

includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-fields.php

@@ -20,6 +20,7 @@ class DisplayFeaturedImageGenesisWidgetsBlocksFields {
 			'category' => 'widgets',
 		);
 		$output = array(
+			'prefix'   => 'displayfeaturedimagegenesis',
 			'ajax_url' => admin_url( 'admin-ajax.php' ),
 			'security' => wp_create_nonce( 'displayfeaturedimagegenesis-block-nonce' ),
 			'blocks'   => array(),