Merge pull request #26 from xwp/feature/standalone-forms

Allow widget forms to work standalone, without being inside the customizer control context
xwp · Jan 8, 2017 · f261e9f · f261e9f
2 parents 32152a9 + 27ec1f7
commit f261e9f
Show file tree

Hide file tree

Showing 37 changed files with 617 additions and 391 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -14,6 +14,7 @@ env:
     - WP_VERSION=trunk WP_MULTISITE=1
 
 install:
+    - nvm install 6 && nvm use 6
     - export DEV_LIB_PATH=dev-lib
     - if [ ! -e "$DEV_LIB_PATH" ] && [ -L .travis.yml ]; then export DEV_LIB_PATH=$( dirname $( readlink .travis.yml ) ); fi
     - if [ ! -e "$DEV_LIB_PATH" ]; then git clone https://github.com/xwp/wp-dev-lib.git $DEV_LIB_PATH; fi

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
 	"name": "xwp/wp-js-widgets",
 	"description": "The next generation of widgets in Core (Widgets 3.0), embracing JS for UI and powering the Widgets REST API.",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"type": "wordpress-plugin",
 	"keywords": [ "customizer", "widgets", "rest-api" ],
 	"homepage": "https://github.com/xwp/wp-js-widgets/",

diff --git a/core-adapter-widgets/archives/class.php b/core-adapter-widgets/archives/class.php
@@ -50,25 +50,19 @@ public function get_item_schema() {
 	}
 
 	/**
-	 * Render JS Template.
+	 * Render JS template contents minus the `<script type="text/template">` wrapper.
 	 */
-	public function form_template() {
-		?>
-		<script id="tmpl-customize-widget-form-<?php echo esc_attr( $this->id_base ) ?>" type="text/template">
-			<?php
-			$this->render_title_form_field_template();
-			$this->render_form_field_template( array(
-				'name' => 'dropdown',
-				'label' => __( 'Display as dropdown', 'default' ),
-				'type' => 'checkbox',
-			) );
-			$this->render_form_field_template( array(
-				'name' => 'count',
-				'label' => __( 'Show post counts', 'default' ),
-				'type' => 'checkbox',
-			) );
-			?>
-		</script>
-		<?php
+	public function render_form_template() {
+		$this->render_title_form_field_template();
+		$this->render_form_field_template( array(
+			'name' => 'dropdown',
+			'label' => __( 'Display as dropdown', 'default' ),
+			'type' => 'checkbox',
+		) );
+		$this->render_form_field_template( array(
+			'name' => 'count',
+			'label' => __( 'Show post counts', 'default' ),
+			'type' => 'checkbox',
+		) );
 	}
 }
diff --git a/core-adapter-widgets/archives/form.js b/core-adapter-widgets/archives/form.js
@@ -3,7 +3,7 @@
 /* eslint-disable strict */
 /* eslint-disable complexity */
 
