Chnage block registration (still REST 404)

includes/blocks/class-displayfeaturedimagegenesis-blocks.php

@@ -139,13 +139,17 @@ class DisplayFeaturedImageGenesisBlocks {
 	public function localize() {
 		$args = array();
 		foreach ( $this->blocks() as $block => $data ) {
-			$args['blocks'][ $block ] = $this->get_localization_data( $block, $data );
+			$args[ $block ] = $this->get_localization_data( $block, $data );
 		}
 		wp_localize_script( 'displayfeaturedimagegenesis-block', 'DisplayFeaturedImageGenesisBlock', $args );
 	}
 
 	/**
 	 * Get the data for localizing everything.
+	 *
+	 * @param $block
+	 * @param $data
+	 *
 	 * @return array
 	 */
 	protected function get_localization_data( $block, $data ) {

includes/js/block.js

@@ -8,65 +8,59 @@
 		el: wp.element.createElement,
 	};
 
-	/**
-	 * Initialize and register the block.
-	 */
-	DisplayFeaturedImageBlockObject.init = function () {
+	DisplayFeaturedImageBlockObject.takeTwo = function ( block ) {
 		const registerBlockType = wp.blocks.registerBlockType,
 		      ServerSideRender  = wp.components.ServerSideRender,
 		      InspectorControls = wp.blockEditor.InspectorControls;
-		Object.keys( DisplayFeaturedImageBlockObject.params.blocks ).forEach( function ( key, index ) {
-			if ( DisplayFeaturedImageBlockObject.params.blocks.hasOwnProperty( key ) ) {
-				const data = DisplayFeaturedImageBlockObject.params.blocks[key];
-				registerBlockType( data.block, {
-					title: data.title,
-					description: data.description,
-					keywords: data.keywords,
-					icon: data.icon,
-					category: data.category,
-					supports: {
-						html: false
-					},
+		const data = DisplayFeaturedImageBlockObject.params[block];
+		// console.log( data );
+		registerBlockType( data.block, {
+			title: data.title,
+			description: data.description,
+			keywords: data.keywords,
+			icon: data.icon,
+			category: data.category,
+			supports: {
+				html: false
+			},
 
-					getEditWrapperProps( {blockAlignment} ) {
-						return {'data-align': blockAlignment};
-					},
+			getEditWrapperProps( {blockAlignment} ) {
+				return {'data-align': blockAlignment};
+			},
 
-					edit: props => {
-						const {
-							      attributes,
-							      setAttributes
-						      }                     = props,
-						      Fragment              = wp.element.Fragment,
-						      BlockControls         = wp.blockEditor.BlockControls,
-						      BlockAlignmentToolbar = wp.blockEditor.BlockAlignmentToolbar;
-						return [
-							DisplayFeaturedImageBlockObject.el( ServerSideRender, {
-								block: data.block,
-								attributes: attributes
-							} ),
-							DisplayFeaturedImageBlockObject.el( Fragment, null,
-								DisplayFeaturedImageBlockObject.el( BlockControls, null,
-									DisplayFeaturedImageBlockObject.el( BlockAlignmentToolbar, {
-										value: attributes.blockAlignment,
-										controls: ['wide', 'full'],
-										onChange: ( value ) => {
-											setAttributes( {blockAlignment: value} );
-										},
-									} )
-								),
-							),
-							DisplayFeaturedImageBlockObject.el( InspectorControls, {},
-								_getPanels( props )
-							)
-						];
-					},
+			edit: props => {
+				const {
+					      attributes,
+					      setAttributes
+				      }                     = props,
+				      Fragment              = wp.element.Fragment,
+				      BlockControls         = wp.blockEditor.BlockControls,
+				      BlockAlignmentToolbar = wp.blockEditor.BlockAlignmentToolbar;
+				return [
+					DisplayFeaturedImageBlockObject.el( ServerSideRender, {
+						block: data.block,
+						attributes: data.attributes
+					} ),
+					DisplayFeaturedImageBlockObject.el( Fragment, null,
+						DisplayFeaturedImageBlockObject.el( BlockControls, null,
+							DisplayFeaturedImageBlockObject.el( BlockAlignmentToolbar, {
+								value: props.attributes.blockAlignment,
+								controls: ['wide', 'full'],
+								onChange: ( value ) => {
+									setAttributes( {blockAlignment: value} );
+								},
+							} )
+						),
+					),
+					DisplayFeaturedImageBlockObject.el( InspectorControls, {},
+						_getPanels( props, block )
+					)
+				];
+			},
 
-					save: props => {
-						return null;
-					},
-				} );
-			}
+			save: props => {
+				return null;
+			},
 		} );
 	};
 
@@ -74,25 +68,21 @@
 	 * Get the panels for the block controls.
 	 *
 	 * @param props
+	 * @param block
 	 * @return {Array}
 	 * @private
 	 */
-	function _getPanels( props ) {
+	function _getPanels( props, block ) {
 		const panels    = [],
 		      PanelBody = wp.components.PanelBody;
-		Object.keys( DisplayFeaturedImageBlockObject.params.blocks ).forEach( function ( block_key, index ) {
-			if ( DisplayFeaturedImageBlockObject.params.blocks.hasOwnProperty( block_key ) ) {
-				const data = DisplayFeaturedImageBlockObject.params.blocks[ block_key ];
-				Object.keys( data.panels ).forEach( function ( key, index ) {
-					if ( data.panels.hasOwnProperty( key ) ) {
-						const IndividualPanel = data.panels[key];
-						panels[index] = DisplayFeaturedImageBlockObject.el( PanelBody, {
-							title: IndividualPanel.title,
-							initialOpen: IndividualPanel.initialOpen,
-							className: 'display-featured-image-panel-' + key
-						}, _getControls( props, IndividualPanel.attributes ) );
-					}
-				} );
+		const blockData = DisplayFeaturedImageBlockObject.params[block];
+		Object.keys( blockData.panels ).forEach( function ( key, index ) {
+			if ( blockData.panels.hasOwnProperty( key ) ) {
+				const IndividualPanel = blockData.panels[key];
+				panels[index] = DisplayFeaturedImageBlockObject.el( PanelBody, {
+					title: IndividualPanel.title,
+					initialOpen: IndividualPanel.initialOpen
+				}, _getControls( props, IndividualPanel.attributes ) );
 			}
 		} );
 
@@ -195,6 +185,6 @@
 	DisplayFeaturedImageBlockObject.params = typeof DisplayFeaturedImageGenesisBlock === 'undefined' ? '' : DisplayFeaturedImageGenesisBlock;
 
 	if ( typeof DisplayFeaturedImageBlockObject.params !== 'undefined' ) {
-		DisplayFeaturedImageBlockObject.init();
+		DisplayFeaturedImageBlockObject.takeTwo( 'post-type' );
 	}
 } )( wp );

includes/js/block.min.js

@@ -0,0 +1 @@
+!function(e,t){"use strict";const n={el:e.element.createElement};n.takeTwo=function(t){const o=e.blocks.registerBlockType,l=e.components.ServerSideRender,i=e.blockEditor.InspectorControls,r=n.params[t];o(r.block,{title:r.title,description:r.description,keywords:r.keywords,icon:r.icon,category:r.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:o=>{const{attributes:s,setAttributes:a}=o,c=e.element.Fragment,u=e.blockEditor.BlockControls,m=e.blockEditor.BlockAlignmentToolbar;return[n.el(l,{block:r.block,attributes:r.attributes}),n.el(c,null,n.el(u,null,n.el(m,{value:o.attributes.blockAlignment,controls:["wide","full"],onChange:e=>{a({blockAlignment:e})}}))),n.el(i,{},function(t,o){const l=[],i=e.components.PanelBody,r=n.params[o];return Object.keys(r.panels).forEach(function(o,s){if(r.panels.hasOwnProperty(o)){const a=r.panels[o];l[s]=n.el(i,{title:a.title,initialOpen:a.initialOpen},function(t,o){const l=[];return Object.keys(o).forEach(function(i,r){if(o.hasOwnProperty(i)){if(-1!==["blockAlignment","className"].indexOf(i))return;const s=o[i],a=function(t,n){const{TextControl:o,SelectControl:l,RangeControl:i,CheckboxControl:r,TextareaControl:s}=e.components,a=o;return"select"===t?l:"number"===t&&"number"===n?i:"checkbox"===t?r:"textarea"===t?s:a}(s.method,s.type);l[r]=n.el(a,function(e,t,n){const{attributes:o,setAttributes:l}=n,i={heading:t.heading,label:t.label,value:o[e],className:"displayfeaturedimagegenesis-"+e,onChange:t=>{l({[e]:t})}};return"select"===t.method?i.options=t.options:"number"===t.method?(i.min=t.min,i.max=t.max,"number"!==t.type?i.type="number":i.initialPosition=t.min):"checkbox"===t.method&&(i.checked=o[e]),i}(i,s,t))}}),l}(t,a.attributes))}}),l}(o,t))]},save:e=>null})},n.params="undefined"==typeof DisplayFeaturedImageGenesisBlock?"":DisplayFeaturedImageGenesisBlock,void 0!==n.params&&n.takeTwo("post-type")}(wp);