Toggle Distributor controls when post status changes

assets/css/push.scss

@@ -16,6 +16,10 @@ $mediaSmallScreen : "min-width: 480px";
 $mediaMediumScreen : "min-width: 768px";
 $mediaGutenbergSmallScreen : "max-width: 782px";
 
+#wp-admin-bar-distributor.hide {
+	display: none;
+}
+
 #distributor-push-wrapper,
 #wpadminbar #wp-admin-bar-distributor-placeholder > .ab-item {
 	display: none;

assets/js/gutenberg-plugin.js

@@ -6,7 +6,7 @@ import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
 
-const { document, dtGutenberg, MouseEvent } = window;
+const { document, dt, dtGutenberg, MouseEvent } = window;
 
 /**
  * Add ability to show the admin bar, if needed
@@ -179,11 +179,23 @@ const DistributorPlugin = () => {
 		return null;
 	}
 
+	const distributorTopMenu = document.querySelector(
+		'#wp-admin-bar-distributor'
+	);
+
+	// eslint-disable-next-line no-shadow, react-hooks/rules-of-hooks -- permission checks are needed.
+	const post = useSelect( ( select ) =>
+		select( 'core/editor' ).getCurrentPost()
+	);
+	// Make the post title available to the top menu.
+	dt.postTitle = post.title;
+
 	// If we are on a non-supported post status, change what we show
 	if (
 		dtGutenberg.supportedPostStati &&
 		! dtGutenberg.supportedPostStati.includes( postStatus )
 	) {
+		distributorTopMenu?.classList.add( 'hide' );
 		return (
 			<PluginDocumentSettingPanel
 				title={ __( 'Distributor', 'distributor' ) }
@@ -196,6 +208,7 @@ const DistributorPlugin = () => {
 		);
 	}
 
+	distributorTopMenu?.classList.remove( 'hide' );
 	return (
 		<PluginDocumentSettingPanel
 			title={ __( 'Distributor', 'distributor' ) }

assets/js/push.js

@@ -345,9 +345,14 @@ jQuery( window ).on( 'load', () => {
 		// Determine if we need to hide the admin bar
 		maybeHideAdminBar();
 
-		if ( distributorPushWrapper.classList.contains( 'loaded' ) ) {
+		// If the post title has changed, we need to reload the template.
+		if (
+			distributorPushWrapper.classList.contains( 'loaded' ) &&
+			dt.postTitle === dt.previousPostTitle
+		) {
 			return;
 		}
+		dt.previousPostTitle = dt.postTitle;
 
 		distributorPushWrapper.classList.remove( 'message-error' );
 		distributorPushWrapper.classList.add( 'loaded' );
@@ -395,13 +400,15 @@ jQuery( window ).on( 'load', () => {
 							connections: mustacheData.connections,
 							foundConnections: mustacheData.connections.length,
 							showSearch: 5 < mustacheData.connections.length,
+							postTitle: dt.postTitle,
 						}
 					);
 
 					setDisabledConnections();
 				} else {
 					distributorPushWrapper.innerHTML = template( {
 						connections: dtConnections,
+						postTitle: dt.postTitle,
 					} );
 				}
 

includes/push-ui.php

@@ -68,7 +68,7 @@ function syndicatable() {
 
 		global $pagenow;
 
-		if ( 'post.php' !== $pagenow ) {
+		if ( 'post.php' !== $pagenow && 'post-new.php' !== $pagenow ) {
 			return false;
 		}
 	} else {
@@ -77,17 +77,19 @@ function syndicatable() {
 		}
 	}
 
-	global $post;
+	$post = get_post();
 
 	if ( empty( $post ) ) {
 		return;
 	}
 
-	if ( ! in_array( $post->post_status, \Distributor\Utils\distributable_post_statuses(), true ) ) {
+	// If we're using the classic editor, we need to make sure the post has a distributable status.
+	if ( ! use_block_editor_for_post( $post ) && ! in_array( $post->post_status, \Distributor\Utils\distributable_post_statuses(), true ) ) {
 		return false;
 	}
 
-	if ( ! in_array( get_post_type(), $distributable_post_types, true ) || ( ! empty( $_GET['post_type'] ) && 'dt_ext_connection' === $_GET['post_type'] ) ) { // @codingStandardsIgnoreLine Nonce not required
+	$distributable_post_types = array_diff( $distributable_post_types, array( 'dt_ext_connection' ) );
+	if ( ! in_array( get_post_type(), $distributable_post_types, true ) ) {
 		return false;
 	}
 
@@ -421,6 +423,7 @@ function enqueue_scripts( $hook ) {
 			'nonce'                => wp_create_nonce( 'dt-push' ),
 			'loadConnectionsNonce' => wp_create_nonce( 'dt-load-connections' ),
 			'postId'               => (int) get_the_ID(),
+			'postTitle'            => get_the_title(),
 			'ajaxurl'              => esc_url( admin_url( 'admin-ajax.php' ) ),
 			'messages'             => array(
 				'ajax_error'   => __( 'Ajax error:', 'distributor' ),

includes/syndicated-post-ui.php

@@ -644,6 +644,7 @@ function enqueue_gutenberg_edit_scripts() {
 	if ( file_exists( $asset_file ) ) {
 		$asset_data = require $asset_file;
 	}
+	$asset_data['dependencies'][] = 'dt-push';
 
 	wp_enqueue_script( 'dt-gutenberg-syndicated-post', plugins_url( '/dist/js/gutenberg-syndicated-post.min.js', __DIR__ ), $asset_data['dependencies'], $asset_data['version'], true );
 	wp_set_script_translations( 'dt-gutenberg-syndicated-post', 'distributor', DT_PLUGIN_PATH . 'lang' );

templates/show-connections-amp.php

@@ -11,7 +11,7 @@
 	<div class="inner">
 	{{#foundConnections}}
 		<?php /* translators: %s the post title */ ?>
