Create one working block (CPT)

includes/class-displayfeaturedimagegenesis.php

@@ -254,9 +254,12 @@ class Display_Featured_Image_Genesis {
 		if ( ! function_exists( 'register_block_type' ) ) {
 			return;
 		}
-		include_once 'blocks/class-displayfeaturedimagegenesis-blocks.php';
-		$blocks = new DisplayFeaturedImageGenesisBlocks();
-		$blocks->init();
+//		include_once 'blocks/class-displayfeaturedimagegenesis-blocks.php';
+//		$blocks = new DisplayFeaturedImageGenesisBlocks();
+//		$blocks->init();
+		include_once 'widgets/class-displayfeaturedimagegenesis-output-block.php';
+		$block = new DisplayFeaturedImageGenesisOutputBlock();
+		$block->init();
 	}
 
 	/**

includes/js/test-block.js

@@ -0,0 +1,190 @@
+/*
+ * 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.editor.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.editor.BlockControls,
+				      BlockAlignmentToolbar = wp.editor.BlockAlignmentToolbar;
+				return [
+					DFIGBlockObject.el( ServerSideRender, {
+						block: DFIGBlockObject.params.block,
+						attributes: attributes
+					} ),
+					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 )
+					)
+				];
+			},
+
+			save: props => {
+				return null;
+			},
+		} );
+	};
+
+	/**
+	 * Get the panels for the block controls.
+	 *
+	 * @param props
+	 * @return {Array}
+	 * @private
+	 */
+	function _getPanels( props ) {
+		const panels    = [],
+		      PanelBody = wp.components.PanelBody;
+		Object.keys( DFIGBlockObject.params.panels ).forEach( function ( key, index ) {
+			if ( DFIGBlockObject.params.panels.hasOwnProperty( key ) ) {
+				const IndividualPanel = DFIGBlockObject.params.panels[key];
+				panels[index] = DFIGBlockObject.el( PanelBody, {
+					title: IndividualPanel.title,
+					initialOpen: IndividualPanel.initialOpen,
+					className: 'scriptless-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,
+			      RangeControl,
+			      CheckboxControl,
+			      TextareaControl
+		      } = wp.components;
+		const control = TextControl;
+		if ( 'select' === method ) {
+			return SelectControl;
+		} else if ( 'number' === method && 'number' === control_type ) {
+			return RangeControl;
+		} 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: 'displayfeaturedimagegenesis-' + key,
+			onChange: ( value ) => {
+				setAttributes( {[key]: value} );
+			}
+		};
+
+		if ( 'select' === field.method ) {
+			control.options = field.options;
+		} else if ( 'number' === field.method ) {
+			control.min = field.min;
+			control.max = field.max;
+			if ( 'number' !== field.type ) {
+				control.type = 'number';
+			} else {
+				control.initialPosition = field.min;
+			}
+		} else if ( 'checkbox' === field.method ) {
+			control.checked = attributes[key];
+		}
+
+		return control;
+	}
+
+	DFIGBlockObject.params = typeof DisplayFeaturedImageTestBlock === 'undefined' ? '' : DisplayFeaturedImageTestBlock;
+
+	if ( typeof DFIGBlockObject.params !== 'undefined' ) {
+		DFIGBlockObject.init( DFIGBlockObject.params );
+	}
+} )( wp );

includes/js/test-block.min.js

@@ -0,0 +1 @@
+!function(e,t){"use strict";const n={el:e.element.createElement};n.init=function(t){const o=e.blocks.registerBlockType,l=e.components.ServerSideRender,r=e.editor.InspectorControls;o(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:t=>{const{attributes:o,setAttributes:i}=t,s=e.element.Fragment,a=e.editor.BlockControls,c=e.editor.BlockAlignmentToolbar;return[n.el(l,{block:n.params.block,attributes:o}),n.el(s,null,n.el(a,null,n.el(c,{value:o.blockAlignment,controls:["wide","full"],onChange:e=>{i({blockAlignment:e})}}))),n.el(r,{},function(t){const o=[],l=e.components.PanelBody;return Object.keys(n.params.panels).forEach(function(r,i){if(n.params.panels.hasOwnProperty(r)){const s=n.params.panels[r];o[i]=n.el(l,{title:s.title,initialOpen:s.initialOpen,className:"scriptless-panel-"+r},function(t,o){const l=[];return Object.keys(o).forEach(function(r,i){if(o.hasOwnProperty(r)){if(-1!==["blockAlignment","className"].indexOf(r))return;const s=o[r],a=function(t,n){const{TextControl:o,SelectControl:l,RangeControl:r,CheckboxControl:i,TextareaControl:s}=e.components,a=o;return"select"===t?l:"number"===t&&"number"===n?r:"checkbox"===t?i:"textarea"===t?s:a}(s.method,s.type);l[i]=n.el(a,function(e,t,n){const{attributes:o,setAttributes:l}=n,r={label:t.label,value:o[e],className:"displayfeaturedimagegenesis-"+e,onChange:t=>{l({[e]:t})}};return"select"===t.method?r.options=t.options:"number"===t.method?(r.min=t.min,r.max=t.max,"number"!==t.type?r.type="number":r.initialPosition=t.min):"checkbox"===t.method&&(r.checked=o[e]),r}(r,s,t))}}),l}(t,s.attributes))}}),o}(t))]},save:e=>null})},n.params="undefined"==typeof DisplayFeaturedImageTestBlock?"":DisplayFeaturedImageTestBlock,void 0!==n.params&&n.init(n.params)}(wp);

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

