PCI Sidebar: Add Engagement Boost button

[acicovic]

Description

With this PR, we're adding a "Boost Engagement" button (bottom right in the screenshot) that opens Engagement Boost for the post being edited. Engagement Boost opens in a new tab in order to avoid potential data loss accidents.

The button appears only when all of these occur simultaneously:

1. We're able to get a valid post ID for the post.
2. The user has rights to use Engagement Boost.
3. The post is published or of a status that has been defined as trackable through the wp_parsely_trackable_statuses filter.

Motivation and context

Closes #3401.

How has this been tested?

Tested manually, existing tests pass.

Screenshots

Summary by CodeRabbit

• New Features

  • Added a “Boost Engagement” button in the Editor’s Sidebar Tools tab for eligible posts. Opens the Parsely dashboard engagement-boost page for the current post in a new tab. Visible when the post is trackable (e.g., published) and the feature is available to the user.

• Style

  • Updated sidebar styles to align and space the new “Boost Engagement” button consistently with existing UI.

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Review was skipped due to path filters

:no_entry: Files ignored due to path filters (2)

• build/content-helper/editor-sidebar.asset.php is excluded by !build/**
• build/content-helper/editor-sidebar.js is excluded by !build/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

Adds a conditionally rendered "Boost Engagement" button to the Parse.ly editor sidebar tools tab (based on postId, post status, and TrafficBoost permission) and a scoped CSS rule for .components-button.boost-engagement to control layout; the button opens the Parse.ly engagement-boost dashboard in a new tab.

Changes

Cohort / File(s)	Summary
Sidebar tools tab UI logic src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx	Imports Button, Icon, and select; reads postId and postStatus from the editor store; derives isPostTrackable from window.wpParselyTrackableStatuses (default ['publish']); conditionally renders a "Boost Engagement" Button (with external icon) when postId > 0, post is trackable, and permissions.TrafficBoost; clicking opens the engagement-boost dashboard URL in a new tab.
Sidebar styling src/content-helper/editor-sidebar/editor-sidebar.scss	Adds scoped styles for .components-button.boost-engagement (display:flex, centered content, margin via var(--grid-unit-15)) under .wp-parsely-content-helper .wp-parsely-sidebar-tabs .components-tab-panel__tabs.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Editor as WP Block Editor
    participant Sidebar as SidebarToolsTab
    participant Store as WP Data Store (editor)
    participant Button as Boost Engagement Button
    participant Browser as Browser Tab
    participant Dashboard as Parse.ly Dashboard

    User->>Editor: Open post editor
    Editor->>Sidebar: Mount sidebar tools tab
    Sidebar->>Store: getCurrentPostId(), getEditedPostAttribute('status')
    Sidebar->>Sidebar: compute isPostTrackable (status ∈ trackableStatuses)
    alt postId>0 ∧ isPostTrackable ∧ permissions.TrafficBoost
        Sidebar->>User: Render "Boost Engagement" button
        User->>Button: Click
        Button->>Browser: window.open(engagement-boost URL, _blank)
        Browser->>Dashboard: Navigate to engagement boost page
    else
        Sidebar->>User: Button hidden
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Parsely/wp-parsely#2941 — Implements the dashboard/traffic-boost UI and pages targeted by the new sidebar "Boost Engagement" button.

Suggested labels

Feature: PCH, Feature: Traffic Boost

Suggested reviewers

• alecgeatches

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly identifies the main change by specifying the PCI sidebar component and the addition of the Engagement Boost button, making it clear and directly related to the changeset.
Linked Issues Check	✅ Passed	The changes implement the requested Engagement Boost link by conditionally rendering a “Boost Engagement” button in the sidebar only when the post is published or otherwise trackable, the user has permission, and a valid post ID exists, and opening the dashboard in a new tab, thus satisfying issue #3401’s requirements.
Out of Scope Changes Check	✅ Passed	All modifications are confined to adding the new Engagement Boost button’s styling and conditional rendering logic, without unrelated code changes or modifications outside the scope of issue #3401.
Description Check	✅ Passed	The pull request description follows the repository template by including the required sections: Description, Motivation and context with issue linkage, Testing procedures, and Screenshots, and each section is adequately filled with relevant details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}