PCI Sidebar: Add Engagement Boost button

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => '8c8db64fb2565346a8ca');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'b3915e4d8c96c21e0c53');

src/content-helper/editor-sidebar/editor-sidebar.scss

@@ -104,6 +104,12 @@ p.content-helper-error-message-hint {
 					background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 				}
 			}
+
+			.components-button.boost-engagement {
+				display: flex;
+				justify-content: center;
+				margin: var(--grid-unit-15);
+			}
 		}
 	}
 

src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx

@@ -1,13 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { Panel, PanelBody } from '@wordpress/components';
+import { Button, Icon, Panel, PanelBody } from '@wordpress/components';
 import { PostTypeSupportCheck } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { useSelect } from '@wordpress/data';
+import { external } from '@wordpress/icons';
+import { GutenbergFunction } from '../../../@types/gutenberg/types';
 import { SidebarSettings, useSettings } from '../../common/settings';
 import { ContentHelperPermissions } from '../../common/utils/permissions';
 import { VerifyCredentials } from '../../common/verify-credentials';
@@ -39,6 +42,19 @@ export const SidebarToolsTab = (
 ): React.JSX.Element => {
 	const { settings, setSettings } = useSettings<SidebarSettings>();
 
+	const { postId, postStatus } = useSelect( ( select ) => {
+		const { getCurrentPostId, getEditedPostAttribute } =
+			select( 'core/editor' ) as GutenbergFunction;
+
+		return {
+			postId: getCurrentPostId() ?? 0,
+			postStatus: getEditedPostAttribute( 'status' ) ?? 'draft',
+		};
+	}, [] );
+
+	const trackableStatuses = window.wpParselyTrackableStatuses ?? [ 'publish' ];
+	const isPostTrackable = trackableStatuses.includes( postStatus );
+
 	return (
 		<Panel>
 			{ permissions.TitleSuggestions &&
@@ -126,6 +142,19 @@ export const SidebarToolsTab = (
 					</VerifyCredentials>
 				}
 			</PanelBody>
+
+			{ postId > 0 && isPostTrackable && permissions.TrafficBoost &&
+				<Button
+					className="boost-engagement"
+					href={ `/wp-admin/admin.php?page=parsely-dashboard-page#/engagement-boost/${ postId }` }
+					rel="noopener"
+					target="_blank"
+					variant="secondary"
+				>
+					{ __( 'Boost Engagement', 'wp-parsely' ) }
+					<Icon icon={ external } size={ 18 } className="parsely-external-link-icon" />
+				</Button>
+			}
 		</Panel>
 	);
 };