@@ -0,0 +1,257 @@
+<?php
+/**
+ * Copyright (c) 2019 Robin Cornett
+ */
+
+/**
+ * Class ScriptlessSocialSharingOutputBlock
+ */
+class DisplayFeaturedImageGenesisOutputBlock {
+
+	/**
+	 * The block name.
+	 *
+	 * @var string
+	 */
+	protected $name = 'displayfeaturedimagegenesis/post-type';
+
+	/**
+	 * @var string
+	 */
+	protected $block = 'displayfeaturedimagegenesis-post-type';
+
+	/**
+	 * The plugin setting.
+	 * @var array
+	 */
+	protected $setting;
+
+	/**
+	 * Register our block type.
+	 */
+	public function init() {
+		$this->register_script_style();
+		register_block_type(
+			$this->name,
+			array(
+				'editor_script'   => $this->block . '-block',
+				'attributes'      => $this->fields(),
+				'render_callback' => array( $this, 'render' ),
+			)
+		);
+		add_action( 'enqueue_block_editor_assets', array( $this, 'localize' ) );
+	}
+
+	/**
+	 * Render the widget in a container div.
+	 *
+	 * @param $atts
+	 *
+	 * @return string
+	 */
+	public function render( $atts ) {
+		$atts      = wp_parse_args( $atts, include 'fields/cpt-defaults.php' );
+		$post_type = get_post_type_object( $atts['post_type'] );
+		if ( ! $post_type ) {
+			return '';
+		}
+
+		$classes = $this->get_block_classes( $atts );
+		include plugin_dir_path( dirname( __FILE__ ) ) . 'output/class-displayfeaturedimagegenesis-output-cpt.php';
+		$output = '<div class="' . implode( ' ', $classes ) . '">';
+		ob_start();
+		new DisplayFeaturedImageGenesisOutputCPT( $atts, array(), $post_type );
+		$output .= ob_get_contents();
+		ob_clean();
+		$output .= '</div>';
+
+		return $output;
+	}
+
+	/**
+	 * Get the CSS classes for the block.
+	 * @param $atts
+	 *
+	 * @return array
+	 */
+	private function get_block_classes( $atts ) {
+		array(
+			'wp-block-' . $this->block,
+		);
+		if ( ! empty( $atts['className'] ) ) {
+			$classes[] = $atts['className'];
+		}
+		if ( ! empty( $atts['blockAlignment'] ) ) {
+			$classes[] = 'align' . $atts['blockAlignment'];
+		}
+
+		return $classes;
+	}
+
+	/**
+	 * Register the block script and style.
+	 */
+	public function register_script_style() {
+		$minify  = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : ' . min';
+		$version = '3.2.0';
+		if ( ! $minify ) {
+			$version .= current_time( 'gmt' );
+		}
+		wp_register_script(
+			$this->block . '-block',
+			plugin_dir_url( dirname( __FILE__ ) ) . "js/test-block{$minify}.js",
+			array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ),
+			$version,
+			false
+		);
+	}
+
+	/**
+	 * Localize.
+	 */
+	public function localize() {
+		wp_localize_script( $this->block . '-block', 'DisplayFeaturedImageTestBlock', $this->get_localization_data() );
+	}
+
+	/**
+	 * Get the data for localizing everything.
+	 * @return array
+	 */
+	protected function get_localization_data() {
+		return array(
+			'block'       => $this->name,
+			'title'       => __( 'Display Featured Image Genesis Post Type', 'scriptless-social-sharing' ),
+			'description' => __( 'featured image.', 'scriptless-social-sharing' ),
+			'keywords'    => array(
+				__( 'image', 'scriptless-social-sharing' ),
+				__( 'featured', 'scriptless-social-sharing' ),
+			),
+			'panels'      => array(
+				'main' => array(
+					'title'       => __( 'Block Settings', 'scriptless-social-sharing' ),
+					'initialOpen' => true,
+					'attributes'  => $this->fields(),
+				),
+			),
+			'icon'        => 'format-image',
+			'category'    => 'widgets',
+		);
+	}
+
+	/**
+	 * Get the fields for the block.
+	 * @return array
+	 */
+	private function fields() {
+		$output = array();
+		foreach ( $this->get_all_fields() as $key => $value ) {
+			if ( ! empty( $value['args']['id'] ) ) {
+				$key = $value['args']['id'];
+			}
+			$output[ $key ] = $this->get_individual_field_attributes( $value );
+		}
+
+		return $output;
+	}
+
+	private function get_all_fields() {
+		$form       = new DisplayFeaturedImageGenesisWidgetsForm( $this, array() );
+		$fields     = array_merge(
+			include 'fields/cpt-post_type.php',
+			include 'fields/text.php',
+			include 'fields/image.php',
+			include 'fields/archive.php'
+		);
+		$attributes = array_merge(
+			array(
+				'blockAlignment' => array(
+					'type'    => 'string',
+					'default' => '',
+				),
+				'className'      => array(
+					'type'    => 'string',
+					'default' => '',
+				),
+				'title'          => array(
+					'type'    => 'string',
+					'default' => '',
+					'args'    => array(
+						'id'    => 'title',
+						'label' => 'Title',
+					),
+				),
+			),
+			$fields
+		);
+
+		return $attributes;
+	}
+
+	/**
+	 * Get an array of attributes for an individual field.
+	 *
+	 * @param $field
+	 *
+	 * @return array
+	 */
+	protected function get_individual_field_attributes( $field ) {
+		$method     = empty( $field['method'] ) ? 'text' : $field['method'];
+		$field_type = $this->get_field_type( $method );
+		if ( empty( $field['args']['label'] ) ) {
+			return $field;
+		}
+		$defaults   = include 'fields/cpt-defaults.php';
+		$attributes = array(
+			'type'    => $field_type,
+			'default' => $defaults[ $field['args']['id'] ],
+			'label'   => $field['args']['label'],
+			'method'  => $method,
+		);
+		if ( in_array( 'number', array( $field_type, $method ), true ) ) {
+			$attributes['min'] = $field['args']['min'];
+			$attributes['max'] = $field['args']['max'];
+		} elseif ( '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 ( 'number' === $method ) {
+			return $method;
+		}
+		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;
+	}
+}