Writing prompt block: a few cleanup tasks (#29324)

- Uses scss variables from @automattic/jetpack-base-styles/gutenberg-base-styles where appropriate - Ensures "View all responses" is an external link that opens in a new tab/window - Ensures "prompt" is used in css classes and the like, since a block represents a single prompt
Automattic · Mar 7, 2023 · 34dc9c3 · 34dc9c3
1 parent 76990eb
commit 34dc9c3
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 34 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-blogging-prompt-block-cleanup b/projects/plugins/jetpack/changelog/update-blogging-prompt-block-cleanup
@@ -0,0 +1,5 @@
+Significance: patch
+Type: compat
+Comment: A few small changes to the blogging prompt block to prepare for moving it out of beta.
+
+
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/attributes.js
@@ -2,7 +2,7 @@ export default {
 	gravatars: {
 		type: 'array',
 		source: 'query',
-		selector: '.jetpack-blogging-prompts__answers-gravatar',
+		selector: '.jetpack-blogging-prompt__answers-gravatar',
 		query: {
 			url: {
 				type: 'string',
@@ -14,7 +14,7 @@ export default {
 	prompt: {
 		type: 'text',
 		source: 'html',
-		selector: '.jetpack-blogging-prompts__prompt',
+		selector: '.jetpack-blogging-prompt__prompt',
 	},
 	promptId: {
 		type: 'number',

diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/blogging-prompt.php
@@ -1,13 +1,13 @@
 <?php
 /**
- * Blogging Prompts Block.
+ * Blogging Prompt Block.
  *
  * @since 11.x
  *
  * @package automattic/jetpack
  */
 
-namespace Automattic\Jetpack\Extensions\Blogging_Prompts;
+namespace Automattic\Jetpack\Extensions\Blogging_Prompt;
 
 use Automattic\Jetpack\Blocks;
 use Jetpack_Gutenberg;
@@ -31,10 +31,10 @@ function register_block() {
 add_action( 'init', __NAMESPACE__ . '\register_block' );
 
 /**
- * Blogging Prompts block registration/dependency declaration.
+ * Blogging Prompt block registration/dependency declaration.
  *
- * @param array  $attr    Array containing the Blogging Prompts block attributes.
- * @param string $content String containing the Blogging Prompts block content.
+ * @param array  $attr    Array containing the Blogging Prompt block attributes.
+ * @param string $content String containing the Blogging Prompt block content.
  *
  * @return string
  */

diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/edit.js
@@ -7,10 +7,10 @@ import './editor.scss';
 import icon from './icon';
 import { usePromptTags } from './use-prompt-tags';
 
-function BloggingPromptsBetaEdit( { attributes, noticeOperations, noticeUI, setAttributes } ) {
+function BloggingPromptEdit( { attributes, noticeOperations, noticeUI, setAttributes } ) {
 	const [ isLoading, setLoading ] = useState( true );
 	const { gravatars, prompt, promptId, showLabel, showResponses, tagsAdded } = attributes;
-	const blockProps = useBlockProps( { className: 'jetpack-blogging-prompts' } );
+	const blockProps = useBlockProps( { className: 'jetpack-blogging-prompt' } );
 
 	// Add the prompt tags to the post, if they haven't already been added.
 	usePromptTags( promptId, tagsAdded, setAttributes );
@@ -84,23 +84,23 @@ function BloggingPromptsBetaEdit( { attributes, noticeOperations, noticeUI, setA
 	const renderPrompt = () => (
 		<>
 			{ showLabel && (
-				<div className="jetpack-blogging-prompts__label">
+				<div className="jetpack-blogging-prompt__label">
 					{ icon }
 					{ __( 'Daily writing prompt', 'jetpack' ) }
 				</div>
 			) }
 
-			<div className="jetpack-blogging-prompts__prompt">{ prompt }</div>
+			<div className="jetpack-blogging-prompt__prompt">{ prompt }</div>
 
 			{ showResponses && promptId && (
-				<div className="jetpack-blogging-prompts__answers">
+				<div className="jetpack-blogging-prompt__answers">
 					{ gravatars &&
 						gravatars.slice( 0, 3 ).map( ( { url } ) => {
 							return (
 								url && (
 									// eslint-disable-next-line jsx-a11y/alt-text
 									<img
-										className="jetpack-blogging-prompts__answers-gravatar"
+										className="jetpack-blogging-prompt__answers-gravatar"
 										// Gravatar are decorative, here.
 										src={ url }
 										key={ url }
@@ -110,10 +110,10 @@ function BloggingPromptsBetaEdit( { attributes, noticeOperations, noticeUI, setA
 						} ) }
 
 					<a
-						className="jetpack-blogging-prompts__answers-link"
+						className="jetpack-blogging-prompt__answers-link"
 						href={ `https://wordpress.com/tag/dailyprompt-${ promptId }` }
 						target="_blank"
-						rel="noreferrer"
+						rel="external noreferrer noopener"
 					>
 						{ __( 'View all responses', 'jetpack' ) }
 					</a>
@@ -128,7 +128,7 @@ function BloggingPromptsBetaEdit( { attributes, noticeOperations, noticeUI, setA
 			{ renderControls() }
 
 			{ isLoading ? (
-				<div className="jetpack-blogging-prompts__spinner">
+				<div className="jetpack-blogging-prompt__spinner">
 					<Spinner />
 				</div>
 			) : (
@@ -138,4 +138,4 @@ function BloggingPromptsBetaEdit( { attributes, noticeOperations, noticeUI, setA
 	);
 }
 
-export default withNotices( BloggingPromptsBetaEdit );
+export default withNotices( BloggingPromptEdit );
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/editor.scss b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/editor.scss
@@ -1,5 +1,5 @@
 /**
- * Editor styles for Blogging Prompts
+ * Editor styles for Blogging Prompt block.
  */
 
-.wp-block-jetpack-blogging-prompts-beta { }
+.wp-block-jetpack-blogging-prompt { }
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/save.js
@@ -2,27 +2,27 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import icon from './icon';
 
-function BloggingPromptsSave( { attributes } ) {
+function BloggingPromptSave( { attributes } ) {
 	const { gravatars, prompt, promptId, showLabel, showResponses } = attributes;
-	const blockProps = useBlockProps.save( { className: 'jetpack-blogging-prompts' } );
+	const blockProps = useBlockProps.save( { className: 'jetpack-blogging-prompt' } );
 
 	return (
 		<div { ...blockProps }>
 			{ showLabel && (
-				<div className="jetpack-blogging-prompts__label">
+				<div className="jetpack-blogging-prompt__label">
 					{ icon }
 					{ __( 'Daily writing prompt', 'jetpack' ) }
 				</div>
 			) }
-			<div className="jetpack-blogging-prompts__prompt">{ prompt }</div>
+			<div className="jetpack-blogging-prompt__prompt">{ prompt }</div>
 			{ showResponses && promptId && (
-				<div className="jetpack-blogging-prompts__answers">
+				<div className="jetpack-blogging-prompt__answers">
 					{ gravatars.map( ( { url } ) => {
 						return (
 							url && (
 								// eslint-disable-next-line jsx-a11y/alt-text
 								<img
-									className="jetpack-blogging-prompts__answers-gravatar"
+									className="jetpack-blogging-prompt__answers-gravatar"
 									// Gravatar are decorative, here.
 									aria-hidden="true"
 									src={ url }
@@ -32,8 +32,10 @@ function BloggingPromptsSave( { attributes } ) {
 						);
 					} ) }
 					<a
-						className="jetpack-blogging-prompts__answers-link"
+						className="jetpack-blogging-prompt__answers-link"
 						href={ `https://wordpress.com/tag/dailyprompt-${ promptId }` }
+						target="_blank"
+						rel="external noreferrer noopener"
 					>
 						{ __( 'View all responses', 'jetpack' ) }
 					</a>
@@ -43,4 +45,4 @@ function BloggingPromptsSave( { attributes } ) {
 	);
 }
 
-export default BloggingPromptsSave;
+export default BloggingPromptSave;
diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss
@@ -1,15 +1,17 @@
-.jetpack-blogging-prompts {
-	border: 1px solid #dcdcde;
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.jetpack-blogging-prompt {
+	border: 1px solid $gray-300;
 	border-radius: 2px;
 	padding: 24px;
 
 	&__label {
 		font-size: 14px;
-		margin-bottom: 16px;
+		margin-bottom: $grid-unit-20;
 
 		svg {
-			height: 24px;
-			width: 24px;
+			height: $icon-size;
+			width: $icon-size;
 			margin-right: 6px;
 			vertical-align: bottom;
 		}
@@ -27,11 +29,11 @@
 
 	&__answers {
 		font-size: 16px;
-		margin-top: 16px;
+		margin-top: $grid-unit-20;
 	}
 
 	&__answers-gravatar {
-		border: 2px solid white;
+		border: 2px solid $white;
 		border-radius: 50%;
 		height: 24px;
 		vertical-align: middle;