From 862f5719bd61745b1642b76289fab4e68b148265 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 24 Mar 2021 11:01:03 +0100 Subject: [PATCH 1/3] Make the search block editor match the frontend --- packages/block-library/src/editor.scss | 1 - packages/block-library/src/reset.scss | 36 +++++++++++++++++++ packages/block-library/src/search/edit.js | 26 ++++++++------ packages/block-library/src/search/editor.scss | 24 ------------- packages/block-library/src/search/style.scss | 2 +- 5 files changed, 53 insertions(+), 36 deletions(-) delete mode 100644 packages/block-library/src/search/editor.scss diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 41234b75cca7ec..ccdd055b4ff534 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -34,7 +34,6 @@ @import "./pullquote/editor.scss"; @import "./quote/editor.scss"; @import "./rss/editor.scss"; -@import "./search/editor.scss"; @import "./separator/editor.scss"; @import "./shortcode/editor.scss"; @import "./site-logo/editor.scss"; diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 934545ad1b8060..3bc1ccd373703a 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -98,4 +98,40 @@ line-height: revert; font-weight: revert; } + + select, + input, + textarea, + button { + font-family: system-ui; + all: revert; + } + + // For these I prefer to only override the WP-Admin defined styles and not "all" + // To minimize the risk to impact block styles as much as possible. + input[type="checkbox"], + input[type="color"], + input[type="date"], + input[type="datetime-local"], + input[type="datetime"], + input[type="email"], + input[type="month"], + input[type="number"], + input[type="password"], + input[type="radio"], + input[type="search"], + input[type="tel"], + input[type="text"], + input[type="time"], + input[type="url"], + input[type="week"], + input, + select, + textarea { + &:focus { + border: revert; + box-shadow: revert; + outline: revert; + } + } } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 91923b3a78ee7a..b66cbd8be5d8b8 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -121,6 +121,7 @@ export default function SearchEdit( { const renderTextField = () => { return ( - setAttributes( { buttonText: html } ) - } - /> + // This rule only makes sense for UI not blocks. + // eslint-disable-next-line react/forbid-elements + ) } ); diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss deleted file mode 100644 index 8f1bc15c57a6eb..00000000000000 --- a/packages/block-library/src/search/editor.scss +++ /dev/null @@ -1,24 +0,0 @@ -.wp-block-search { - .wp-block-search__input { - padding: $grid-unit-10; - } - - &.wp-block-search__button-inside .wp-block-search__inside-wrapper { - padding: $grid-unit-05; - } - - .wp-block-search__button { - height: auto; - border-radius: initial; - - // This needs high specificity because it otherwise inherits styles from `components-button`. - // stylelint-disable-line no-duplicate-selectors - &.wp-block-search__button.wp-block-search__button { - padding: 6px 10px; - } - } - - &__components-button-group { - margin-top: 10px; - } -} diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 6f47aa3761dbcb..b66519a49b715d 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -29,7 +29,7 @@ width: 100%; } - .wp-block-search__input { + .wp-block-search__input[type="search"] { flex-grow: 1; min-width: 3em; border: 1px solid $gray-600; From 595aba1dfafb223ae25e11edca02447c45f57893 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 25 Mar 2021 08:49:48 +0100 Subject: [PATCH 2/3] Fix 2021 frontend and avoid revert all --- packages/block-library/src/reset.scss | 14 +++++++++- packages/block-library/src/search/edit.js | 28 +++++++++----------- packages/block-library/src/search/style.scss | 2 +- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 3bc1ccd373703a..be7232ebd0e483 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -104,7 +104,18 @@ textarea, button { font-family: system-ui; - all: revert; + font-size: revert; + font-weight: revert; + border-radius: revert; + border: revert; + background: revert; + color: revert; + padding: revert; + margin: revert; + line-height: revert; + min-height: revert; + box-shadow: revert; + box-sizing: revert; } // For these I prefer to only override the WP-Admin defined styles and not "all" @@ -132,6 +143,7 @@ border: revert; box-shadow: revert; outline: revert; + padding: revert; } } } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index b66cbd8be5d8b8..57b71031bfc326 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -149,21 +149,19 @@ export default function SearchEdit( { ) } { ! buttonUseIcon && ( - // This rule only makes sense for UI not blocks. - // eslint-disable-next-line react/forbid-elements - + + setAttributes( { buttonText: html } ) + } + /> ) } ); diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index b66519a49b715d..6f47aa3761dbcb 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -29,7 +29,7 @@ width: 100%; } - .wp-block-search__input[type="search"] { + .wp-block-search__input { flex-grow: 1; min-width: 3em; border: 1px solid $gray-600; From 2385eff84146f556af7ca5c27ae108d92f5a88cc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 25 Mar 2021 09:17:31 +0100 Subject: [PATCH 3/3] Restore span for search block --- packages/block-library/src/search/edit.js | 28 ++++++++++++----------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 57b71031bfc326..b66cbd8be5d8b8 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -149,19 +149,21 @@ export default function SearchEdit( { ) } { ! buttonUseIcon && ( - - setAttributes( { buttonText: html } ) - } - /> + // This rule only makes sense for UI not blocks. + // eslint-disable-next-line react/forbid-elements + ) } );