From dfef8b2c9b3a8bef252cf0ee1baffdce2a6075eb Mon Sep 17 00:00:00 2001
From: IanDelMar <42134098+IanDelMar@users.noreply.github.com>
Date: Sat, 19 Mar 2022 11:15:08 +0100
Subject: [PATCH 1/4] add function to get proper form control class for select

---
 inc/template-tags.php | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/inc/template-tags.php b/inc/template-tags.php
index dbef2794..e3aff450 100644
--- a/inc/template-tags.php
+++ b/inc/template-tags.php
@@ -248,3 +248,17 @@ if ( ! function_exists( 'understrap_link_pages' ) ) {
 		wp_link_pages( $args );
 	}
 }
+
+if ( ! function_exists( 'understrap_get_select_control_class' ) ) {
+	/**
+	 * Retrieves the Bootstrap CSS class for the select tag.
+	 *
+	 * @return string Bootstrap CSS class for the select tag.
+	 */
+	function understrap_get_select_control_class() {
+		if ( 'bootstrap4' === get_theme_mod( 'understrap_bootstrap_version', 'bootstrap 4' ) ) {
+			return 'form-control';
+		}
+		return 'from-select';
+	}
+}

From 39ded2cca2565ccb0388e0ae287ce9f21374a0b3 Mon Sep 17 00:00:00 2001
From: IanDelMar <42134098+IanDelMar@users.noreply.github.com>
Date: Sat, 19 Mar 2022 11:33:17 +0100
Subject: [PATCH 2/4] fix archives block widget

---
 inc/widgets.php | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/inc/widgets.php b/inc/widgets.php
index a8116e8f..2f01e568 100644
--- a/inc/widgets.php
+++ b/inc/widgets.php
@@ -8,6 +8,28 @@
 // Exit if accessed directly.
 defined( 'ABSPATH' ) || exit;
 
