Override core styles.

This commit overrides core input styles, by replicating the existing styles and overriding. It also changes the "regular-text" class to "input-control" per suggestion from @paulwilde.
WordPress · Apr 11, 2018 · ee70ff6 · ee70ff6
1 parent 9f5f373
commit ee70ff6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 22 deletions.
diff --git a/blocks/library/shortcode/index.js b/blocks/library/shortcode/index.js
@@ -71,7 +71,7 @@ export const settings = {
 						{ __( 'Shortcode' ) }
 					</label>
 					<PlainText
-						className="regular-text"
+						className="input-control"
 						id={ inputId }
 						value={ attributes.text }
 						placeholder={ __( 'Write shortcode here…' ) }

diff --git a/blocks/library/shortcode/test/__snapshots__/index.js.snap b/blocks/library/shortcode/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`core/shortcode block edit matches snapshot 1`] = `
     Shortcode
   </label>
   <textarea
-    class="blocks-plain-text regular-text"
+    class="blocks-plain-text input-control"
     id="blocks-shortcode-input-0"
     placeholder="Write shortcode here…"
     rows="1"

diff --git a/components/form-token-field/style.scss b/components/form-token-field/style.scss
@@ -24,26 +24,26 @@
 	flex-wrap: wrap;
 	align-items: flex-start;
 	padding: 4px;
-}
-
-// Token input
-input[type="text"].components-form-token-field__input {
-	display: inline-block;
-	width: auto;
-	max-width: 100%;
-	margin: 2px 0 2px 8px;
-	padding: 0;
-	line-height: 24px;
-	background: inherit;
-	border: 0;
-	font-size: $default-font-size;
-	color: $dark-gray-800;
-	box-shadow: none;
 
-	&:focus,
-	.components-form-token-field.is-active & {
-		outline: none;
+	// Token input
+	input[type="text"].components-form-token-field__input {
+		display: inline-block;
+		width: auto;
+		max-width: 100%;
+		margin: 2px 0 2px 8px;
+		padding: 0;
+		line-height: 24px;
+		background: inherit;
+		border: 0;
+		font-size: $default-font-size;
+		color: $dark-gray-800;
 		box-shadow: none;
+
+		&:focus,
+		.components-form-token-field.is-active & {
+			outline: none;
+			box-shadow: none;
+		}
 	}
 }
 

diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
@@ -118,9 +118,29 @@ body.gutenberg-editor-page {
 	}
 }
 
+// Override core input styles to provide ones consistent with Gutenberg
+// @todo submit as upstream patch as well
 .edit-post-sidebar,
+.editor-post-publish-panel,
 .editor-block-list__block {
-	.regular-text, // this is the upstream WordPress base input class, we override to unify the colors with the new grays pending https://core.trac.wordpress.org/ticket/40633
+	.input-control, // upstream name is .regular-text
+	input[type=text],
+	input[type=search],
+	input[type=radio],
+	input[type=tel],
+	input[type=time],
+	input[type=url],
+	input[type=week],
+	input[type=password],
+	input[type=checkbox],
+	input[type=color],
+	input[type=date],
+	input[type=datetime],
+	input[type=datetime-local],
+	input[type=email],
+	input[type=month],
+	input[type=number],
+	select,
 	textarea {
 		border: 1px solid $light-gray-700;
 		font-family: $default-font;
@@ -134,6 +154,7 @@ body.gutenberg-editor-page {
 	}
 }
 
+// Placeholder colors
 .editor-post-title,
 .editor-block-list__block {
 	input,

diff --git a/editor/components/post-excerpt/index.js b/editor/components/post-excerpt/index.js
@@ -25,7 +25,7 @@ function PostExcerpt( { excerpt, onUpdateExcerpt, instanceId } ) {
 			<label key="label" htmlFor={ id }>{ __( 'Write an excerpt (optional)' ) }</label>
 			<textarea
 				id={ id }
-				className="editor-post-excerpt__textarea regular-text"
+				className="editor-post-excerpt__textarea"
 				onChange={ onChange }
 				value={ excerpt }
 			/>