Block Editor: Settings Sidebar: Support optgroup for Member Content

includes/plugin-sidebars/class-convertkit-plugin-sidebar-post-settings.php

@@ -157,26 +157,38 @@ public function get_fields() {
 
 		// Get Products.
 		$restrict_content = array(
-			'0' => esc_html__( 'Don\'t restrict content to member-only', 'convertkit' ),
+			'0' => esc_html__( 'Do not restrict content to member-only', 'convertkit' ),
 		);
 		if ( $convertkit_forms->exist() ) {
+			$restrict_content['forms'] = array(
+				'label'  => esc_html__( 'Forms', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_forms->get() as $form ) {
 				// Legacy forms don't include a `format` key, so define them as inline.
-				$restrict_content[ 'form_' . absint( $form['id'] ) ] = sprintf(
+				$restrict_content['forms']['values'][ 'form_' . absint( $form['id'] ) ] = sprintf(
 					'%s [%s]',
 					sanitize_text_field( $form['name'] ),
 					( ! empty( $form['format'] ) ? sanitize_text_field( $form['format'] ) : 'inline' )
 				);
 			}
 		}
 		if ( $convertkit_tags->exist() ) {
+			$restrict_content['tags'] = array(
+				'label'  => esc_html__( 'Tags', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_tags->get() as $tag ) {
-				$restrict_content[ 'tag_' . absint( $tag['id'] ) ] = sanitize_text_field( $tag['name'] );
+				$restrict_content['tags']['values'][ 'tag_' . absint( $tag['id'] ) ] = sanitize_text_field( $tag['name'] );
 			}
 		}
 		if ( $convertkit_products->exist() ) {
+			$restrict_content['products'] = array(
+				'label'  => esc_html__( 'Products', 'convertkit' ),
+				'values' => array(),
+			);
 			foreach ( $convertkit_products->get() as $product ) {
-				$restrict_content[ 'product_' . $product['id'] ] = sanitize_text_field( $product['name'] );
+				$restrict_content['products']['values'][ 'product_' . $product['id'] ] = sanitize_text_field( $product['name'] );
 			}
 		}
 

resources/backend/js/gutenberg.js

@@ -1003,28 +1003,92 @@ function convertKitGutenbergRegisterPluginSidebar(sidebar) {
 					},
 				};
 
-				const fieldOptions = [];
-
 				// Define additional Field Properties and the Field Element,
 				// depending on the Field Type (select, textarea, text etc).
 				switch (field.type) {
 					case 'select':
-						// Build options for <select> input.
+						// Check if any values are optgroups.
+						const hasOptgroups = Object.keys(field.values).some(
+							(subKey) =>
+								typeof field.values[subKey] === 'object' &&
+								field.values[subKey].label &&
+								field.values[subKey].values
+						);
+
+						if (hasOptgroups) {
+							const children = [];
+
+							for (const value of Object.keys(field.values)) {
+								if (
+									typeof field.values[value] === 'object' &&
+									field.values[value].label &&
+									field.values[value].values
+								) {
+									// Optgroup.
+									const groupChildren = [];
+									for (const groupValue of Object.keys(
+										field.values[value].values
+									)) {
+										groupChildren.push(
+											el(
+												'option',
+												{
+													value: groupValue,
+													key: groupValue,
+												},
+												field.values[value].values[
+													groupValue
+												]
+											)
+										);
+									}
+									children.push(
+										el(
+											'optgroup',
+											{
+												label: field.values[value]
+													.label,
+												key: value,
+											},
+											...groupChildren
+										)
+									);
+								} else {
+									// Option within optgroup.
+									children.push(
+										el(
+											'option',
+											{ value, key: value },
+											field.values[value]
+										)
+									);
+								}
+							}
+
+							return el(
+								SelectControl,
+								fieldProperties,
+								...children
+							);
+						}
+
+						// Options only, no optgroups.
+						const fieldOptions = [];
 						for (const value of Object.keys(field.values)) {
 							fieldOptions.push({
 								label: field.values[value],
 								value,
 							});
 						}
 
-						// Sort field's options alphabetically by label.
+						// Sort options alphabetically by label.
 						fieldOptions.sort(function (x, y) {
 							const a = x.label.toUpperCase(),
 								b = y.label.toUpperCase();
 							return a.localeCompare(b);
 						});
 
-						// Assign options to field.
+						// Assign options to field properties.
 						fieldProperties.options = fieldOptions;
 
 						// Return field element.