PCI Sidebar: Add Engagement Boost button #3748
Conversation
acicovic
added
the
Changelog: Added
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughAdds 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 Changes
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
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx (1)
138-149: Consider addingaria-hiddento the icon for improved accessibility.The button implementation correctly uses
rel="noopener"for security and properly internationalizes the text. The conditional rendering logic appropriately checks post ID, trackability, and permissions before displaying the button.Consider adding
aria-hidden="true"to the icon to prevent screen readers from announcing it separately:- <Icon icon={ external } size={ 18 } className="parsely-external-link-icon" /> + <Icon icon={ external } size={ 18 } className="parsely-external-link-icon" aria-hidden="true" />
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
build/content-helper/editor-sidebar-rtl.cssis excluded by!build/**build/content-helper/editor-sidebar.asset.phpis excluded by!build/**build/content-helper/editor-sidebar.cssis excluded by!build/**build/content-helper/editor-sidebar.jsis excluded by!build/**
📒 Files selected for processing (2)
src/content-helper/editor-sidebar/editor-sidebar.scss(1 hunks)src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,ts,tsx,jsx}
⚙️ CodeRabbit configuration file
**/*.{js,ts,tsx,jsx}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the code to ensure it is well-structured and adheres to best practices.
- Verify compliance with WordPress coding standards.
- Ensure the code is well-documented.
- Check for security vulnerabilities and confirm the code is secure.
- Optimize the code for performance, removing any unnecessary elements.
- Validate JSDoc comments for accuracy, currency, and adherence to WordPress coding standards.
- Ensure each line comment concludes with a period.
- Confirm every JSDoc comment includes a @SInCE tag indicating the next version of the plugin to include the code.
- Guarantee compatibility with the latest version of WordPress, avoiding deprecated functions or features."
Files:
src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx
**/*.{css,scss}
⚙️ CodeRabbit configuration file
**/*.{css,scss}: "Perform a detailed review of the provided code with following key aspects in mind:
- Review the SCSS code to ensure it is well-structured and adheres to best practices.
- Convert dimensions greater than or equal to 3px to rem units using the to_rem function.
- Utilize variables for sizes and colors defined in src/content-helper/common/css/variables.scss instead of hardcoding values."
Files:
src/content-helper/editor-sidebar/editor-sidebar.scss
🧠 Learnings (1)
📚 Learning: 2024-10-09T07:53:49.520Z
Learnt from: acicovic
PR: Parsely/wp-parsely#2811
File: src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx:5-5
Timestamp: 2024-10-09T07:53:49.520Z
Learning: `PostTypeSupportCheck` should be imported from `wordpress/editor`, following the official WordPress documentation.
Applied to files:
src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx
🔇 Additional comments (2)
src/content-helper/editor-sidebar/editor-sidebar.scss (1)
108-112: LGTM!The styling correctly uses CSS variables for spacing and follows the existing patterns in the file. The flex layout with centered content is appropriate for the button placement.
src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx (1)
4-4: LGTM!The new imports are correctly sourced from WordPress packages and align with the component's requirements.
Also applies to: 11-12
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:
wp_parsely_trackable_statusesfilter.Motivation and context
Closes #3401.
How has this been tested?
Tested manually, existing tests pass.
Screenshots
Summary by CodeRabbit
New Features
Style