Skip to content

Commit

Permalink
Merge pull request #25 from WordPress/add/searchbar-pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
StevenDufresne authored Oct 28, 2022
2 parents 80c9d3a + a1dc1c2 commit 0704187
Show file tree
Hide file tree
Showing 10 changed files with 143 additions and 1 deletion.
20 changes: 20 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,31 @@

// 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_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.
*
Expand Down
31 changes: 31 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/inc/block-styles.php
Original file line number Diff line number Diff line change
@@ -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,
)
);
}
Original file line number Diff line number Diff line change
@@ -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"} /-->
2 changes: 2 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// Noop, just imports the CSS for webpack.
import './index.js';
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"script": "file:./index.js"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// Noop, just imports the CSS for webpack.
import './style.scss';
72 changes: 72 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 0704187

Please sign in to comment.