diff --git a/assets/css/admin.css b/assets/css/admin.css index 0dc1bcfb7..0c008d249 100644 --- a/assets/css/admin.css +++ b/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; } diff --git a/assets/css/gutenberg-syndicated-post.scss b/assets/css/gutenberg-syndicated-post.scss index 550168984..b8e02453c 100644 --- a/assets/css/gutenberg-syndicated-post.scss +++ b/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; diff --git a/assets/js/gutenberg-plugin.js b/assets/js/gutenberg-plugin.js index 8b1448222..20064bee3 100644 --- a/assets/js/gutenberg-plugin.js +++ b/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 ( +
+ + { sprintf( + /* translators: 1: Syndication date and time. */ + __( + 'Pulled & linked on %1$s from %2$s', + 'distributor' + ), + dtGutenberg.syndicationTime, + dtGutenberg.originalLocationName + ) } + + + { __( 'Updating the ', 'distributor' ) } + + { __( 'Original Content', 'distributor' ) } + + { ', ' } + { __( + 'will update this post automatically.', + 'distributor' + ) } + + {/* eslint-disable-line */} + {/* eslint-disable-line */} + + { __( 'Unlink from Original', 'distributor' ) } + + + { isOpen && ( + +

', + '' + ), + } } + /> + + + + + + ) } +

+ ); + } return ( - - { sprintf( - /* translators: 1: Syndication date and time. */ - __( 'Distributed on: %1$s', 'distributor' ), - dtGutenberg.syndicationTime +
+ + { sprintf( + /* translators: 1: Syndication date and time. */ + __( 'Pulled on %1$s from %2$s', 'distributor' ), + dtGutenberg.syndicationTime, + dtGutenberg.originalLocationName + ) } + + + { __( 'This post has been unlinked from the ', 'distributor' ) } + + { __( 'Original Content', 'distributor' ) } + + { '.' } + + {/* eslint-disable-line */} + + {/* eslint-disable-line */} + { __( 'Restore link to Original', 'distributor' ) } + + + { isOpen && ( + + + { __( 'Restoring the link to the ', 'distributor' ) } + + { __( 'Original Content', 'distributor' ) } + + { __( + ' will start updating this post automatically from the Original, overwriting current content.', + 'distributor' + ) } + +
+ + + { __( 'Restore link', 'distributor' ) } + + {/* eslint-disable-line */} + {/* eslint-disable-line */} + { __( 'Cancel', 'distributor' ) } + + +
+
) } - +
); }; @@ -149,6 +272,17 @@ const DistributorIcon = () => ( ); +/** + * 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 ( } icon={ DistributorIcon } className="distributor-panel" > @@ -214,7 +348,7 @@ const DistributorPlugin = () => { distributorTopMenu?.classList.remove( 'hide' ); return ( } icon={ DistributorIcon } className="distributor-panel" > diff --git a/includes/syndicated-post-ui.php b/includes/syndicated-post-ui.php index 43c8d66e5..f0bf76b4a 100644 --- a/includes/syndicated-post-ui.php +++ b/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 '' . esc_attr__( 'Unlinked', 'distributor' ) . ''; + if ( $connection_map ) { + // When a post is pushed from current site or pulled by other sites. + echo ''; } else { - echo '' . esc_attr__( 'Linked', 'distributor' ) . ''; + $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 '
'; + } else { + echo ''; + } } } } @@ -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()