[Experiment] Product search block Elements API support

assets/js/blocks/product-search/edit.js

@@ -1,10 +1,16 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+
 /**
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { InspectorControls, PlainText } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	PlainText,
+	__experimentalElementButtonClassName,
+} from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
@@ -114,7 +120,10 @@ const Edit = ( {
 					/>
 					<button
 						type="submit"
-						className="wc-block-product-search__button"
+						className={ classnames(
+							'wc-block-product-search__button',
+							__experimentalElementButtonClassName
+						) }
 						label={ __( 'Search', 'woo-gutenberg-products-block' ) }
 						onClick={ ( e ) => e.preventDefault() }
 						tabIndex="-1"

assets/js/blocks/product-search/editor.scss

@@ -13,4 +13,7 @@
 			flex-grow: 1;
 		}
 	}
+	.wc-block-product-search__field {
+		border: 0;
+	}
 }

assets/js/blocks/product-search/style.scss

@@ -1,16 +1,26 @@
-.wc-block-product-search {
+:where(.wc-block-product-search) {
 	.wc-block-product-search__fields {
 		display: flex;
 	}
 	.wc-block-product-search__field {
 		padding: 6px 8px;
 		line-height: 1.8;
 		flex-grow: 1;
+		border-style: solid;
+		border-width: 1px;
 	}
+
+	.wc-block-product-search__field,
+	.wc-block-product-search__field > * {
+		display: flex;
+		flex-grow: 1;
+	}
+
 	.wc-block-product-search__button {
 		display: flex;
 		align-items: center;
-		margin: 0 0 0 6px;
+		border: 1px solid #ccc;
+		margin: 0 0 0 0.625em;
 		cursor: pointer;
 		padding: 0 0.5em;
 		position: relative;

src/BlockTypes/ProductSearch.php

@@ -102,7 +102,7 @@ protected function render( $attributes, $content ) {
 			esc_attr( $attributes['placeholder'] )
 		);
 		$button_markup = sprintf(
-			'<button type="submit" class="wc-block-product-search__button" aria-label="%s">
+			'<button type="submit" class="wc-block-product-search__button wp-element-button" aria-label="%s">
 				<svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-arrow-right-alt2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
 					<path d="M6 15l5-5-5-5 1-2 7 7-7 7z" />
 				</svg>