Skip to content

Commit a03baeb

Browse files
mwatsoncoder-karen
mwatson
authored and
coder-karen
committed
Jetpack AI: Updates / clean up to Jetpack AI assistant sidebar (#41161)
* 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 * Replacing custom warning with Notice component, move score below write brief controls * Switching to use isEditedPostEmpty instead of usePostContent, Write Brief styling cleanup * changelog * Fixing typo
1 parent fe0ef7b commit a03baeb

File tree

8 files changed

+139
-71
lines changed

8 files changed

+139
-71
lines changed

‎projects/plugins/jetpack/changelog/update-jetpack-ai-sidebar-improvements

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Significance: patch
2+
Type: other
3+
4+
Jetpack AI: Updates / clean up to Jetpack AI assistant sidebar
5+
* Buttons now have 100% width and are 40px tall
6+
* Updated text in various places
7+
* Added message that displays when a post has no content
8+
* Cleaned up spacing in a few places
9+
* Changed color of some text
10+
* Write Brief checkboxes are hidden by toggle now

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx

+30-18
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* External dependencies
33
*/
44
import { JetpackEditorPanelLogo, useAnalytics } from '@automattic/jetpack-shared-extension-utils';
5-
import { PanelBody, PanelRow, BaseControl, ExternalLink } from '@wordpress/components';
5+
import { PanelBody, PanelRow, BaseControl, ExternalLink, Notice } from '@wordpress/components';
66
import { store as coreStore } from '@wordpress/core-data';
77
import { useSelect } from '@wordpress/data';
88
import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/edit-post';
@@ -81,6 +81,8 @@ const JetpackAndSettingsContent = ( {
8181
// return postTypeObject?.viewable;
8282
// }, [] );
8383

84+
const isPostEmpty = useSelect( select => select( editorStore ).isEditedPostEmpty(), [] );
85+
8486
const currentTitleOptimizationSectionLabel = __( 'Optimize Publishing', 'jetpack' );
8587
const SEOTitleOptimizationSectionLabel = __( 'Optimize Title', 'jetpack' );
8688
const titleOptimizationSectionLabel = isAITitleOptimizationKeywordsFeatureAvailable
@@ -110,24 +112,25 @@ const JetpackAndSettingsContent = ( {
110112
</PanelRow>
111113
) } */ }
112114

115+
{ isPostEmpty && (
116+
<PanelRow className="jetpack-ai-sidebar__warning-content">
117+
<Notice isDismissible={ false } status="warning">
118+
{ __( 'The following features require content to work.', 'jetpack' ) }
119+
</Notice>
120+
</PanelRow>
121+
) }
122+
113123
{ canWriteBriefBeEnabled() && isBreveAvailable && (
114124
<PanelRow>
115125
<BaseControl __nextHasNoMarginBottom={ true }>
116126
<BaseControl.VisualLabel>
117-
{ __( 'Write Brief with AI (BETA)', 'jetpack' ) }
127+
{ __( 'Write Brief (Beta)', 'jetpack' ) }
118128
</BaseControl.VisualLabel>
119129
<Breve />
120130
</BaseControl>
121131
</PanelRow>
122132
) }
123133

124-
<PanelRow className="jetpack-ai-sidebar__feature-section">
125-
<BaseControl __nextHasNoMarginBottom={ true }>
126-
<BaseControl.VisualLabel>{ __( 'AI Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
127-
<Feedback placement={ placement } busy={ false } disabled={ requireUpgrade } />
128-
</BaseControl>
129-
</PanelRow>
130-
131134
{ isAITitleOptimizationAvailable && (
132135
<PanelRow className="jetpack-ai-sidebar__feature-section">
133136
<BaseControl __nextHasNoMarginBottom={ true }>
@@ -136,16 +139,25 @@ const JetpackAndSettingsContent = ( {
136139
</BaseControl>
137140
</PanelRow>
138141
) }
142+
139143
{ isAIFeaturedImageAvailable && (
140144
<PanelRow className="jetpack-ai-sidebar__feature-section">
141145
<BaseControl __nextHasNoMarginBottom={ true }>
142146
<BaseControl.VisualLabel>
143-
{ __( 'AI Featured Image', 'jetpack' ) }
147+
{ __( 'Get Featured Image', 'jetpack' ) }
144148
</BaseControl.VisualLabel>
145149
<FeaturedImage busy={ false } disabled={ requireUpgrade } placement={ placement } />
146150
</BaseControl>
147151
</PanelRow>
148152
) }
153+
154+
<PanelRow className="jetpack-ai-sidebar__feature-section">
155+
<BaseControl __nextHasNoMarginBottom={ true }>
156+
<BaseControl.VisualLabel>{ __( 'Get Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
157+
<Feedback placement={ placement } busy={ false } disabled={ requireUpgrade } />
158+
</BaseControl>
159+
</PanelRow>
160+
149161
{ requireUpgrade && ! isUsagePanelAvailable && (
150162
<PanelRow>
151163
<Upgrade placement={ placement } type={ upgradeType } upgradeUrl={ checkoutUrl } />
@@ -157,21 +169,21 @@ const JetpackAndSettingsContent = ( {
157169
</PanelRow>
158170
) }
159171

160-
<PanelRow>
161-
<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
162-
{ __( 'Provide feedback', 'jetpack' ) }
172+
<PanelRow className="jetpack-ai-sidebar__external-link">
173+
<ExternalLink href={ productPageUrl }>
174+
{ __( 'Learn more about Jetpack AI', 'jetpack' ) }
163175
</ExternalLink>
164176
</PanelRow>
165177

166-
<PanelRow>
167-
<ExternalLink href={ productPageUrl }>
168-
{ __( 'Learn more about Jetpack AI', 'jetpack' ) }
178+
<PanelRow className="jetpack-ai-sidebar__external-link">
179+
<ExternalLink href="https://jetpack.com/redirect/?source=jetpack-ai-feedback">
180+
{ __( 'Give us feedback', 'jetpack' ) }
169181
</ExternalLink>
170182
</PanelRow>
171183

172-
<PanelRow>
184+
<PanelRow className="jetpack-ai-sidebar__external-link">
173185
<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
174-
{ __( 'AI Guidelines', 'jetpack' ) }
186+
{ __( 'AI guidelines', 'jetpack' ) }
175187
</ExternalLink>
176188
</PanelRow>
177189
</>

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/style.scss

+27
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
.jetpack-ai-sidebar__feature-section {
22
margin-bottom: 2em;
3+
display: block;
34

45
p, p > * {
56
text-wrap: pretty;
67
}
8+
9+
button {
10+
width: 100%;
11+
justify-content: center;
12+
}
13+
}
14+
15+
.jetpack-ai-sidebar__external-link {
16+
min-height: unset;
17+
}
18+
19+
.jetpack-ai-assistant__help-text {
20+
color: #757575;
721
}
822

923
.jetpack-ai-feedback__label {
@@ -14,6 +28,10 @@
1428
}
1529
}
1630

31+
.jetpack-ai-sidebar__warning-content {
32+
padding-bottom: 12px;
33+
}
34+
1735
.jetpack-ai__feedback-button {
1836
.icon {
1937
width: 20px;
@@ -22,3 +40,12 @@
2240
margin-left: 4px;
2341
}
2442
}
43+
44+
.jetpack-ai__write-brief-card {
45+
width: 100%;
46+
margin-bottom: 12px;
47+
48+
p {
49+
margin: 0;
50+
}
51+
}

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-image/featured-image.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -374,12 +374,15 @@ export default function FeaturedImage( {
374374
{ ( placement === PLACEMENT_JETPACK_SIDEBAR ||
375375
placement === PLACEMENT_DOCUMENT_SETTINGS ) && (
376376
<>
377-
<p>{ __( 'Create and use an AI generated featured image for your post.', 'jetpack' ) }</p>
377+
<p className="jetpack-ai-assistant__help-text">
378+
{ __( 'Based on your post content.', 'jetpack' ) }
379+
</p>
378380
<Button
379381
onClick={ handleModalOpen }
380382
isBusy={ busy }
381383
disabled={ disabled || notEnoughRequests }
382384
variant="secondary"
385+
__next40pxDefaultSize
383386
>
384387
{ __( 'Generate image', 'jetpack' ) }
385388
</Button>

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@import './features/features.colors';
22

33
.jetpack-ai-proofread {
4-
margin-bottom: 24px;
5-
64
.components-checkbox-control {
75
&__input:not( :disabled ) {
86
@include features-colors( ( 'border-color' ) );
@@ -21,11 +19,6 @@
2119
margin-bottom: 16px;
2220
}
2321

24-
&__grade-label {
25-
color: #757575;
26-
margin-left: 12px;
27-
}
28-
2922
&__help-text {
3023
font-size: 12px;
3124
color: #757575;
@@ -36,4 +29,10 @@
3629
flex-direction: column;
3730
gap: 12px;
3831
}
32+
33+
&__grade-level-container {
34+
svg {
35+
fill: #757575;
36+
}
37+
}
3938
}

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.tsx

+52-39
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ import {
88
CheckboxControl,
99
ToggleControl,
1010
Tooltip,
11+
Card,
12+
CardBody,
13+
CardFooter,
1114
} from '@wordpress/components';
1215
import { compose, useDebounce } from '@wordpress/compose';
1316
import { useDispatch, useSelect, withSelect } from '@wordpress/data';
1417
import { __ } from '@wordpress/i18n';
18+
import { Icon, help } from '@wordpress/icons';
1519
/**
1620
* External dependencies
1721
*/
@@ -103,55 +107,64 @@ const Controls = ( { blocks, disabledFeatures } ) => {
103107

104108
return (
105109
<div className="jetpack-ai-proofread">
106-
<p> { __( 'Improve your writing with AI.', 'jetpack' ) }</p>
107-
<PanelRow>
108-
<BaseControl __nextHasNoMarginBottom={ true }>
109-
<div className="grade-level-container">
110-
{ gradeLevel === null ? (
111-
<p className="jetpack-ai-proofread__help-text">
112-
{ __( 'Write to see your grade level.', 'jetpack' ) }
113-
</p>
114-
) : (
115-
<Tooltip text={ __( 'To make it easy to read, aim for level 8–12', 'jetpack' ) }>
116-
<p>
117-
{ gradeLevel }
118-
<span className="jetpack-ai-proofread__grade-label">
119-
{ __( 'Reading grade score', 'jetpack' ) }
120-
</span>
121-
</p>
122-
</Tooltip>
123-
) }
124-
</div>
125-
</BaseControl>
126-
</PanelRow>
110+
<p className="jetpack-ai-assistant__help-text">
111+
{ __( 'Visualize issues and apply AI suggestions.', 'jetpack' ) }
112+
</p>
127113

128114
<PanelRow>
129115
<BaseControl __nextHasNoMarginBottom={ true }>
130116
<ToggleControl
131117
checked={ isProofreadEnabled }
132118
onChange={ handleAiFeedbackToggle }
133-
label={ __( 'Show suggestions', 'jetpack' ) }
119+
label={ __( 'Show issues & suggestions', 'jetpack' ) }
134120
__nextHasNoMarginBottom={ true }
135121
/>
136-
<div className="feature-checkboxes-container">
137-
{ features.map(
138-
feature =>
139-
canWriteBriefFeatureBeEnabled( feature.config.name ) && (
140-
<CheckboxControl
141-
className={ isProofreadEnabled ? '' : 'is-disabled' }
142-
disabled={ ! isProofreadEnabled }
143-
data-breve-type={ feature.config.name }
144-
key={ feature.config.name }
145-
label={ feature.config.title }
146-
checked={ ! disabledFeatures.includes( feature.config.name ) }
147-
onChange={ handleToggleFeature( feature.config.name ) }
148-
__nextHasNoMarginBottom={ true }
149-
/>
150-
)
151-
) }
152-
</div>
153122
</BaseControl>
154123
</PanelRow>
124+
125+
{ isProofreadEnabled && (
126+
<PanelRow>
127+
<Card size="small" className="jetpack-ai__write-brief-card">
128+
<CardBody size="small">
129+
<BaseControl __nextHasNoMarginBottom={ true }>
130+
<div className="feature-checkboxes-container">
131+
{ features.map(
132+
feature =>
133+
canWriteBriefFeatureBeEnabled( feature.config.name ) && (
134+
<CheckboxControl
135+
className={ isProofreadEnabled ? '' : 'is-disabled' }
136+
disabled={ ! isProofreadEnabled }
137+
data-breve-type={ feature.config.name }
138+
key={ feature.config.name }
139+
label={ feature.config.title }
140+
checked={ ! disabledFeatures.includes( feature.config.name ) }
141+
onChange={ handleToggleFeature( feature.config.name ) }
142+
__nextHasNoMarginBottom={ true }
143+
/>
144+
)
145+
) }
146+
</div>
147+
</BaseControl>
148+
</CardBody>
149+
<CardFooter size="small" className="jetpack-ai-proofread__grade-level-container">
150+
{ gradeLevel === null ? (
151+
<p className="jetpack-ai-proofread__help-text">
152+
{ __( 'Write to see your grade level.', 'jetpack' ) }
153+
</p>
154+
) : (
155+
<>
156+
<div className="jetpack-ai-proofread__grade-label">
157+
{ gradeLevel } { __( 'Reading grade score', 'jetpack' ) }
158+
</div>
159+
<Tooltip text={ __( 'To make it easy to read, aim for level 8–12', 'jetpack' ) }>
160+
<Icon icon={ help } size={ 20 } />
161+
</Tooltip>
162+
</>
163+
) }
164+
</CardFooter>
165+
</Card>
166+
</PanelRow>
167+
) }
155168
</div>
156169
);
157170
};

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,15 @@ export default function Feedback( {
9898
<div className="ai-assistant-post-feedback__suggestion">{ suggestion }</div>
9999
</AiAssistantModal>
100100
) }
101-
<p>{ __( 'Get feedback on content structure.', 'jetpack' ) }</p>
101+
<p className="jetpack-ai-assistant__help-text">
102+
{ __( 'Get feedback on content structure.', 'jetpack' ) }
103+
</p>
102104
<Button
103105
onClick={ handleRequest }
104106
variant="secondary"
105107
disabled={ ! postContent || disabled }
106108
isBusy={ busy }
109+
__next40pxDefaultSize
107110
>
108111
{ __( 'Generate feedback', 'jetpack' ) }
109112
</Button>

‎projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/index.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,17 @@ export default function TitleOptimization( {
8383
const SEOModalTitle = __( 'Improve title for SEO', 'jetpack' );
8484
const modalTitle = isKeywordsFeatureAvailable ? SEOModalTitle : currentModalTitle;
8585

86-
const currentSidebarDescription = __( 'Use AI to optimize key details of your post.', 'jetpack' );
86+
const currentSidebarDescription = __( 'Based on your post content.', 'jetpack' );
8787
const SEOSidebarDescription = __(
88-
'AI suggested titles based on your content and keywords for better SEO results.',
88+
'Based on your post content and SEO best practices.',
8989
'jetpack'
9090
);
9191
const sidebarDescription = isKeywordsFeatureAvailable
9292
? SEOSidebarDescription
9393
: currentSidebarDescription;
9494

95-
const currentSidebarButtonLabel = __( 'Improve title', 'jetpack' );
96-
const SEOSidebarButtonLabel = __( 'Improve title for SEO', 'jetpack' );
95+
const currentSidebarButtonLabel = __( 'Generate title options', 'jetpack' );
96+
const SEOSidebarButtonLabel = __( 'Generate title options', 'jetpack' );
9797
const sidebarButtonLabel = isKeywordsFeatureAvailable
9898
? SEOSidebarButtonLabel
9999
: currentSidebarButtonLabel;
@@ -228,12 +228,13 @@ export default function TitleOptimization( {
228228

229229
return (
230230
<div>
231-
<p>{ sidebarDescription }</p>
231+
<p className="jetpack-ai-assistant__help-text">{ sidebarDescription }</p>
232232
<Button
233233
isBusy={ busy }
234234
disabled={ ! postContent || disabled }
235235
onClick={ handleTitleOptimization }
236236
variant="secondary"
237+
__next40pxDefaultSize
237238
>
238239
{ sidebarButtonLabel }
239240
</Button>

0 commit comments

Comments
 (0)