Merge pull request #3469 from Automattic/bcb-search-block

Blank Canvas Blocks: Add default styles for search block

blank-canvas-blocks/assets/ponyfill.css

@@ -127,7 +127,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-	border-radius: var(--wp--custom--form--border-radius);
+	border-radius: var(--wp--custom--form--border--radius);
 	color: var(--wp--custom--form--color--text);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);
@@ -191,6 +191,13 @@ input[type=checkbox] + label {
 	border-color: var(--wp--custom--button--color--hover-background);
 }
 
+.wp-block-button.wp-block-button__link:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
+.wp-block-button .wp-block-button__link:hover svg,
+.wp-block-button .wp-block-button__link:focus svg,
+.wp-block-button .wp-block-button__link.has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption {
 	font-size: var(--wp--custom--gallery--caption--font-size);
@@ -213,17 +220,6 @@ ol {
 	padding-left: var(--wp--custom--list--padding--left);
 }
 
-p.has-text-color a {
-	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
-}
-
-p.has-drop-cap:not(:focus):first-letter {
-	font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
-	font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
-	font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
-	margin: var(--wp--custom--paragraph--dropcap--margin);
-}
-
 .wp-block-navigation a {
 	border-bottom: none;
 }
@@ -340,11 +336,104 @@ p.has-drop-cap:not(:focus):first-letter {
 	}
 }
 
+p.has-text-color a {
+	color: var(--wp--style--color--link, var(--wp--custom--color--primary));
+}
+
+p.has-drop-cap:not(:focus):first-letter {
+	font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
+	font-family: var(--wp--custom--paragraph--dropcap--typography--font-family);
+	font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
+	margin: var(--wp--custom--paragraph--dropcap--margin);
+}
+
 .wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
 	font-size: var(--wp--custom--quote--citation--typography--font-size);
 	font-style: var(--wp--custom--quote--citation--typography--font-style);
 }
 
+/**
+ * Button
+ */
+/**
+ * Block Options
+ */
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
+	text-decoration: none;
+}
+
+.wp-block-button.wp-block-button__link:hover, .wp-block-button.wp-block-button__link:focus, .wp-block-button.wp-block-button__link.has-focus,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-button .wp-block-button__link.has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
+}
+
+.wp-block-button.wp-block-button__link:hover svg, .wp-block-button.wp-block-button__link:focus svg, .wp-block-button.wp-block-button__link.has-focus svg,
+.wp-block-button .wp-block-button__link:hover svg,
+.wp-block-button .wp-block-button__link:focus svg,
+.wp-block-button .wp-block-button__link.has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: var(--wp--custom--form--padding);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+	border-radius: var(--wp--custom--form--border--radius);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	padding: 0;
+}
+
+.wp-block-search .wp-block-search__input {
+	padding: var(--wp--custom--form--padding);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+.wp-block-search .wp-block-search__button {
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: var(--wp--custom--button--typography--font-family);
+	font-size: var(--wp--custom--button--typography--font-size);
+	border-radius: var(--wp--custom--button--border--radius);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none;
+	color: var(--wp--custom--button--color--text);
+	border-color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	padding: calc(.667em + 2px) calc(1.333em + 2px);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
+.wp-block-search .wp-block-search__button svg {
+	fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-search .wp-block-search__button.has-focus {
+	color: var(--wp--custom--button--color--hover-text);
+	background-color: var(--wp--custom--button--color--hover-background);
+	border-color: var(--wp--custom--button--color--hover-background);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus svg,
+.wp-block-search .wp-block-search__button:hover svg,
+.wp-block-search .wp-block-search__button:focus svg,
+.wp-block-search .wp-block-search__button.has-focus svg {
+	fill: var(--wp--custom--button--color--hover-text);
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-icon,
+.wp-block-search .wp-block-search__button.has-icon {
+	line-height: 0;
+}
+
 .wp-block-separator:not(.is-style-dots) {
 	border-bottom: var(--wp--custom--separator--thickness) solid var(--wp--custom--separator--color);
 }

blank-canvas-blocks/experimental-theme.json

@@ -119,10 +119,10 @@
 					}
 				},
 				"form": {
-					"padding": "5px",
+					"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 					"border": {
 						"radius": "0",
-						"color": "#cccccc",
+						"color": "#EFEFEF",
 						"width": "2px",
 						"style": "solid"
 					},

blank-canvas-blocks/sass/blocks/_button.scss

@@ -8,8 +8,15 @@
 	font-family: var(--wp--custom--button--typography--font-family);
 	font-size: var(--wp--custom--button--typography--font-size);
 	border-radius: var(--wp--custom--button--border--radius);
-	line-height: var(--wp--custom--button--border--line-height);
+	line-height: var(--wp--custom--button--typography--line-height);
 	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+	color: var(--wp--custom--button--color--text);
+	border-color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block 
+	svg {
+		fill: var(--wp--custom--button--color--text);
+	}
 }
 
 // NOTE: These remain for the hover styling of blocks.  This can be removed when the button block has configurable hover states.
@@ -20,6 +27,9 @@
 		color: var(--wp--custom--button--color--hover-text);
 		background-color: var(--wp--custom--button--color--hover-background);
 		border-color: var(--wp--custom--button--color--hover-background);
+		svg {
+			fill: var(--wp--custom--button--color--hover-text);
+		}
 	}
 }
 

blank-canvas-blocks/sass/blocks/_search.scss

@@ -0,0 +1,30 @@
+@import 'button';
+
+.wp-block-search {
+
+	&.wp-block-search__button-inside {
+		.wp-block-search__inside-wrapper{
+			padding: var(--wp--custom--form--padding);
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+			border-radius: var(--wp--custom--form--border--radius);
+			.wp-block-search__input {
+				padding: 0;
+			}
+		}
+	}
+
+	.wp-block-search__input {
+		padding: var(--wp--custom--form--padding);
+		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+	}
+
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+	.wp-block-search__button {
+		@include button-main-styles;
+		@include button-hover-styles;
+		&.has-icon {
+			line-height: 0;
+		}
+	}
+
+}

blank-canvas-blocks/sass/elements/_forms.scss

@@ -15,7 +15,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
-	border-radius: var(--wp--custom--form--border-radius);
+	border-radius: var(--wp--custom--form--border--radius);
 	color: var(--wp--custom--form--color--text);
 	padding: var(--wp--custom--form--padding);
 	background: var(--wp--custom--form--color--background);

blank-canvas-blocks/sass/ponyfill.scss

@@ -13,8 +13,9 @@
 @import "blocks/gallery";
 @import "blocks/image";
 @import "blocks/list";
-@import "blocks/paragraph";
 @import "blocks/navigation";
+@import "blocks/paragraph";
 @import "blocks/quote";
+@import "blocks/search";
 @import "blocks/separator";
 @import "blocks/video";