Add Searchbar Pattern/Block Styles

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.
  *

source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Block Styles & Variations
+ *
+ * Load the CSS, JS, and register custom styles.
+ */
+
+namespace WordPressdotorg\Theme\Showcase_2022\Block_Styles;
+
+defined( 'WPINC' ) || die();
+
+const STYLE_HANDLE = 'wporg-showcase-block-styles';
+
+/**
+ * Actions and filters.
+ */
+add_action( 'init', __NAMESPACE__ . '\setup_block_styles' );
+
+/**
+ * Add our custom block styles & class names.
+ */
+function setup_block_styles() {
+	register_block_style(
+		'core/search',
+		array(
+			'name'         => 'secondary-search-control',
+			'label'        => __( 'Secondary', 'wporg' ),
+			'style_handle' => STYLE_HANDLE,
+		)
+	);
+}

source/wp-content/themes/wporg-showcase-2022/patterns/secondary-search-bar.php

@@ -0,0 +1,10 @@
+<?php
+/**
+ * Title: Secondary Search Bar
+ * Slug: wporg-showcase-2022/secondary-search-bar
+ * Categories: wporg
+ */
+
+?>
+
+<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_attr_e( 'Search sites...', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->

source/wp-content/themes/wporg-showcase-2022/src/index.js

@@ -0,0 +1,2 @@
+// Noop, just imports the CSS for webpack.
+import './index.js';

source/wp-content/themes/wporg-showcase-2022/src/style/block.json

@@ -0,0 +1,3 @@
+{
+	"script": "file:./index.js"
+}

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';

source/wp-content/themes/wporg-showcase-2022/src/style/style.scss

@@ -0,0 +1,72 @@
+/*
+ * 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;
+}
+
+.wp-block-search__no-button.is-style-secondary-search-control input[type="search"] {
+	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;
+}
+
+.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;
+}
+
+.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"] {
+	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;
+}

source/wp-content/themes/wporg-showcase-2022/templates/archive.html

@@ -3,6 +3,7 @@
 <!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px"}},"className":"entry-content","layout":{"type":"constrained"}} -->
 <main class="wp-block-group entry-content">
 	<!-- wp:query-title {"type":"archive"} /-->
+	<!-- wp:pattern {"slug":"wporg-showcase-2022/secondary-search-bar"} /-->
 
 	<!-- wp:query {"query":{"inherit":true},"displayLayout":{"type":"flex","columns":3}} -->
 	<div class="wp-block-query">

source/wp-content/themes/wporg-showcase-2022/templates/front-page.html

@@ -2,7 +2,7 @@
 
 <!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px"}},"className":"entry-content","layout":{"type":"constrained"}} -->
 <main class="wp-block-group entry-content">
-	<!-- wp:search {"label":"Search","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->
+	<!-- wp:pattern {"slug":"wporg-showcase-2022/secondary-search-bar"} /-->
 
 	<!-- wp:query {"queryId":16,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 	<div class="wp-block-query">

source/wp-content/themes/wporg-showcase-2022/templates/search.html

@@ -3,6 +3,7 @@
 <!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px"}},"className":"entry-content","layout":{"type":"constrained"}} -->
 <main class="wp-block-group entry-content">
 	<!-- wp:query-title {"type":"search"} /-->
+	<!-- wp:pattern {"slug":"wporg-showcase-2022/secondary-search-bar"} /-->
 
 	<!-- wp:query {"query":{"inherit":true},"displayLayout":{"type":"flex","columns":3}} -->
 	<div class="wp-block-query">