diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements b/projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements new file mode 100644 index 0000000000000..fc2fc21eaf0ff --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements @@ -0,0 +1,10 @@ +Significance: patch +Type: other + +Jetpack AI: Updates / clean up to Jetpack AI assistant sidebar +* Buttons now have 100% width and are 40px tall +* Updated text in various places +* Added message that displays when a post has no content +* Cleaned up spacing in a few places +* Changed color of some text +* Write Brief checkboxes are hidden by toggle now diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx index 66878a350339b..0ee816d9a0252 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { JetpackEditorPanelLogo, useAnalytics } from '@automattic/jetpack-shared-extension-utils'; -import { PanelBody, PanelRow, BaseControl, ExternalLink } from '@wordpress/components'; +import { PanelBody, PanelRow, BaseControl, ExternalLink, Notice } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/edit-post'; @@ -73,6 +73,8 @@ const JetpackAndSettingsContent = ( { const { productPageUrl } = useAiProductPage(); const isBreveAvailable = getBreveAvailability(); + const isPostEmpty = useSelect( select => select( editorStore ).isEditedPostEmpty(), [] ); + const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' ); const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' ); const titleOptimizationSectionLabel = isAITitleOptimizationKeywordsFeatureAvailable @@ -102,24 +104,25 @@ const JetpackAndSettingsContent = ( { ) } + { isPostEmpty && ( + + + { __( 'The following features require content to work.', 'jetpack' ) } + + + ) } + { canWriteBriefBeEnabled() && isBreveAvailable && ( - { __( 'Write Brief with AI (BETA)', 'jetpack' ) } + { __( 'Write Brief (Beta)', 'jetpack' ) } ) } - - - { __( 'AI Feedback', 'jetpack' ) } - - - - { isAITitleOptimizationAvailable && ( @@ -128,16 +131,25 @@ const JetpackAndSettingsContent = ( { ) } + { isAIFeaturedImageAvailable && ( - { __( 'AI Featured Image', 'jetpack' ) } + { __( 'Get Featured Image', 'jetpack' ) } ) } + + + + { __( 'Get Feedback', 'jetpack' ) } + + + + { requireUpgrade && ! isUsagePanelAvailable && ( @@ -149,21 +161,21 @@ const JetpackAndSettingsContent = ( { ) } - - - { __( 'Provide feedback', 'jetpack' ) } + + + { __( 'Learn more about Jetpack AI', 'jetpack' ) } - - - { __( 'Learn more about Jetpack AI', 'jetpack' ) } + + + { __( 'Give us feedback', 'jetpack' ) } - + - { __( 'AI Guidelines', 'jetpack' ) } + { __( 'AI guidelines', 'jetpack' ) } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss index 202e5b6b9fd5a..6e9a89425957c 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss @@ -1,9 +1,23 @@ .jetpack-ai-sidebar__feature-section { margin-bottom: 2em; + display: block; p, p > * { text-wrap: pretty; } + + button { + width: 100%; + justify-content: center; + } +} + +.jetpack-ai-sidebar__external-link { + min-height: unset; +} + +.jetpack-ai-assistant__help-text { + color: #757575; } .jetpack-ai-feedback__label { @@ -14,6 +28,10 @@ } } +.jetpack-ai-sidebar__warning-content { + padding-bottom: 12px; +} + .jetpack-ai__feedback-button { .icon { width: 20px; @@ -22,3 +40,12 @@ margin-left: 4px; } } + +.jetpack-ai__write-brief-card { + width: 100%; + margin-bottom: 12px; + + p { + margin: 0; + } +} diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx index fed823639ba92..e084c6afc0148 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx @@ -374,12 +374,15 @@ export default function FeaturedImage( { { ( placement === PLACEMENT_JETPACK_SIDEBAR || placement === PLACEMENT_DOCUMENT_SETTINGS ) && ( <> -

{ __( 'Create and use an AI generated featured image for your post.', 'jetpack' ) }

+

