Merge pull request #442 from GatherPress/GP-440

Added format setting and preview. Small cleanup.

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '8971af5213c3ce99a56f');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '1fdfa291702df7b46fc4');

build/blocks/online-event/online-event.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'b2c615604970c9e217f0');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'a454bb9e55f5bb83561a');

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' => '69bc21b84d953da65e39');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'ffe5332c7582845e05d6');

build/blocks/venue/venue.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '06e57454c588384e1412');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '089782d17739b6f22dc9');

build/settings.asset.php

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

includes/core/classes/class-event.php

@@ -236,12 +236,17 @@ public static function get_taxonomy_registration_args(): array {
 	 * @return string The formatted display date and time or an em dash if not available.
 	 */
 	public function get_display_datetime(): string {
+		$settings    = Settings::get_instance();
+		$date_format = $settings->get_value( 'general', 'formatting', 'date_format' );
+		$time_format = $settings->get_value( 'general', 'formatting', 'time_format' );
+		$timezone    = $settings->get_value( 'general', 'formatting', 'show_timezone' ) ? ' T' : '';
+
 		if ( $this->is_same_date() ) {
-			$start = $this->get_datetime_start( 'l, F j, Y g:i A' );
-			$end   = $this->get_datetime_end( 'g:i A T' );
+			$start = $this->get_datetime_start( $date_format . ' ' . $time_format );
+			$end   = $this->get_datetime_end( $time_format . $timezone );
 		} else {
-			$start = $this->get_datetime_start( 'l, F j, Y, g:i A' );
-			$end   = $this->get_datetime_end( 'l, F j, Y, g:i A T' );
+			$start = $this->get_datetime_start( $date_format . ', ' . $time_format );
+			$end   = $this->get_datetime_end( $date_format . ', ' . $time_format . $timezone );
 		}
 
 		if ( ! empty( $start ) && ! empty( $end ) ) {

includes/core/classes/class-rsvp.php

@@ -79,7 +79,7 @@ class Rsvp {
 	 */
 	public function __construct( int $post_id ) {
 		$this->event               = get_post( $post_id );
-		$this->max_attending_limit = Settings::get_instance()->get_value( 'gp_general', 'general', 'max_attending_limit' );
+		$this->max_attending_limit = Settings::get_instance()->get_value( 'general', 'general', 'max_attending_limit' );
 	}
 
 	/**

includes/core/classes/class-settings.php

@@ -88,6 +88,7 @@ protected function setup_hooks(): void {
 		add_action( 'admin_head', array( $this, 'remove_sub_options' ) );
 		add_action( 'admin_init', array( $this, 'register_settings' ) );
 		add_action( 'gatherpress_settings_section', array( $this, 'render_settings_form' ) );
+		add_action( 'gatherpress_text_after', array( $this, 'datetime_preview' ), 10, 2 );
 
 		add_filter( 'submenu_file', array( $this, 'select_menu' ) );
 	}
@@ -413,8 +414,9 @@ public function autocomplete( string $sub_page, string $section, string $option,
 	 * @return mixed The value of the option or its default value.
 	 */
 	public function get_value( string $sub_page, string $section = '', string $option = '' ) {
-		$options = $this->get_options( $sub_page );
-		$default = $this->get_default_value( $sub_page, $section, $option );
+		$sub_page = Utility::prefix_key( $sub_page );
+		$options  = $this->get_options( $sub_page );
+		$default  = $this->get_default_value( $sub_page, $section, $option );
 
 		return (
 			isset( $options[ $section ][ $option ] )
@@ -610,4 +612,32 @@ public function select_menu( $submenu ): string {
 		return (string) $submenu;
 	}
 
+	/**
+	 * Display a preview of the formatted datetime based on the specified name and value.
+	 *
+	 * This method is used to display a preview of the formatted datetime based on the specified
+	 * name and value.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string $name  The name of the datetime format option.
+	 * @param string $value The value of the datetime format option.
+	 * @return void
+	 */
+	public function datetime_preview( string $name, string $value ): void {
+		if (
+			'gp_general[formatting][date_format]' === $name ||
+			'gp_general[formatting][time_format]' === $name
+		) {
+			Utility::render_template(
+				sprintf( '%s/includes/templates/admin/settings/partials/datetime-preview.php', GATHERPRESS_CORE_PATH ),
+				array(
+					'name'  => $name,
+					'value' => $value,
+				),
+				true
+			);
+		}
+	}
+
 }

includes/core/classes/class-setup.php

@@ -624,7 +624,7 @@ public function sortable_columns( array $columns ): array {
 	 */
 	public function get_the_event_date( $the_date ): string {
 		$settings       = Settings::get_instance();
-		$use_event_date = $settings->get_value( 'gp_general', 'general', 'post_or_event_date' );
+		$use_event_date = $settings->get_value( 'general', 'general', 'post_or_event_date' );
 
 		// Check if the post is of the 'Event' post type and if event date should be used.
 		if ( Event::POST_TYPE !== get_post_type() || 1 !== intval( $use_event_date ) ) {

includes/core/classes/class-utility.php

@@ -63,7 +63,11 @@ public static function render_template( string $path, array $variables = array()
 	 * @return string The key with the 'gp_' prefix.
 	 */
 	public static function prefix_key( string $key ): string {
-		return sprintf( 'gp_%s', $key );
+		if ( 0 !== strpos( $key, 'gp_' ) ) {
+			$key = sprintf( 'gp_%s', $key );
+		}
+
+		return $key;
 	}
 
 	/**

includes/core/classes/settings/class-general.php

@@ -57,7 +57,7 @@ protected function __construct() {
 	 */
 	protected function get_section(): array {
 		return array(
-			'general' => array(
+			'general'    => array(
 				'name'        => __( 'General Settings', 'gatherpress' ),
 				'description' => __(
 					'GatherPress allows you to set event dates to reflect either the post date or event date. Default: event date.',
@@ -91,7 +91,51 @@ protected function get_section(): array {
 					),
 				),
 			),
-			'pages'   => array(
+			'formatting' => array(
+				'name'        => __( 'Date & Time Formatting', 'gatherpress' ),
+				'description' => __( 'For more information read the <a href="https://wordpress.org/documentation/article/customize-date-and-time-format/">Documentation on date and time formatting</a>.', 'gatherpress' ),
+				'options'     => array(
+					'date_format'   => array(
+						'labels' => array(
+							'name' => __( 'Date Format', 'gatherpress' ),
+						),
+						'field'  => array(
+							'label'   => __( 'Format of date for scheduled events.', 'gatherpress' ),
+							'type'    => 'text',
+							'size'    => 'regular',
+							'options' => array(
+								'default' => 'l, F j, Y',
+							),
+						),
+					),
+					'time_format'   => array(
+						'labels' => array(
+							'name' => __( 'Time Format', 'gatherpress' ),
+						),
+						'field'  => array(
+							'label'   => __( 'Format of time for scheduled events.', 'gatherpress' ),
+							'type'    => 'text',
+							'size'    => 'regular',
+							'options' => array(
+								'default' => 'g:i A',
+							),
+						),
+					),
+					'show_timezone' => array(
+						'labels' => array(
+							'name' => __( 'Show Timezone', 'gatherpress' ),
+						),
+						'field'  => array(
+							'label'   => __( 'Display the timezone for scheduled events.', 'gatherpress' ),
+							'type'    => 'checkbox',
+							'options' => array(
+								'default' => '1',
+							),
+						),
+					),
+				),
+			),
+			'pages'      => array(
 				'name'        => __( 'Event Archive Pages', 'gatherpress' ),
 				'description' => __( 'GatherPress allows you to set event archives to pages you have created.', 'gatherpress' ),
 				'options'     => array(

includes/templates/admin/settings/fields/autocomplete.php

@@ -29,6 +29,6 @@
 <?php
 if ( ! empty( $description ) ) {
 	?>
-	<p class="description"><?php echo esc_html( $description ); ?></p>
+	<p class="description"><?php echo wp_kses_post( $description ); ?></p>
 	<?php
 }

includes/templates/admin/settings/fields/checkbox.php

@@ -25,6 +25,6 @@
 <?php
 if ( ! empty( $description ) ) {
 	?>
-	<p class="description"><?php echo esc_html( $description ); ?></p>
+	<p class="description"><?php echo wp_kses_post( $description ); ?></p>
 	<?php
 }

includes/templates/admin/settings/fields/number.php

@@ -27,7 +27,7 @@
 	<?php
 	if ( ! empty( $description ) ) {
 		?>
-		<p class="description"><?php echo esc_html( $description ); ?></p>
+		<p class="description"><?php echo wp_kses_post( $description ); ?></p>
 		<?php
 	}
 	?>

includes/templates/admin/settings/fields/text.php

@@ -27,8 +27,10 @@
 	<?php
 	if ( ! empty( $description ) ) {
 		?>
-		<p class="description"><?php echo esc_html( $description ); ?></p>
+		<p class="description"><?php echo wp_kses_post( $description ); ?></p>
 		<?php
 	}
+
+	do_action( 'gatherpress_text_after', $name, $value );
 	?>
 </div>

includes/templates/admin/settings/partials/datetime-preview.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Render a preview of the given datetime value.
+ *
+ * @package GatherPress\Core
+ * @since 1.0.0
+ *
+ * @param string $name  The name parameter.
+ * @param string $value The value parameter representing a datetime.
+ */
+
+if ( ! isset( $name, $value ) ) {
+	return;
+}
+
+$gatherpress_component_attrs = array(
+	'name'  => $name,
+	'value' => ! empty( $value ) ? $value : '',
+);
+?>
+<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_component_attrs ), ENT_QUOTES, 'UTF-8' ) ); ?>"></span>
+</p>

src/components/DateTimePreview.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies.
+ */
+import { format } from '@wordpress/date';
+import { useState } from '@wordpress/element';
+
+const DateTimePreview = (props) => {
+	const { name, value } = props.attrs;
+	const [dateTimeFormat, setDateTimeFormat] = useState(value);
+
+	const input = document.querySelector(`[name="${name}"]`);
+
+	input.addEventListener(
+		'input',
+		(e) => {
+			setDateTimeFormat(e.target.value);
+		},
+		{ once: true }
+	);
+
+	return <>{dateTimeFormat && format(dateTimeFormat)}</>;
+};
+
+export default DateTimePreview;

src/settings/index.js

@@ -7,7 +7,11 @@ import { createRoot } from '@wordpress/element';
  * Internal dependencies.
  */
 import Autocomplete from '../components/Autocomplete';
+import DateTimePreview from '../components/DateTimePreview';
 
+/**
+ * Autocomplete.
+ */
 const autocompleteContainers = document.querySelectorAll(
 	`[data-gp_component_name="autocomplete"]`
 );
@@ -21,3 +25,20 @@ for (let i = 0; i < autocompleteContainers.length; i++) {
 		<Autocomplete attrs={attrs} />
 	);
 }
+
+/**
+ * DateTime Preview
+ */
+const dateTimePreviewContainers = document.querySelectorAll(
+	`[data-gp_component_name="datetime-preview"]`
+);
+
+for (let i = 0; i < dateTimePreviewContainers.length; i++) {
+	const attrs = JSON.parse(
+		dateTimePreviewContainers[i].dataset.gp_component_attrs
+	);
+
+	createRoot(dateTimePreviewContainers[i]).render(
+		<DateTimePreview attrs={attrs} />
+	);
+}

test/unit/php/includes/core/classes/class-test-utility.php

@@ -66,7 +66,16 @@ public function test_render_template(): void {
 	 * @return void
 	 */
 	public function test_prefix_key(): void {
-		$this->assertSame( 'gp_unittest', Utility::prefix_key( 'unittest' ) );
+		$this->assertSame(
+			'gp_unittest',
+			Utility::prefix_key( 'unittest' ),
+			'Assert failed that gp_ prefix is applied.'
+		);
+		$this->assertSame(
+			'gp_unittest',
+			Utility::prefix_key( 'gp_unittest' ),
+			'Assert failed that gp_ prefix is not reapplied if it exists already.'
+		);
 	}
 
 	/**