From 50a99de530d971fa12de6e53da5f12bce1b3a7a3 Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 14:26:05 +0900 Subject: [PATCH 01/10] Add a style variation to handle secondary search bar. --- .../wporg-showcase-2022/inc/block-styles.php | 32 ++++++++++++++ .../patterns/secondary-search-bar.php | 10 +++++ .../themes/wporg-showcase-2022/src/index.js | 2 + .../wporg-showcase-2022/src/style/block.json | 3 ++ .../wporg-showcase-2022/src/style/index.js | 2 + .../wporg-showcase-2022/src/style/style.scss | 43 +++++++++++++++++++ 6 files changed, 92 insertions(+) create mode 100644 source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php create mode 100644 source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php create mode 100644 source/wp-content/themes/wporg-showcase-2022/src/index.js create mode 100644 source/wp-content/themes/wporg-showcase-2022/src/style/block.json create mode 100644 source/wp-content/themes/wporg-showcase-2022/src/style/index.js create mode 100644 source/wp-content/themes/wporg-showcase-2022/src/style/style.scss diff --git a/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php b/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php new file mode 100644 index 00000000..93da91f1 --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php @@ -0,0 +1,32 @@ + 'secondary-search-control', + 'label' => __( 'Secondary', 'wporg' ), + 'style_handle' => STYLE_HANDLE, + ) + ); +} diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php new file mode 100644 index 00000000..ab9cac81 --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php @@ -0,0 +1,10 @@ + + + diff --git a/source/wp-content/themes/wporg-showcase-2022/src/index.js b/source/wp-content/themes/wporg-showcase-2022/src/index.js new file mode 100644 index 00000000..ffcf771b --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/src/index.js @@ -0,0 +1,2 @@ +// Noop, just imports the CSS for webpack. +import './index.js'; diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/block.json b/source/wp-content/themes/wporg-showcase-2022/src/style/block.json new file mode 100644 index 00000000..0869f98b --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/block.json @@ -0,0 +1,3 @@ +{ + "script": "file:./index.js" +} diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/index.js b/source/wp-content/themes/wporg-showcase-2022/src/style/index.js new file mode 100644 index 00000000..d0a6cc3b --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/index.js @@ -0,0 +1,2 @@ +// Noop, just imports the CSS for webpack. +import './style.scss'; diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss new file mode 100644 index 00000000..aa9242a3 --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -0,0 +1,43 @@ +/* + * Note: only add styles here in cases where you can't achieve the style with + * templates or theme.json settings. + */ + +/* + * Block styles. + */ + +/* + * core/search. + */ + +.is-style-secondary-search-control { + display: flex; + align-items: center; +} + +.is-style-secondary-search-control > label { + flex: 0; + font-size: var(--wp--preset--font-size--extra-small) !important; + padding-right: var(--wp--preset--spacing--10) !important; +} + +.is-style-secondary-search-control input[type="search"] { + border: none !important; + font-size: var(--wp--preset--font-size--extra-small) !important; + padding: 0 var(--wp--preset--spacing--10) !important; +} + +.is-style-secondary-search-control .wp-block-search__inside-wrapper { + border: 1px solid var(--wp--preset--color--charcoal-1) !important; + border-radius: 2px !important; +} + +.is-style-secondary-search-control button[type="submit"] { + background-color: transparent !important; + padding: calc(var(--wp--preset--spacing--10) / 2) !important; +} + +.is-style-secondary-search-control button[type="submit"] svg { + fill: var(--wp--preset--color--charcoal-1) !important; +} From 11b2fa306811f3bfb70aa499bd97a25ff1b53f7d Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 14:26:29 +0900 Subject: [PATCH 02/10] Update the pattern name. --- .../wporg-showcase-2022/patterns/secondary-search-bar.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php index ab9cac81..5ef0bb41 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php @@ -1,6 +1,6 @@ Date: Wed, 26 Oct 2022 14:29:25 +0900 Subject: [PATCH 03/10] Enqueue styles. --- .../themes/wporg-showcase-2022/functions.php | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/source/wp-content/themes/wporg-showcase-2022/functions.php b/source/wp-content/themes/wporg-showcase-2022/functions.php index ff57bbbd..5345aa86 100644 --- a/source/wp-content/themes/wporg-showcase-2022/functions.php +++ b/source/wp-content/themes/wporg-showcase-2022/functions.php @@ -4,12 +4,32 @@ // Block files require_once( __DIR__ . '/src/site-screenshot/index.php' ); +require_once __DIR__ . '/inc/block-styles.php'; // Filters and Actions +add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' ); add_filter( 'jetpack_images_get_images', __NAMESPACE__ . '\jetpack_fallback_image', 10, 3 ); add_action( 'wp', __NAMESPACE__ . '\jetpackme_remove_rp', 20 ); add_filter( 'jetpack_relatedposts_filter_thumbnail_size', __NAMESPACE__ . '\jetpackchange_image_size' ); + +/** + * Enqueue scripts and styles. + */ +function enqueue_assets() { + // The parent style is registered as `wporg-parent-2021-style`, and will be loaded unless + // explicitly unregistered. We can load any child-theme overrides by declaring the parent + // stylesheet as a dependency. + wp_enqueue_style( + 'wporg-showcase-2022-style', + get_stylesheet_directory_uri() . '/build/style/style-index.css', + array( 'wporg-parent-2021-style' ), + filemtime( __DIR__ . '/build/style/style-index.css' ) + ); + wp_style_add_data( 'wporg-showcase-2022-style', 'rtl', 'replace' ); + +} + /** * Retrieve the domain from post meta. * From f6dd6afc161095301e7bf7a5379ca1a7dabcbc4b Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 14:29:34 +0900 Subject: [PATCH 04/10] Translate label. --- .../wporg-showcase-2022/patterns/secondary-search-bar.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php index 5ef0bb41..d5030757 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php @@ -7,4 +7,4 @@ ?> - + From 1edd221ec3b5aa5258c0e7a1ccfba3dd42e08176 Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 14:30:31 +0900 Subject: [PATCH 05/10] Add in pattern to files with patterns. --- .../themes/wporg-showcase-2022/templates/archive.html | 1 + .../themes/wporg-showcase-2022/templates/front-page.html | 2 +- .../wp-content/themes/wporg-showcase-2022/templates/search.html | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/templates/archive.html b/source/wp-content/themes/wporg-showcase-2022/templates/archive.html index 0616bc23..8b454b73 100644 --- a/source/wp-content/themes/wporg-showcase-2022/templates/archive.html +++ b/source/wp-content/themes/wporg-showcase-2022/templates/archive.html @@ -3,6 +3,7 @@
+
diff --git a/source/wp-content/themes/wporg-showcase-2022/templates/front-page.html b/source/wp-content/themes/wporg-showcase-2022/templates/front-page.html index 4cae7566..97db9e1c 100644 --- a/source/wp-content/themes/wporg-showcase-2022/templates/front-page.html +++ b/source/wp-content/themes/wporg-showcase-2022/templates/front-page.html @@ -2,7 +2,7 @@
- +
diff --git a/source/wp-content/themes/wporg-showcase-2022/templates/search.html b/source/wp-content/themes/wporg-showcase-2022/templates/search.html index 7c1213ce..62f542bc 100644 --- a/source/wp-content/themes/wporg-showcase-2022/templates/search.html +++ b/source/wp-content/themes/wporg-showcase-2022/templates/search.html @@ -3,6 +3,7 @@
+
From 36767492d243693e9320d5a069010c6a4b4aef3e Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 14:56:51 +0900 Subject: [PATCH 06/10] Support more of the searchbar type layouts. --- .../wporg-showcase-2022/src/style/style.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss index aa9242a3..d953b234 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -28,6 +28,10 @@ padding: 0 var(--wp--preset--spacing--10) !important; } +.wp-block-search__no-button.is-style-secondary-search-control input[type="search"] { + min-height: var(--wp--preset--spacing--30); +} + .is-style-secondary-search-control .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--charcoal-1) !important; border-radius: 2px !important; @@ -35,9 +39,21 @@ .is-style-secondary-search-control button[type="submit"] { background-color: transparent !important; - padding: calc(var(--wp--preset--spacing--10) / 2) !important; + color: var(--wp--preset--color--charcoal-1) !important; } .is-style-secondary-search-control button[type="submit"] svg { fill: var(--wp--preset--color--charcoal-1) !important; } + +.wp-block-search__icon-button.is-style-secondary-search-control button[type="submit"] { + padding: calc(var(--wp--preset--spacing--10) / 2) !important; +} + +.wp-block-search__text-button.is-style-secondary-search-control button[type="submit"] { + margin: 2px; + border: 1px solid var(--wp--preset--color--charcoal-1) !important; + font-size: var(--wp--preset--font-size--extra-small) !important; + padding: var(--wp--preset--spacing--10) !important; +} + From a3ccedb49c2f074aba9cc66541888594711a66ff Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 15:24:32 +0900 Subject: [PATCH 07/10] Remove commented out lines. --- .../wp-content/themes/wporg-showcase-2022/inc/block-styles.php | 1 - 1 file changed, 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php b/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php index 93da91f1..daf520fb 100644 --- a/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php +++ b/source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php @@ -15,7 +15,6 @@ * Actions and filters. */ add_action( 'init', __NAMESPACE__ . '\setup_block_styles' ); -// add_filter( 'should_load_separate_core_block_assets', '__return_false' ); /** * Add our custom block styles & class names. From 080be58d0ff3a9e5d324bdb883c21b1a96e831c3 Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 15:24:38 +0900 Subject: [PATCH 08/10] Some more style fixes. --- .../wporg-showcase-2022/src/style/style.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss index d953b234..b5c54c5e 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -29,14 +29,24 @@ } .wp-block-search__no-button.is-style-secondary-search-control input[type="search"] { - min-height: var(--wp--preset--spacing--30); + min-height: var(--wp--preset--spacing--40); + border: 1px solid var(--wp--preset--color--charcoal-1) !important; +} + +.wp-block-search__button-inside.is-style-secondary-search-control .wp-block-search__inside-wrapper { + border: 1px solid var(--wp--preset--color--charcoal-1) !important; + border-radius: 2px !important; } -.is-style-secondary-search-control .wp-block-search__inside-wrapper { +.wp-block-search__button-outside.is-style-secondary-search-control input[type="search"] { border: 1px solid var(--wp--preset--color--charcoal-1) !important; border-radius: 2px !important; } +.wp-block-search__button-outside.is-style-secondary-search-control button[type="submit"] { + border: 1px solid var(--wp--preset--color--charcoal-1) !important; +} + .is-style-secondary-search-control button[type="submit"] { background-color: transparent !important; color: var(--wp--preset--color--charcoal-1) !important; @@ -51,9 +61,12 @@ } .wp-block-search__text-button.is-style-secondary-search-control button[type="submit"] { - margin: 2px; border: 1px solid var(--wp--preset--color--charcoal-1) !important; font-size: var(--wp--preset--font-size--extra-small) !important; padding: var(--wp--preset--spacing--10) !important; } +.wp-block-search__button-inside.is-style-secondary-search-control + button[type="submit"] { + margin: 2px; +} From 960b460b670b0740a89a6ef38f40484cefab9547 Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Wed, 26 Oct 2022 21:14:43 +0900 Subject: [PATCH 09/10] Fix linter error. --- .../wp-content/themes/wporg-showcase-2022/src/style/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss index b5c54c5e..1289ac13 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -67,6 +67,6 @@ } .wp-block-search__button-inside.is-style-secondary-search-control - button[type="submit"] { +button[type="submit"] { margin: 2px; } From a1dc1c21dce3b28cc3220305c718867b55eba05a Mon Sep 17 00:00:00 2001 From: dufresnesteven Date: Fri, 28 Oct 2022 09:37:31 +0900 Subject: [PATCH 10/10] Remove label from searchbar. --- .../wporg-showcase-2022/patterns/secondary-search-bar.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php index d5030757..abe741fc 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php @@ -7,4 +7,4 @@ ?> - +