Add post date control and preview

css/wp-customize-post-date-control.css

@@ -0,0 +1,3 @@
+.customize-control-post_date {
+	background: #f00;
+}

js/customize-post-section.js

@@ -255,6 +255,7 @@
 			if ( postTypeObj.supports.author ) {
 				section.addAuthorControl();
 			}
+			section.addPostDateControl();
 		},
 
 		/**
@@ -479,6 +480,63 @@
 			return control;
 		},
 
+		/**
+		 * Add post date control.
+		 *
+		 * @returns {wp.customize.Control} Added control.
+		 */
+		addPostDateControl: function() {
+			var section = this, control, setting = api( section.id ), postData, date, dateArray = {};
+
+			control = new api.controlConstructor.dynamic( section.id + '[post_date]', {
+				params: {
+					section: section.id,
+					priority: 21,
+					label: api.Posts.data.l10n.fieldPostDateLabel,
+					active: true,
+					settings: {
+						'default': setting.id
+					},
+					type: 'post_date',
+					setting_property: 'post_date_gmt'
+				}
+			} );
+
+			postData = _.clone( control.setting.get() );
+			date = new Date( postData.post_date_gmt );
+			dateArray.date = date.getDate().toString();
+			dateArray.month = ( date.getMonth() + 1 );
+			if ( dateArray.month <= 9 ) {
+				dateArray.month = '0' + dateArray.month;
+			}
+			dateArray.year = date.getFullYear().toString();
+			dateArray.hour = date.getHours().toString();
+			dateArray.min = date.getMinutes().toString();
+			control.params.date_data = dateArray;
+
+			control.deferred.embedded.done( function() {
+				_.each( control.params.date_data, function( val, type ) {
+					var input = control.container.find( '.date-input.' + type );
+					input.val( val );
+				} );
+			} );
+
+			// Override preview trying to de-activate control not present in preview context. See WP Trac #37270.
+			control.active.validate = function() {
+				return true;
+			};
+
+			// Register.
+			section.postFieldControls.post_date_gmt = control;
+			api.control.add( control.id, control );
+
+			if ( control.notifications ) {
+				control.notifications.add = section.addPostFieldControlNotification;
+				control.notifications.setting_property = control.params.setting_property;
+			}
+			return control;
+		},
+
 		/**
 		 * Add post content control.
 		 *

php/class-customize-posts-plugin.php

@@ -314,5 +314,10 @@ public function register_styles( WP_Styles $wp_styles ) {
 		$src = plugins_url( 'css/edit-post-preview-customize' . $suffix, dirname( __FILE__ ) );
 		$deps = array( 'customize-controls' );
 		$wp_styles->add( $handle, $src, $deps, $this->version );
+
+		$handle = 'wp-customize-post-date-control';
+		$src = plugins_url( 'css/wp-customize-post-date-control' . $suffix, dirname( __FILE__ ) );
+		$deps = array();
+		$wp_styles->add( $handle, $src, $deps, $this->version );
 	}
 }

php/class-wp-customize-post-date-control.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * Customize Post Date Control Class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ */
+
+
+/**
+ * Class WP_Customize_Post_Date_Control
+ */
+class WP_Customize_Post_Date_Control extends WP_Customize_Dynamic_Control {
+
+	/**
+	 * Type of control, used by JS.
+	 *
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'post_date';
+
+	/**
+	 * Get the data to export to the client via JSON.
+	 *
+	 * @return array Array of parameters passed to the JavaScript.
+	 */
+	public function json() {
+		$exported = parent::json();
+		$exported['month_choices'] = $this->get_month_choices();
+		$exported['date_inputs'] = array(
+			'month',
+			'date',
+			'year',
+			'hour',
+			'min',
+		);
+		return $exported;
+	}
+
+	/**
+	 * Render the Underscore template for this control.
+	 *
+	 * @access protected
+	 * @codeCoverageIgnore
+	 */
+	protected function content_template() {
+		$data = $this->json();
+		?>
+		<#
+			_.defaults( data, <?php echo wp_json_encode( $data ) ?> );
+			data.input_id = 'input-' + String( Math.random() );
+		#>
+		<span class="customize-control-title"><label for="{{ data.input_id }}">{{ data.label }}</label></span>
+		<# if ( data.description ) { #>
+			<span class="description customize-control-description">{{ data.description }}</span>
+		<# } #>
+
+		<# _.each( data.date_inputs, function( type ) { #>
+			<# if ( 'month' === type  ) { #>
+				<select class="date-input {{ type }}">
+					<# _.each( data.month_choices, function( choice ) { #>
+						<#
+							if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+								text = choice.text;
+								value = choice.value;
+							}
+						#>
+						<option value="{{ value }}">{{ text }}</option>
+					<# } ); #>
+				</select>
+			<# } else { #>
+				<input
+					type="text"
+					class="date-input {{ type }}"
+					value=""
+					/>
+			<# } #>
+		<# }); #>
+		<input
+			id="{{ data.input_id }}"
+			type="text"
+			<# _.each( data.input_attrs, function( value, key ) { #>
+				{{{ key }}}="{{ value }}"
+			<# } ) #>
+			<# if ( data.setting_property ) { #>
+				data-customize-setting-property-link="{{ data.setting_property }}"
+			<# } #>
+			/>
+		<?php
+	}
+
+	/**
+	 * Generate options for the month Select.
+	 *
+	 * Based on touch_time().
+	 *
+	 * @see touch_time()
+	 *
+	 * @return array
+	 */
+	public function get_month_choices() {
+		global $wp_locale;
+		$months = array();
+		for ( $i = 1; $i < 13; $i = $i + 1 ) {
+			$month_number = zeroise( $i, 2 );
+			$month_text = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
+
+			/* translators: 1: month number (01, 02, etc.), 2: month abbreviation */
+			$months[ $i ]['text'] = sprintf( __( '%1$s-%2$s', 'customize-posts' ), $month_number, $month_text );
+			$months[ $i ]['value'] = $month_number;
+		}
+		return $months;
+	}
+}

