Add JS Widgets as Shortcodes (Post Elements) with Shortcode UI (via Shortcake)

.jscsrc

@@ -1,5 +1,9 @@
 {
 	"preset": "wordpress",
+	"requireCamelCaseOrUpperCaseIdentifiers": {
+		"ignoreProperties": true,
+		"allExcept": [ "Shortcode_UI" ]
+	},
 	"excludeFiles": [
 		"**/*.min.js",
 		"**/*.jsx",

core-adapter-widgets/archives/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Archives extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-archive';
+
 	/**
 	 * WP_JS_Widget_Archives constructor.
 	 *

core-adapter-widgets/calendar/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Calendar extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-calendar';
+
 	/**
 	 * WP_JS_Widget_Calendar constructor.
 	 *

core-adapter-widgets/categories/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Categories extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-category';
+
 	/**
 	 * WP_JS_Widget_Categories constructor.
 	 *

core-adapter-widgets/meta/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Meta extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-wordpress';
+
 	/**
 	 * WP_JS_Widget_Meta constructor.
 	 *
@@ -22,7 +29,6 @@ public function __construct( JS_Widgets_Plugin $plugin, WP_Widget_Meta $adapted_
 		parent::__construct( $plugin, $adapted_widget );
 	}
 
-
 	/**
 	 * Get instance schema properties.
 	 *

core-adapter-widgets/nav_menu/class.php

@@ -14,6 +14,13 @@
  */
 class WP_JS_Widget_Nav_Menu extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-menu';
+
 	/**
 	 * WP_JS_Widget_Nav_Menu constructor.
 	 *
@@ -101,7 +108,7 @@ public function render_form_template() {
 				),
 			) );
 			?>
-			<p>
+			<p class="edit-menu" hidden>
 				<button type="button" class="button edit"><?php esc_html_e( 'Edit Menu', 'default' ) ?></button>
 			</p>
 		</div>

core-adapter-widgets/nav_menu/form.js

@@ -101,7 +101,7 @@ wp.widgets.formConstructor.nav_menu = (function( api, $ ) {
 		initialize: function initialize( properties ) {
 			var form = this;
 			wp.widgets.Form.prototype.initialize.call( form, properties );
-			_.bindAll( form, 'updateForm', 'handleEditButtonClick' );
+			_.bindAll( form, 'updateForm', 'handleEditButtonClick', 'updateEditButtonVisibility' );
 
 			if ( _.isObject( form.config.nav_menus ) && 0 === classProps.navMenuCollection.length ) {
 				_.each( form.config.nav_menus, function( name, id ) {
@@ -120,10 +120,12 @@ wp.widgets.formConstructor.nav_menu = (function( api, $ ) {
 			var form = this;
 			wp.widgets.Form.prototype.render.call( form );
 			NavMenuWidgetForm.navMenuCollection.on( 'update change', form.updateForm );
+			form.model.bind( form.updateEditButtonVisibility );
 			form.container.find( 'button.edit' ).on( 'click', form.handleEditButtonClick );
 			form.noMenusMessage = form.container.find( '.no-menus-message' );
 			form.menuSelection = form.container.find( '.menu-selection' );
 			form.updateForm();
+			form.updateEditButtonVisibility();
 		},
 
 		/**
@@ -135,6 +137,7 @@ wp.widgets.formConstructor.nav_menu = (function( api, $ ) {
 			var form = this;
 			form.container.find( 'button.edit' ).off( 'click', form.handleEditButtonClick );
 			NavMenuWidgetForm.navMenuCollection.off( 'update change', form.updateForm );
+			form.model.unbind( form.updateEditButtonVisibility );
 			form.noMenusMessage = null;
 			form.menuSelection = null;
 			wp.widgets.Form.prototype.destruct.call( form );
@@ -182,6 +185,17 @@ wp.widgets.formConstructor.nav_menu = (function( api, $ ) {
 			select.val( NavMenuWidgetForm.navMenuCollection.has( currentValue.nav_menu ) ? currentValue.nav_menu : 0 );
 			form.noMenusMessage.toggle( 0 === NavMenuWidgetForm.navMenuCollection.length );
 			form.menuSelection.toggle( 0 !== NavMenuWidgetForm.navMenuCollection.length );
+		},
+
+		/**
+		 * Update the visibility of the edit button based on whether a menu is selected.
+		 *
+		 * @returns {void}
+		 */
+		updateEditButtonVisibility: function updateEditButtonVisibility() {
+			var form = this, button;
+			button = form.container.find( '.edit-menu' );
+			button.toggle( NavMenuWidgetForm.navMenuCollection.length > 0 && form.getValue().nav_menu > 0 );
 		}
 
 	}, classProps );

core-adapter-widgets/pages/class.php

