Add button with shortcode icon for subject and preheader

[MAILPOET-6354]

packages/js/email-editor/src/components/block-editor/index.scss

@@ -76,6 +76,16 @@
     width: 100%;
   }
 
+  .mailpoet-settings-panel__personalization-tags-button.components-button.has-icon {
+    display: inline-block;
+    height: 14px;
+    line-height: 14px;
+    padding: 0 5px;
+    span {
+      height: 11px;
+    }
+  }
+
   .mailpoet-settings-panel__subject .components-base-control__label {
     width: 100%;
 

packages/js/email-editor/src/components/sidebar/details-panel.tsx

@@ -1,4 +1,9 @@
-import { BaseControl, ExternalLink, PanelBody } from '@wordpress/components';
+import {
+	BaseControl,
+	Button,
+	ExternalLink,
+	PanelBody,
+} from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
@@ -10,6 +15,17 @@ import { RichText } from '@wordpress/block-editor';
 const previewTextMaxLength = 150;
 const previewTextRecommendedLength = 80;
 
+function PersonalizationTagsButton() {
+	return (
+		<Button
+			className="mailpoet-settings-panel__personalization-tags-button"
+			icon="shortcode"
+			title={ __( 'Personalization Tags', 'mailpoet' ) }
+			onClick={ () => {} }
+		/>
+	);
+}
+
 export function DetailsPanel() {
 	const [ mailpoetEmailData ] = useEntityProp(
 		'postType',
@@ -46,6 +62,7 @@ export function DetailsPanel() {
 	const subjectLabel = (
 		<>
 			<span>{ __( 'Subject', 'mailpoet' ) }</span>
+			<PersonalizationTagsButton />
 			<ExternalLink href="https://kb.mailpoet.com/article/215-personalize-newsletter-with-shortcodes#list">
 				{ __( 'Shortcode guide', 'mailpoet' ) }
 			</ExternalLink>
@@ -77,6 +94,7 @@ export function DetailsPanel() {
 	const preheaderLabel = (
 		<>
 			<span>{ __( 'Preview text', 'mailpoet' ) }</span>
+			<PersonalizationTagsButton />
 			<span
 				className={ classnames(
 					'mailpoet-settings-panel__preview-text-length',