diff --git a/includes/class-displayfeaturedimagegenesis.php b/includes/class-displayfeaturedimagegenesis.php index 82fb952..5735ef6 100644 --- a/includes/class-displayfeaturedimagegenesis.php +++ b/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(); } /** diff --git a/includes/js/test-block.js b/includes/js/test-block.js new file mode 100644 index 0000000..44a97c3 --- /dev/null +++ b/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 ); diff --git a/includes/js/test-block.min.js b/includes/js/test-block.min.js new file mode 100644 index 0000000..34bbd44 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/includes/widgets/class-displayfeaturedimagegenesis-output-block.php b/includes/widgets/class-displayfeaturedimagegenesis-output-block.php new file mode 100644 index 0000000..8139b21 --- /dev/null +++ b/includes/widgets/class-displayfeaturedimagegenesis-output-block.php @@ -0,0 +1,257 @@ +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 = '
'; + ob_start(); + new DisplayFeaturedImageGenesisOutputCPT( $atts, array(), $post_type ); + $output .= ob_get_contents(); + ob_clean(); + $output .= '
'; + + 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; + } +}