Add presenter, other contributor and wp.tv fields to lessons (#3029)

* Add presenter and other contributor fields to lessons * Fix metabox styles for lessons * Add Lesson video URL meta box * Wire up meta boxes * 💄 sass * Revert making metabox inputs block * Make WP.tv embeds full width
WordPress · Nov 28, 2024 · 366ba58 · 366ba58
1 parent 5249d15
commit 366ba58
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 39 deletions.
diff --git a/wp-content/plugins/wporg-learn/inc/post-meta.php b/wp-content/plugins/wporg-learn/inc/post-meta.php
@@ -14,10 +14,12 @@
  * Actions and filters.
  */
 add_action( 'init', __NAMESPACE__ . '\register' );
+add_action( 'add_meta_boxes', __NAMESPACE__ . '\add_lesson_metaboxes' );
 add_action( 'add_meta_boxes', __NAMESPACE__ . '\add_lesson_plan_metaboxes' );
 add_action( 'add_meta_boxes', __NAMESPACE__ . '\add_workshop_metaboxes' );
 add_action( 'add_meta_boxes', __NAMESPACE__ . '\add_meeting_metaboxes' );
 add_action( 'save_post_lesson-plan', __NAMESPACE__ . '\save_lesson_plan_metabox_fields' );
+add_action( 'save_post_lesson', __NAMESPACE__ . '\save_lesson_meta_fields' );
 add_action( 'save_post_wporg_workshop', __NAMESPACE__ . '\save_workshop_meta_fields' );
 add_action( 'save_post_meeting', __NAMESPACE__ . '\save_meeting_metabox_fields' );
 add_action( 'admin_footer', __NAMESPACE__ . '\render_locales_list' );
@@ -28,11 +30,11 @@
  * Register all post meta keys.
  */
 function register() {
+	register_common_meta();
 	register_course_meta();
 	register_lesson_meta();
 	register_lesson_plan_meta();
 	register_workshop_meta();
-	register_misc_meta();
 }
 
 /**
@@ -158,18 +160,6 @@ function register_lesson_plan_meta() {
 function register_workshop_meta() {
 	$post_type = 'wporg_workshop';
 
-	register_post_meta(
-		$post_type,
-		'video_url',
-		array(
-			'description'       => __( "The URL of the Workshop's video.", 'wporg_learn' ),
-			'type'              => 'string',
-			'single'            => true,
-			'sanitize_callback' => 'esc_url_raw',
-			'show_in_rest'      => true,
-		)
-	);
-
 	register_post_meta(
 		$post_type,
 		'duration',
@@ -182,30 +172,6 @@ function register_workshop_meta() {
 		)
 	);
 
-	register_post_meta(
-		$post_type,
-		'presenter_wporg_username',
-		array(
-			'description'       => __( 'The WordPress.org user name of a presenter for this workshop.', 'wporg_learn' ),
-			'type'              => 'string',
-			'single'            => false,
-			'sanitize_callback' => 'sanitize_user',
-			'show_in_rest'      => true,
-		)
-	);
-
-	register_post_meta(
-		$post_type,
-		'other_contributor_wporg_username',
-		array(
-			'description'       => __( 'The WordPress.org user name of "other contributor" for this workshop.', 'wporg_learn' ),
-			'type'              => 'string',
-			'single'            => false,
-			'sanitize_callback' => 'sanitize_user',
-			'show_in_rest'      => true,
-		)
-	);
-
 	register_post_meta(
 		$post_type,
 		'video_caption_language',
@@ -236,7 +202,7 @@ function register_workshop_meta() {
  *
  * For multiple post types, for example.
  */
-function register_misc_meta() {
+function register_common_meta() {
 	// Expiration field.
 	$post_types = array( 'lesson-plan', 'wporg_workshop', 'course', 'lesson' );
 	foreach ( $post_types as $post_type ) {
@@ -293,6 +259,56 @@ function register_misc_meta() {
 			)
 		);
 	}
+
+	// Presenter field.
+	$post_types = array( 'wporg_workshop', 'lesson' );
+	foreach ( $post_types as $post_type ) {
+		register_post_meta(
+			$post_type,
+			'presenter_wporg_username',
+			array(
+				'description'       => __( 'The WordPress.org user name of a presenter for this workshop.', 'wporg_learn' ),
+				'type'              => 'string',
+				'single'            => false,
+				'sanitize_callback' => 'sanitize_user',
+				'show_in_rest'      => true,
+			)
+		);
+	}
+
+	// Other contributor field.
+	$post_types = array( 'wporg_workshop', 'lesson' );
+	foreach ( $post_types as $post_type ) {
+		register_post_meta(
+			$post_type,
+			'other_contributor_wporg_username',
+			array(
+				'description'       => __( 'The WordPress.org user name of "other contributor" for this workshop.', 'wporg_learn' ),
+				'type'              => 'string',
+				'single'            => false,
+				'sanitize_callback' => 'sanitize_user',
+				'show_in_rest'      => true,
+			)
+		);
+	}
+
+	// Video URL field.
+	$post_types = array( 'wporg_workshop', 'lesson' );
+	foreach ( $post_types as $post_type ) {
+		register_post_meta(
+			$post_type,
+			'video_url',
+			array(
+				'description'       => 'wporg_workshop' === $post_type
+					? __( "The URL of the Workshop's video.", 'wporg_learn' )
+					: __( "The URL of the Lesson's video.", 'wporg_learn' ),
+				'type'              => 'string',
+				'single'            => true,
+				'sanitize_callback' => 'esc_url_raw',
+				'show_in_rest'      => true,
+			)
+		);
+	}
 }
 
 /**
@@ -473,6 +489,37 @@ function save_lesson_plan_metabox_fields( $post_id ) {
 	}
 }
 
+/**
+ * Add meta boxes to the Edit Lesson screen.
+ *
+ * Todo these should be replaced with block editor panels.
+ */
+function add_lesson_metaboxes() {
+	add_meta_box(
+		'lesson-presenters',
+		__( 'Presenters', 'wporg_learn' ),
+		__NAMESPACE__ . '\render_metabox_workshop_presenters',
+		'lesson',
+		'side'
+	);
+
+	add_meta_box(
+		'lesson-other-contributors',
+		__( 'Other Contributors', 'wporg_learn' ),
+		__NAMESPACE__ . '\render_metabox_workshop_other_contributors',
+		'lesson',
+		'side'
+	);
+
+	add_meta_box(
+		'lesson-video-url',
+		__( 'Video URL (Reference only)', 'wporg_learn' ),
+		__NAMESPACE__ . '\render_metabox_lesson_video',
+		'lesson',
+		'side'
+	);
+}
+
 /**
  * Add meta boxes to the Edit Workshop screen.
  *
@@ -538,6 +585,15 @@ function render_metabox_workshop_details( WP_Post $post ) {
 	require get_views_path() . 'metabox-workshop-details.php';
 }
 
+/**
+ * Render the Lesson Video meta box.
+ *
+ * @param WP_Post $post
+ */
+function render_metabox_lesson_video( WP_Post $post ) {
+	require get_views_path() . 'metabox-lesson-video.php';
+}
+
 /**
  * Render the Presenters meta box.
  *
@@ -640,7 +696,52 @@ function save_workshop_meta_fields( $post_id ) {
 
 	// This language meta field is rendered in the editor sidebar using a PluginDocumentSettingPanel block,
 	// which won't save the field on publish if it has the default value.
-	// Our custom workshops query for locale prioritized tutorials (see functions.php `wporg_archive_query_prioritize_locale`)
+	// Our custom query for locale prioritized tutorials (see locale.php `wporg_archive_query_prioritize_locale`)
+	// depends on it being set, so we force it to be updated after saving:
+	$language         = get_post_meta( $post_id, 'language', true );
+	$language_default = 'en_US';
+	if ( ! isset( $language ) || $language_default === $language ) {
+		update_post_meta( $post_id, 'language', $language_default );
+	}
+}
+
+/**
+ * Update the post meta values from the meta fields when the post is saved.
+ *
+ * @param int $post_id
+ */
+function save_lesson_meta_fields( $post_id ) {
+	if ( wp_is_post_revision( $post_id ) || ! current_user_can( 'edit_post', $post_id ) ) {
+		return;
+	}
+
+	// This nonce field is rendered in the Lesson Video metabox.
+	$nonce = filter_input( INPUT_POST, 'lesson-metabox-nonce' );
+	if ( ! wp_verify_nonce( $nonce, 'lesson-metaboxes' ) ) {
+		return;
+	}
+
+	$presenter_wporg_username = filter_input( INPUT_POST, 'presenter-wporg-username' );
+	$presenter_usernames      = array_map( 'trim', explode( ',', $presenter_wporg_username ) );
+	delete_post_meta( $post_id, 'presenter_wporg_username' );
+	if ( is_array( $presenter_usernames ) ) {
+		foreach ( $presenter_usernames as $username ) {
+			add_post_meta( $post_id, 'presenter_wporg_username', $username );
+		}
+	}
+
+	$other_contributor_wporg_username = filter_input( INPUT_POST, 'other-contributor-wporg-username' );
+	$other_contributor_usernames      = array_map( 'trim', explode( ',', $other_contributor_wporg_username ) );
+	delete_post_meta( $post_id, 'other_contributor_wporg_username' );
+	if ( is_array( $other_contributor_usernames ) ) {
+		foreach ( $other_contributor_usernames as $username ) {
+			add_post_meta( $post_id, 'other_contributor_wporg_username', $username );
+		}
+	}
+
+	// This language meta field is rendered in the editor sidebar using a PluginDocumentSettingPanel block,
+	// which won't save the field on publish if it has the default value.
+	// Our custom query for locale prioritized lessons (see locale.php `wporg_archive_query_prioritize_locale`)
 	// depends on it being set, so we force it to be updated after saving:
 	$language         = get_post_meta( $post_id, 'language', true );
 	$language_default = 'en_US';

diff --git a/wp-content/plugins/wporg-learn/views/metabox-lesson-video.php b/wp-content/plugins/wporg-learn/views/metabox-lesson-video.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Template for Lesson Video metabox
+ */
+
+/** @var WP_Post $post */
+?>
+
+<?php if ( $post->video_url ) { ?>
+
+	<p>
+		<label for="lesson-video-url">
+			<?php esc_html_e( 'This Lesson was converted from a Tutorial, and the WordPress.tv URL was:', 'wporg_learn' ); ?>
+		</label>
+		<input type="text" id="lesson-video-url" name="lesson-video-url" value="<?php echo esc_url( $post->video_url ); ?>" readonly />
+	</p>
+
+<?php } else { ?>
+
+	<p><?php esc_html_e( 'If this Lesson was converted from a Tutorial and had a WordPress.tv URL, it would be displayed here.', 'wporg_learn' ); ?></p>
+
+<?php } ?>
+
+<?php wp_nonce_field( 'lesson-metaboxes', 'lesson-metabox-nonce' ); ?>
diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -29,6 +29,7 @@
 /**
  * Actions and filters.
  */
+add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\enqueue_admin_assets' );
 add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
 add_action( 'sensei_quiz_question_inside_after', __NAMESPACE__ . '\sensei_question_add_closing_fieldset' );
 // Attached at 50 to inject after title, description, etc, so that only answers are in the fieldset.
@@ -115,6 +116,20 @@ function setup() {
 	add_filter( 'mkaz_prism_css_path', __NAMESPACE__ . '\update_prism_css_path' );
 }
 
+/**
+ * Enqueue scripts and styles.
+ */
+function enqueue_admin_assets() {
+	$style_path = get_stylesheet_directory() . '/build/style/index.css';
+	$style_uri = get_stylesheet_directory_uri() . '/build/style/index.css';
+	wp_enqueue_style(
+		'wporg-learn-2024-admin-style',
+		$style_uri,
+		array(),
+		filemtime( $style_path )
+	);
+}
+
 /**
  * Enqueue scripts and styles.
  */

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/admin.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/admin.scss
@@ -0,0 +1,10 @@
+// Override Sensei Learning Mode styles, with default admin styles.
+.edit-post-meta-boxes-area {
+	input,
+	textarea {
+		border: 1px solid #8c8f94;
+		padding: 5px;
+		margin-top: 5px;
+		width: 100%;
+	}
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/index.js b/wp-content/themes/pub/wporg-learn-2024/src/style/index.js
@@ -1,2 +1,3 @@
 // Noop, just imports the CSS for webpack.
 import './style.scss';
+import './admin.scss';
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
@@ -45,3 +45,11 @@ body {
 		padding-top: unset !important;
 	}
 }
+
+.wp-block-embed-wordpress-tv-embed {
+	iframe {
+		width: 100%;
+		height: auto;
+		aspect-ratio: 16 / 9;
+	}
+}