Block Editor: Improve settings sidebar descriptions

includes/plugin-sidebars/class-convertkit-plugin-sidebar-post-settings.php

@@ -197,32 +197,75 @@ public function get_fields() {
 				'label'         => __( 'Form', 'convertkit' ),
 				'type'          => 'select',
 				'description'   => array(
-					__( 'Default', 'convertkit' ) . ': ' . __( 'Uses the form specified on the settings page.', 'convertkit' ),
-					__( 'None', 'convertkit' ) . ': ' . __( 'do not display a form.', 'convertkit' ),
+					sprintf(
+						'<code>%s</code>: %s <a href="%s" target="_blank">%s</a>',
+						esc_html__( 'Default', 'convertkit' ),
+						esc_html__( 'Uses the form specified on the', 'convertkit' ),
+						esc_url( convertkit_get_settings_link() ),
+						esc_html__( 'settings page', 'convertkit' )
+					),
+					sprintf(
+						'<code>%s</code>: %s',
+						esc_html__( 'None', 'convertkit' ),
+						esc_html__( 'do not display a form.', 'convertkit' )
+					),
 					__( 'Any other option will display that form after the main content.', 'convertkit' ),
+					sprintf(
+						'%s <a href="%s" target="_blank">%s</a>',
+						esc_html__( 'To make changes to your forms,', 'convertkit' ),
+						esc_url( convertkit_get_sign_in_url() ),
+						esc_html__( 'sign in to Kit', 'convertkit' )
+					),
 				),
 				'values'        => $forms,
 				'resource_type' => 'forms',
 			),
 			'landing_page'     => array(
 				'label'         => __( 'Landing Page', 'convertkit' ),
 				'type'          => 'select',
-				'description'   => __( 'Select a landing page to make it appear in place of this page.', 'convertkit' ),
+				'description'   => array(
+					esc_html__( 'Select a landing page to make it appear in place of this page.', 'convertkit' ),
+					sprintf(
+						/* translators: Link to sign in to ConvertKit */
+						esc_html__( 'To make changes to your landing pages, %s', 'convertkit' ),
+						'<a href="' . esc_url( convertkit_get_sign_in_url() ) . '" target="_blank">' . esc_html__( 'sign in to Kit', 'convertkit' ) . '</a>'
+					),
+				),
 				'values'        => $landing_pages,
 				'post_type'     => 'page',
 				'resource_type' => 'landing_pages',
 			),
 			'tag'              => array(
 				'label'         => __( 'Tag', 'convertkit' ),
 				'type'          => 'select',
-				'description'   => __( 'Select a tag to apply to visitors of this page who are subscribed. A visitor is deemed to be subscribed if they have clicked a link in an email to this site which includes their subscriber ID, or have entered their email address in a Kit Form on this site.', 'convertkit' ),
+				'description'   => array(
+					esc_html__( 'Select a tag to apply to visitors of this page who are subscribed.', 'convertkit' ),
+					esc_html__( 'A visitor is deemed to be subscribed if they have clicked a link in an email to this site which includes their subscriber ID, or have entered their email address in a Kit Form on this site.', 'convertkit' ),
+				),
 				'values'        => $tags,
 				'resource_type' => 'tags',
 			),
 			'restrict_content' => array(
 				'label'         => __( 'Restrict Content', 'convertkit' ),
 				'type'          => 'select',
-				'description'   => __( 'Select the Kit form, tag or product that the visitor must be subscribed to, permitting them access to view this member-only content.', 'convertkit' ),
+				'description'   => array(
+					esc_html__( 'Select the Kit form, tag or product that the visitor must be subscribed to, permitting them access to view this member-only content.', 'convertkit' ),
+					sprintf(
+						'<code>%s</code>: %s',
+						esc_html__( 'Form', 'convertkit' ),
+						esc_html__( 'Displays the Kit form. On submission, the email address will be subscribed to the selected form, granting access to the member-only content. Useful to gate free content in return for an email address.', 'convertkit' )
+					),
+					sprintf(
+						'<code>%s</code>: %s',
+						esc_html__( 'Tag', 'convertkit' ),
+						esc_html__( 'Displays a WordPress styled subscription form. On submission, the email address will be subscribed to the selected tag, granting access to the member-only content. Useful to gate free content in return for an email address.', 'convertkit' )
+					),
+					sprintf(
+						'<code>%s</code>: %s',
+						esc_html__( 'Product', 'convertkit' ),
+						esc_html__( 'Displays a link to the Kit product, and a login form. Useful to gate content that can only be accessed by purchasing the Kit product.', 'convertkit' )
+					),
+				),
 				'values'        => $restrict_content,
 				'resource_type' => 'restrict_content',
 			),

