adding profile js file and refactor date/time preview

build/blocks/event-date/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '06cbe5a0c90c103f8a14');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '5b3f6595bd8408889334');

build/blocks/venue/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'cd674d27cc727af7427f');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => 'a3a00c3d5e84977f6a07');

build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-i18n'), 'version' => 'c6fce8fab64b6d9302cf');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '7e8c2e7c749537bad7ef');

build/panels.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-date', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => '6d392ba00e9ef6095b1e');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-date', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'd229da52d79c1c04a937');

build/profile.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => 'b9af77c74dcfb212b31a');

build/profile_style.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '69fc5d4edab39ad5f7b0');

build/settings.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-components', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => 'cfea6826b345be8ff710');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-components', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-i18n'), 'version' => '85b7ddf6074855040b96');

includes/core/classes/class-assets.php

@@ -177,7 +177,7 @@ function ( $key ) {
 		);
 
 		// Had to add the profile page to the check since it uses some of the same assets.
-		if ( in_array( $hook, $setting_hooks, true ) || 'profile.php' === $hook ) {
+		if ( in_array( $hook, $setting_hooks, true ) ) {
 			// Need to load block styling for some dynamic fields.
 			wp_enqueue_style( 'wp-edit-blocks' );
 
@@ -214,6 +214,20 @@ function ( $key ) {
 		);
 
 		wp_set_script_translations( 'gatherpress-admin', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
+
+		if ( 'profile.php' === $hook ) {
+			$asset = $this->get_asset_data( 'profile' );
+
+			wp_enqueue_script(
+				'gatherpress-profile',
+				$this->build . 'profile.js',
+				$asset['dependencies'],
+				$asset['version'],
+				true
+			);
+
+			wp_set_script_translations( 'gatherpress-profile', 'gatherpress', GATHERPRESS_CORE_PATH . '/languages' );
+		}
 	}
 
 	/**

includes/core/classes/class-user.php

@@ -71,9 +71,6 @@ protected function setup_hooks(): void {
 	 */
 	public function profile_fields( WP_User $user ): void {
 		$event_updates_opt_in = get_user_meta( $user->ID, 'gp-event-updates-opt-in', true );
-		$gp_date_format       = get_user_meta( $user->ID, 'gp_date_format', true );
-		$gp_time_format       = get_user_meta( $user->ID, 'gp_time_format', true );
-		$gp_timezone          = get_user_meta( $user->ID, 'gp_timezone', true );
 
 		// Checkbox is selected by default. '1' is on, '0' is off.
 		if ( '0' !== $event_updates_opt_in ) {
@@ -88,12 +85,29 @@ public function profile_fields( WP_User $user ): void {
 			true
 		);
 
+		// Render the user selected date/time format and timezone fields.
+		$gp_date_format = get_user_meta( $user->ID, 'gp_date_format', true );
+		$gp_time_format = get_user_meta( $user->ID, 'gp_time_format', true );
+		$gp_timezone    = get_user_meta( $user->ID, 'gp_timezone', true );
+		$tz_choices     = Utility::timezone_choices();
+		$date_attrs     = array(
+			'name'  => 'gp_date_format',
+			'value' => ! empty( $gp_date_format ) ? $gp_date_format : '',
+		);
+		$time_attrs     = array(
+			'name'  => 'gp_time_format',
+			'value' => ! empty( $gp_time_format ) ? $gp_time_format : '',
+		);
+
 		Utility::render_template(
 			sprintf( '%s/includes/templates/admin/user/date-time.php', GATHERPRESS_CORE_PATH ),
 			array(
 				'date_format' => $gp_date_format,
 				'time_format' => $gp_time_format,
 				'timezone'    => $gp_timezone,
+				'date_attrs'  => $date_attrs,
+				'time_attrs'  => $time_attrs,
+				'tz_choices'  => $tz_choices,
 			),
 			true
 		);

includes/templates/admin/user/date-time.php

@@ -11,18 +11,6 @@
 if ( ! isset( $timezone ) && ! isset( $date_format ) && ! isset( $time_format ) ) {
 	return;
 }
-
-$gatherpress_tz_choices = Utility::timezone_choices();
-
-$gatherpress_date_attrs = array(
-	'name'  => 'gp_date_format',
-	'value' => ! empty( $date_format ) ? $date_format : '',
-);
-
-$gatherpress_time_attrs = array(
-	'name'  => 'gp_time_format',
-	'value' => ! empty( $time_format ) ? $time_format : '',
-);
 ?>
 <div style="margin-top: 40px; margin-bottom: 30px;">
 	<h2 id="gp-user-date-time">
@@ -40,7 +28,7 @@
 					<input type="text" name="gp_date_format" id="gp_date_format" value="<?php echo esc_attr( $date_format ); ?>" />
 					<p>
 						<strong><?php esc_html_e( 'Preview', 'gatherpress' ); ?>:</strong>
-						<span data-gp_component_name="datetime-preview" data-gp_component_attrs="<?php echo esc_attr( htmlspecialchars( wp_json_encode( $gatherpress_date_attrs ), ENT_QUOTES, 'UTF-8' ) ); ?>"></span>
+						<span data-gp_component_name="datetime-preview" data-gp_component_attrs="<?php echo esc_attr( htmlspecialchars( wp_json_encode( $date_attrs ), ENT_QUOTES, 'UTF-8' ) ); ?>"></span>
 					</p>
 				</div>
 			</td>
@@ -54,7 +42,7 @@
 					<input type="text" name="gp_time_format" id="gp_time_format" value="<?php echo esc_attr( $time_format ); ?>" />
 					<p>
 						<strong><?php esc_html_e( 'Preview', 'gatherpress' ); ?>:</strong>
-						<span data-gp_component_name="datetime-preview" data-gp_component_attrs="<?php echo esc_attr( htmlspecialchars( wp_json_encode( $gatherpress_time_attrs ), ENT_QUOTES, 'UTF-8' ) ); ?>"></span>
+						<span data-gp_component_name="datetime-preview" data-gp_component_attrs="<?php echo esc_attr( htmlspecialchars( wp_json_encode( $time_attrs ), ENT_QUOTES, 'UTF-8' ) ); ?>"></span>
 					</p>
 				</div>
 			</td>
@@ -65,16 +53,16 @@
 				<select name="gp_timezone">
 					<option value="">--</option>
 					<?php
-					foreach ( $gatherpress_tz_choices as $gatherpress_location => $gatherpress_timezones ) {
-						echo esc_html( '<optgroup label="' . $gatherpress_location . '">' );
+					foreach ( $tz_choices as $gatherpress_location => $gatherpress_timezones ) {
+						echo wp_kses( '<optgroup label="' . $gatherpress_location . '">', array( 'optgroup' => array( 'label' => array() ) ) );
+
 						foreach ( $gatherpress_timezones as $gatherpress_tz => $gatherpress_name ) {
-							echo esc_html( '<option value="' . $gatherpress_tz . '"' );
-							if ( $timezone === $gatherpress_tz ) {
-								echo ' selected';
-							}
-							echo esc_html( '>' . $gatherpress_name . '</option>' );
+							echo '<option value="' . esc_attr( $gatherpress_tz ) . '"'
+							. selected( $timezone, $gatherpress_tz, false ) . '>'
+							. esc_html( $gatherpress_name ) . '</option>';
 						}
-						echo esc_html( '</optgroup>' );
+
+						echo wp_kses( '</optgroup>', array( 'optgroup' => array() ) );
 					}
 					?>
 				</select>

src/helpers/datetime.js

@@ -9,12 +9,14 @@ import moment from 'moment';
 import { select } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
+import { createRoot } from '@wordpress/element';
 
 /**
  * Internal dependencies.
  */
 import { enableSave, getFromGlobal, setToGlobal } from './globals';
 import { isEventPostType, triggerEventCommuncation } from './event';
+import DateTimePreview from '../components/DateTimePreview';
 
 /**
  * Date and time format string for use with Moment.js.
@@ -465,3 +467,33 @@ export function convertPHPToMomentFormat(format) {
 		.map((chr) => (chr in replacements ? replacements[chr] : chr))
 		.join('');
 }
+
+/**
+ * DateTime Preview Initialization
+ *
+ * This script initializes the DateTime Preview functionality for all elements
+ * with the attribute 'data-gp_component_name' set to 'datetime-preview'.
+ * It iterates through all matching elements and initializes a DateTimePreview component
+ * with the attributes provided in the 'data-gp_component_attrs' attribute.
+ *
+ * @since 1.0.0
+ */
+export function dateTimePreview() {
+	// Select all elements with the attribute 'data-gp_component_name' set to 'datetime-preview'.
+	const dateTimePreviewContainers = document.querySelectorAll(
+		`[data-gp_component_name="datetime-preview"]`
+	);
+
+	// Iterate through each matched element and initialize DateTimePreview component.
+	for (let i = 0; i < dateTimePreviewContainers.length; i++) {
+		// Parse attributes from the 'data-gp_component_attrs' attribute.
+		const attrs = JSON.parse(
+			dateTimePreviewContainers[i].dataset.gp_component_attrs
+		);
+
+		// Create a root element and render the DateTimePreview component with the parsed attributes.
+		createRoot(dateTimePreviewContainers[i]).render(
+			<DateTimePreview attrs={attrs} />
+		);
+	}
+}