Introduce Hidden inputs (#21)

* Render form in preview mode

* Introduce hidden inputs
Fixes #9

* Adding Hidden class for block

* Add 'omniform/hidden' to allowed blocks

* Bump tested up to 6.5

* Fix width of input fields in Style Book

* Fix height of textarea field in Style Book

* Add buttonLabel to button in Style Book

* Update hidden block styles

* Fix hidden block labels

* stylelint fix

* update deps for 6.5

* stylelint fix

* Test the Hidden block class

* Update hidden block styles and field labels

* Remove default fieldName

* Fix cleanForSlug bug in hidden block edit.js

includes/BlockLibrary/BlockLibraryServiceProvider.php

@@ -105,6 +105,7 @@ public function register_blocks() {
 			Blocks\Field::class,
 			Blocks\Label::class,
 			Blocks\Input::class,
+			Blocks\Hidden::class,
 			Blocks\Textarea::class,
 			Blocks\Select::class,
 			Blocks\Button::class,

includes/BlockLibrary/Blocks/Hidden.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * The Hidden block class.
+ *
+ * @package OmniForm
+ */
+
+namespace OmniForm\BlockLibrary\Blocks;
+
+/**
+ * The Hidden block class.
+ */
+class Hidden extends Input {
+	/**
+	 * Gets the field label.
+	 *
+	 * @return string|null
+	 */
+	public function get_field_label() {
+		return $this->get_block_attribute( 'fieldName' );
+	}
+
+	/**
+	 * Gets the extra wrapper attributes for the field to be passed into get_block_wrapper_attributes().
+	 *
+	 * @return array
+	 */
+	public function get_extra_wrapper_attributes() {
+		return array_filter(
+			array(
+				'type'  => 'hidden',
+				'name'  => $this->get_control_name(),
+				'value' => $this->get_control_value(),
+			)
+		);
+	}
+
+	/**
+	 * The form control's value attribute.
+	 *
+	 * @return string
+	 */
+	public function get_control_value() {
+		$callback = $this->get_block_attribute( 'fieldValue' );
+
+		if ( ! $callback ) {
+			return '';
+		}
+
+		// Callback functions must be surrounded by curly brackets. Example: "{{ callback_function }}".
+		if ( false === strpos( $callback, '{{' ) ) {
+			// Allow non-callback values to be set.
+			return $callback;
+		}
+
+		$fn = trim( str_replace( array( '{', '}' ), '', $callback ) );
+
+		// Ensure the function exists before calling.
+		if ( ! function_exists( $fn ) ) {
+			return '';
+		}
+
+		$result = $fn();
+
+		// Return an empty string if a string result was not received from the callback function.
+		if ( is_array( $result ) || is_object( $result ) ) {
+			return '';
+		}
+
+		return strval( is_bool( $result ) ? intval( $result ) : $result );
+	}
+}

includes/Plugin/PluginServiceProvider.php

@@ -347,6 +347,7 @@ function ( $allowed_block_types, $block_editor_context ) {
 						'omniform/field',
 						'omniform/label',
 						'omniform/input',
+						'omniform/hidden',
 						'omniform/textarea',
 						'omniform/select',
 						'omniform/select-group',

packages/block-library/form/edit/inner-blocks.js

@@ -28,6 +28,7 @@ const ALLOWED_BLOCKS = [
 	'omniform/field',
 	'omniform/label',
 	'omniform/input',
+	'omniform/hidden',
 	'omniform/textarea',
 	'omniform/select',
 	'omniform/select-group',

packages/block-library/hidden/block.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/wp/6.3/schemas/json/block.json",
+	"apiVersion": 3,
+	"name": "omniform/hidden",
+	"category": "omniform-control-simple",
+	"title": "Hidden Value",
+	"description": "A hidden form input for storing additional data.",
+	"textdomain": "omniform",
+	"attributes": {
+		"fieldName": {
+			"type": "string"
+		},
+		"fieldValue": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false
+	},
+	"usesContext": [
+		"postId",
+		"postType",
+		"omniform/fieldGroupName",
+		"omniform/fieldGroupLabel",
+		"omniform/fieldGroupIsRequired",
+		"omniform/fieldIsRequired"
+	],
+	"editorScript": "file:index.js",
+	"editorStyle": "file:index.css"
+}

packages/block-library/hidden/edit.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { cleanForSlug } from '@wordpress/url';
+
+const Edit = ( {
+	attributes: { fieldValue, fieldName },
+	setAttributes,
+	isSelected,
+} ) => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<RichText
+				identifier="fieldName"
+				placeholder={ __( 'Enter a name for the field…', 'omniform' ) }
+				value={ fieldName }
+				onChange={ ( newFieldName ) => {
+					setAttributes( { fieldName: newFieldName } );
+				} }
+				onBlur={ () => {
+					setAttributes( { fieldName: cleanForSlug( ( fieldName ?? '' ).replace( /(<([^>]+)>)/gi, '' ) ) } );
+				} }
+				withoutInteractiveFormatting
+				allowedFormats={ [] }
+			/>
+			<RichText
+				identifier="fieldControl"
+				aria-label={ __( 'Placeholder text for text input.', 'omniform' ) }
+				placeholder={
+					( isSelected || fieldValue ) ? __( 'Enter a value…', 'omniform' ) : undefined
+				}
+				value={ fieldValue }
+				onChange={ ( html ) => setAttributes( { fieldValue: html } ) }
+				withoutInteractiveFormatting
+				allowedFormats={ [] }
+			/>
+		</div>
+	);
+};
+
+export default Edit;

packages/block-library/hidden/index.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import json from './block.json';
+import Edit from './edit';
+import variations from './variations';
+import { fieldHidden } from '../shared/icons';
+
+import './index.scss';
+
+const { name } = json;
+
+registerBlockType( name, {
+	edit: Edit,
+	icon: { foreground: '#D92E83', src: fieldHidden },
+	variations,
+	example: {},
+	// Return the title of the variation if fieldName is in variations, otherwise return fieldName.
+	__experimentalLabel: ( { fieldName, fieldValue } ) => {
+		const variation = variations.find( ( { attributes } ) =>
+			attributes.fieldName === fieldName &&
+			attributes.fieldValue === fieldValue
+		);
+		return variation ? decodeEntities( variation.title ) : decodeEntities( fieldName );
+	},
+} );

packages/block-library/hidden/index.scss

@@ -0,0 +1,23 @@
+.wp-block-omniform-hidden [data-wp-block-attribute-key="fieldName"] {
+	font-size: 0.8em;
+	font-style: italic;
+	display: inline-block;
+}
+
+.wp-block-omniform-hidden [data-wp-block-attribute-key="fieldControl"] {
+	appearance: none;
+	background-color: transparent;
+	border-radius: 0.25em;
+	border-width: 1px;
+	border-style: dashed;
+	border-color: currentcolor;
+	box-sizing: border-box;
+	display: block;
+	font-size: inherit;
+	font-family: monospace;
+	line-height: inherit;
+	max-width: none;
+	min-height: auto;
+	padding: 0.5em 0.75em;
+	color: currentcolor;
+}

packages/block-library/hidden/variations.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	fieldHidden,
+} from '../shared/icons';
+
+const variations = [
+	{
+		name: 'field-current-user-id',
+		icon: fieldHidden,
+		title: __( 'Current User ID', 'omniform' ),
+		description: __( 'Hidden input field to store the current user ID.', 'omniform' ),
+		attributes: { fieldName: 'get_current_user_id', fieldValue: '{{ get_current_user_id }}' },
+	},
+	{
+		name: 'field-search-query',
+		icon: fieldHidden,
+		title: __( 'Search Query', 'omniform' ),
+		description: __( 'Hidden input field to store the search query.', 'omniform' ),
+		attributes: { fieldName: 'get_search_query', fieldValue: '{{ get_search_query }}' },
+	},
+	{
+		name: 'field-user-locale',
+		icon: fieldHidden,
+		title: __( 'User Locale', 'omniform' ),
+		description: __( 'Hidden input field to store the user locale.', 'omniform' ),
+		attributes: { fieldName: 'get_user_locale', fieldValue: '{{ get_user_locale }}' },
+	},
+];
+
+variations.forEach( ( variation ) => {
+	variation.isActive = ( blockAttributes, variationAttributes ) =>
+		blockAttributes.fieldName === variationAttributes.fieldName &&
+		blockAttributes.fieldValue === variationAttributes.fieldValue;
+
+	if ( ! variation.scope ) {
+		variation.scope = [ 'inserter', 'block', 'transform' ];
+	}
+} );
+
+export default variations;