Merge pull request #2288 from Parsely/fix/some-pch-editor-sidebar-ui-…

…glitches

PCH Editor Sidebar: Fix some UI glitches

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'a265109c5fa322a0558f');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'fe30b8792c8f278e4f90');

build/content-helper/excerpt-generator.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => '2d0071eca570bd4ce8c0');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'f7e99682a4b31332222f');

src/content-helper/editor-sidebar/editor-sidebar.scss

@@ -23,6 +23,18 @@
 	}
 }
 
+.content-helper-error-message {
+	margin-top: to_rem(15px) !important;
+}
+
+.wp-parsely-content-helper-error .content-helper-error-message {
+	margin-top: to_rem(15px) !important;
+}
+
+p.content-helper-error-message-hint {
+	color: var(--gray-700);
+}
+
 .wp-parsely-content-helper {
 
 	.wp-parsely-sidebar-header {
@@ -43,6 +55,10 @@
 	.wp-parsely-sidebar-main-panel {
 
 		.wp-parsely-sidebar-tabs {
+			// Error messages that are not contained within a panel.
+			.components-panel > .content-helper-error-message {
+				margin: var(--grid-unit-20, to_rem(16px));
+			}
 
 			.components-tab-panel__tabs {
 
@@ -68,8 +84,6 @@
 					background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 				}
 			}
-
-
 		}
 	}
 
@@ -83,16 +97,4 @@
 			height: 22px;
 		}
 	}
-
-	.content-helper-error-message {
-		margin-top: to_rem(15px) !important;
-	}
-
-	.wp-parsely-content-helper-error .content-helper-error-message {
-		margin-top: to_rem(15px) !important;
-	}
-
-	p.content-helper-error-message-hint {
-		color: var(--gray-700);
-	}
 }

src/content-helper/editor-sidebar/performance-details/component.tsx

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	Button,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	MenuGroup,
 	MenuItem,
 	SelectControl,
@@ -32,8 +32,8 @@ import { PerformanceCategoriesPanel } from './component-panel-categories';
 import { PerformanceOverviewPanel } from './component-panel-overview';
 import { PerformanceReferrersPanel } from './component-panel-referrers';
 import { PerformanceData } from './model';
-import { PerformanceDetailsProvider } from './provider';
 import './performance-details.scss';
+import { PerformanceDetailsProvider } from './provider';
 
 // Number of attempts to fetch the data before displaying an error.
 const FETCH_RETRIES = 1;

src/content-helper/editor-sidebar/performance-details/performance-details.scss

@@ -6,6 +6,9 @@
 	border-top: 1px solid rgb(221, 221, 221);
 	margin-top: -1px;
 
+	.content-helper-error-message {
+		margin: 0 !important;
+	}
 
 	/** View in Parse.ly button */
 	.components-button.wp-parsely-view-post {

src/content-helper/excerpt-generator/components/excerpt-panel.tsx

@@ -85,12 +85,12 @@ const PostExcerptGenerator = () => {
 	const generateExcerpt = async () => {
 		setLoading( true );
 		setError( undefined );
-		setGeneratedExcerptCount( generatedExcerptCount + 1 );
 
 		try {
 			Telemetry.trackEvent( 'excerpt_generator_pressed' );
 			const requestedExcerpt = await excerptGeneratorProvider.generateExcerpt( postTitle, postContent );
 			setGeneratedExcerpt( requestedExcerpt );
+			setGeneratedExcerptCount( generatedExcerptCount + 1 );
 		} catch ( err: any ) { // eslint-disable-line @typescript-eslint/no-explicit-any
 			setError( err );
 		} finally {

src/content-helper/excerpt-generator/excerpt-generator.scss

@@ -52,4 +52,20 @@
 			padding: var(--grid-unit-10, to_rem(8px)) var(--grid-unit-15, to_rem(12px));
 		}
 	}
+
+	.components-notice {
+		margin: var(--grid-unit-20, to_rem(16px)) 0 var(--grid-unit-15, to_rem(12px)) 0;
+
+		.components-notice__content {
+			margin: 0;
+
+			.content-helper-error-message {
+				margin-top: 0 !important;
+
+				p:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
 }