diff --git a/includes/blocks/class-displayfeaturedimagegenesis-blocks.php b/includes/blocks/class-displayfeaturedimagegenesis-blocks.php index 5d0b5ac..2de54ca 100644 --- a/includes/blocks/class-displayfeaturedimagegenesis-blocks.php +++ b/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 ) { diff --git a/includes/js/block.js b/includes/js/block.js index 43e2a5c..1dd7b11 100644 --- a/includes/js/block.js +++ b/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 ); diff --git a/includes/js/block.min.js b/includes/js/block.min.js new file mode 100644 index 0000000..e396e57 --- /dev/null +++ b/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); \ No newline at end of file