Feature/397

assets/css/admin.css

@@ -30,6 +30,66 @@
 	width: 20px;
 }
 
+.distributor-panel span {
+	display: inline-block;
+	margin-bottom: 15px;
+}
+
+#distributed-unlink {
+    margin: 0;
+}
+
+#distributed-unlink .dashicons-editor-unlink {
+    color: #b50909;
+    margin-right: 7px;
+	text-decoration: none;
+}
+
+.distributed-modal-popup .components-modal__icon-container svg {
+    width: 25px;
+}
+
+.distributed-modal-popup h1 {
+    margin-left: 8px;
+    margin-top: -3px;
+}
+
+.distributed-modal-popup span {display: inline-block;}
+
+.distributed-modal-popup .actions {
+    margin-top: 20px;
+}
+
+body .distributed-modal-popup button,
+body .distributed-modal-popup .button {
+	opacity: 1;
+    pointer-events: initial;
+    cursor: pointer;
+}
+
+.distributed-modal-popup .actions a {
+    margin-right: 10px;
+}
+
+.distributed-modal-popup .actions a span {
+    display: inline-block;
+    margin-top: 5px;
+    margin-right: 5px;
+    color: #b50909;
+}
+
+.distributed-modal-popup .actions a span.dashicons-admin-links {
+	color: #046e04;
+}
+
+.distributed-modal-popup .actions #close {
+    margin-top: 5px;
+}
+
+.distributed-modal-popup {
+    max-width: 380px;
+}
+
 .distributor-toggle {
 	margin-bottom: 8px;
 }

assets/css/gutenberg-syndicated-post.scss

@@ -19,6 +19,17 @@ body.dt-linked-post {
 		cursor: default;
 	}
 