-wp.customize.Widgets.formConstructor.archives = (function( api ) {
+wp.widgets.formConstructor.archives = (function() {
 	'use strict';
 
 	var ArchivesWidgetForm;
@@ -13,11 +13,13 @@ wp.customize.Widgets.formConstructor.archives = (function( api ) {
 	 *
 	 * @constructor
 	 */
-	ArchivesWidgetForm = api.Widgets.Form.extend( {} );
+	ArchivesWidgetForm = wp.widgets.Form.extend( {
+		id_base: 'archives'
+	} );
 
 	if ( 'undefined' !== typeof module ) {
 		module.exports = ArchivesWidgetForm;
 	}
 	return ArchivesWidgetForm;
 
-})( wp.customize );
+})();
diff --git a/core-adapter-widgets/calendar/form.js b/core-adapter-widgets/calendar/form.js
@@ -3,7 +3,7 @@
 /* eslint-disable strict */
 /* eslint-disable complexity */
 
-wp.customize.Widgets.formConstructor.calendar = (function() {
+wp.widgets.formConstructor.calendar = (function() {
 	'use strict';
 
 	var CalendarWidgetForm;
@@ -13,7 +13,7 @@ wp.customize.Widgets.formConstructor.calendar = (function() {
 	 *
 	 * @constructor
 	 */
-	CalendarWidgetForm = wp.customize.Widgets.Form.extend( {} );
+	CalendarWidgetForm = wp.widgets.Form.extend( {} );
 
 	if ( 'undefined' !== typeof module ) {
 		module.exports = CalendarWidgetForm;

diff --git a/core-adapter-widgets/categories/class.php b/core-adapter-widgets/categories/class.php
@@ -188,33 +188,27 @@ public function get_rest_response_links( $response, $request, $controller ) {
 	}
 
 	/**
-	 * Render JS Template.
+	 * Render JS template contents minus the `<script type="text/template">` wrapper.
 	 */
-	public function form_template() {
+	public function render_form_template() {
 		$item_schema = $this->get_item_schema();
-		?>
-		<script id="tmpl-customize-widget-form-<?php echo esc_attr( $this->id_base ) ?>" type="text/template">
-			<?php
-			$this->render_title_form_field_template( array(
-				'placeholder' => $item_schema['title']['properties']['raw']['default'],
-			) );
-			$this->render_form_field_template( array(
-				'name' => 'dropdown',
-				'label' => __( 'Display as dropdown', 'default' ),
-				'type' => 'checkbox',
-			) );
-			$this->render_form_field_template( array(
-				'name' => 'count',
-				'label' => __( 'Show post counts', 'default' ),
-				'type' => 'checkbox',
-			) );
-			$this->render_form_field_template( array(
-				'name' => 'hierarchical',
-				'label' => __( 'Show hierarchy', 'default' ),
-				'type' => 'checkbox',
-			) );
-			?>
-		</script>
-		<?php
+		$this->render_title_form_field_template( array(
+			'placeholder' => $item_schema['title']['properties']['raw']['default'],
+		) );
+		$this->render_form_field_template( array(
+			'name' => 'dropdown',
+			'label' => __( 'Display as dropdown', 'default' ),
+			'type' => 'checkbox',
+		) );
+		$this->render_form_field_template( array(
+			'name' => 'count',
+			'label' => __( 'Show post counts', 'default' ),
+			'type' => 'checkbox',
+		) );
+		$this->render_form_field_template( array(
+			'name' => 'hierarchical',
+			'label' => __( 'Show hierarchy', 'default' ),
+			'type' => 'checkbox',
+		) );
 	}
 }
diff --git a/core-adapter-widgets/categories/form.js b/core-adapter-widgets/categories/form.js
@@ -3,7 +3,7 @@
 /* eslint-disable strict */
 /* eslint-disable complexity */
 
-wp.customize.Widgets.formConstructor.categories = (function( api ) {
+wp.widgets.formConstructor.categories = (function() {
 	'use strict';
 
 	var CategoriesWidgetForm;
@@ -13,11 +13,13 @@ wp.customize.Widgets.formConstructor.categories = (function( api ) {
 	 *
 	 * @constructor
 	 */
-	CategoriesWidgetForm = api.Widgets.Form.extend( {} );
+	CategoriesWidgetForm = wp.widgets.Form.extend( {
+		id_base: 'categories'
+	} );
 
 	if ( 'undefined' !== typeof module ) {
 		module.exports = CategoriesWidgetForm;
 	}
 	return CategoriesWidgetForm;
 
-})( wp.customize );
+})();
diff --git a/core-adapter-widgets/meta/form.js b/core-adapter-widgets/meta/form.js
@@ -3,7 +3,7 @@
 /* eslint-disable strict */
 /* eslint-disable complexity */
 
-wp.customize.Widgets.formConstructor.meta = (function() {
+wp.widgets.formConstructor.meta = (function() {
 	'use strict';
 
 	var MetaWidgetForm;
@@ -13,7 +13,7 @@ wp.customize.Widgets.formConstructor.meta = (function() {
 	 *
 	 * @constructor
 	 */
-	MetaWidgetForm = wp.customize.Widgets.Form.extend( {} );
+	MetaWidgetForm = wp.widgets.Form.extend( {} );
 
 	if ( 'undefined' !== typeof module ) {
 		module.exports = MetaWidgetForm;

diff --git a/core-adapter-widgets/nav_menu/class.php b/core-adapter-widgets/nav_menu/class.php
@@ -45,34 +45,32 @@ public function get_item_schema() {
 	}
 
 	/**
-	 * Render JS Template.
+	 * Render JS template contents minus the `<script type="text/template">` wrapper.
 	 */
-	public function form_template() {
+	public function render_form_template() {
+		$this->render_title_form_field_template();
 		?>
-		<script id="tmpl-customize-widget-form-<?php echo esc_attr( $this->id_base ) ?>" type="text/template">
+		<div class="no-menus-message">
+			<p><?php
+			/* translators: %s is javascript link to nav_menus panel */
+			echo sprintf( __( 'No menus have been created yet. <a href="%s">Create some</a>.', 'default' ), esc_attr( 'javascript: wp.customize.panel( "nav_menus" ).focus();' ) );
+			?></p>
+		</div>
+		<div class="menu-selection">
 			<?php
-			$this->render_title_form_field_template();
+			$this->render_form_field_template( array(
+				'name' => 'nav_menu',
+				'label' => __( 'Select Menu:', 'default' ),
+				'type' => 'select',
+				'choices' => array(
+					'0' => html_entity_decode( __( '&mdash; Select &mdash;', 'default' ), ENT_QUOTES, 'utf-8' ),
+				),
+			) );
 			?>
-
-			<div class="no-menus-message">
-				<p><?php echo sprintf( __( 'No menus have been created yet. <a href="%s">Create some</a>.', 'default' ), esc_attr( 'javascript: wp.customize.panel( "nav_menus" ).focus();' ) ); ?></p>
-			</div>
-			<div class="menu-selection">
-				<?php
-				$this->render_form_field_template( array(
-					'name' => 'nav_menu',
-					'label' => __( 'Select Menu:', 'default' ),
-					'type' => 'select',
-					'choices' => array(
-						'0' => html_entity_decode( __( '&mdash; Select &mdash;', 'default' ), ENT_QUOTES, 'utf-8' ),
-					),
-				) );
-				?>
-				<p>
-					<button type="button" class="button edit"><?php esc_html_e( 'Edit Menu', 'default' ) ?></button>
-				</p>
-			</div>
-		</script>
+			<p>
+				<button type="button" class="button edit"><?php esc_html_e( 'Edit Menu', 'default' ) ?></button>
+			</p>
+		</div>
 		<?php
 	}
 }
diff --git a/core-adapter-widgets/nav_menu/form.js b/core-adapter-widgets/nav_menu/form.js
@@ -13,7 +13,7 @@
  * https://github.com/xwp/wordpress-develop/blob/1aec30fba8201b6d8a76cc64b16c96f2f4d6fe4f/src/wp-admin/js/customize-nav-menus.js#L2895-L2906
  * https://github.com/xwp/wordpress-develop/blob/1aec30fba8201b6d8a76cc64b16c96f2f4d6fe4f/src/wp-admin/js/customize-nav-menus.js#L2919-L2929
  */
-wp.customize.Widgets.formConstructor.nav_menu = (function( api, $ ) {
+wp.widgets.formConstructor.nav_menu = (function( api, $ ) {
 	'use strict';
 
 	var NavMenuWidgetForm, classProps = {};
@@ -89,7 +89,7 @@ wp.customize.Widgets.formConstructor.nav_menu = (function( api, $ ) {
 	 *
 	 * @constructor
 	 */
-	NavMenuWidgetForm = api.Widgets.Form.extend( {
+	NavMenuWidgetForm = wp.widgets.Form.extend( {
 
 		/**
 		 * Initialize.
@@ -99,7 +99,7 @@ wp.customize.Widgets.formConstructor.nav_menu = (function( api, $ ) {
 		 */
 		initialize: function initialize( properties ) {
 			var form = this;
-			api.Widgets.Form.prototype.initialize.call( form, properties );
+			wp.widgets.Form.prototype.initialize.call( form, properties );
 			_.bindAll( form, 'updateForm', 'handleEditButtonClick' );
 		},
 
@@ -110,7 +110,7 @@ wp.customize.Widgets.formConstructor.nav_menu = (function( api, $ ) {
 		 */
 		render: function render() {
 			var form = this;
-			api.Widgets.Form.prototype.render.call( form );
+			wp.widgets.Form.prototype.render.call( form );
 			NavMenuWidgetForm.navMenuCollection.on( 'update change', form.updateForm );
 			form.container.find( 'button.edit' ).on( 'click', form.handleEditButtonClick );
 			form.noMenusMessage = form.container.find( '.no-menus-message' );
@@ -129,7 +129,7 @@ wp.customize.Widgets.formConstructor.nav_menu = (function( api, $ ) {
 			NavMenuWidgetForm.navMenuCollection.off( 'update change', form.updateForm );
 			form.noMenusMessage = null;
 			form.menuSelection = null;
-			api.Widgets.Form.prototype.destruct.call( form );
+			wp.widgets.Form.prototype.destruct.call( form );
 		},
 
 		/**