Restore Post Title visual styles in Code View mode (#56582)

* Apply styles to match previous visuals * Adjust CSS in response to feedback
WordPress · Nov 29, 2023 · f7d2103 · f7d2103
1 parent 00ccb8b
commit f7d2103
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
@@ -5,7 +5,8 @@
 	flex-grow: 1;
 
 	// Post title.
-	.editor-post-title {
+	.editor-post-title:not(.is-raw-text),
+	.editor-post-title.is-raw-text textarea {
 		max-width: none;
 		line-height: $default-line-height;
 
@@ -14,6 +15,7 @@
 		font-weight: normal;
 
 		border: $border-width solid $gray-600;
+		border-radius: 0;
 
 		// Same padding as body.
 		padding: $grid-unit-20;

diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js
@@ -73,6 +73,7 @@ function PostTitleRaw( _, forwardedRef ) {
 			hideLabelFromVision={ true }
 			autoComplete="off"
 			dir="auto"
+			rows={ 1 }
 			__nextHasNoMarginBottom
 		/>
 	);

diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
@@ -1,4 +1,5 @@
-.edit-post-text-editor__body .is-raw-text textarea {
-	font-size: inherit;
-	line-height: inherit;
+// Raw Text Variant
+.edit-post-text-editor__body .editor-post-title.is-raw-text {
+	margin-bottom: $grid-unit-30;
+	margin-top: 2px; // space for focus outline to appear.
 }