Add create/edit translation button to editor metabox

assets/css/msls.less

@@ -24,10 +24,38 @@ select.msls-translations {
             input.msls_title, select {
                 flex-grow: 1;
             }
+            .msls-create-new,
+            .msls-edit-link {
+                text-decoration: none;
+                margin-left: 4px;
+                color: #2271b1;
+                &:hover {
+                    color: #135e96;
+                }
+            }
         }
 	}
 }
 
+.msls-quick-create {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    &.msls-loading .dashicons {
+        animation: msls-spin 1s linear infinite;
+    }
+}
+
+@keyframes msls-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 #msls-content-import {
     .button-primary {
         margin: 1em auto;

includes/MslsMetaBox.php

@@ -180,8 +180,10 @@ public function render_select(): void {
 		if ( $blogs ) {
 			global $post;
 
-			$type   = get_post_type( $post->ID );
-			$mydata = new MslsOptionsPost( $post->ID );
+			$type            = get_post_type( $post->ID );
+			$mydata          = new MslsOptionsPost( $post->ID );
+			$origin_language = MslsBlogCollection::get_blog_language();
+			$is_saved        = 'auto-draft' !== get_post_status( $post );
 
 			$this->maybe_set_linked_post( $mydata );
 
@@ -198,8 +200,10 @@ public function render_select(): void {
 				$icon_type = $this->options->get_icon_type();
 				$icon      = MslsAdminIcon::create( $type )->set_language( $language )->set_icon_type( $icon_type );
 
+				$linked_post_id = null;
 				if ( $mydata->has_value( $language ) ) {
-					$icon->set_href( (int) $mydata->$language );
+					$linked_post_id = (int) $mydata->$language;
+					$icon->set_href( $linked_post_id );
 				}
 
 				$selects  = '';
@@ -234,11 +238,17 @@ public function render_select(): void {
 					);
 				}
 
+				$action = '';
+				if ( $is_saved ) {
+					$action = $this->get_create_new_link( $type, $language, $post->ID, $origin_language, $linked_post_id );
+				}
+
 				$lis .= sprintf(
-					'<li><label for="msls_input_%1$s msls-icon-wrapper %4$s">%2$s</label>%3$s</li>',
+					'<li><label for="msls_input_%1$s" class="msls-icon-wrapper %5$s">%2$s</label>%3$s%4$s</li>',
 					esc_attr( $language ),
 					$icon, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 					$selects, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+					$action, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 					esc_attr( $icon_type )
 				);
 
@@ -311,8 +321,10 @@ public function render_input(): void {
 		if ( $blogs ) {
 			global $post;
 
-			$post_type = get_post_type( $post->ID );
-			$my_data   = new MslsOptionsPost( $post->ID );
+			$post_type       = get_post_type( $post->ID );
+			$my_data         = new MslsOptionsPost( $post->ID );
+			$origin_language = MslsBlogCollection::get_blog_language();
+			$is_saved        = 'auto-draft' !== get_post_status( $post );
 
 			$this->maybe_set_linked_post( $my_data );
 
@@ -330,19 +342,27 @@ public function render_input(): void {
 				$value     = '';
 				$title     = '';
 
+				$linked_post_id = null;
 				if ( $my_data->has_value( $language ) ) {
-					$icon->set_href( (int) $my_data->$language );
+					$linked_post_id = (int) $my_data->$language;
+					$icon->set_href( $linked_post_id );
 					$value = $my_data->$language;
 					$title = get_the_title( $value );
 				}
 
+				$action = '';
+				if ( $is_saved ) {
+					$action = $this->get_create_new_link( $post_type, $language, $post->ID, $origin_language, $linked_post_id );
+				}
+
 				$items .= sprintf(
-					'<li class=""><label for="msls_title_%1$s msls-icon-wrapper %6$s">%2$s</label><input type="hidden" id="msls_id_%1$s" name="msls_input_%3$s" value="%4$s"/><input class="msls_title" id="msls_title_%1$s" name="msls_title_%1$s" type="text" value="%5$s"/></li>',
+					'<li class=""><label for="msls_title_%1$s" class="msls-icon-wrapper %7$s">%2$s</label><input type="hidden" id="msls_id_%1$s" name="msls_input_%3$s" value="%4$s"/><input class="msls_title" id="msls_title_%1$s" name="msls_title_%1$s" type="text" value="%5$s"/>%6$s</li>',
 					$blog->userblog_id,
 					$icon,
 					$language,
 					$value,
 					$title,
+					$action,
 					esc_attr( $icon_type )
 				);
 
@@ -372,6 +392,70 @@ public function render_input(): void {
 		}
 	}
 
+	/**
+	 * Renders the action element for a language row in the metabox.
+	 *
+	 * Returns a "+" create button (Quick Create or classic link) when no
+	 * translation is linked, or an external-link icon when one exists.
+	 *
+	 * @param string $type           Post type slug.
+	 * @param string $language       Target language code.
+	 * @param int    $post_id        Current (source) post ID.
+	 * @param string $origin_language Source blog language code.
+	 * @param ?int   $linked_post_id Linked translation post ID, or null.
+	 *
+	 * @return string
+	 */
+	private function get_create_new_link( string $type, string $language, int $post_id, string $origin_language, ?int $linked_post_id ): string {
+		if ( null !== $linked_post_id ) {
+			$href = (string) get_edit_post_link( $linked_post_id );
+
+			if ( '' !== $href ) {
+				$title = sprintf(
+					/* translators: %s: language code */
+					__( 'Edit the translation in the %s-blog', 'multisite-language-switcher' ),
+					$language
+				);
+
+				return sprintf(
+					'<a class="msls-edit-link" href="%1$s" target="_blank" title="%2$s"><span class="dashicons dashicons-external"></span></a>',
+					esc_url( $href ),
+					esc_attr( $title )
+				);
+			}
+		}
+
+		if ( msls_options()->activate_quick_create ) {
+			$action_icon = ( new MslsAdminIcon( $type ) )
+				->set_language( $language )
+				->set_icon_type( 'action' )
+				->set_id( $post_id )
+				->set_origin_language( $origin_language );
+
+			return $action_icon->get_a();
+		}
+
+		$action_icon = ( new MslsAdminIcon( $type ) )
+			->set_language( $language )
+			->set_icon_type( 'action' )
+			->set_id( $post_id )
+			->set_origin_language( $origin_language );
+
+		$href = $action_icon->get_edit_new();
+
+		$title = sprintf(
+			/* translators: %s: language code */
+			__( 'Create a new translation in the %s-blog', 'multisite-language-switcher' ),
+			$language
+		);
+
+		return sprintf(
+			'<a class="msls-create-new" href="%1$s" target="_blank" title="%2$s"><span class="dashicons dashicons-plus"></span></a>',
+			esc_url( $href ),
+			esc_attr( $title )
+		);
+	}
+
 	/**
 	 * Set
 	 *

includes/MslsRestApi.php

@@ -156,14 +156,16 @@ public function create_translation( \WP_REST_Request $request ) {
 		 */
 		do_action( 'msls_quick_create_after_insert', $new_post_id, $source_post, $source_blog_id, $target_blog_id );
 
-		$edit_url = get_edit_post_link( $new_post_id, 'raw' );
+		$edit_url   = get_edit_post_link( $new_post_id, 'raw' );
+		$post_title = get_the_title( $new_post_id );
 		restore_current_blog();
 
 		$this->establish_link( $source_post_id, $source_blog_id, $new_post_id, $target_blog_id );
 
 		$response_data = array(
-			'post_id'  => $new_post_id,
-			'edit_url' => $edit_url,
+			'post_id'    => $new_post_id,
+			'edit_url'   => $edit_url,
+			'post_title' => $post_title,
 		);
 
 		/**

src/msls-quick-create.js

@@ -25,12 +25,18 @@ jQuery( document ).ready(
 					}
 				).then(
 					function ( response ) {
+						var isMetabox = $button.closest( '#msls' ).length > 0;
 						var $link = $( '<a>' )
 							.attr( 'href', response.edit_url )
 							.attr( 'title', $button.attr( 'title' ).replace( /Create/, 'Edit' ) )
 							.html( $button.html() );
 
-						$link.find( '.dashicons' ).removeClass( 'dashicons-update dashicons-plus' ).addClass( 'dashicons-edit' );
+						if ( isMetabox ) {
+							$link.addClass( 'msls-edit-link' ).attr( 'target', '_blank' );
+						}
+
+						var successIcon = isMetabox ? 'dashicons-external' : 'dashicons-edit';
+						$link.find( '.dashicons' ).removeClass( 'dashicons-update dashicons-plus' ).addClass( successIcon );
 
 						$button.replaceWith( $link );
 
@@ -44,10 +50,15 @@ jQuery( document ).ready(
 							$hiddenInput.val( response.post_id );
 						}
 
+						var $titleInput = $container.find( 'input.msls_title' );
+						if ( $titleInput.length ) {
+							$titleInput.val( response.post_title || '' );
+						}
+
 						var $select = $container.find( 'select[name^="msls_input_"]' );
 						if ( $select.length ) {
 							$select.append(
-								$( '<option>' ).val( response.post_id ).text( response.edit_url ).prop( 'selected', true )
+								$( '<option>' ).val( response.post_id ).text( response.post_title || '' ).prop( 'selected', true )
 							);
 						}
 					}

src/msls.js

@@ -37,11 +37,15 @@ jQuery( document ).ready(
 						select: function ( event, ui ) {
 								$( event.target ).val( ui.item.label );
 								hid_field.val( ui.item.value );
+								$( event.target ).siblings( '.msls-create-new, .msls-quick-create' ).hide();
+								$( event.target ).siblings( '.msls-edit-link' ).show();
 								return false;
 						},
 						change: function ( event, ui ) {
 							if ( ! $( event.target ).val() ) {
 								hid_field.val( '' );
+								$( event.target ).siblings( '.msls-create-new, .msls-quick-create' ).show();
+								$( event.target ).siblings( '.msls-edit-link' ).hide();
 							} else if (
 							mslsinput.id === hid_field.val() &&
 							mslsinput.title !== $( event.target ).val()