diff --git a/blocks/library/shortcode/index.js b/blocks/library/shortcode/index.js index 0a476ca121050..4f95bf4acc8bc 100644 --- a/blocks/library/shortcode/index.js +++ b/blocks/library/shortcode/index.js @@ -71,7 +71,7 @@ export const settings = { { __( 'Shortcode' ) } <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 index 4f94d7163ba52..5d21fa0b4c9e3 100644 --- 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 index 1a3bb4a8ae1cb..608067e7c4e22 100644 --- 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 index 7b84b3007c406..fa52257b31069 100644 --- 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 } />