-		<p><?php echo sprintf( esc_html__( 'Distribute &quot;%s&quot; to other connections.', 'distributor' ), esc_html( get_the_title( $post->ID ) ) ); ?></p>
+		<p><?php echo sprintf( esc_html__( 'Distribute &quot;%s&quot; to other connections.', 'distributor' ), '{{ postTitle }}' ); ?></p>
 
 		<div class="connections-selector">
 			<div>

templates/show-connections.php

@@ -11,7 +11,7 @@
 	<div class="inner">
 	<# if ( ! _.isEmpty( connections ) ) { #>
 		<?php /* translators: %s the post title */ ?>
-		<p><?php echo sprintf( esc_html__( 'Distribute &quot;%s&quot; to other connections.', 'distributor' ), esc_html( get_the_title( $post->ID ) ) ); ?></p>
+		<p><?php echo sprintf( esc_html__( 'Distribute &quot;%s&quot; to other connections.', 'distributor' ), '{{ postTitle }}' ); ?></p>
 
 		<div class="connections-selector">
 			<div>

tests/cypress/e2e/distributor-menu-toggles.test.js

@@ -0,0 +1,50 @@
+describe( 'Distributor post toggles as expected in block editor', () => {
+	before( () => {
+		cy.login();
+	} );
+
+	it( 'Distribution info is hidden when post is not published', () => {
+		cy.createPost( {
+			title: 'Test Post',
+			content: 'Test Content',
+			status: 'draft',
+		} ).then( ( post ) => {
+			cy.openDocumentSettingsPanel( 'Distributor' );
+			cy.get( '.distributor-panel > p' ).should(
+				'contain.text',
+				'Distribution options available once published'
+			);
+
+			cy.get( '.editor-post-publish-panel__toggle' ).should(
+				'be.enabled'
+			);
+			cy.get( '.editor-post-publish-panel__toggle' ).click();
+			cy.intercept( { method: 'POST' }, ( req ) => {
+				const body = req.body;
+				if ( body.status === 'publish' ) {
+					req.alias = 'publishPost';
+				}
+			} );
+			cy.get( '.editor-post-publish-button' ).click();
+			cy.get(
+				'.components-snackbar, .components-notice.is-success'
+			).should( 'be.visible' );
+			cy.wait( '@publishPost' ).then( ( response ) => {
+				let _a;
+				cy.wrap(
+					( _a = response.response ) === null || _a === void 0
+						? void 0
+						: _a.body
+				);
+			} );
+		} );
+		cy.get(
+			'.editor-post-publish-panel__header .components-button'
+		).click();
+		cy.openDocumentSettingsPanel( 'Distributor' );
+		cy.get( '.distributor-panel .distributor-toggle button' ).should(
+			'contain.text',
+			'Distribute post'
+		);
+	} );
+} );