@@ -14,6 +14,13 @@ class WP_JS_Widget_Pages extends WP_Adapter_JS_Widget {
 
 	const ID_LIST_PATTERN = '\d+(,\s*\d+)*';
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-admin-page';
+
 	/**
 	 * WP_JS_Widget_Pages constructor.
 	 *

core-adapter-widgets/pages/form.js

@@ -81,8 +81,8 @@ wp.widgets.formConstructor.pages = (function( api ) {
 							excludeIds.push( id );
 						}
 					} );
+					form.model._value.exclude = excludeIds;
 				}
-				form.model._value.exclude = excludeIds;
 
 				form.syncedProperties.exclude = form.createSyncedPropertyValue( form.model, 'exclude' );
 			}

core-adapter-widgets/recent-comments/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Recent_Comments extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-admin-comments';
+
 	/**
 	 * WP_JS_Widget_Recent_Comments constructor.
 	 *

core-adapter-widgets/recent-posts/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Recent_Posts extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-admin-post';
+
 	/**
 	 * WP_JS_Widget_Recent_Posts constructor.
 	 *

core-adapter-widgets/rss/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_RSS extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-rss';
+
 	/**
 	 * WP_JS_Widget_RSS constructor.
 	 *

core-adapter-widgets/search/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Search extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-search';
+
 	/**
 	 * WP_JS_Widget_Search constructor.
 	 *

core-adapter-widgets/tag_cloud/class.php

@@ -12,6 +12,13 @@
  */
 class WP_JS_Widget_Tag_Cloud extends WP_Adapter_JS_Widget {
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-tagcloud';
+
 	/**
 	 * WP_JS_Widget_Tag_Cloud constructor.
 	 *

core-adapter-widgets/text/class.php

@@ -19,6 +19,13 @@ class WP_JS_Widget_Text extends WP_Adapter_JS_Widget {
 	 */
 	public $adapted_widget;
 
+	/**
+	 * Icon name.
+	 *
+	 * @var string
+	 */
+	public $icon_name = 'dashicons-text';
+
 	/**
 	 * Get instance schema properties.
 	 *

css/widget-form.css

@@ -60,3 +60,54 @@
 .js-widget-form-notifications-container .notice-warning.notice-alt {
 	background-color: #fff8e5;
 }
+
+.js-widget-form-shortcode-ui input[type="text"],
+.js-widget-form-shortcode-ui input[type="password"],
+.js-widget-form-shortcode-ui input[type="color"],
+.js-widget-form-shortcode-ui input[type="date"],
+.js-widget-form-shortcode-ui input[type="datetime"],
+.js-widget-form-shortcode-ui input[type="datetime-local"],
+.js-widget-form-shortcode-ui input[type="email"],
+.js-widget-form-shortcode-ui input[type="month"],
+.js-widget-form-shortcode-ui input[type="number"],
+.js-widget-form-shortcode-ui input[type="search"],
+.js-widget-form-shortcode-ui input[type="tel"],
+.js-widget-form-shortcode-ui input[type="text"],
+.js-widget-form-shortcode-ui input[type="time"],
+.js-widget-form-shortcode-ui input[type="url"],
+.js-widget-form-shortcode-ui input[type="week"],
+.js-widget-form-shortcode-ui select,
+.js-widget-form-shortcode-ui textarea {
+	width: 25em;
+	padding: 3px 5px;
+	font-size: 14px;
+}
+
+.js-widget-form-shortcode-ui input[type="checkbox"],
+.js-widget-form-shortcode-ui input[type="radio"] {
+	border: 1px solid #b4b9be;
+	color: #555;
+}
+.js-widget-form-shortcode-ui input[type="checkbox"]:focus,
+.js-widget-form-shortcode-ui input[type="radio"]:focus {
+	border-color: #5b9dd9;
+}
+.js-widget-form-shortcode-ui input[type="checkbox"] + label,
+.js-widget-form-shortcode-ui input[type="radio"] + label {
+	display: inline;
+	clear: none;
+}
+
+.js-widget-form-shortcode-ui label {
+	color: #555d66;
+}
+
+.js-widget-form-shortcode-ui .select2-container {
+	max-width: 26.92em; /* 25em * 14px = 350px => 350px / 13px = 26.92em */
+}
+
+/* Shortcake style fixes */
+.edit-shortcode-form .js-widget-form-notifications-container label {
+	clear: none;
+	display: inline;
+}

js/shortcode-ui-view-widget-form-field.js

@@ -0,0 +1,47 @@
+/* global wp, JSON, Shortcode_UI */
+/* eslint-disable strict */
+/* eslint consistent-this: [ "error", "view" ] */
+/* eslint-disable complexity */
+
+Shortcode_UI.views.widgetFormField = (function( sui ) {
+	'use strict';
+
+	/**
+	 * Widget form.
+	 *
+	 * @class
+	 */
+	return sui.views.editAttributeField.extend( {
+
+		events: {},
+
+		/**
+		 * Render.
+		 *
+		 * @return {sui.views.editAttributeField} View.
+		 */
+		render: function() {
+			var view = this, FormConstructor, instanceValue, form;
+
+			if ( ! view.shortcode.get( 'widgetType' ) || ! wp.widgets.formConstructor[ view.shortcode.get( 'widgetType' ) ] ) {
+				throw new Error( 'Unable to determine the widget type.' );
+			}
+
+			view.$el.addClass( 'js-widget-form-shortcode-ui' );
+			instanceValue = new wp.customize.Value( view.getValue() ? JSON.parse( view.getValue() ) : {} );
+			FormConstructor = wp.widgets.formConstructor[ view.shortcode.get( 'widgetType' ) ];
+			form = new FormConstructor( {
+				model: instanceValue,
+				container: view.$el
+			} );
+			instanceValue.bind( function( instanceData ) {
+				view.setValue( JSON.stringify( instanceData ) );
+			} );
+			form.render();
+
+			view.triggerCallbacks();
+			return view;
+		}
+	} );
+
+})( Shortcode_UI );