fix(content-distribution): refactor outgoing post js (#188)

Author: miguelpeixe

includes/content-distribution/class-editor.php

@@ -87,7 +87,6 @@ public static function enqueue_block_editor_assets(): void {
 	 * @return void
 	 */
 	private static function enqueue_block_editor_assets_for_incoming_post( WP_Post $post ): void {
-
 		$incoming = new Incoming_Post( $post->ID );
 
 		wp_enqueue_script(
@@ -125,24 +124,24 @@ private static function enqueue_block_editor_assets_for_incoming_post( WP_Post $
 	 */
 	private static function enqueue_block_editor_assets_for_outgoing_post( WP_Post $post ): void {
 		wp_enqueue_script(
-			'newspack-network-distribute',
-			plugins_url( '../../dist/distribute.js', __FILE__ ),
+			'newspack-network-outgoing-post',
+			plugins_url( '../../dist/outgoing-post.js', __FILE__ ),
 			[],
-			filemtime( NEWSPACK_NETWORK_PLUGIN_DIR . 'dist/distribute.js' ),
+			filemtime( NEWSPACK_NETWORK_PLUGIN_DIR . 'dist/outgoing-post.js' ),
 			true
 		);
 		wp_register_style(
-			'newspack-network-distribute',
-			plugins_url( '../../dist/distribute.css', __FILE__ ),
+			'newspack-network-outgoing-post',
+			plugins_url( '../../dist/outgoing-post.css', __FILE__ ),
 			[],
-			filemtime( NEWSPACK_NETWORK_PLUGIN_DIR . 'dist/distribute.css' ),
+			filemtime( NEWSPACK_NETWORK_PLUGIN_DIR . 'dist/outgoing-post.css' ),
 		);
-		wp_style_add_data( 'newspack-network-distribute', 'rtl', 'replace' );
-		wp_enqueue_style( 'newspack-network-distribute' );
+		wp_style_add_data( 'newspack-network-outgoing-post', 'rtl', 'replace' );
+		wp_enqueue_style( 'newspack-network-outgoing-post' );
 
 		wp_localize_script(
-			'newspack-network-distribute',
-			'newspack_network_distribute',
+			'newspack-network-outgoing-post',
+			'newspack_network_outgoing_post',
 			[
 				'network_sites'    => Network::get_networked_urls(),
 				'distributed_meta' => Outgoing_Post::DISTRIBUTED_POST_META,

src/content-distribution/content-distribution-panel/style.scss

@@ -11,14 +11,41 @@
 		border: 0;
 	}
 
+	.content-distribution-panel-header {
+		> *:last-child,
+		.components-base-control__field {
+			margin: 0;
+		}
+	}
+
 	.content-distribution-panel-body {
 		flex: 1 1 100%;
 		overflow-y: auto;
 		padding-top: 0;
 
+		.components-checkbox-control {
+			padding: 12px 0;
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+			label {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			&:has( input:disabled ) {
+				opacity: 0.5;
+			}
+			&:has( input[name="select-all"] ) label {
+				font-weight: 600;
+			}
+		}
 	}
 
 	.content-distribution-panel__button-column {
+		p:first-child {
+			margin-bottom: 0;
+		}
 		.components-button {
 			justify-content: center;
 		}

src/content-distribution/distribute/style.scss

@@ -66,4 +66,4 @@
 			@include grey-out-inner;
 		}
 	}
-}
+}

src/content-distribution/incoming-post/style.scss

@@ -1,4 +1,4 @@
-/* globals newspack_network_distribute */
+/* globals newspack_network_outgoing_post */
 
 /**
  * WordPress dependencies.
@@ -7,21 +7,20 @@ import apiFetch from '@wordpress/api-fetch';
 import { sprintf, __, _n } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PluginSidebar } from '@wordpress/editor';
-import { Panel, PanelBody, CheckboxControl, TextControl, Button } from '@wordpress/components';
+import { CheckboxControl, TextControl, Button } from '@wordpress/components';
 import { globe } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
 
 /**
  * Internal dependencies.
  */
-import './style.scss';
+import ContentDistributionPanel from '../content-distribution-panel';
 
-const networkSites = newspack_network_distribute.network_sites;
-const distributedMetaKey = newspack_network_distribute.distributed_meta;
-const postTypeLabel = newspack_network_distribute.post_type_label;
+const networkSites = newspack_network_outgoing_post.network_sites;
+const distributedMetaKey = newspack_network_outgoing_post.distributed_meta;
+const postTypeLabel = newspack_network_outgoing_post.post_type_label;
 
-function Distribute() {
+function OutgoingPost() {
 	const [ search, setSearch ] = useState( '' );
 	const [ isDistributing, setIsDistributing ] = useState( false );
 	const [ distribution, setDistribution ] = useState( [] );
@@ -124,14 +123,9 @@ function Distribute() {
 	}
 
 	return (
-		<PluginSidebar
-			name="newspack-network-distribute"
-			icon={ globe }
-			title={ __( 'Distribute', 'newspack-network' ) }
-			className="newspack-network-distribute"
-		>
-			<Panel>
-				<PanelBody className="distribute-header">
+		<ContentDistributionPanel
+			header={ (
+				<>
 					{ ! distribution.length ? (
 						<p>
 							{ isUnpublished ? (
@@ -164,8 +158,10 @@ function Distribute() {
 							onChange={ setSearch }
 						/>
 					) }
-				</PanelBody>
-				<PanelBody className="distribute-body">
+				</>
+			) }
+			body={ (
+				<>
 					{ networkSites.length > 1 && selectableSites.length !== 0 && sites.length === networkSites.length && (
 						<CheckboxControl
 							name="select-all"
@@ -190,8 +186,10 @@ function Distribute() {
 							} }
 						/>
 					) ) }
-				</PanelBody>
-				<PanelBody className="distribute-footer">
+				</>
+			) }
+			buttons={ (
+				<>
 					{ siteSelection.length > 0 && (
 						<p>
 							{ sprintf(
@@ -232,13 +230,13 @@ function Distribute() {
 							__( 'Distribute', 'newspack-network' )
 						) }
 					</Button>
-				</PanelBody>
-			</Panel>
-		</PluginSidebar>
+				</>
+			) }
+		/>
 	);
 }
 
-registerPlugin( 'newspack-network-distribute', {
-		render: Distribute,
+registerPlugin( 'newspack-network-outgoing-post', {
+		render: OutgoingPost,
 		icon: globe,
 } );

src/content-distribution/distribute/index.js src/content-distribution/outgoing-post/index.js

@@ -11,7 +11,7 @@ module.exports = getBaseWebpackConfig(
 	{
 		entry: {
 			'distribute-panel': path.join( __dirname, 'src', 'content-distribution', 'content-distribution-panel' ),
-			'distribute': path.join( __dirname, 'src', 'content-distribution', 'distribute' ), // TODO. Rename to outgoing-post
+			'outgoing-post': path.join( __dirname, 'src', 'content-distribution', 'outgoing-post' ),
 			'incoming-post': path.join( __dirname, 'src', 'content-distribution', 'incoming-post' ),
 		},
 	}