Merge pull request #358 from WordPress/event-form-block

Add event form page block
WordPress · Oct 7, 2024 · b4ea2e3 · b4ea2e3
2 parents 08ffb77 + 7915f18
commit b4ea2e3
Show file tree

Hide file tree

Showing 11 changed files with 309 additions and 3 deletions.
diff --git a/includes/routes/event/create.php b/includes/routes/event/create.php
@@ -37,6 +37,7 @@ public function handle(): void {
 			'',
 		);
 
+		$this->use_theme();
 		$this->tmpl(
 			'event-create',
 			array(

diff --git a/includes/routes/event/edit.php b/includes/routes/event/edit.php
@@ -35,10 +35,12 @@ public function handle( int $event_id ): void {
 
 		include ABSPATH . 'wp-admin/includes/post.php';
 
+		$this->use_theme();
 		$this->tmpl(
 			'event-edit',
 			array(
-				'event' => $event,
+				'event'    => $event,
+				'event_id' => $event->id(),
 			),
 		);
 	}

diff --git a/includes/theme-loader.php b/includes/theme-loader.php
@@ -63,7 +63,6 @@ function (): void {
 					);
 					wp_scripts()->remove(
 						array(
-							'gp-common',
 							'wporg-plugins-skip-link-focus-fix',
 						)
 					);

diff --git a/themes/wporg-translate-events-2024/blocks/event-form/index.php b/themes/wporg-translate-events-2024/blocks/event-form/index.php
@@ -0,0 +1,188 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+
+use DateTimeZone;
+use Wporg\TranslationEvents\Urls;
+use Wporg\TranslationEvents\Translation_Events;
+use Wporg\TranslationEvents\Event_Text_Snippet;
+use Wporg\TranslationEvents\Event\Event;
+use Wporg\TranslationEvents\Event\Event_End_Date;
+use Wporg\TranslationEvents\Event\Event_Start_Date;
+
+register_block_type(
+	'wporg-translate-events-2024/event-form',
+	array(
+		// phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.Found
+		'render_callback' => function ( array $attributes ) {
+			if ( ! isset( $attributes['id'] ) && ! isset( $attributes['is_create_form'] ) ) {
+					return '';
+			}
+
+			$is_create_form = $attributes['is_create_form'] ?? false;
+			if ( $is_create_form ) {
+				$event_id = 0;
+				$now = Translation_Events::now();
+
+				$event          = new Event(
+					get_current_user_id(),
+					new Event_Start_Date( $now->format( 'Y-m-d H:i:s' ) ),
+					new Event_End_Date( $now->modify( '+1 hour' )->format( 'Y-m-d H:i:s' ) ),
+					new DateTimeZone( 'UTC' ),
+					'draft',
+					'',
+					'',
+				);
+			} else {
+				$event_id = $attributes['id'];
+				$event = Translation_Events::get_event_repository()->get_event( $event_id );
+
+			}
+			if ( ! $event ) {
+				return '';
+			}
+
+			ob_start();
+			?>
+
+<!-- wp:columns -->
+<div class="wp-block-columns">
+	<!-- wp:column {"width":"64%"} -->
+	<div class="wp-block-column" style="flex-basis:64%">
+<!-- wp:form -->
+<form class="translation-event-form" action="" method="post">
+
+			<?php wp_nonce_field( '_event_nonce', '_event_nonce' ); ?>
+			<?php if ( $is_create_form ) : ?>
+		<details id="quick-add"><summary><?php esc_html_e( 'Upcoming WordCamps', 'wporg-translate-events-2024' ); ?></summary><div class="loading"></div></details>
+	<?php endif; ?>
+	<input type="hidden" name="action" value="submit_event_ajax">
+			<?php $event_form_name = $is_create_form ? 'create_event' : 'edit_event'; ?>
+	<input type="hidden" id="form-name" name="form_name" value="<?php echo esc_attr( $event_form_name ); ?>">
+	<input type="hidden" id="event-id" name="event_id" value="<?php echo esc_attr( $event->id() ); ?>">
+	<input type="hidden" id="event-form-action" name="event_form_action">
+	<!-- wp:form-input -->
+	<div class="wp-block-form-input"><label class="wp-block-form-input__label" for="event-title"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Event Title', 'wporg-translate-events-2024' ); ?></span><input class="wp-block-form-input__input" type="text" id="event-title" name="event_title" value="<?php echo esc_html( $event->title() ); ?>" <?php echo esc_html( $is_create_form || current_user_can( 'edit_translation_event_title', $event->id() ) ?: 'readonly' ); ?> required size="42"/></label></div>
+	<!-- /wp:form-input -->
+			<?php $event_url_class = $is_create_form ? 'hide-event-url' : ''; ?>
+			<?php $event_url = $is_create_form ? '' : Urls::event_details_absolute( $event->id() ); ?>
+	<!-- wp:form-input -->
+	<div class="wp-block-form-input <?php echo esc_attr( $event_url_class ); ?>"><label class="wp-block-form-input__label" for="event-permalink"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Event URL', 'wporg-translate-events-2024' ); ?></span><a id="event-permalink" class="event-permalink wp-block-form-input__input" href="<?php echo esc_url( $event_url ); ?>" target="_blank"><?php echo esc_url( $event_url ); ?></a></label></div>
+	<!-- /wp:form-input -->
+	<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Event Description', 'wporg-translate-events-2024' ); ?></span><textarea class="wp-block-form-input__input" id="event-description" name="event_description" rows="4" cols="40" required <?php echo esc_html( $is_create_form || current_user_can( 'edit_translation_event_description', $event->id() ) ?: 'readonly' ); ?>><?php echo esc_html( $event->description() ); ?></textarea>
+			<?php
+			echo wp_kses(
+				Event_Text_Snippet::get_snippet_links(),
+				array(
+					'a'  => array(
+						'href'         => array(),
+						'data-snippet' => array(),
+						'class'        => array(),
+					),
+					'ul' => array( 'class' => array() ),
+					'li' => array(),
+				)
+			);
+			?>
+</label></div>
+<!-- /wp:form-input -->
+		<!-- wp:form-input -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Start Date', 'wporg-translate-events-2024' ); ?></span><input class="wp-block-form-input__input" type="datetime-local" id="event-start" name="event_start" value="<?php echo esc_attr( $event->start()->format( 'Y-m-d H:i' ) ); ?>" required <?php echo esc_html( $is_create_form || current_user_can( 'edit_translation_event_start', $event->id() ) ?: 'readonly' ); ?>/></label></div>
+		<!-- /wp:form-input -->
+		<!-- wp:form-input -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'End Date', 'wporg-translate-events-2024' ); ?></span><input class="wp-block-form-input__input" type="datetime-local" id="event-end" name="event_end" value="<?php echo esc_attr( $event->end()->format( 'Y-m-d H:i' ) ); ?>" required <?php echo esc_html( $is_create_form || current_user_can( 'edit_translation_event_end', $event->id() ) ?: 'readonly' ); ?>/></label></div>
+		<!-- /wp:form-input -->
+
+		<!-- wp:form-input -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Event Timezone', 'wporg-translate-events-2024' ); ?></span>
+		<select class="wp-block-form-input__input" id="event-timezone" name="event_timezone" required <?php echo esc_html( $is_create_form || current_user_can( 'edit_translation_event_timezone', $event->id() ) ?: 'disabled' ); ?> >
+				<?php
+				echo wp_kses(
+					wp_timezone_choice( $is_create_form ? null : $event->timezone()->getName(), get_user_locale() ),
+					array(
+						'optgroup' => array( 'label' => array() ),
+						'option'   => array(
+							'value'    => array(),
+							'selected' => array(),
+						),
+					)
+				);
+				?>
+			</select>
+		<!-- /wp:form-input -->
+
+		</div>
+		<!-- wp:form-input -->
+		<label class="wp-block-form-input__label is-label-inline">Attendance Mode</label>
+		<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" id="event-attendance-mode-hybrid" name="event_attendance_mode" <?php echo $event->is_hybrid() ? esc_attr( 'checked' ) : ''; ?> value="hybrid" required/><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Hybrid (Remote and On-site)', 'wporg-translate-events-2024' ); ?></span></label></div>
+		<!-- /wp:form-input -->
+		<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" name="event_attendance_mode" <?php echo $event->is_remote() ? esc_attr( 'checked' ) : ''; ?> value="remote" required /><span class="wp-block-form-input__label-content"><?php esc_html_e( 'Remote', 'wporg-translate-events-2024' ); ?></span></label></div>
+		<!-- /wp:form-input -->
+		<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+		<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" id="event-attendance-mode-onsite" name="event_attendance_mode" <?php echo ! $event->is_hybrid() && ! $event->is_remote() ? esc_attr( 'checked' ) : ''; ?> value="onsite" required /><span class="wp-block-form-input__label-content"><?php esc_html_e( 'On-site', 'wporg-translate-events-2024' ); ?></span></label></div>
+		<!-- /wp:form-input -->
+		<!-- /wp:form-input -->
+
+		<div class="submit-btn-group">
+			<label for="event-status"></label>
+			<?php if ( $event->id() ) : ?>
+				<?php if ( $event->is_draft() ) : ?>
+					<!-- wp:button {"tagName":"button","type":"submit"} -->
+					<button type="submit" class="wp-block-button__link wp-element-button save-draft submit-event" data-event-status="draft">Update Draft</button>
+					<!-- /wp:button -->
+					<?php endif; ?>
+				<!-- wp:button {"tagName":"button","type":"submit"} -->
+					<button type="submit" class="wp-block-button__link wp-element-button submit-event" data-event-status="publish" ><?php echo ( $event->is_published() ) ? esc_html( 'Update Event' ) : esc_html( 'Publish Event' ); ?></button>
+				<!-- /wp:button -->
+			<?php else : ?>
+				<!-- wp:button {"tagName":"button","type":"submit"} -->
+				<button type="submit" class="wp-block-button__link wp-element-button save-draft submit-event" data-event-status="draft" >Save Draft</button>
+				<!-- /wp:button -->
+				<!-- wp:button {"tagName":"button","type":"submit"} -->
+				<button type="submit" class="wp-block-button__link wp-element-button submit-event" data-event-status="publish" >Publish Event</button>
+				<!-- /wp:button -->
+			<?php endif; ?>
+			<?php $visibility_trash_button = current_user_can( 'trash_translation_event', $event->id() ) ? 'inline-flex' : 'none'; ?>
+			<!-- wp:button {"tagName":"button","type":"submit"} -->
+			<button type="submit" id="trash-button" class="wp-block-button__link wp-element-button is-destructive trash-event" name="submit" value="Delete" style="display: <?php echo esc_attr( $visibility_trash_button ); ?>">Delete Event</button>
+			<!-- /wp:button -->
+		</div>
+		<div class="clear"></div>
+		<div class="published-update-text">
+			<?php
+			$visibility_published_button = 'none';
+			if ( $event->is_published() ) {
+				$visibility_published_button = 'block';
+			}
+			?>
+			<span id="published-update-text" style="display: <?php echo esc_attr( $visibility_published_button ); ?>">
+			<?php
+			$polyglots_slack_channel = 'https://wordpress.slack.com/archives/C02RP50LK';
+			echo wp_kses(
+			// translators: %s: Polyglots Slack channel URL.
+				sprintf( __( 'If you need to update the event slug, please, contact with an admin in the <a href="%s" target="_blank">Polyglots</a> channel in Slack.', 'wporg-translate-events-2024' ), $polyglots_slack_channel ),
+				array(
+					'a' => array(
+						'href'   => array(),
+						'target' => array(),
+					),
+
+				)
+			);
+			?>
+		</span>
+		</div>
+</form>
+<!-- /wp:form -->
+</div>
+	<!-- /wp:column -->
+
+</div>
+<!-- /wp:columns -->
+			<?php
+			return ob_get_clean();
+		},
+	)
+);
diff --git a/themes/wporg-translate-events-2024/blocks/header/site-header.php b/themes/wporg-translate-events-2024/blocks/header/site-header.php
@@ -6,9 +6,9 @@
 	<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
 	<!-- wp:navigation {"menuSlug":"site-header-menu", "icon":"menu","backgroundColor": "charcoal-2", "overlayBackgroundColor":"charcoal-2","overlayTextColor":"white","layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
 <!-- /wp:wporg/local-navigation-bar -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
 <div class="wp-block-group alignfull has-white-background-color has-background" style="padding-top:18px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:18px;padding-left:var(--wp--preset--spacing--edge-space)">
 	<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
 </div>
 <!-- /wp:group -->
+<div id="gp-js-message" class="gp-js-message"></div>
diff --git a/themes/wporg-translate-events-2024/blocks/pages/events/event-create/index.php b/themes/wporg-translate-events-2024/blocks/pages/events/event-create/index.php
@@ -0,0 +1,15 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+
+register_block_type(
+	'wporg-translate-events-2024/page-events-event-create',
+	array(
+		'render_callback' => function ( array $attributes ) {
+			render_page(
+				__DIR__ . '/render.php',
+				__( 'Create event', 'wporg-translate-events-2024' ),
+				$attributes
+			);
+		},
+	)
+);
diff --git a/themes/wporg-translate-events-2024/blocks/pages/events/event-create/render.php b/themes/wporg-translate-events-2024/blocks/pages/events/event-create/render.php
@@ -0,0 +1,5 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+
+?>
+<!-- wp:wporg-translate-events-2024/event-form <?php echo wp_json_encode( array( 'is_create_form' => true ) ); ?> /-->
diff --git a/themes/wporg-translate-events-2024/blocks/pages/events/event-edit/index.php b/themes/wporg-translate-events-2024/blocks/pages/events/event-edit/index.php
@@ -0,0 +1,15 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+
+register_block_type(
+	'wporg-translate-events-2024/page-events-event-edit',
+	array(
+		'render_callback' => function ( array $attributes ) {
+			render_page(
+				__DIR__ . '/render.php',
+				__( 'Edit event', 'wporg-translate-events-2024' ),
+				$attributes
+			);
+		},
+	)
+);
diff --git a/themes/wporg-translate-events-2024/blocks/pages/events/event-edit/render.php b/themes/wporg-translate-events-2024/blocks/pages/events/event-edit/render.php
@@ -0,0 +1,8 @@
+<?php
+namespace Wporg\TranslationEvents\Theme_2024;
+$data = array(
+	'id'              => $attributes['event_id'] ?? null,
+	'is_create_event' => false,
+);
+?>
+<!-- wp:wporg-translate-events-2024/event-form <?php echo wp_json_encode( $data ); ?> /-->
diff --git a/themes/wporg-translate-events-2024/functions.php b/themes/wporg-translate-events-2024/functions.php
@@ -27,6 +27,9 @@ function register_blocks(): void {
 	include_once __DIR__ . '/blocks/event-attend-button/index.php';
 	include_once __DIR__ . '/blocks/event-host-list/index.php';
 	include_once __DIR__ . '/blocks/pages/events/event-attendees/index.php';
+	include_once __DIR__ . '/blocks/pages/events/event-create/index.php';
+	include_once __DIR__ . '/blocks/event-form/index.php';
+	include_once __DIR__ . '/blocks/pages/events/event-edit/index.php';
 }
 
 function register_patterns(): void {

diff --git a/themes/wporg-translate-events-2024/style.css b/themes/wporg-translate-events-2024/style.css
@@ -92,6 +92,76 @@ a.remove-attendee:hover{
 	border-color: var(--wp--preset--color--vivid-red) !important;
 
 }
+textarea.wp-block-form-input__input {
+	border: 1px solid #949494;
+    font-family: inherit;
+    font-size: var(--wp--custom--form--typography--font-size);
+}
+
+select.wp-block-form-input__input {
+	border: 1px solid;
+    line-height: 2;
+    min-height: 3em;
+	padding-inline: var(--wp--custom--form--padding--inline);
+    padding-block: var(--wp--custom--form--padding--block);
+	line-height: var(--wp--custom--form--typography--line-height);
+}
+
+.hide-event-url {
+	display: none;
+}
+
+#gp-js-message {
+	top: 50px;
+	left: auto !important;
+	right: 20px;
+	font-size: 100%;
+	padding: 1em 1.5em;
+	border-radius: 5px;
+	max-width: 300px;
+}
+.gp-js-message {
+	position: fixed;
+	top: 50px;
+	padding: 1em;
+	display: none;
+	z-index: 1001;
+}
+
+#gp-js-message:empty {
+	display: none;
+}
+@media screen and (max-width: 500px) {
+	div#gp-js-message {
+		top: 5px;
+		right: 5px;
+		left: 5px !important;
+		max-width: 100%;
+		z-index: 99999;
+	}
+}
+
+@media screen and (min-width: 1025px) {
+	div#gp-js-message {
+		right: 50px;
+	}
+}
+
+.gp-js-error {
+	color: #fff;
+	background-color: #dc3232;
+}
+
+.gp-js-notice {
+	color: #333;
+	background-color: #ffb900;
+}
+
+.gp-js-success {
+	color: #fff;
+	background-color: #46b450;
+}
+
  @media (min-width: 960px) {
 
 .wporg-marker-list__container .wporg-marker-list-item {
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ public function handle(): void { @@
     			'',
     		);
+    		$this->use_theme();
     		$this->tmpl(
     			'event-create',
     			array(
@@ Expand Down @@