+ { __( 'Based on your post content.', 'jetpack' ) } +

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss index 46f584801f36e..51b9fe52584b0 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss @@ -1,8 +1,6 @@ @import './features/features.colors'; .jetpack-ai-proofread { - margin-bottom: 24px; - .components-checkbox-control { &__input:not( :disabled ) { @include features-colors( ( 'border-color' ) ); @@ -21,11 +19,6 @@ margin-bottom: 16px; } - &__grade-label { - color: #757575; - margin-left: 12px; - } - &__help-text { font-size: 12px; color: #757575; @@ -36,4 +29,10 @@ flex-direction: column; gap: 12px; } + + &__grade-level-container { + svg { + fill: #757575; + } + } } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx index a96118fa95a66..8ef81d02cdef2 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx @@ -8,10 +8,14 @@ import { CheckboxControl, ToggleControl, Tooltip, + Card, + CardBody, + CardFooter, } from '@wordpress/components'; import { compose, useDebounce } from '@wordpress/compose'; import { useDispatch, useSelect, withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { Icon, help } from '@wordpress/icons'; /** * External dependencies */ @@ -103,55 +107,64 @@ const Controls = ( { blocks, disabledFeatures } ) => { return (
-

{ __( 'Improve your writing with AI.', 'jetpack' ) }

- - -
- { gradeLevel === null ? ( -

- { __( 'Write to see your grade level.', 'jetpack' ) } -

- ) : ( - -

- { gradeLevel } - - { __( 'Reading grade score', 'jetpack' ) } - -

-
- ) } -
-
-
+

+ { __( 'Visualize issues and apply AI suggestions.', 'jetpack' ) } +

-
- { features.map( - feature => - canWriteBriefFeatureBeEnabled( feature.config.name ) && ( - - ) - ) } -
+ + { isProofreadEnabled && ( + + + + +
+ { features.map( + feature => + canWriteBriefFeatureBeEnabled( feature.config.name ) && ( + + ) + ) } +
+
+
+ + { gradeLevel === null ? ( +

+ { __( 'Write to see your grade level.', 'jetpack' ) } +

+ ) : ( + <> +
+ { gradeLevel } { __( 'Reading grade score', 'jetpack' ) } +
+ + + + + ) } +
+
+
+ ) }
); }; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx index a904ae4fa4297..15e523c3457fe 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx @@ -98,12 +98,15 @@ export default function Feedback( {
{ suggestion }
) } -

{ __( 'Get feedback on content structure.', 'jetpack' ) }

+

+ { __( 'Get feedback on content structure.', 'jetpack' ) } +

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx index 39f4174238bd2..3d09305fe2303 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx @@ -83,17 +83,17 @@ export default function TitleOptimization( { const SEOModalTitle = __( 'Improve title for SEO', 'jetpack' ); const modalTitle = isKeywordsFeatureAvailable ? SEOModalTitle : currentModalTitle; - const currentSidebarDescription = __( 'Use AI to optimize key details of your post.', 'jetpack' ); + const currentSidebarDescription = __( 'Based on your post content.', 'jetpack' ); const SEOSidebarDescription = __( - 'AI suggested titles based on your content and keywords for better SEO results.', + 'Based on your post content and SEO best practices.', 'jetpack' ); const sidebarDescription = isKeywordsFeatureAvailable ? SEOSidebarDescription : currentSidebarDescription; - const currentSidebarButtonLabel = __( 'Improve title', 'jetpack' ); - const SEOSidebarButtonLabel = __( 'Improve title for SEO', 'jetpack' ); + const currentSidebarButtonLabel = __( 'Generate title options', 'jetpack' ); + const SEOSidebarButtonLabel = __( 'Generate title options', 'jetpack' ); const sidebarButtonLabel = isKeywordsFeatureAvailable ? SEOSidebarButtonLabel : currentSidebarButtonLabel; @@ -228,12 +228,13 @@ export default function TitleOptimization( { return (
-

{ sidebarDescription }

+

{ sidebarDescription }