add conditional group block

includes/BlockLibrary/BlockLibraryServiceProvider.php

@@ -89,6 +89,7 @@ public function register_blocks() {
 			Blocks\ResponseNotification::class,
 			Blocks\PostCommentsFormTitle::class,
 			Blocks\PostCommentsFormCancelReplyLink::class,
+			Blocks\ConditionalGroup::class,
 		);
 
 		foreach ( $blocks as $block ) {

includes/BlockLibrary/Blocks/ConditionalGroup.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * The ConditionalGroup block class.
+ *
+ * @package OmniForm
+ */
+
+namespace OmniForm\BlockLibrary\Blocks;
+
+use OmniForm\Traits\CallbackSupport;
+
+/**
+ * The ConditionalGroup block class.
+ */
+class ConditionalGroup extends BaseBlock {
+	use CallbackSupport;
+
+	/**
+	 * Renders the block on the server.
+	 *
+	 * @return string
+	 */
+	public function render() {
+		if ( ! $this->has_callback( $this->get_block_attribute( 'callback' ) ?? '' ) ) {
+			return $this->content;
+		}
+
+		return empty( $this->process_callbacks( $this->get_block_attribute( 'callback' ) ) ) === $this->get_block_attribute( 'reverseCondition' )
+			? $this->content : '';
+	}
+}

packages/block-library/conditional-group/block.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/wp/6.3/schemas/json/block.json",
+	"apiVersion": 3,
+	"name": "omniform/conditional-group",
+	"category": "omniform",
+	"title": "Conditional Group",
+	"description": "Controls the visibility of a group of blocks based on specified conditions.",
+	"textdomain": "omniform",
+	"attributes": {
+		"callback": {
+			"type": "string"
+		},
+        "reverseCondition": {
+            "type": "boolean",
+            "default": false
+        }
+	},
+	"supports": {
+		"html": false,
+		"layout": {
+			"allowEditing": false
+		}
+	},
+	"editorScript": "file:index.js",
+	"editorStyle": "file:index.css"
+}

packages/block-library/conditional-group/edit.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { iconReverseCondition } from '../shared/icons';
+
+const Edit = ( {
+	attributes: { callback, reverseCondition },
+	setAttributes,
+} ) => {
+	const blockProps = useBlockProps();
+	const innerBlockProps = useInnerBlocksProps();
+
+	const conditionLabel = reverseCondition
+		? __( 'Show when not', 'omniform' )
+		: __( 'Show when', 'omniform' );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ iconReverseCondition }
+						isActive={ reverseCondition }
+						label={ __( 'Reverse condition', 'omniform' ) }
+						onClick={ () => setAttributes( { reverseCondition: ! reverseCondition } ) }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<div { ...blockProps }>
+				<div className="condition-label">{ conditionLabel } { callback || '' }</div>
+				<div { ...innerBlockProps } />
+			</div>
+		</>
+	);
+};
+
+export default Edit;

packages/block-library/conditional-group/index.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import json from './block.json';
+import Edit from './edit';
+import Save from './save';
+import { label as iconLabel } from '../shared/icons';
+
+import './index.scss';
+
+const { name } = json;
+
+registerBlockType( name, {
+	edit: Edit,
+	save: Save,
+	icon: { foreground: '#D92E83', src: iconLabel },
+} );

packages/block-library/conditional-group/index.scss

@@ -0,0 +1,17 @@
+.wp-block-omniform-conditional-group {
+
+    outline-color: var(--wp-admin-theme-color);
+    outline-offset: -1px;
+    outline-style: dashed;
+    outline-width: 1px;
+    padding-left: 1rem;
+
+    .condition-label {
+        display: block;
+        padding: 0.5rem 0;
+        font-size: 0.8em;
+        font-style: italic;
+        pointer-events: none;
+        color: var(--wp-admin-theme-color);
+    }
+}

packages/block-library/conditional-group/save.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+	return useInnerBlocksProps.save( useBlockProps.save() ).children;
+};
+export default Save;

packages/block-library/shared/icons.js

@@ -159,6 +159,12 @@ export const Required = (
 	</SVG>
 );
 
+export const iconReverseCondition = (
+	<SVG viewBox="0 0 24 24">
+		<Path d="m7 20-5-5 5-5 1.4 1.425L5.825 14H13v2H5.825L8.4 18.575 7 20Zm10-6-1.4-1.425L18.175 10H11V8h7.175L15.6 5.425 17 4l5 5-5 5Z" />
+	</SVG>
+);
+
 export const typeGeneral = (
 	<SVG viewBox="0 0 24 24">
 		<Path d="M7 7h2v2H7V7Z" />