+	.distributed-modal-popup {
+		& * {
+			pointer-events: auto;
+			opacity: 1;
+		}
+
+		a, button {
+			cursor: pointer;
+		}
+	}
+
 	/* Allow clicks on confirmation dialog buttons */
 	.components-confirm-dialog button {
 		opacity: 1;

assets/js/gutenberg-plugin.js

@@ -1,10 +1,11 @@
 import { pluginIcon } from './components/plugin-icon';
 
-import { Icon } from '@wordpress/components';
+import { Icon, Modal, Button, Flex } from '@wordpress/components';
 import { select, useSelect } from '@wordpress/data';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
+import { useState } from '@wordpress/element';
 
 const { document, dt, dtGutenberg, MouseEvent } = window;
 
@@ -131,14 +132,136 @@ const RenderDistributedTo = () => {
  * Render the distributed from component
  */
 const RenderDistributedFrom = () => {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	if ( ! parseInt( dtGutenberg.unlinked ) ) {
+		return (
+			<div>
+				<span id="distributed-from">
+					{ sprintf(
+						/* translators: 1: Syndication date and time. */
+						__(
+							'Pulled & linked on %1$s from %2$s',
+							'distributor'
+						),
+						dtGutenberg.syndicationTime,
+						dtGutenberg.originalLocationName
+					) }
+				</span>
+				<span id="distributed-data">
+					{ __( 'Updating the ', 'distributor' ) }
+					<a href={ dtGutenberg.postUrl }>
+						{ __( 'Original Content', 'distributor' ) }
+					</a>
+					{ ', ' }
+					{ __(
+						'will update this post automatically.',
+						'distributor'
+					) }
+				</span>
+				<span id="distributed-unlink" onClick={ openModal }> {/* eslint-disable-line */}
+					<a href='javascript:void(0);'> {/* eslint-disable-line */}
+						<span className="dashicons dashicons-editor-unlink"></span>
+						{ __( 'Unlink from Original', 'distributor' ) }
+					</a>
+				</span>
+				{ isOpen && (
+					<Modal
+						title="Unlink from Original"
+						icon={ pluginIcon }
+						size={ 50 }
+						onRequestClose={ closeModal }
+						className="distributed-modal-popup"
+						overlayClassName="distributed-modal-overlay"
+					>
+						<p
+							dangerouslySetInnerHTML={ {
+								__html: sprintf(
+									/* translators: %1$s: Original Content URL Opening Tag, %2$s: Original Content URL Closing Tag */
+									__(
+										'Unlinking from the %1$sOriginal Content%2$s will stop updating this post automatically.',
+										'distributor'
+									),
+									'<a href="' + dtGutenberg.postUrl + '">',
+									'</a>'
+								),
+							} }
+						/>
+						<Flex justify="flex-start" className={ 'actions' }>
+							<Button
+								icon={ <Icon icon="editor-unlink" /> }
+								variant="secondary"
+								href={ dtGutenberg.unlinkNonceUrl }
+							>
+								{ __( 'Unlink', 'distributor' ) }
+							</Button>
+							<Button variant="link" onClick={ closeModal }>
+								{ __( 'Cancel', 'distributor' ) }
+							</Button>
+						</Flex>
+					</Modal>
+				) }
+			</div>
+		);
+	}
 	return (
-		<span id="distributed-from">
-			{ sprintf(
-				/* translators: 1: Syndication date and time. */
-				__( 'Distributed on: %1$s', 'distributor' ),
-				dtGutenberg.syndicationTime
+		<div>
+			<span id="distributed-from">
+				{ sprintf(
+					/* translators: 1: Syndication date and time. */
+					__( 'Pulled on %1$s from %2$s', 'distributor' ),
+					dtGutenberg.syndicationTime,
+					dtGutenberg.originalLocationName
+				) }
+			</span>
+			<span id="distributed-data">
+				{ __( 'This post has been unlinked from the ', 'distributor' ) }
+				<a href={ dtGutenberg.postUrl }>
+					{ __( 'Original Content', 'distributor' ) }
+				</a>
+				{ '.' }
+			</span>
+			<span id="distributed-restorelink" onClick={ openModal }> {/* eslint-disable-line */}
+				<span className="dashicons dashicons-admin-links"></span>
+				<a href='javascript:void(0);'> {/* eslint-disable-line */}
+					{ __( 'Restore link to Original', 'distributor' ) }
+				</a>
+			</span>
+			{ isOpen && (
+				<Modal
+					title="Restore link to Original"
+					icon={ pluginIcon }
+					size={ 50 }
+					onRequestClose={ closeModal }
+					className="distributed-modal-popup"
+					overlayClassName="distributed-modal-overlay"
+				>
+					<span id="distributed-data">
+						{ __( 'Restoring the link to the ', 'distributor' ) }
+						<a href={ dtGutenberg.postUrl }>
+							{ __( 'Original Content', 'distributor' ) }
+						</a>
+						{ __(
+							' will start updating this post automatically from the Original, overwriting current content.',
+							'distributor'
+						) }
+					</span>
+					<div className="actions">
+						<a href={ dtGutenberg.linkNonceUrl } className="button">
+							<span className="dashicons dashicons-admin-links"></span>
+							{ __( 'Restore link', 'distributor' ) }
+						</a>
+						<span id="close" onClick={ closeModal } aria-label="Cancel"> {/* eslint-disable-line */}
+							<a href='javascript:void(0);'> {/* eslint-disable-line */}
+								{ __( 'Cancel', 'distributor' ) }
+							</a>
+						</span>
+					</div>
+				</Modal>
 			) }
-		</span>
+		</div>
 	);
 };
 
@@ -149,6 +272,17 @@ const DistributorIcon = () => (
 	<Icon className="components-panel__icon" icon={ pluginIcon } size={ 20 } />
 );
 
+/**
+ * Create the Distributor title
+ */
+const isUnlinkedContent = parseInt( dtGutenberg.unlinked ) !== 0;
+
+const DistributorTitle = () => {
+	return isUnlinkedContent
+		? __( 'Unlinked Content', 'distributor' )
+		: __( 'Pulled Content', 'distributor' );
+};
+
 /**
  * Add the Distributor panel to Gutenberg
  */
@@ -201,7 +335,7 @@ const DistributorPlugin = () => {
 		distributorTopMenu?.classList.add( 'hide' );
 		return (
 			<PluginDocumentSettingPanel
-				title={ __( 'Distributor', 'distributor' ) }
+				title={ <DistributorTitle /> }
 				icon={ DistributorIcon }
 				className="distributor-panel"
 			>
@@ -214,7 +348,7 @@ const DistributorPlugin = () => {
 	distributorTopMenu?.classList.remove( 'hide' );
 	return (
 		<PluginDocumentSettingPanel
-			title={ __( 'Distributor', 'distributor' ) }
+			title={ <DistributorTitle /> }
 			icon={ DistributorIcon }
 			className="distributor-panel"
 		>

includes/syndicated-post-ui.php

@@ -79,18 +79,23 @@ function output_distributor_column( $column_name, $post_id ) {
 		$original_blog_id   = get_post_meta( $post_id, 'dt_original_blog_id', true );
 		$original_source_id = get_post_meta( $post_id, 'dt_original_source_id', true );
 		$original_deleted   = (bool) get_post_meta( $post_id, 'dt_original_post_deleted', true );
+		$connection_map     = get_post_meta( $post_id, 'dt_connection_map', true );
 
-		if ( ( empty( $original_blog_id ) && empty( $original_source_id ) ) || $original_deleted ) {
-			echo '—';
+		if ( ( ( empty( $original_blog_id ) && empty( $original_source_id ) ) || $original_deleted ) && ! $connection_map ) {
+			echo '';
 		} else {
-			$unlinked         = (bool) get_post_meta( $post_id, 'dt_unlinked', true );
-			$post_type_object = get_post_type_object( get_post_type( $post_id ) );
-			$post_url         = get_post_meta( $post_id, 'dt_original_post_url', true );
-
-			if ( $unlinked ) {
-				echo '<a href="' . esc_url( $post_url ) . '"><img class="dt-unlinked" src="' . esc_url( plugins_url( 'assets/img/icon.svg', __DIR__ ) ) . '" alt="' . esc_attr__( 'Unlinked', 'distributor' ) . '" title="' . esc_attr__( 'Unlinked', 'distributor' ) . '"></a>';
+			if ( $connection_map ) {
+				// When a post is pushed from current site or pulled by other sites.
+				echo '<span title="' . esc_attr__( 'Pushed', 'distributor' ) . '" class="dashicons dashicons-admin-page"></span>';
 			} else {
-				echo '<a href="' . esc_url( $post_url ) . '"><img src="' . esc_url( plugins_url( 'assets/img/icon.svg', __DIR__ ) ) . '" alt="' . esc_attr__( 'Linked', 'distributor' ) . '" title="' . esc_attr__( 'Linked', 'distributor' ) . '"></a>';
+				$unlinked = (bool) get_post_meta( $post_id, 'dt_unlinked', true );
+				$post_url = get_post_meta( $post_id, 'dt_original_post_url', true );
+
+				if ( $unlinked ) {
+					echo '<a target="_blank" href="' . esc_url( $post_url ) . '"><span title="' . esc_attr__( 'Unlinked', 'distributor' ) . '" class="dashicons dashicons-editor-unlink"></span></span></a>';
+				} else {
+					echo '<a target="_blank" href="' . esc_url( $post_url ) . '"><span title="' . esc_attr__( 'Linked', 'distributor' ) . '" class="dashicons dashicons-admin-links"></span></a>';
+				}               
 			}
 		}
 	}
@@ -373,12 +378,12 @@ function link() {
 
 		if ( ! empty( $update ) ) {
 			wp_update_post(
-				[
+				array(
 					'ID'           => $post_id,
 					'post_title'   => $update['post_title'],
 					'post_content' => $update['post_content'],
 					'post_excerpt' => $update['post_excerpt'],
-				]
+				)
 			);
 
 			if ( null !== $update['meta'] ) {
@@ -640,7 +645,7 @@ function enqueue_gutenberg_edit_scripts() {
 		'gutenberg-syndicated-post.min'
 	);
 
-	$localize_data = [
+	$localize_data = array(
 		'originalBlogId'       => (int) $original_blog_id,
 		'originalPostId'       => (int) $original_post_id,
 		'originalSourceId'     => (int) $original_source_id,
@@ -658,7 +663,7 @@ function enqueue_gutenberg_edit_scripts() {
 		'supportedPostStati'   => \Distributor\Utils\distributable_post_statuses(),
 		// Filter documented in includes/push-ui.php.
 		'noPermissions'        => ! is_user_logged_in() || ! current_user_can( apply_filters( 'dt_syndicatable_capabilities', 'edit_posts' ) ),
-	];
+	);
 
 	$gutenberg_syndicated_post_script
 		->load_in_footer()