Merge branch 'feature/blocks' into develop

includes/class-displayfeaturedimagegenesis.php

@@ -125,6 +125,7 @@ class Display_Featured_Image_Genesis {
 		add_action( 'widgets_init', array( $this->widgets, 'register_widgets' ) );
 		add_action( 'widgets_init', array( $this->widgets, 'register_shortcodes' ) );
 		add_action( 'admin_enqueue_scripts', array( $this->widgets, 'enqueue_scripts' ) );
+		add_action( 'init', array( $this, 'maybe_register_block' ) );
 
 		// Taxonomies, Authors
 		add_filter( 'displayfeaturedimagegenesis_get_taxonomies', array( $this->taxonomies, 'remove_post_status_terms' ) );
@@ -249,6 +250,15 @@ class Display_Featured_Image_Genesis {
 		}
 	}
 
+	public function maybe_register_block() {
+		if ( ! function_exists( 'register_block_type' ) ) {
+			return;
+		}
+		include_once 'widgets/class-displayfeaturedimagegenesis-widgets-blocks.php';
+		$block = new DisplayFeaturedImageGenesisWidgetsBlocks();
+		$block->init();
+	}
+
 	/**
 	 * Add link to plugin settings page in plugin table
 	 * @param $links array link to settings page

includes/css/blocks.css

@@ -0,0 +1 @@
+div[class^="wp-block-displayfeaturedimagegenesis"]{overflow:auto}div[class^="wp-block-displayfeaturedimagegenesis"]:before{position:absolute;top:0;right:0;bottom:0;left:0;content:' ';background-color:rgba(255,255,255,0)}.displayfeaturedimagegenesis-placeholder{text-align:center;background:#eee;color:#111;padding:18px}

includes/js/block.js

@@ -0,0 +1,290 @@
+/*
+ * Copyright (c) 2019 Robin Cornett
+ */
+
+(function ( wp, undefined ) {
+	'use strict';
+	const DFIGBlockObject = {
+		el: wp.element.createElement,
+	};
+
+	/**
+	 * Initialize and register the block.
+	 */
+	DFIGBlockObject.init = function ( params ) {
+		const registerBlockType = wp.blocks.registerBlockType,
+		      ServerSideRender  = wp.components.ServerSideRender,
+		      InspectorControls = wp.blockEditor.InspectorControls;
+
+		registerBlockType( params.block, {
+			title: params.title,
+			description: params.description,
+			keywords: params.keywords,
+			icon: params.icon,
+			category: params.category,
+			supports: {
+				html: false
+			},
+
+			getEditWrapperProps( {blockAlignment} ) {
+				return {'data-align': blockAlignment};
+			},
+
+			edit: props => {
+				const {
+					      attributes,
+					      setAttributes
+				      }                     = props,
+				      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: DFIGBlockObject.params.prefix + '-placeholder',
+					}, params.placeholder );
+				}
+
+				return [
+					render,
+					DFIGBlockObject.el( Fragment, null,
+						DFIGBlockObject.el( BlockControls, null,
+							DFIGBlockObject.el( BlockAlignmentToolbar, {
+								value: attributes.blockAlignment,
+								controls: ['wide', 'full'],
+								onChange: ( value ) => {
+									setAttributes( {blockAlignment: value} );
+								},
+							} )
+						),
+					),
+					DFIGBlockObject.el( InspectorControls, {},
+						_getPanels( props, params ),
+						onChangeSelect( false, false, props )
+					)
+				];
+			},
+
+			save: props => {
+				return null;
+			},
+		} );
+	};
+
+	/**
+	 * Get the panels for the block controls.
+	 *
+	 * @param props
+	 * @param params
+	 * @return {Array}
+	 * @private
+	 */
+	function _getPanels( props, params ) {
+		const panels    = [],
+		      PanelBody = wp.components.PanelBody;
+		Object.keys( params.panels ).forEach( function ( key, index ) {
+			if ( params.panels.hasOwnProperty( key ) ) {
+				const IndividualPanel = params.panels[key];
+				panels[ index ] = DFIGBlockObject.el( PanelBody, {
+					title: IndividualPanel.title,
+					initialOpen: IndividualPanel.initialOpen,
+					className: DFIGBlockObject.params.prefix + '-panel-' + key
+				}, _getControls( props, IndividualPanel.attributes ) );
+			}
+		} );
+
+		return panels;
+	}
+
+	/**
+	 * Get all of the block controls, with defaults and options.
+	 *
+	 * @param props
+	 * @param fields
+	 * @return {Array}
+	 * @private
+	 */
+	function _getControls( props, fields ) {
+		const controls = [];
+		Object.keys( fields ).forEach( function ( key, index ) {
+			if ( fields.hasOwnProperty( key ) ) {
+				var skipped = [ 'blockAlignment', 'className' ];
+				if ( -1 !== skipped.indexOf( key ) ) {
+					return;
+				}
+				const IndividualField = fields[key],
+				      control         = _getControlType( IndividualField.method, IndividualField.type );
+				controls[index] = DFIGBlockObject.el( control, _getIndividualControl( key, IndividualField, props ) );
+			}
+		} );
+
+		return controls;
+	}
+
+	/**
+	 * Get the control type.
+	 * @param method
+	 * @param control_type
+	 * @return {*}
+	 * @private
+	 */
+	function _getControlType( method, control_type ) {
+		const {
+			      TextControl,
+			      SelectControl,
+			      CheckboxControl,
+			      TextareaControl
+		      } = wp.components;
+		const control = TextControl;
+		if ( 'select' === method ) {
+			return SelectControl;
+		} else if ( 'checkbox' === method ) {
+			return CheckboxControl;
+		} else if ( 'textarea' === method ) {
+			return TextareaControl;
+		}
+
+		return control;
+	}
+
+	/**
+	 * Build the individual control object. Sets up standard properties for all
+	 * controls; then adds custom properties as needed.
+	 *
+	 * @param key
+	 * @param field
+	 * @param props
+	 * @return {{label: *, value: *, className: string, onChange: onChange}}
+	 * @private
+	 */
+	function _getIndividualControl( key, field, props ) {
+		const {attributes, setAttributes} = props;
+		const control = {
+			label: field.label,
+			value: attributes[key],
+			className: DFIGBlockObject.params.prefix + '-' + key,
+			onChange: ( value ) => {
+				if ( 'taxonomy' === key ) {
+					onChangeSelect( key, value, props );
+				}
+				setAttributes( {[key]: value} );
+			}
+		};
+
+		if ( 'select' === field.method ) {
+			control.options = field.options;
+		} else if ( 'checkbox' === field.method ) {
+			control.checked = attributes[key];
+		}
+
+		return control;
+	}
+
+	/**
+	 * Update values and options.
+	 * @param select_id
+	 * @param value
+	 * @param props
+	 */
+	function onChangeSelect( select_id, value, props ) {
+		if ( DFIGBlockObject.params.prefix + '/term' !== props.name ) {
+			return;
+		}
+		const data = _getAjaxData( select_id, value, props );
+		_doAjaxUpdate( data, select_id, props );
+	}
+
+	/**
+	 *
+	 * @param select_id
+	 * @param value
+	 * @param props
+	 * @returns {{action: string, security: *}}
+	 * @private
+	 */
+	function _getAjaxData( select_id, value, props ) {
+		const data         = {
+			      action: DFIGBlockObject.params.prefix + '_block',
+			      security: DFIGBlockObject.params.security
+		      },
+		      {attributes} = props;
+		if ( 'taxonomy' === select_id ) {
+			data.taxonomy = value;
+		} else {
+			data.taxonomy = attributes.taxonomy;
+		}
+
+		return data;
+	}
+
+	/**
+	 * Call on our ajax action and update the select
+	 * @param data
+	 * @param select_id
+	 * @param props
+	 * @return
+	 * @private
+	 */
+	function _doAjaxUpdate( data, select_id, props ) {
+		const {attributes, setAttributes} = props;
+		$.post( DFIGBlockObject.params.ajax_url, data, function ( response ) {
+
+			if ( undefined !== response.success && false === response.success ) {
+				return false;
+			}
+
+			const jsonData = $.parseJSON( response );
+
+			_modifySelectInput( jsonData, 'term', attributes );
+			if ( select_id ) {
+				setAttributes( {
+					term: '',
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Modify the term dropdown.
+	 * @param options
+	 * @param key
+	 * @param attributes
+	 * @private
+	 */
+	function _modifySelectInput( options, key, attributes ) {
+		const selectID = $( '.' + DFIGBlockObject.params.prefix + '-' + key + ' select' ),
+		      oldValue = attributes[key] || '';
+		selectID.empty();
+		_updateSelectOptions( options, selectID, oldValue );
+	}
+
+	/**
+	 * Update the select input with the new options.
+	 * @param options
+	 * @param selectID
+	 * @param oldValue
+	 * @private
+	 */
+	function _updateSelectOptions( options, selectID, oldValue ) {
+		$.each( options, function ( key, value ) {
+			const new_option = $( '<option />' )
+				      .val( key ).text( value ),
+			      method     = ! key ? 'prepend' : 'append';
+			selectID.val( oldValue );
+			selectID[method]( new_option );
+		} );
+	}
+
+	DFIGBlockObject.params = typeof DisplayFeaturedImageBlock === 'undefined' ? '' : DisplayFeaturedImageBlock;
+
+	if ( typeof DFIGBlockObject.params !== 'undefined' ) {
+		Object.keys( DFIGBlockObject.params.blocks ).forEach( function ( key, index ) {
+			if ( DFIGBlockObject.params.blocks.hasOwnProperty( key ) ) {
+				DFIGBlockObject.init( DFIGBlockObject.params.blocks[ key ] );
+			}
+		} );
+	}
+} )( wp );

includes/js/block.min.js

@@ -0,0 +1 @@
+!function(e,t){"use strict";const n={el:e.element.createElement};function o(e,o,r){if(n.params.prefix+"/term"!==r.name)return;!function(e,o,r){const{attributes:a,setAttributes:c}=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&&c({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,c=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:s,setAttributes:l}=r,i=e.element.Fragment,p=e.blockEditor.BlockControls,u=e.blockEditor.BlockAlignmentToolbar;let m=n.el(a,{block:t.block,attributes:s});return t.placeholder&&!s[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:s.blockAlignment,controls:["wide","full"],onChange:e=>{l({blockAlignment:e})}}))),n.el(c,{},function(t,r){const a=[],c=e.components.PanelBody;return Object.keys(r.panels).forEach(function(s,l){if(r.panels.hasOwnProperty(s)){const i=r.panels[s];a[l]=n.el(c,{title:i.title,initialOpen:i.initialOpen,className:n.params.prefix+"-panel-"+s},function(t,r){const a=[];return Object.keys(r).forEach(function(c,s){if(r.hasOwnProperty(c)){if(-1!==["blockAlignment","className"].indexOf(c))return;const l=r[c],i=function(t,n){const{TextControl:o,SelectControl:r,CheckboxControl:a,TextareaControl:c}=e.components,s=o;return"select"===t?r:"checkbox"===t?a:"textarea"===t?c:s}(l.method,l.type);a[s]=n.el(i,function(e,t,r){const{attributes:a,setAttributes:c}=r,s={label:t.label,value:a[e],className:n.params.prefix+"-"+e,onChange:t=>{"taxonomy"===e&&o(e,t,r),c({[e]:t})}};return"select"===t.method?s.options=t.options:"checkbox"===t.method&&(s.checked=a[e]),s}(c,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

@@ -0,0 +1,214 @@
+<?php
+
+/**
+ * Class DisplayFeaturedImageGenesisWidgetsBlocksFields
+ */
+class DisplayFeaturedImageGenesisWidgetsBlocksFields {
+
+	/**
+	 * @var \DisplayFeaturedImageGenesisWidgetsForm
+	 */
+	private $form;
+
+	/**
+	 * Get the data for localizing everything.
+	 * @return array
+	 */
+	public function get_localization_data() {
+		$common = array(
+			'icon'     => 'format-image',
+			'category' => 'widgets',
+		);
+		$output = array(
+			'prefix'   => 'displayfeaturedimagegenesis',
+			'ajax_url' => admin_url( 'admin-ajax.php' ),
+			'security' => wp_create_nonce( 'displayfeaturedimagegenesis-block-nonce' ),
+			'blocks'   => array(),
+		);
+		$blocks = include 'fields/blocks.php';
+		foreach ( $blocks as $block => $data ) {
+			$common['panels']           = array(
+				'main' => array(
+					'title'       => __( 'Block Settings', 'display-featured-image-genesis' ),
+					'initialOpen' => true,
+					'attributes'  => $this->fields( $block ),
+				),
+			);
+			$common['block']            = "displayfeaturedimagegenesis/{$block}";
+			$output['blocks'][ $block ] = array_merge(
+				$data,
+				$common
+			);
+		}
+
+		return $output;
+	}
+
+	/**
+	 * Get the fields for the block.
+	 *
+	 * @param $block
+	 *
+	 * @return array
+	 */
+	public function fields( $block ) {
+		$output = array();
+		foreach ( $this->get_all_fields( $block ) as $key => $value ) {
+			if ( ! empty( $value['args']['id'] ) ) {
+				$key = $value['args']['id'];
+			}
+			$output[ $key ] = $this->get_individual_field_attributes( $value, $block );
+		}
+
+		return $output;
+	}
+
+	/**
+	 * Set the block term action callback here since this class already has a getter for the form class.
+	 */
+	public function term_action_callback() {
+		$form = $this->get_form_class();
+		$form->term_action_callback();
+	}
+
+	/**
+	 * @param $block
+	 *
+	 * @return array
+	 */
+	private function get_all_fields( $block ) {
+		$fields     = "{$block}_fields";
+		$attributes = array_merge(
+			include 'fields/blocks-attributes.php',
+			$this->$fields()
+		);
+
+		return $attributes;
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function cpt_fields() {
+		$form = $this->get_form_class();
+
+		return array_merge(
+			include 'fields/cpt-post_type.php',
+			include 'fields/text.php',
+			include 'fields/image.php',
+			include 'fields/archive.php'
+		);
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function author_fields() {
+		$form = $this->get_form_class();
+		$user = array(
+			array(
+				'method' => 'select',
+				'args'   => include 'fields/author-user.php',
+			),
+		);
+
+		return array_merge(
+			$user,
+			include 'fields/author-image.php',
+			include 'fields/author-gravatar.php',
+			include 'fields/author-description.php',
+			include 'fields/author-archive.php'
+		);
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function term_fields() {
+		$form = $this->get_form_class();
+
+		return array_merge(
+			include 'fields/text.php',
+			include 'fields/term-taxonomy.php',
+			include 'fields/image.php',
+			include 'fields/archive.php'
+		);
+	}
+
+	/**
+	 * Get an array of attributes for an individual field.
+	 *
+	 * @param $field
+	 * @param $block
+	 *
+	 * @return array
+	 */
+	private function get_individual_field_attributes( $field, $block ) {
+		$method     = empty( $field['method'] ) ? 'text' : $field['method'];
+		$field_type = $this->get_field_type( $method );
+		if ( empty( $field['args']['label'] ) ) {
+			return $field;
+		}
+		$defaults   = include "fields/{$block}-defaults.php";
+		$attributes = array(
+			'type'    => $field_type,
+			'default' => $defaults[ $field['args']['id'] ],
+			'label'   => $field['args']['label'],
+			'method'  => $method,
+		);
+		if ( 'select' === $method ) {
+			$attributes['options'] = $this->convert_choices_for_select( $field['args']['choices'] );
+		}
+
+		return $attributes;
+	}
+
+	/**
+	 * Define the type of field for our script.
+	 *
+	 * @param $method
+	 *
+	 * @return string
+	 */
+	private function get_field_type( $method ) {
+		$type = 'string';
+		if ( 'checkbox' === $method ) {
+			return 'boolean';
+		}
+
+		return $type;
+	}
+
+	/**
+	 * Convert a standard PHP array to what the block editor needs.
+	 *
+	 * @param $options
+	 *
+	 * @return array
+	 */
+	private function convert_choices_for_select( $options ) {
+		$output = array();
+		foreach ( $options as $value => $label ) {
+			$output[] = array(
+				'value' => $value,
+				'label' => $label,
+			);
+		}
+
+		return $output;
+	}
+
+	/**
+	 * Get the widget builder form class.
+	 *
+	 * @return \DisplayFeaturedImageGenesisWidgetsForm
+	 */
+	private function get_form_class() {
+		if ( isset( $this->form ) ) {
+			return $this->form;
+		}
+		$this->form = new DisplayFeaturedImageGenesisWidgetsForm( $this, array() );
+
+		return $this->form;
+	}
+}

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

@@ -0,0 +1,131 @@
+<?php
+
+/**
+ * Class DisplayFeaturedImageGenesisWidgetsBlocksOutput
+ */
+class DisplayFeaturedImageGenesisWidgetsBlocksOutput {
+
+	/**
+	 * @var string
+	 */
+	private $block = 'displayfeaturedimagegenesis';
+
+	/**
+	 * Render the widget in a container div.
+	 *
+	 * @param $atts
+	 *
+	 * @return string
+	 */
+	public function render_cpt( $atts ) {
+		$block_id  = 'cpt';
+		$atts      = $this->update_attributes( $atts, $block_id );
+		$post_type = get_post_type_object( $atts['post_type'] );
+		if ( ! $post_type ) {
+			return '';
+		}
+		$classes = $this->get_block_classes( $atts, $block_id );
+		$this->include_output_file( $block_id );
+
+		ob_start();
+		echo '<div class="' . esc_attr( $classes ) . '">';
+		new DisplayFeaturedImageGenesisOutputCPT( $atts, array(), $post_type );
+		echo '</div>';
+		$output = ob_get_contents();
+		ob_clean();
+
+		return $output;
+	}
+
+	/**
+	 * @param $atts
+	 *
+	 * @return string
+	 */
+	public function render_author( $atts ) {
+		$block_id = 'author';
+		$atts     = $this->update_attributes( $atts, $block_id );
+		if ( empty( $atts['user'] ) ) {
+			return '';
+		}
+		$classes = $this->get_block_classes( $atts, $block_id );
+		$this->include_output_file( $block_id );
+
+		ob_start();
+		echo '<div class="' . esc_attr( $classes ) . '">';
+		new DisplayFeaturedImageGenesisOutputAuthor( $atts, array() );
+		$output = ob_get_contents();
+		echo '</div>';
+		ob_clean();
+
+		return $output;
+	}
+
+	/**
+	 * @param $atts
+	 *
+	 * @return string
+	 */
+	public function render_term( $atts ) {
+		$block_id = 'term';
+		$atts     = $this->update_attributes( $atts, $block_id );
+		$term     = get_term_by( 'id', $atts['term'], $atts['taxonomy'] );
+		if ( ! $term ) {
+			return '';
+		}
+		$classes = $this->get_block_classes( $atts, $block_id );
+		$this->include_output_file( $block_id );
+
+		ob_start();
+		echo '<div class="' . esc_attr( $classes ) . '">';
+		new DisplayFeaturedImageGenesisOutputTerm( $atts, array(), $term );
+		echo '</div>';
+		$output = ob_get_contents();
+		ob_clean();
+
+		return $output;
+	}
+
+	/**
+	 * Update the block attributes by merging with defaults.
+	 *
+	 * @param $atts
+	 * @param $block_id
+	 *
+	 * @return array
+	 */
+	private function update_attributes( $atts, $block_id ) {
+		return wp_parse_args( $atts, include "fields/{$block_id}-defaults.php" );
+	}
+
+	/**
+	 * Get the CSS classes for the block.
+	 *
+	 * @param $atts
+	 * @param $block_id
+	 *
+	 * @return string
+	 */
+	private function get_block_classes( $atts, $block_id ) {
+		$classes = array(
+			"wp-block-{$this->block}-{$block_id}",
+		);
+		if ( ! empty( $atts['className'] ) ) {
+			$classes[] = $atts['className'];
+		}
+		if ( ! empty( $atts['blockAlignment'] ) ) {
+			$classes[] = 'align' . $atts['blockAlignment'];
+		}
+
+		return implode( ' ', $classes );
+	}
+
+	/**
+	 * Load the block output file.
+	 *
+	 * @param $block_id
+	 */
+	private function include_output_file( $block_id ) {
+		include_once plugin_dir_path( dirname( __FILE__ ) ) . "output/class-displayfeaturedimagegenesis-output-{$block_id}.php";
+	}
+}

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

@@ -0,0 +1,94 @@
+<?php
+
+/**
+ * Class DisplayFeaturedImageGenesisWidgetsBlocks
+ */
+class DisplayFeaturedImageGenesisWidgetsBlocks {
+
+	/**
+	 * The plugin/block prefix.
+	 *
+	 * @var string
+	 */
+	private $prefix = 'displayfeaturedimagegenesis';
+
+	/**
+	 * @var \DisplayFeaturedImageGenesisWidgetsBlocksFields
+	 */
+	private $fields;
+
+	/**
+	 * Register our block type.
+	 */
+	public function init() {
+		$this->register_script_style();
+		include_once 'class-displayfeaturedimagegenesis-widgets-blocks-output.php';
+		$output = new DisplayFeaturedImageGenesisWidgetsBlocksOutput();
+		$fields = $this->get_fields_class();
+		foreach ( $this->blocks() as $block => $data ) {
+			if ( ! is_callable( array( $output, "render_{$block}" ) ) ) {
+				continue;
+			}
+			register_block_type(
+				"{$this->prefix}/{$block}",
+				array(
+					'editor_script'   => "{$this->prefix}-block",
+					'editor_style'    => "{$this->prefix}-block",
+					'attributes'      => $fields->fields( $block ),
+					'render_callback' => array( $output, "render_{$block}" ),
+				)
+			);
+		}
+		add_action( 'enqueue_block_editor_assets', array( $this, 'localize' ) );
+		add_action( 'wp_ajax_displayfeaturedimagegenesis_block', array( $fields, 'term_action_callback' ) );
+	}
+
+	/**
+	 * Get the list of blocks to create.
+	 * @return array
+	 */
+	private function blocks() {
+		return include 'fields/blocks.php';
+	}
+
+	/**
+	 * Register the block script and style.
+	 */
+	public function register_script_style() {
+		$minify  = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : ' .min';
+		$version = displayfeaturedimagegenesis_get()->version;
+		wp_register_style( "{$this->prefix}-block", plugin_dir_url( dirname( __FILE__ ) ) . 'css/blocks.css', array(), $version, 'screen' );
+		if ( ! $minify ) {
+			$version .= current_time( 'gmt' );
+		}
+		wp_register_script(
+			"{$this->prefix}-block",
+			plugin_dir_url( dirname( __FILE__ ) ) . "js/block{$minify}.js",
+			array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ),
+			$version,
+			false
+		);
+	}
+
+	/**
+	 * Localize.
+	 */
+	public function localize() {
+		$fields = $this->get_fields_class();
+		wp_localize_script( "{$this->prefix}-block", 'DisplayFeaturedImageBlock', $fields->get_localization_data() );
+	}
+
+	/**
+	 * Get the fields class.
+	 * @return \DisplayFeaturedImageGenesisWidgetsBlocksFields
+	 */
+	private function get_fields_class() {
+		if ( isset( $this->fields ) ) {
+			return $this->fields;
+		}
+		include_once 'class-displayfeaturedimagegenesis-widgets-blocks-fields.php';
+		$this->fields = new DisplayFeaturedImageGenesisWidgetsBlocksFields();
+
+		return $this->fields;
+	}
+}

includes/widgets/class-displayfeaturedimagegenesis-widgets-form.php

@@ -26,6 +26,31 @@ class DisplayFeaturedImageGenesisWidgetsForm {
 		$this->instance = $instance;
 	}
 
+	/**
+	 * Get the public registered post types on the site.
+	 *
+	 * @return mixed
+	 */
+	public function get_post_types() {
+		$args       = array(
+			'public'      => true,
+			'_builtin'    => false,
+			'has_archive' => true,
+		);
+		$output     = 'objects';
+		$post_types = get_post_types( $args, $output );
+
+		$options = array(
+			''     => '--',
+			'post' => __( 'Posts', 'display-featured-image-genesis' ),
+		);
+		foreach ( $post_types as $post_type ) {
+			$options[ $post_type->name ] = $post_type->label;
+		}
+
+		return $options;
+	}
+
 	/**
 	 * @return array
 	 */
@@ -51,6 +76,44 @@ class DisplayFeaturedImageGenesisWidgetsForm {
 		);
 	}
 
+	/**
+	 * @param $instance
+	 * @param bool $ajax
+	 *
+	 * @return mixed
+	 */
+	public function get_term_lists( $instance, $ajax = false ) {
+		$args        = array(
+			'orderby'    => 'name',
+			'order'      => 'ASC',
+			'hide_empty' => false,
+		);
+		$taxonomy    = $ajax ? filter_input( INPUT_POST, 'taxonomy', FILTER_SANITIZE_STRING ) : $instance['taxonomy'];
+		$terms       = get_terms( $taxonomy, $args );
+		$options[''] = '--';
+		foreach ( $terms as $term ) {
+			if ( is_object( $term ) ) {
+				$options[ $term->term_id ] = $term->name;
+			}
+		}
+
+		return $options;
+	}
+
+	/**
+	 * Handles the callback to populate the custom term dropdown. The
+	 * selected post type is provided in $_POST['taxonomy'], and the
+	 * calling script expects a JSON array of term objects.
+	 */
+	public function term_action_callback() {
+
+		$list = $this->get_term_lists( array(), true );
+
+		// And emit it
+		echo wp_json_encode( $list );
+		die();
+	}
+
 	/**
 	 * Build boxes with fields.
 	 *

includes/widgets/displayfeaturedimagegenesis-author-widget.php

@@ -38,22 +38,7 @@ class Display_Featured_Image_Genesis_Author_Widget extends WP_Widget {
 	 * @return array
 	 */
 	public function defaults() {
-		return array(
-			'title'                    => '',
-			'show_featured_image'      => 0,
-			'featured_image_alignment' => 'alignnone',
-			'featured_image_size'      => 'medium',
-			'gravatar_alignment'       => 'left',
-			'user'                     => '',
-			'show_gravatar'            => 0,
-			'size'                     => 45,
-			'author_info'              => '',
-			'bio_text'                 => '',
-			'page'                     => '',
-			'page_link_text'           => __( 'Read More', 'display-featured-image-genesis' ) . '…',
-			'posts_link'               => 0,
-			'link_text'                => __( 'View My Blog Posts', 'display-featured-image-genesis' ),
-		);
+		return include 'fields/author-defaults.php';
 	}
 
 	/**
@@ -69,7 +54,7 @@ class Display_Featured_Image_Genesis_Author_Widget extends WP_Widget {
 
 		echo $args['before_widget'];
 
-		include plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-author.php';
+		include_once plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-author.php';
 		new DisplayFeaturedImageGenesisOutputAuthor( $instance, $args, $this->id_base );
 
 		echo $args['after_widget'];
@@ -104,8 +89,15 @@ class Display_Featured_Image_Genesis_Author_Widget extends WP_Widget {
 	 */
 	public function get_fields( $new_instance ) {
 		$form = new DisplayFeaturedImageGenesisWidgetsForm( $this, $new_instance );
+		$user = array(
+			array(
+				'method' => 'select',
+				'args'   => include 'fields/author-user.php',
+			),
+		);
 
 		return array_merge(
+			array( $user ),
 			include 'fields/author-image.php',
 			include 'fields/author-gravatar.php',
 			include 'fields/author-description.php',
@@ -129,12 +121,7 @@ class Display_Featured_Image_Genesis_Author_Widget extends WP_Widget {
 			'label' => __( 'Title:', 'display-featured-image-genesis' ),
 			'class' => 'widefat',
 		) );
-		$form->do_select( $instance, array(
-			'id'      => 'user',
-			'label'   => __( 'Select a user. The email address for this account will be used to pull the Gravatar image.', 'display-featured-image-genesis' ),
-			'flex'    => true,
-			'choices' => $this->get_users(),
-		) );
+		$form->do_select( $instance, include 'fields/author-user.php' );
 
 		$form->do_boxes( array(
 			'author' => include 'fields/author-image.php',
@@ -152,62 +139,4 @@ class Display_Featured_Image_Genesis_Author_Widget extends WP_Widget {
 			'archive' => include 'fields/author-archive.php',
 		) );
 	}
-
-	/**
-	 * Get the authors on the site.
-	 *
-	 * @return array
-	 */
-	protected function get_users() {
-		$users   = get_users( array(
-			'who' => 'authors',
-		) );
-		$options = array();
-		foreach ( $users as $user ) {
-			$options[ $user->ID ] = $user->data->display_name;
-		}
-
-		return $options;
-	}
-
-	/**
-	 * Get gravatar sizes.
-	 *
-	 * @return array
-	 */
-	protected function get_gravatar_sizes() {
-		$sizes   = apply_filters( 'genesis_gravatar_sizes', array(
-			__( 'Small', 'display-featured-image-genesis' )       => 45,
-			__( 'Medium', 'display-featured-image-genesis' )      => 65,
-			__( 'Large', 'display-featured-image-genesis' )       => 85,
-			__( 'Extra Large', 'display-featured-image-genesis' ) => 125,
-		) );
-		$options = array();
-		foreach ( (array) $sizes as $label => $size ) {
-			$options[ $size ] = $label;
-		}
-
-		return $options;
-	}
-
-	/**
-	 * Get the pages on the site.
-	 *
-	 * @return array
-	 */
-	protected function get_pages() {
-		$page_ids = get_pages( array(
-			'post_type' => 'page',
-		) );
-		$pages    = array();
-		if ( $page_ids ) {
-			$pages[] = __( 'None', 'display-featured-image-genesis' );
-			foreach ( $page_ids as $id ) {
-				$title            = empty( $id->post_title ) ? '#' . $id->ID . __( ' (no title)', 'sixtenpress-featured-content' ) : $id->post_title;
-				$pages[ $id->ID ] = $title;
-			}
-		}
-
-		return $pages;
-	}
 }

includes/widgets/displayfeaturedimagegenesis-cpt-archive-widget.php

@@ -46,18 +46,7 @@ class Display_Featured_Image_Genesis_Widget_CPT extends WP_Widget {
 	 * @return array
 	 */
 	public function defaults() {
-		return array(
-			'title'             => '',
-			'post_type'         => 'post',
-			'show_image'        => 0,
-			'image_alignment'   => 'alignnone',
-			'image_size'        => 'medium',
-			'show_title'        => 0,
-			'show_content'      => 0,
-			'custom_content'    => '',
-			'archive_link'      => 0,
-			'archive_link_text' => __( 'View Content Type Archive', 'display-featured-image-genesis' ),
-		);
+		return include 'fields/cpt-defaults.php';
 	}
 
 	/**
@@ -81,7 +70,7 @@ class Display_Featured_Image_Genesis_Widget_CPT extends WP_Widget {
 
 		echo $args['before_widget'];
 
-		include plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-cpt.php';
+		include_once plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-cpt.php';
 		new DisplayFeaturedImageGenesisOutputCPT( $instance, $args, $post_type, $this->id_base );
 
 		echo $args['after_widget'];
@@ -163,26 +152,4 @@ class Display_Featured_Image_Genesis_Widget_CPT extends WP_Widget {
 			'archive' => include 'fields/archive.php',
 		) );
 	}
-
-	/**
-	 * Get the public registered post types on the site.
-	 *
-	 * @return mixed
-	 */
-	protected function get_post_types() {
-		$args       = array(
-			'public'      => true,
-			'_builtin'    => false,
-			'has_archive' => true,
-		);
-		$output     = 'objects';
-		$post_types = get_post_types( $args, $output );
-
-		$options['post'] = __( 'Posts', 'display-featured-image-genesis' );
-		foreach ( $post_types as $post_type ) {
-			$options[ $post_type->name ] = $post_type->label;
-		}
-
-		return $options;
-	}
 }

includes/widgets/displayfeaturedimagegenesis-taxonomy-widget.php

@@ -39,7 +39,8 @@ class Display_Featured_Image_Genesis_Widget_Taxonomy extends WP_Widget {
 
 		parent::__construct( 'featured-taxonomy', __( 'Display Featured Term Image', 'display-featured-image-genesis' ), $widget_ops, $control_ops );
 
-		add_action( 'wp_ajax_widget_selector', array( $this, 'term_action_callback' ) );
+		$form = new DisplayFeaturedImageGenesisWidgetsForm( $this, array() );
+		add_action( 'wp_ajax_widget_selector', array( $form, 'term_action_callback' ) );
 
 	}
 
@@ -47,19 +48,7 @@ class Display_Featured_Image_Genesis_Widget_Taxonomy extends WP_Widget {
 	 * @return array
 	 */
 	public function defaults() {
-		return array(
-			'title'             => '',
-			'taxonomy'          => 'category',
-			'term'              => '',
-			'show_image'        => 0,
-			'image_alignment'   => '',
-			'image_size'        => 'medium',
-			'show_title'        => 0,
-			'show_content'      => 0,
-			'custom_content'    => '',
-			'archive_link'      => 0,
-			'archive_link_text' => __( 'View Term Archive', 'display-featured-image-genesis' ),
-		);
+		return include 'fields/term-defaults.php';
 	}
 
 	/**
@@ -82,7 +71,7 @@ class Display_Featured_Image_Genesis_Widget_Taxonomy extends WP_Widget {
 		$args['before_widget'] = str_replace( 'class="widget ', 'class="widget ' . $term->slug . ' ', $args['before_widget'] );
 		echo $args['before_widget'];
 
-		include plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-term.php';
+		include_once plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-term.php';
 		new DisplayFeaturedImageGenesisOutputTerm( $instance, $args, $term, $this->id_base );
 
 		echo $args['after_widget'];
@@ -165,59 +154,4 @@ class Display_Featured_Image_Genesis_Widget_Taxonomy extends WP_Widget {
 			'archive' => include 'fields/archive.php',
 		) );
 	}
-
-	/**
-	 * @return array
-	 */
-	protected function get_taxonomies() {
-		$args       = array(
-			'public'  => true,
-			'show_ui' => true,
-		);
-		$taxonomies = get_taxonomies( $args, 'objects' );
-		$options    = array();
-		foreach ( $taxonomies as $taxonomy ) {
-			$options[ $taxonomy->name ] = $taxonomy->label;
-		}
-
-		return $options;
-	}
-
-	/**
-	 * @param $instance
-	 * @param bool $ajax
-	 *
-	 * @return mixed
-	 */
-	protected function get_term_lists( $instance, $ajax = false ) {
-		$args        = array(
-			'orderby'    => 'name',
-			'order'      => 'ASC',
-			'hide_empty' => false,
-		);
-		$taxonomy    = $ajax ? filter_input( INPUT_POST, 'taxonomy', FILTER_SANITIZE_STRING ) : $instance['taxonomy'];
-		$terms       = get_terms( $taxonomy, $args );
-		$options[''] = '--';
-		foreach ( $terms as $term ) {
-			if ( is_object( $term ) ) {
-				$options[ $term->term_id ] = $term->name;
-			}
-		}
-
-		return $options;
-	}
-
-	/**
-	 * Handles the callback to populate the custom term dropdown. The
-	 * selected post type is provided in $_POST['taxonomy'], and the
-	 * calling script expects a JSON array of term objects.
-	 */
-	public function term_action_callback() {
-
-		$list = $this->get_term_lists( array(), true );
-
-		// And emit it
-		echo wp_json_encode( $list );
-		die();
-	}
 }

includes/widgets/fields/author-archive.php

@@ -1,5 +1,21 @@
 <?php
 
+$page_ids     = get_pages(
+	array(
+		'post_type' => 'page',
+	)
+);
+$page_choices = array(
+	'' => __( 'None', 'display-featured-image-genesis' ),
+);
+if ( $page_ids ) {
+	foreach ( $page_ids as $page_id ) {
+		// phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+		$title                        = empty( $page_id->post_title ) ? '#' . $page_id->ID . __( ' (no title)', 'sixtenpress-featured-content' ) : $page_id->post_title;
+		$page_choices[ $page_id->ID ] = $title;
+	}
+}
+
 /**
  * Define author specific archive fields.
  */
@@ -9,7 +25,7 @@ return array(
 		'args'   => array(
 			'id'      => 'page',
 			'label'   => __( 'Choose your extended "About Me" page from the list below. This will be the page linked to at the end of the author description.', 'display-featured-image-genesis' ),
-			'choices' => $this->get_pages(),
+			'choices' => $page_choices,
 		),
 	),
 	array(

includes/widgets/fields/author-defaults.php

@@ -0,0 +1,18 @@
+<?php
+
+return array(
+	'title'                    => '',
+	'show_featured_image'      => 0,
+	'featured_image_alignment' => 'alignnone',
+	'featured_image_size'      => 'medium',
+	'gravatar_alignment'       => 'left',
+	'user'                     => '',
+	'show_gravatar'            => 0,
+	'size'                     => 45,
+	'author_info'              => '',
+	'bio_text'                 => '',
+	'page'                     => '',
+	'page_link_text'           => __( 'Read More', 'display-featured-image-genesis' ) . '&#x02026;',
+	'posts_link'               => 0,
+	'link_text'                => __( 'View My Blog Posts', 'display-featured-image-genesis' ),
+);

includes/widgets/fields/author-gravatar.php

@@ -1,5 +1,24 @@
 <?php
 
+/**
+ * Get gravatar sizes.
+ *
+ * @return array
+ */
+$sizes   = apply_filters(
+	'genesis_gravatar_sizes',
+	array(
+		__( 'Small', 'display-featured-image-genesis' )       => 45,
+		__( 'Medium', 'display-featured-image-genesis' )      => 65,
+		__( 'Large', 'display-featured-image-genesis' )       => 85,
+		__( 'Extra Large', 'display-featured-image-genesis' ) => 125,
+	)
+);
+$options = array();
+foreach ( (array) $sizes as $label => $size ) {
+	$options[ $size ] = $label;
+}
+
 /**
  * Define author specific gravatar fields.
  */
@@ -17,7 +36,7 @@ return array(
 			'id'      => 'size',
 			'label'   => __( 'Gravatar Size:', 'display-featured-image-genesis' ),
 			'flex'    => true,
-			'choices' => $this->get_gravatar_sizes(),
+			'choices' => $options,
 		),
 	),
 	array(

includes/widgets/fields/author-user.php

@@ -0,0 +1,20 @@
+<?php
+
+$users   = get_users(
+	array(
+		'who' => 'authors',
+	)
+);
+$options = array(
+	'' => '--',
+);
+foreach ( $users as $user ) {
+	$options[ $user->ID ] = $user->data->display_name;
+}
+
+return array(
+	'id'      => 'user',
+	'label'   => __( 'Select a user. The email address for this account will be used to pull the Gravatar image.', 'display-featured-image-genesis' ),
+	'flex'    => true,
+	'choices' => $options,
+);

includes/widgets/fields/blocks-attributes.php

@@ -0,0 +1,20 @@
+<?php
+
+return array(
+	'blockAlignment' => array(
+		'type'    => 'string',
+		'default' => '',
+	),
+	'className'      => array(
+		'type'    => 'string',
+		'default' => '',
+	),
+	'title'          => array(
+		'type'    => 'string',
+		'default' => '',
+		'args'    => array(
+			'id'    => 'title',
+			'label' => __( 'Title', 'display-featured-image-genesis' ),
+		),
+	),
+);

includes/widgets/fields/blocks.php

@@ -0,0 +1,34 @@
+<?php
+
+return array(
+	'term'   => array(
+		'title'       => __( 'Display Featured Term Image', 'display-featured-image-genesis' ),
+		'description' => __( 'Display a featured term', 'display-featured-image-genesis' ),
+		'keywords'    => 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' ),
+		'description' => __( 'Display a featured author', 'display-featured-image-genesis' ),
+		'keywords'    => array(
+			__( 'Author', 'display-featured-image-genesis' ),
+			__( 'Featured Image', 'display-featured-image-genesis' ),
+		),
+		'placeholder' => __( 'Please select an author.', 'display-featured-image-genesis' ),
+		'required'    => 'user',
+	),
+	'cpt'    => array(
+		'title'       => __( 'Display Featured Post Type Archive Image', 'display-featured-image-genesis' ),
+		'description' => __( 'Display a featured content type', 'display-featured-image-genesis' ),
+		'keywords'    => array(
+			__( 'Post Type', 'display-featured-image-genesis' ),
+			__( 'Featured Image', 'display-featured-image-genesis' ),
+		),
+		'placeholder' => __( 'Please select a post type.', 'display-featured-image-genesis' ),
+		'required'    => 'post_type',
+	),
+);

includes/widgets/fields/cpt-defaults.php

@@ -0,0 +1,14 @@
+<?php
+
+return array(
+	'title'             => '',
+	'post_type'         => 'post',
+	'show_image'        => 0,
+	'image_alignment'   => 'alignnone',
+	'image_size'        => 'medium',
+	'show_title'        => 0,
+	'show_content'      => 0,
+	'custom_content'    => '',
+	'archive_link'      => 0,
+	'archive_link_text' => __( 'View Content Type Archive', 'display-featured-image-genesis' ),
+);

includes/widgets/fields/cpt-post_type.php

@@ -10,7 +10,7 @@ return array(
 			'id'      => 'post_type',
 			'label'   => __( 'Post Type:', 'display-featured-image-genesis' ),
 			'flex'    => true,
-			'choices' => $this->get_post_types(),
+			'choices' => $form->get_post_types(),
 		),
 	),
 );

includes/widgets/fields/term-defaults.php

@@ -0,0 +1,15 @@
+<?php
+
+return array(
+	'title'             => '',
+	'taxonomy'          => 'category',
+	'term'              => '',
+	'show_image'        => 0,
+	'image_alignment'   => '',
+	'image_size'        => 'medium',
+	'show_title'        => 0,
+	'show_content'      => 0,
+	'custom_content'    => '',
+	'archive_link'      => 0,
+	'archive_link_text' => __( 'View Term Archive', 'display-featured-image-genesis' ),
+);

includes/widgets/fields/term-taxonomy.php

@@ -1,5 +1,20 @@
 <?php
 
+$args        = array(
+	'public'  => true,
+	'show_ui' => true,
+);
+$taxonomies  = get_taxonomies( $args, 'objects' );
+$tax_options = array();
+foreach ( $taxonomies as $taxonomy ) {
+	$tax_options[ $taxonomy->name ] = $taxonomy->label;
+}
+if ( empty( $instance ) ) {
+	$instance = include 'term-defaults.php';
+}
+
+$onchange = is_callable( $this, 'get_field_id ' ) ? sprintf( 'term_postback(\'%s\', this.value );', esc_attr( $this->get_field_id( 'term' ) ) ) : '';
+
 /**
  * Define term specific taxonomy fields.
  */
@@ -10,8 +25,8 @@ return array(
 			'id'       => 'taxonomy',
 			'label'    => __( 'Taxonomy:', 'display-featured-image-genesis' ),
 			'flex'     => true,
-			'onchange' => sprintf( 'term_postback(\'%s\', this.value );', esc_attr( $this->get_field_id( 'term' ) ) ),
-			'choices'  => $this->get_taxonomies(),
+			'onchange' => '',
+			'choices'  => $tax_options,
 		),
 	),
 	array(
@@ -20,7 +35,7 @@ return array(
 			'id'      => 'term',
 			'label'   => __( 'Term:', 'display-featured-image-genesis' ),
 			'flex'    => true,
-			'choices' => $this->get_term_lists( $instance, false ),
+			'choices' => $form->get_term_lists( $instance, false ),
 		),
 	),
 );

sass/blocks.scss

@@ -0,0 +1,21 @@
+div[class^="wp-block-displayfeaturedimagegenesis"] {
+	overflow: auto;
+
+	&:before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		content: ' ';
+		background-color: rgba(255, 255, 255, 0);
+	}
+}
+
+.displayfeaturedimagegenesis-placeholder {
+	text-align: center;
+	background: #eee;
+	color: #111;
+	padding: 18px;
+}
+