finished styles that work on the editor

spearhead/assets/sass/block-extends/_search.scss

@@ -5,38 +5,49 @@
 
 .wp-block-search {
 
+	flex-wrap: wrap;
+
 	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{
 			padding: 0;
 			.wp-block-search__button {
 				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				margin: -1px -1px -1px 0;
 			}
 		}
-	}
 
-	&.wp-block-search__icon-button.wp-block-search__button-inside {
-
-		.wp-block-search__inside-wrapper{
-			flex-direction: row-reverse;
-			padding-left: 0;
-			border: none;
-			border-bottom: var(--form--border-width) solid var(--form--border-color);
+		&:not(.wp-block-search__icon-button) {
+			.wp-block-search__inside-wrapper{
+				border-radius: var(--button--border-radius);
+			}
 		}
 
-		.wp-block-search__input {
-			border: none;
-			padding: 0 0 0 10px;
-			font-size: var(--global--font-size-sm);
-		}
+		&.wp-block-search__icon-button {
 
-		.wp-block-search__button {
-			&.has-icon {
-				margin-left: 0;
-				background: transparent;
-				color: var(--form--border-color);
-				padding: 0;
+			.wp-block-search__inside-wrapper{
+				flex-direction: row-reverse;
+				padding-left: 0;
 				border: none;
+				border-bottom: var(--form--border-width) solid var(--form--border-color);
 			}
+	
+			.wp-block-search__input {
+				border: none;
+				padding: 0 0 0 10px;
+			}
+	
+			.wp-block-search__button {
+				&.has-icon {
+					margin-left: 0;
+					background: transparent;
+					color: var(--form--border-color);
+					padding: 0;
+					border: none;
+				}
+			}
+
 		}
 	}
 
@@ -59,6 +70,10 @@
 		align-items: center;
 	}
 
+	.wp-block-search__label {
+		margin-bottom: 1rem;
+	}
+
 	.wp-block-search__input {
 		@include input-search-style();
 		color: var(--form--color-text);

spearhead/style-rtl.css

@@ -404,28 +404,38 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
+.wp-block-search {
+	flex-wrap: wrap;
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	padding: 0;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin: -1px 0 -1px -1px;
+}
+
+.wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
+	border-radius: var(--button--border-radius);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
 	padding-right: 0;
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
 	border: none;
 	padding: 0 10px 0 0;
-	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
 	margin-right: 0;
 	background: transparent;
 	color: var(--form--border-color);
@@ -455,6 +465,10 @@ ul.wp-block-categories,
 	align-items: center;
 }
 
+.wp-block-search .wp-block-search__label {
+	margin-bottom: 1rem;
+}
+
 .wp-block-search .wp-block-search__input {
 	background: transparent;
 	color: var(--global--color-secondary);

spearhead/style.css

@@ -404,28 +404,38 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
+.wp-block-search {
+	flex-wrap: wrap;
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	padding: 0;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	margin: -1px -1px -1px 0;
+}
+
+.wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
+	border-radius: var(--button--border-radius);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
 	padding-left: 0;
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
 	border: none;
 	padding: 0 0 0 10px;
-	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
 	margin-left: 0;
 	background: transparent;
 	color: var(--form--border-color);
@@ -455,6 +465,10 @@ ul.wp-block-categories,
 	align-items: center;
 }
 
+.wp-block-search .wp-block-search__label {
+	margin-bottom: 1rem;
+}
+
 .wp-block-search .wp-block-search__input {
 	background: transparent;
 	color: var(--global--color-secondary);