Add Block Transform to Convert Core Search Block (#36)

* Add transforms for label/no-label

* Support no-button style and placeholder attribute when transforming

* Change "required" toolbar icon to asterisk

* php and css lint fixes

* Fix applied button classes

* apply styles during transform

* fix style application on button

* Don't show label if empty

* Set buttonLabel if empty

includes/BlockLibrary/Blocks/Button.php

@@ -21,19 +21,11 @@ public function render() {
 			return '';
 		}
 
-		$classname = implode(
-			' ',
-			array(
-				wp_theme_get_element_class_name( 'button' ),
-				'wp-block-button__link',
-			)
-		);
-
 		return sprintf(
 			'<button %s>%s</button>',
 			get_block_wrapper_attributes(
 				array(
-					'class' => $classname,
+					'class' => wp_theme_get_element_class_name( 'button' ),
 					'type'  => esc_attr( $this->get_block_attribute( 'buttonType' ) ),
 				)
 			),

packages/block-library/button/style.scss

@@ -1,6 +1,7 @@
 @import "../shared/mixins";
 
-.wp-block-omniform-button {
+.wp-block-omniform-button,
+.wp-block-omniform-button.wp-element-button {
 
 	align-items: center;
 	justify-content: center;
@@ -10,6 +11,9 @@
 	box-sizing: border-box;
 	border-color: currentcolor;
 	font-weight: inherit;
+	font-size: inherit;
+	font-family: inherit;
+	letter-spacing: inherit;
 
 	@include focus-styles;
 

packages/block-library/form/index.js

@@ -18,6 +18,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import json from './block.json';
 import StandardForm from './edit/standard-form';
 import StandaloneForm from './edit/standalone-form';
+import transforms from './transforms';
 import variations from './variations';
 import { POST_TYPE } from '../shared/constants';
 import { form } from '../shared/icons';
@@ -36,6 +37,7 @@ registerBlockType( name, {
 	},
 	save: ( { ref } ) => ref ? null : <InnerBlocks.Content />,
 	icon: { foreground: '#D92E83', src: form },
+	transforms,
 	variations,
 	// Get block name from the post name.
 	__experimentalLabel: ( { ref } ) => {

packages/block-library/form/transforms.js

@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			transform: ( {
+				label,
+				showLabel,
+				buttonText,
+				placeholder,
+				buttonPosition,
+				...attributes
+			} ) => {
+				const fieldInnerBlocks = [
+					createBlock( 'omniform/input', {
+						fieldType: 'search',
+						fieldPlaceholder: placeholder,
+						style: {
+							layout: {
+								selfStretch: 'fill',
+								flexSize: null,
+							},
+							border: attributes?.style?.border,
+						},
+						borderColor: attributes?.borderColor,
+					}, [] ),
+				];
+
+				if ( showLabel && label ) {
+					fieldInnerBlocks.unshift( createBlock( 'omniform/label', {}, [] ) );
+				}
+
+				const innerBlocks = [
+					createBlock( 'omniform/field',
+						{
+							fieldLabel: label || __( 'Search', 'omniform' ),
+							fieldName: 's',
+							style: {
+								layout: {
+									selfStretch: 'fill',
+									flexSize: null,
+								},
+							},
+							layout: showLabel ? {
+								type: 'flex',
+								orientation: 'vertical',
+								justifyContent: 'stretch',
+							} : {
+								type: 'flex',
+								orientation: 'horizontal',
+								justifyContent: 'space-between',
+							},
+						},
+						fieldInnerBlocks
+					),
+				];
+
+				if ( buttonPosition !== 'no-button' ) {
+					innerBlocks.push(
+						createBlock( 'omniform/button',
+							{
+								buttonType: 'submit',
+								buttonLabel: buttonText || __( 'Search', 'omniform' ),
+								style: {
+									layout: {
+										selfStretch: 'fit',
+										flexSize: null,
+									},
+									border: attributes?.style?.border,
+									typography: attributes?.style?.typography,
+								},
+								textColor: attributes?.textColor,
+								backgroundColor: attributes?.backgroundColor,
+								borderColor: attributes?.borderColor,
+							}
+						),
+					);
+				}
+
+				return createBlock( 'omniform/form',
+					{
+						form_type: 'custom',
+						submit_action: '{{get_site_url}}',
+						submit_method: 'GET',
+						required_label: '*',
+					},
+					[
+						createBlock( 'core/group',
+							{
+								tagName: 'div',
+								style: {
+									spacing: {
+										margin: {
+											top: 0,
+											bottom: 0,
+										},
+									},
+									typography: attributes?.style?.typography,
+								},
+								layout: {
+									type: 'flex',
+									flexWrap: 'nowrap',
+									justifyContent: 'space-between',
+									orientation: 'horizontal',
+									verticalAlignment: showLabel ? 'bottom' : undefined,
+								},
+								fontFamily: attributes?.fontFamily,
+								fontSize: attributes?.fontSize,
+							},
+							innerBlocks
+						),
+					]
+				);
+			},
+		},
+	],
+};
+
+export default transforms;