PCH Excerpt Suggestions: Adds feature as a panel in the PCH sidebar #2811
Conversation
📝 WalkthroughWalkthroughThe changes introduce a new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (5)
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.tsx (1)
24-50: LGTM: Well-structured component implementing excerpt suggestions.The
ExcerptDocumentSettingPanelcomponent is well-implemented and aligns with the PR objectives. It correctly usesPostTypeSupportCheckandPluginDocumentSettingPanelto create the excerpt suggestions panel in the sidebar.Minor suggestion:
Consider adding a brief explanation of theisDocumentSettingPanelprop passed toExcerptSuggestionsPanelin the JSDoc comment for clarity.src/content-helper/editor-sidebar/smart-linking/component.tsx (3)
682-692: Approved: Improved readability of success notice rendering.The changes simplify the conditional rendering of the success notice, enhancing code readability. The message format adjustment is minor and maintains clarity.
Consider using template literals for better readability:
- { sprintf( - /* translators: 1 - number of smart links generated */ - __( 'Successfully added %s smart links.', 'wp-parsely' ), - numAddedLinks > 0 ? numAddedLinks : suggestedLinks.length, - ) } + { /* translators: 1 - number of smart links generated */ } + { __( `Successfully added ${numAddedLinks > 0 ? numAddedLinks : suggestedLinks.length} smart links.`, 'wp-parsely' ) }
Line range hint
1-748: Consider refactoring to reduce component complexity.The
SmartLinkingPanelcomponent is quite large and complex. Consider breaking it down into smaller, more manageable sub-components or custom hooks to improve maintainability and readability.For example, you could extract the smart link generation logic into a custom hook:
const useSmartLinkGeneration = (isFullContent, selectedBlock, postContent, maxLinks) => { // ... extract relevant logic here return { generateSmartLinks, loading, error }; };Then use it in the component:
const { generateSmartLinks, loading, error } = useSmartLinkGeneration(isFullContent, selectedBlock, postContent, maxLinks);This would significantly reduce the complexity of the main component.
Line range hint
280-321: Enhance error handling ingenerateSmartLinksWithRetry.The error handling in the
generateSmartLinksWithRetryfunction could be improved to provide more specific error messages and better error recovery.Consider creating a custom error class for different types of errors that can occur during smart link generation. This would allow for more precise error handling and recovery:
class SmartLinkGenerationError extends Error { constructor(message: string, public readonly code: string, public readonly retryable: boolean) { super(message); this.name = 'SmartLinkGenerationError'; } } // In the catch block: if (err instanceof SmartLinkGenerationError) { if (err.retryable && retries > 0) { // Retry logic } else { // Handle non-retryable errors } } else { // Handle unexpected errors }src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx (1)
68-79: Add JSDoc comment with@sincetag for the Excerpt Suggestions panel.To maintain consistency and provide clear documentation, please add a JSDoc comment for the Excerpt Suggestions panel, including an
@sincetag indicating the next version of the plugin that includes this code.Example:
/** * Excerpt Suggestions Panel. * Displays excerpt suggestions in the Content Helper sidebar. * * @since x.x.x */Place this comment above the
<PanelBody>component starting at line 67.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ 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 (5)
- src/content-helper/editor-sidebar/excerpt-suggestions/component-panel.tsx (8 hunks)
- src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.scss (1 hunks)
- src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.tsx (2 hunks)
- src/content-helper/editor-sidebar/smart-linking/component.tsx (2 hunks)
- src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
src/content-helper/editor-sidebar/excerpt-suggestions/component-panel.tsx (1)
Pattern
**/*.{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."
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.scss (1)
Pattern
**/*.{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."
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.tsx (1)
Pattern
**/*.{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."
src/content-helper/editor-sidebar/smart-linking/component.tsx (1)
Pattern
**/*.{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."
src/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx (1)
Pattern
**/*.{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."
🔇 Additional comments (15)
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.scss (2)
Line range hint
1-114: LGTM! Remember to use variables for colorsThe changes look good and align well with the PR objectives. The SCSS structure is well-organized, and the use of variables and SCSS features is commendable.
As a general reminder, ensure that you're using variables for colors defined in
src/content-helper/common/css/variables.scssinstead of hardcoding values throughout the file.
24-26: 🛠️ Refactor suggestionConvert pixel value to rem units using the to_rem function
The nested selector structure looks good. However, to adhere to the coding guidelines, please convert the pixel value to rem units using the to_rem function.
Apply this diff to convert the pixel value:
.wp-parsely-excerpt-generator { &.is-doc-set-panel { - margin-top: to_rem(20px); + margin-top: to_rem(20px); }Likely invalid or redundant comment.
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.tsx (4)
5-5: LGTM: Imports are correctly added and follow standards.The new imports are appropriately added and correctly sourced from their respective dependencies. They align with the WordPress coding standards and support the implementation of the new
ExcerptDocumentSettingPanelcomponent.Also applies to: 7-7, 14-15, 17-17, 19-19
86-88: LGTM: Plugin render function updated correctly.The
ExcerptSuggestionsfunction has been appropriately updated to use the newExcerptDocumentSettingPanelcomponent. This change aligns with the PR objectives and ensures that the excerpt suggestions feature is integrated into the PCH sidebar.
Line range hint
1-108: LGTM: Code structure and adherence to guidelines are excellent.The overall structure of the file adheres to WordPress coding standards and best practices. JSDoc comments are present and include appropriate @SInCE tags. The implementation fulfills the PR objectives by successfully integrating the excerpt suggestions feature into the PCH sidebar.
Line range hint
1-108: Verify performance impact of the new panel.While the implementation appears secure and generally performant, it would be beneficial to verify the performance impact of adding the new excerpt suggestions panel to the sidebar. Consider running performance tests to ensure that the addition doesn't significantly affect the editor's responsiveness, especially for posts with large content.
src/content-helper/editor-sidebar/smart-linking/component.tsx (2)
739-739: Approved: Improved code formatting.The adjustment of the closing bracket improves code alignment and consistency without affecting functionality.
Line range hint
1-748: Verify compatibility with the latest WordPress version.Ensure that all WordPress dependencies and functions used in this component are compatible with the latest WordPress version to avoid potential deprecation issues.
Run the following script to check for any deprecated functions or features:
src/content-helper/editor-sidebar/excerpt-suggestions/component-panel.tsx (7)
50-52: Proper definition ofExcerptSuggestionsPanelProps.The
isDocumentSettingPanelprop is correctly added as an optional boolean in theExcerptSuggestionsPanelPropstype.
58-60: JSDoc comments are updated appropriately.The
@sincetag reflects the new version3.17.0, and the documentation notes the renaming of the component and the addition of theisDocumentSettingPanelprop.
62-64: ComponentExcerptSuggestionsPanelis correctly defined.The component is exported with the new name and utilizes the
isDocumentSettingPanelprop with a default value offalse.
255-255:labelprop is correctly assigned totextareaLabel.The
TextareaControlcomponent properly uses the dynamictextareaLabelvalue.
310-310: Conditional rendering ofgenerateWithParselyHeaderis appropriate.The header is correctly displayed when
isDocumentSettingPanelistrue, ensuring consistent UI in the document settings panel.
343-343: Repeated header rendering is acceptable.Displaying
generateWithParselyHeaderhere maintains consistency, showing the header above both the accept/discard buttons and the generate button.
365-375: Consistent use of documentation link for Parse.ly AI.The
hrefattribute correctly points to the excerpt generator documentation, matching the button's purpose.
| .editor-post-excerpt .excerpt-suggestions-text { | ||
| display: flex; | ||
| padding: to_rem(6px) 0 var(--grid-unit-20) 0; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: to_rem(10px); | ||
| align-self: stretch; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Convert pixel values to rem units using the to_rem function
The class structure and use of flexbox look good. However, to adhere to the coding guidelines, please convert the pixel values to rem units using the to_rem function.
Apply this diff to convert pixel values:
.editor-post-excerpt .excerpt-suggestions-text {
display: flex;
- padding: to_rem(6px) 0 var(--grid-unit-20) 0;
+ padding: to_rem(6px) 0 var(--grid-unit-20) 0;
flex-direction: column;
align-items: flex-start;
- gap: to_rem(10px);
+ gap: to_rem(10px);
align-self: stretch;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .editor-post-excerpt .excerpt-suggestions-text { | |
| display: flex; | |
| padding: to_rem(6px) 0 var(--grid-unit-20) 0; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: to_rem(10px); | |
| align-self: stretch; | |
| } | |
| .editor-post-excerpt .excerpt-suggestions-text { | |
| display: flex; | |
| padding: to_rem(6px) 0 var(--grid-unit-20) 0; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: to_rem(10px); | |
| align-self: stretch; | |
| } |
| @@ -2,6 +2,7 @@ | |||
| * WordPress dependencies | |||
| */ | |||
| import { Panel, PanelBody } from '@wordpress/components'; | |||
| import { PostTypeSupportCheck } from '@wordpress/editor'; | |||
There was a problem hiding this comment.
Update import path for PostTypeSupportCheck.
The PostTypeSupportCheck component should be imported from @wordpress/block-editor instead of @wordpress/editor to ensure compatibility with the latest version of WordPress and adherence to WordPress coding standards.
Apply this change:
-import { PostTypeSupportCheck } from '@wordpress/editor';
+import { PostTypeSupportCheck } from '@wordpress/block-editor';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { PostTypeSupportCheck } from '@wordpress/editor'; | |
| import { PostTypeSupportCheck } from '@wordpress/block-editor'; |
| { | ||
| permissions.ExcerptSuggestions && | ||
| <PostTypeSupportCheck supportKeys="excerpt"> | ||
| <PanelBody | ||
| title={ __( 'Excerpt Suggestions (Beta)', 'wp-parsely' ) } | ||
| initialOpen={ settings.ExcerptSuggestions.Open } | ||
| onToggle={ ( next ) => { | ||
| setSettings( { | ||
| ExcerptSuggestions: { | ||
| ...settings.ExcerptSuggestions, | ||
| Open: next, | ||
| }, | ||
| } ); | ||
| trackToggle( 'excerpt_suggestions', next ); | ||
| } } | ||
| > | ||
| <VerifyCredentials> | ||
| <ExcerptSuggestionsPanel /> | ||
| </VerifyCredentials> | ||
| </PanelBody> | ||
| </PostTypeSupportCheck> | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
PostTypeSupportCheck Usage Detected Without Verified Imports
The PostTypeSupportCheck component is used in the following files:
src/content-helper/editor-sidebar/excerpt-suggestions/excerpt-suggestions.tsxsrc/content-helper/editor-sidebar/tabs/sidebar-tools-tab.tsx
However, no corresponding import statements from @wordpress/block-editor were found. Please verify that PostTypeSupportCheck is correctly imported and compatible with the latest WordPress version.
🔗 Analysis chain
Ensure compatibility of PostTypeSupportCheck usage with the latest WordPress version.
Please verify that the PostTypeSupportCheck component and its usage are compatible with the latest version of WordPress, as there may have been changes to its API or location.
Run the following script to check all usages of PostTypeSupportCheck and confirm the correct import paths:
Review the results to ensure that PostTypeSupportCheck is imported correctly and used appropriately throughout the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find all import statements and usages of 'PostTypeSupportCheck'.
# Expected outcome: All imports should be from '@wordpress/block-editor', and usage should match the latest API.
# Find import statements
rg --type js "import.*PostTypeSupportCheck.*from '@wordpress/.+';" -A 0
# Find component usages
rg --type js "<PostTypeSupportCheck" -A 2
Length of output: 123
Script:
#!/bin/bash
# Description: Enhanced search for import statements and usages of 'PostTypeSupportCheck' and similar components.
# Search for import statements of any component containing 'PostTypeSupport'
rg --type js,ts,jsx,tsx "import.*PostTypeSupport.*from '@wordpress/.+';" -A 0
# Search for component usages of any component containing 'PostTypeSupport'
rg --type js,ts,jsx,tsx "<PostTypeSupport[^>]*" -A 2
Length of output: 216
Script:
#!/bin/bash
# Description: Corrected search for import statements and usages of 'PostTypeSupportCheck' and similar components.
# Search for import statements of any component containing 'PostTypeSupport'
rg --type js --type ts --type jsx --type tsx "import.*PostTypeSupport.*from '@wordpress/.+';" -A 0
# Search for component usages of any component containing 'PostTypeSupport'
rg --type js --type ts --type jsx --type tsx "<PostTypeSupport[^>]*" -A 2
Length of output: 238
Script:
#!/bin/bash
# Description: Search for import statements and usages of 'PostTypeSupportCheck' and similar components using glob patterns.
# Search for import statements of any component containing 'PostTypeSupport'
rg "<import.*PostTypeSupport.*from '@wordpress/[^']+'>" -g "*.{js,ts,jsx,tsx}"
# Search for component usages of any component containing 'PostTypeSupport'
rg "<PostTypeSupport[^>]*" -g "*.{js,ts,jsx,tsx}"
Length of output: 376
| href={ __( | ||
| 'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt', | ||
| 'wp-parsely', | ||
| ) } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove unnecessary translation function from the URL.
URLs typically are not translated. Wrapping the href value with __() is unnecessary.
Apply this diff to fix the code:
- href={ __(
- 'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt',
- 'wp-parsely',
- ) }
+ href="https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| href={ __( | |
| 'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt', | |
| 'wp-parsely', | |
| ) } | |
| href="https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt" |
| href="https://docs.parse.ly/plugin-content-helper/#h-smart-linking-beta" | ||
| target="_blank" | ||
| variant="link" | ||
| > | ||
| { __( 'Learn more about Parse.ly AI', 'wp-parsely' ) } | ||
| <Icon icon={ external } size={ 18 } className="parsely-external-link-icon" /> | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
Correct the documentation link in the href attribute.
The href attribute points to an unrelated section (#h-smart-linking-beta). It should link to the Parse.ly AI or excerpt generator documentation to match the button text.
Apply this diff to update the link:
- href="https://docs.parse.ly/plugin-content-helper/#h-smart-linking-beta"
+ href="https://docs.parse.ly/plugin-content-helper/#h-excerpt-generator-beta"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| href="https://docs.parse.ly/plugin-content-helper/#h-smart-linking-beta" | |
| target="_blank" | |
| variant="link" | |
| > | |
| { __( 'Learn more about Parse.ly AI', 'wp-parsely' ) } | |
| <Icon icon={ external } size={ 18 } className="parsely-external-link-icon" /> | |
| </Button> | |
| </div> | |
| href="https://docs.parse.ly/plugin-content-helper/#h-excerpt-generator-beta" | |
| target="_blank" | |
| variant="link" | |
| > | |
| { __( 'Learn more about Parse.ly AI', 'wp-parsely' ) } | |
| <Icon icon={ external } size={ 18 } className="parsely-external-link-icon" /> | |
| </Button> | |
| </div> |
| let textareaLabel = __( 'Excerpt', 'wp-parsely' ); | ||
| if ( isDocumentSettingPanel ) { | ||
| textareaLabel = __( 'Write an excerpt (optional)', 'wp-parsely' ); | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify textareaLabel assignment using a ternary operator.
To enhance readability and use const instead of let, consider assigning textareaLabel with a ternary operator:
Apply this diff to streamline the code:
- let textareaLabel = __( 'Excerpt', 'wp-parsely' );
- if ( isDocumentSettingPanel ) {
- textareaLabel = __( 'Write an excerpt (optional)', 'wp-parsely' );
- }
+ const textareaLabel = isDocumentSettingPanel
+ ? __( 'Write an excerpt (optional)', 'wp-parsely' )
+ : __( 'Excerpt', 'wp-parsely' );📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let textareaLabel = __( 'Excerpt', 'wp-parsely' ); | |
| if ( isDocumentSettingPanel ) { | |
| textareaLabel = __( 'Write an excerpt (optional)', 'wp-parsely' ); | |
| } | |
| const textareaLabel = isDocumentSettingPanel | |
| ? __( 'Write an excerpt (optional)', 'wp-parsely' ) | |
| : __( 'Excerpt', 'wp-parsely' ); | |
Description
This PR adds the Excerpt Suggestions feature to the PCH Sidebar, as it's own panel. The feature is still available as a replacement for the core excerpt panel, in the document sidebar.
There are some slight UI differences between the two panels, that are visible in the screenshots below.
Note: this work is based upon #2776, since it uses the work that was implemented there.
Motivation and context
How has this been tested?
Tested locally
Screenshots (if appropriate)
Summary by CodeRabbit
New Features
ExcerptSuggestionsPanelfor improved excerpt suggestions with dynamic UI elements.ExcerptDocumentSettingPanelfor custom excerpt suggestions based on post type support.Bug Fixes
Style