Move placeholder to JS edit

includes/js/block.js

@@ -4,7 +4,8 @@
 
 (function ( wp, undefined ) {
 	'use strict';
-	const DFIGBlockObject = {
+	const prefix          = 'displayfeaturedimagegenesis',
+	      DFIGBlockObject = {
 		el: wp.element.createElement,
 	};
 
@@ -38,11 +39,18 @@
 				      Fragment              = wp.element.Fragment,
 				      BlockControls         = wp.blockEditor.BlockControls,
 				      BlockAlignmentToolbar = wp.blockEditor.BlockAlignmentToolbar;
+				let render = DFIGBlockObject.el( ServerSideRender, {
+					block: params.block,
+					attributes: attributes
+				} );
+				if ( params.placeholder && ! attributes[ params.required ] ) {
+					render = DFIGBlockObject.el( 'div', {
+						className: prefix + '-placeholder',
+					}, params.placeholder );
+				}
+
 				return [
-					DFIGBlockObject.el( ServerSideRender, {
-						block: params.block,
-						attributes: attributes
-					} ),
+					render,
 					DFIGBlockObject.el( Fragment, null,
 						DFIGBlockObject.el( BlockControls, null,
 							DFIGBlockObject.el( BlockAlignmentToolbar, {
@@ -85,7 +93,7 @@
 				panels[ index ] = DFIGBlockObject.el( PanelBody, {
 					title: IndividualPanel.title,
 					initialOpen: IndividualPanel.initialOpen,
-					className: 'scriptless-panel-' + key
+					className: prefix + '-panel-' + key
 				}, _getControls( props, IndividualPanel.attributes, blockName ) );
 			}
 		} );
@@ -164,7 +172,7 @@
 		const control = {
 			label: field.label,
 			value: attributes[key],
-			className: 'displayfeaturedimagegenesis-' + key,
+			className: prefix + '-' + key,
 			onChange: ( value ) => {
 				if ( 'taxonomy' === key ) {
 					onChangeSelect( key, value, props, blockName );
@@ -198,7 +206,7 @@
 	 * @param blockName
 	 */
 	function onChangeSelect( select_id, value, props, blockName ) {
-		if ( 'displayfeaturedimagegenesis/term' !== blockName ) {
+		if ( prefix + '/term' !== blockName ) {
 			return;
 		}
 		const data = _getAjaxData( select_id, value, props );
@@ -215,7 +223,7 @@
 	 */
 	function _getAjaxData( select_id, value, props ) {
 		const data         = {
-			      action: 'displayfeaturedimagegenesis_block',
+			      action: prefix + '_block',
 			      security: DFIGBlockObject.params.security
 		      },
 		      {attributes} = props;
@@ -263,7 +271,7 @@
 	 * @private
 	 */
 	function _modifySelectInput( options, key, attributes ) {
-		const selectID = $( '.displayfeaturedimagegenesis-' + key + ' select' ),
+		const selectID = $( '.' + 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={el:e.element.createElement};function o(e,o,s,i){if("displayfeaturedimagegenesis/term"!==i)return;!function(e,o,s){const{attributes:i,setAttributes:r}=s;$.post(n.params.ajax_url,e,function(e){if(t!==e.success&&!1===e.success)return!1;const n=$.parseJSON(e);!function(e,t,n){const o=$(".displayfeaturedimagegenesis-"+t+" select"),s=n[t]||"";o.empty(),function(e,t,n){$.each(e,function(e,o){const s=$("<option />").val(e).text(o),i=e?"append":"prepend";t.val(n),t[i](s)})}(e,o,s)}(n,"term",i),o&&r({term:""})})}(function(e,t,o){const s={action:"displayfeaturedimagegenesis_block",security:n.params.security},{attributes:i}=o;s.taxonomy="taxonomy"===e?t:i.taxonomy;return s}(e,o,s),e,s)}n.init=function(t){const s=e.blocks.registerBlockType,i=e.components.ServerSideRender,r=e.blockEditor.InspectorControls;s(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:s=>{const{attributes:a,setAttributes:c}=s,l=e.element.Fragment,u=e.blockEditor.BlockControls,m=e.blockEditor.BlockAlignmentToolbar;return[n.el(i,{block:t.block,attributes:a}),n.el(l,null,n.el(u,null,n.el(m,{value:a.blockAlignment,controls:["wide","full"],onChange:e=>{c({blockAlignment:e})}}))),n.el(r,{},function(t,s,i){const r=[],a=e.components.PanelBody;return Object.keys(s.panels).forEach(function(c,l){if(s.panels.hasOwnProperty(c)){const u=s.panels[c];r[l]=n.el(a,{title:u.title,initialOpen:u.initialOpen,className:"scriptless-panel-"+c},function(t,s,i){const r=[];return Object.keys(s).forEach(function(a,c){if(s.hasOwnProperty(a)){if(-1!==["blockAlignment","className"].indexOf(a))return;const l=s[a],u=function(t,n){const{TextControl:o,SelectControl:s,RangeControl:i,CheckboxControl:r,TextareaControl:a}=e.components,c=o;return"select"===t?s:"number"===t&&"number"===n?i:"checkbox"===t?r:"textarea"===t?a:c}(l.method,l.type);r[c]=n.el(u,function(e,t,n,s){const{attributes:i,setAttributes:r}=n,a={label:t.label,value:i[e],className:"displayfeaturedimagegenesis-"+e,onChange:t=>{"taxonomy"===e&&o(e,t,n,s),r({[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=i[e]),a}(a,l,t,i))}}),r}(t,u.attributes,i))}}),r}(s,t,t.block),o(!1,!1,s))]},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);
+!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);

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

@@ -62,9 +62,6 @@ class DisplayFeaturedImageGenesisWidgetsBlocksOutput {
 	 * @return string
 	 */
 	public function render_term( $atts ) {
-		if ( empty( $atts['term'] ) ) {
-			return '<div class="displayfeaturedimagegenesis-placeholder">' . __( 'Please select a term.', 'sixtenpress' ) . '</div>';
-		}
 		$atts = wp_parse_args( $atts, include 'fields/term-defaults.php' );
 		$term = get_term_by( 'id', $atts['term'], $atts['taxonomy'] );
 		if ( ! $term ) {

includes/widgets/fields/blocks.php

@@ -8,6 +8,8 @@ return array(
 			__( 'Term', 'display-featured-image-genesis' ),
 			__( 'Featured Image', 'display-featured-image-genesis' ),
 		),
+		'placeholder' => __( 'Please select a term.', 'display-featured-image-genesis' ),
+		'required'    => 'term',
 	),
 	'author' => array(
 		'title'       => __( 'Display Featured Author Profile', 'display-featured-image-genesis' ),