+if ( ! function_exists( 'understrap_add_block_widget_archives_classes' ) ) {
+	/**
+	 * Adds Bootstrap class to select tag in the Categories widget.
+	 *
+	 * @param string $block_content The block content.
+	 * @param array  $block         The full block, including name and attributes.
+	 * @return string The filtered block content.
+	 */
+	function understrap_add_block_widget_archives_classes( $block_content, $block ) {
+
+		if ( isset( $block['attrs']['displayAsDropdown'] ) && true === $block['attrs']['displayAsDropdown'] ) {
+			return str_replace(
+				'<select',
+				'<select class="' . understrap_get_select_control_class() . '"',
+				$block_content
+			);
+		}
+		return $block_content;
+	}
+}
+add_filter( 'render_block_core/archives', 'understrap_add_block_widget_archives_classes', 10, 2 );
+
 /**
  * Add filter to the parameters passed to a widget's display callback.
  * The filter is evaluated on both the front and the back end!

From 6be03c7fe53b98c1c908612af04877bce63c7d80 Mon Sep 17 00:00:00 2001
From: IanDelMar <42134098+IanDelMar@users.noreply.github.com>
Date: Sat, 19 Mar 2022 11:39:25 +0100
Subject: [PATCH 3/4] replace @extend with relevant parts of .form-control

---
 src/sass/theme/_understrap.scss | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/sass/theme/_understrap.scss b/src/sass/theme/_understrap.scss
index 680a7be8..9fee6199 100644
--- a/src/sass/theme/_understrap.scss
+++ b/src/sass/theme/_understrap.scss
@@ -61,7 +61,33 @@ body {
 .widget_categories,
 .widget_archive {
 	select {
-		@extend .form-control;
+		display: block;
+		width: 100%;
+		height: $input-height;
+		padding: $input-padding-y $input-padding-x;
+		font-family: $input-font-family;
+		@include font-size($input-font-size);
+		font-weight: $input-font-weight;
+		line-height: $input-line-height;
+		color: $input-color;
+		background-color: $input-bg;
+		background-clip: padding-box;
+		border: $input-border-width solid $input-border-color;
+
+		// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+		@include border-radius($input-border-radius, 0);
+
+		@include box-shadow($input-box-shadow);
+		@include transition($input-transition);
+
+		// Unstyle the caret on `<select>`s in IE10+.
+		&::-ms-expand {
+			background-color: transparent;
+			border: 0;
+		}
+
+		// Customize the `:focus` state to imitate native WebKit styles.
+		@include form-control-focus($ignore-warning: true);
 	}
 }
 

From 1dd9a1a3d9f59252ba931e452528f597a82e99f4 Mon Sep 17 00:00:00 2001
From: IanDelMar <42134098+IanDelMar@users.noreply.github.com>
Date: Sat, 19 Mar 2022 11:46:51 +0100
Subject: [PATCH 4/4] add scss for bootstrap 5 styles

---
 src/sass/theme/_understrap.scss | 85 +++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/sass/theme/_understrap.scss b/src/sass/theme/_understrap.scss
index 9fee6199..8775bf85 100644
--- a/src/sass/theme/_understrap.scss
+++ b/src/sass/theme/_understrap.scss
@@ -60,34 +60,77 @@ body {
 
 .widget_categories,
 .widget_archive {
+
 	select {
 		display: block;
 		width: 100%;
-		height: $input-height;
-		padding: $input-padding-y $input-padding-x;
-		font-family: $input-font-family;
-		@include font-size($input-font-size);
-		font-weight: $input-font-weight;
-		line-height: $input-line-height;
-		color: $input-color;
-		background-color: $input-bg;
-		background-clip: padding-box;
-		border: $input-border-width solid $input-border-color;
 
-		// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-		@include border-radius($input-border-radius, 0);
+		@if variable-exists("bootstrap4") { // replicates relevant parts of .form-control
+			height: $input-height;
+			padding: $input-padding-y $input-padding-x;
+			font-family: $input-font-family;
 
-		@include box-shadow($input-box-shadow);
-		@include transition($input-transition);
+			@include font-size($input-font-size);
+			font-weight: $input-font-weight;
+			line-height: $input-line-height;
+			color: $input-color;
+			background-color: $input-bg;
+			background-clip: padding-box;
+			border: $input-border-width solid $input-border-color;
 
-		// Unstyle the caret on `<select>`s in IE10+.
-		&::-ms-expand {
-			background-color: transparent;
-			border: 0;
+			// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+			@include border-radius($input-border-radius, 0);
+			@include box-shadow($input-box-shadow);
+			@include transition($input-transition);
+
+			// Unstyle the caret on `<select>`s in IE10+.
+			&::-ms-expand {
+				background-color: transparent;
+				border: 0;
+			}
+
+			// Customize the `:focus` state to imitate native WebKit styles.
+			@include form-control-focus($ignore-warning: true);
+		} @else { // replicates relevant parts of .form-select
+			padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+			-moz-padding-start: subtract($form-select-padding-x, 3px);
+			font-family: $form-select-font-family;
+
+			@include font-size($form-select-font-size);
+			font-weight: $form-select-font-weight;
+			line-height: $form-select-line-height;
+			color: $form-select-color;
+			background-color: $form-select-bg;
+			background-image: escape-svg($form-select-indicator);
+			background-repeat: no-repeat;
+			background-position: $form-select-bg-position;
+			background-size: $form-select-bg-size;
+			border: $form-select-border-width solid $form-select-border-color;
+
+			@include border-radius($form-select-border-radius, 0);
+			@include box-shadow($form-select-box-shadow);
+			@include transition($form-select-transition);
+			appearance: none;
+
+			&:focus {
+				border-color: $form-select-focus-border-color;
+				outline: 0;
+
+				@if $enable-shadows {
+
+					@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+				} @else {
+					// Avoid using mixin so we can pass custom focus shadow properly
+					box-shadow: $form-select-focus-box-shadow;
+				}
+			}
+
+			// Remove outline from select box in FF
+			&:-moz-focusring {
+				color: transparent;
+				text-shadow: 0 0 0 $form-select-color;
+			}
 		}
-
-		// Customize the `:focus` state to imitate native WebKit styles.
-		@include form-control-focus($ignore-warning: true);
 	}
 }