php/class-wp-customize-posts-preview.php

@@ -688,6 +688,9 @@ public function get_post_field_partial_schema( $field_id = '' ) {
 			'post_status' => array(
 				'fallback_refresh' => true,
 			),
+			'post_date' => array(
+				'fallback_refresh' => true,
+			),
 			'post_content' => array(
 				'selector' => '.entry-content',
 			),

php/class-wp-customize-posts.php

@@ -80,6 +80,7 @@ public function __construct( WP_Customize_Manager $manager ) {
 		require_once dirname( __FILE__ ) . '/class-wp-customize-post-discussion-fields-control.php';
 		require_once dirname( __FILE__ ) . '/class-wp-customize-post-setting.php';
 		require_once dirname( __FILE__ ) . '/class-wp-customize-postmeta-setting.php';
+		require_once dirname( __FILE__ ) . '/class-wp-customize-post-date-control.php';
 		require_once ABSPATH . WPINC . '/customize/class-wp-customize-partial.php';
 		require_once dirname( __FILE__ ) . '/class-wp-customize-post-field-partial.php';
 
@@ -285,6 +286,7 @@ public function register_constructs() {
 		$this->manager->register_section_type( 'WP_Customize_Post_Section' );
 		$this->manager->register_control_type( 'WP_Customize_Dynamic_Control' );
 		$this->manager->register_control_type( 'WP_Customize_Post_Discussion_Fields_Control' );
+		$this->manager->register_control_type( 'WP_Customize_Post_Date_Control' );
 
 		$panel_priority = 900; // Before widgets.
 
@@ -580,6 +582,7 @@ public function enqueue_scripts() {
 				'fieldTitleLabel' => __( 'Title', 'customize-posts' ),
 				'fieldSlugLabel' => __( 'Slug', 'customize-posts' ),
 				'fieldPostStatusLabel' => __( 'Post Status', 'customize-posts' ),
+				'fieldPostDateLabel' => __( 'Post Date', 'customize-posts' ),
 				'fieldContentLabel' => __( 'Content', 'customize-posts' ),
 				'fieldExcerptLabel' => __( 'Excerpt', 'customize-posts' ),
 				'fieldDiscussionLabel' => __( 'Discussion', 'customize-posts' ),

tests/php/test-class-wp-customize-post-date-control.php

@@ -0,0 +1,136 @@
+<?php
+/**
+ * Tests for Test_WP_Customize_Post_Date_Control.
+ *
+ * @package WordPress
+ * @subpackage Customize
+ */
+
+/**
+ * Class Test_WP_Customize_Post_Date_Control
+ */
+class Test_WP_Customize_Post_Date_Control extends WP_UnitTestCase {
+
+	/**
+	 * Customize Manager instance.
+	 *
+	 * @var WP_Customize_Manager
+	 */
+	public $wp_customize;
+
+	/**
+	 * Component.
+	 *
+	 * @var WP_Customize_Posts
+	 */
+	public $posts;
+
+	/**
+	 * Setup.
+	 *
+	 * @inheritdoc
+	 */
+	public function setUp() {
+		parent::setUp();
+		require_once( ABSPATH . WPINC . '/class-wp-customize-manager.php' );
+		$GLOBALS['wp_customize'] = new WP_Customize_Manager();
+		$this->wp_customize = $GLOBALS['wp_customize'];
+		wp_set_current_user( self::factory()->user->create( array( 'role' => 'administrator' ) ) );
+		$this->posts = new WP_Customize_Posts( $this->wp_customize );
+	}
+
+	/**
+	 * Teardown.
+	 *
+	 * @inheritdoc
+	 */
+	function tearDown() {
+		$this->wp_customize = null;
+		$this->posts = null;
+		unset( $GLOBALS['wp_customize'] );
+		unset( $GLOBALS['wp_scripts'] );
+		unset( $_REQUEST['nonce'] );
+		unset( $_REQUEST['customize_preview_post_nonce'] );
+		unset( $_REQUEST['wp_customize'] );
+		unset( $_GET['previewed_post'] );
+		parent::tearDown();
+	}
+
+	/**
+	 * Do Customizer boot actions.
+	 */
+	function do_customize_boot_actions() {
+		// Remove actions that call add_theme_support( 'title-tag' ).
+		remove_action( 'after_setup_theme', 'twentyfifteen_setup' );
+		remove_action( 'after_setup_theme', 'twentysixteen_setup' );
+
+		$_SERVER['REQUEST_METHOD'] = 'POST';
+		$_POST['customized'] = '';
+		do_action( 'setup_theme' );
+		$_REQUEST['nonce'] = wp_create_nonce( 'preview-customize_' . $this->wp_customize->theme()->get_stylesheet() );
+		$_REQUEST['customize_preview_post_nonce'] = wp_create_nonce( 'customize_preview_post' );
+		do_action( 'after_setup_theme' );
+		do_action( 'customize_register', $this->wp_customize );
+		$this->wp_customize->customize_preview_init();
+		do_action( 'wp', $GLOBALS['wp'] );
+		$_REQUEST['wp_customize'] = 'on';
+		$_GET['previewed_post'] = 123;
+	}
+
+	/**
+	 * Creates the dynamic control.
+	 *
+	 * @param int $setting_id The setting ID.
+	 */
+	public function control( $setting_id ) {
+		$args = array(
+			'label'            => 'Heading Text',
+			'section'          => $setting_id,
+			'settings'         => $setting_id,
+			'priority'         => 1,
+			'field_type'       => 'post_date',
+			'setting_property' => 'post_date',
+			'input_attrs'      => array( 'data-test' => 'value-test' ),
+		);
+		return new WP_Customize_Post_Date_Control( $this->wp_customize, 'dynamic_control_id', $args );
+	}
+
+	/**
+	 * Filter to register a setting, section, & control.
+	 */
+	public function customize_register() {
+		$setting_id = 'post[post][123]';
+
+		$this->wp_customize->add_setting( $setting_id );
+
+		$setting = new WP_Customize_Post_Section( $this->wp_customize, $setting_id, array(
+			'panel' => 'posts[post]',
+			'post_setting' => $this->wp_customize->get_setting( $setting_id ),
+			'priority' => 1,
+		) );
+		$this->wp_customize->add_section( $setting );
+
+		$control = $this->control( $setting_id );
+		$this->wp_customize->add_control( $control );
+	}
+
+	/**
+	 * Test export data to JS.
+	 *
+	 * @see WP_Customize_Dynamic_Control::json()
+	 */
+	public function test_json() {
+		add_action( 'customize_register', array( $this, 'customize_register' ), 15 );
+		$this->do_customize_boot_actions();
+
+		$control = $this->control( 'post[post][123]' );
+		$json = $control->json();
+
+		$this->assertArrayHasKey( 'input_attrs', $json );
+		$this->assertArrayHasKey( 'field_type', $json );
+		$this->assertArrayHasKey( 'setting_property', $json );
+		$this->assertEquals( array( 'data-test' => 'value-test' ), $json['input_attrs'] );
+		$this->assertEquals( 'post_date', $json['field_type'] );
+		$this->assertEquals( 'post_date', $json['setting_property'] );
+	}
+}