resources/backend/css/wp-list-table-buttons.css

@@ -1,10 +1,12 @@
 .wrap .page-title-action.convertkit-action {
-	width: 124px;
+	display: inline-block;
+	width: 127px;
 	background: url(../images/logomark.svg);
 	background-repeat: no-repeat;
 	background-size: 16px 16px;
 	background-position: 8px 50%;
 	padding-left: 30px;
+	box-sizing: border-box;
 }
 
 .wrap .page-title-action.convertkit-action::after {
@@ -14,28 +16,40 @@
 	padding: 5px 0 0 0;
 }
 
-.wrap .page-title-action.convertkit-action span {
+.wrap .page-title-action.convertkit-action span.convertkit-actions {
 	visibility: hidden;
 	display: none;
 	opacity: 0;
 	position: absolute;
-	margin: 0;
 	padding: 10px;
 	left: -1px;
+	z-index: 99999;
 	background-color: #f0f0f1;
 	border-left: 1px solid #0a4b78;
 	border-right: 1px solid #0a4b78;
 	border-bottom: 1px solid #0a4b78;
 }
 
-.wrap .page-title-action.convertkit-action span a {
+.wrap .page-title-action.convertkit-action span.convertkit-actions a {
 	display: block;
 	text-decoration: none;
 }
 
-.wrap .page-title-action.convertkit-action:hover > span,
-.wrap .page-title-action.convertkit-action span:hover {
+.wrap .page-title-action.convertkit-action:hover > span.convertkit-actions,
+.wrap .page-title-action.convertkit-action span.convertkit-actions:hover {
 	visibility: visible;
 	opacity: 1;
 	display: block;
 }
+
+@media screen and (max-width: 782px) {
+
+	.wrap .page-title-action.convertkit-action {
+		width: 134px;
+	}
+
+	.wrap .page-title-action.convertkit-action::after {
+		padding-top: 10px;
+	}
+}
+

resources/backend/js/gutenberg.js

@@ -1011,14 +1011,35 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 					values: fieldValues[key] || field.values,
 				});
 
+				// Build the help element. Supports HTML in the description by
+				// rendering each line as a paragraph via element.RawHTML, which
+				// allows inline tags like <code> and <a> to render correctly.
+				let helpElement;
+				if (Array.isArray(field.description)) {
+					helpElement = el(
+						'span',
+						{},
+						field.description.map(function (line, index) {
+							return el(
+								'p',
+								{
+									key: 'help-' + index,
+									style: { margin: '0 0 0.5em 0' },
+								},
+								el(element.RawHTML, {}, line)
+							);
+						})
+					);
+				} else if (field.description) {
+					helpElement = el(element.RawHTML, {}, field.description);
+				}
+
 				// Define some field properties shared across all field types.
 				const fieldProperties = {
 					key: 'convertkit_plugin_sidebar_' + key,
 					id: 'convertkit_plugin_sidebar_' + key,
 					label: field.label,
-					help: Array.isArray(field.description)
-						? field.description.join('\n\n')
-						: field.description,
+					help: helpElement,
 					value: settings[key] || field.default_value || '',
 
 					// Add __next40pxDefaultSize and __nextHasNoMarginBottom properties,