site option settings (#54)

* feat: update sidebar with siteOptions settings

* update siteOptions settings UI

* reviewed and updated siteoptions setting and fixed spacing

* updated siteoptions setting trigger button and updated register-meta

assets/css/editor.css

@@ -131,4 +131,7 @@ body.editor-styles-wrapper {
 .dataforms-layouts-panel__field-dropdown
   .dataforms-layouts-panel__dropdown-header {
   margin-bottom: 16px;
+}
+.dataforms-layouts-regular__field{
+  min-height: 32px!important
 }

inc/admin/register-meta.php

@@ -39,6 +39,9 @@ class RegisterCustomMeta
                 'landing_page'          => '/wp-admin/',
                 'php_extension_bundles' => 'kitchen-sink',
                 'networking'            => true,
+                'login'                 => false,
+                'extraLibraries'        => false,
+                'siteOptions'           => [],
             ],
             'show_in_rest' => [
                 'schema' => [
@@ -49,6 +52,9 @@ class RegisterCustomMeta
                         'landing_page'          => ['type' => 'string'],
                         'php_extension_bundles' => ['type' => 'string'],
                         'networking'            => ['type' => 'boolean'],
+                        'login'                 => ['type' => 'boolean'],
+                        'extraLibraries'        => ['type' => 'boolean'],
+                        'siteOptions'           => ['type' => 'object'],
                     ],
                 ],
             ],

src/editor/sidebar.js

@@ -16,6 +16,8 @@ import {
     ToolbarButton,
     ToggleControl,
     __experimentalVStack as VStack,
+    __experimentalHStack as HStack,
+    __experimentalText as Text,
 } from '@wordpress/components';
 
 /**
@@ -23,6 +25,7 @@ import {
  */
 import OpenJson from './open-json';
 import { PHP_VERSIONS, WP_VERSIONS, PLAYGROUND_BASE, PLAYGROUND_BUILDER_BASE, PLAYGROUND_BLUEPRINT_SCHEMA_URL } from './constant';
+import SiteOptionsSettings from './site-options-settings';
 
 /**
  * Main component for displaying blueprint sidebar setting.
@@ -46,6 +49,7 @@ function BlueprintSidebarSettings() {
         phpExtensionBundles: [blueprint_config.php_extension_bundles],
         features: blueprint_config.networking ? { networking: true } : {},
         login: blueprint_config.login,
+        siteOptions: blueprint_config.siteOptions,
         extraLibraries: blueprint_config.extra_libraries,
         steps: []
     };
@@ -64,6 +68,8 @@ function BlueprintSidebarSettings() {
         const cleanedSchema = {
             ...schema,
             login: blueprint_config.login ? blueprint_config.login : undefined,
+            siteOptions: blueprint_config.siteOptions && Object.keys(blueprint_config.siteOptions).length > 0 
+            ? blueprint_config.siteOptions : undefined, // Include only if siteOptions is non-empty
             extraLibraries: blueprint_config.extra_libraries && ['wp-cli'] || undefined,
         };
         return JSON.stringify(cleanedSchema, null, 2); // Format the schema as a pretty JSON string
@@ -118,6 +124,7 @@ function BlueprintSidebarSettings() {
             php_extension_bundles: data.phpExtensionBundles,
             networking: data.features.networking || false,
             login: data.login || false,
+            siteOptions: data.siteOptions || undefined,
             extra_libraries: data.extraLibraries || undefined, 
         });
         createSuccessNotice(__('Blueprint configuration updated successfully!','wp-playground-blueprint-editor'), { type: 'snackbar' });
@@ -255,6 +262,18 @@ function BlueprintSidebarSettings() {
                     }}
                     onChange={updateBlueprintConfig}
                 />
+                <HStack  style={{ justifyContent: 'space-between',
+                    marginTop:'6px'
+                }}>
+                    <Text>Site Options</Text>
+                {/* Site Options Button */}
+                <SiteOptionsSettings
+                    attributes={{ siteOptions: blueprint_config.siteOptions }}
+                    setAttributes={(updatedAttributes) =>
+                        updateBlueprintConfig({ siteOptions: updatedAttributes.siteOptions })
+                    }
+                />
+                </HStack>
             </PluginDocumentSettingPanel>
         </>
     );

src/editor/site-options-settings.js

@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { plus, trash, cog } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import {
+    Modal,
+    Button,
+    __experimentalInputControl as InputControl,
+    __experimentalHStack as HStack,
+    __experimentalVStack as VStack,
+} from '@wordpress/components';
+
+
+function SiteOptionsSettings({ attributes = {}, setAttributes, }) {
+    const { siteOptions } = attributes;
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [optionList, updateOptionList] = useState(Object.entries(siteOptions|| {}));
+    const [optionName, setOptionName] = useState('');
+    const [optionValue, setOptionValue] = useState('');
+
+
+    // Sync local state with attributes when siteOptions updates
+    useEffect(() => {
+        updateOptionList(Object.entries(siteOptions || {}));
+    }, [siteOptions]);
+    const addOption = () => {
+        if (optionName && optionValue) {       
+            updateOptionList([...optionList, [optionName, optionValue]]);
+            setOptionName('');
+            setOptionValue('');
+        }
+    };
+
+    const updateOption = (index, field, fieldValue) => {
+        const updatedList = optionList.map(([key, value], i) => {
+            if (i === index) {
+                if ('key' === field) {
+                    return [fieldValue, value]
+                }
+
+                if ('value' === field) {
+                    return [key, fieldValue]
+                }
+            } else {
+                return [key, value];
+            }
+        });
+        updateOptionList(updatedList);
+    };
+
+    const removeOption = () => {
+        updateOptionList(optionList.filter((option, index) => index !== index));
+    };
+
+    const saveOptions = () => {
+        setAttributes({ siteOptions: Object.fromEntries(optionList) });
+        setModalOpen(false);
+    };
+
+    return (
+        <div>
+            {/* Trigger Button */}
+            <Button icon={cog} iconSize={30} onClick={()=> setModalOpen(true)}/>
+            {/* Modal */}
+            {isModalOpen && (
+                <Modal
+                    title={__('Site Options', 'wp-playground-blueprint-editor')}
+                    onRequestClose={() =>{saveOptions()}}
+                >
+                    <VStack spacing={4}>
+                        {/* Add New Option */}
+                        <HStack justify='left' alignment='bottom'>
+                            <InputControl
+                                label={__('Name', 'wp-playground-blueprint-editor')}
+                                value={optionName}
+                                onChange={(value) => setOptionName(value)}
+                            />
+                            <InputControl
+                                label={__('Value', 'wp-playground-blueprint-editor')}
+                                value={optionValue}
+                                onChange={(value) => setOptionValue(value)}
+                            />
+                            <Button
+                                icon={plus}
+                                label={__('Add Config', 'wp-playground-blueprint-editor')}
+                                onClick={addOption}
+                            />
+                        </HStack>
+
+                        {/* Existing Options */}
+                        {optionList.map(([key, value], index) => (
+                            <HStack key={index} justify='left' alignment='bottom'>
+                                <InputControl
+                                    label={__('Name', 'wp-playground-blueprint-editor')}
+                                    value={key}
+                                    onChange={(value) => updateOption(index, 'key', value)}
+                                />
+                                <InputControl
+                                    label={__('Value', 'wp-playground-blueprint-editor')}
+                                    value={value}
+                                    onChange={(value) => updateOption(index, 'value', value)}
+                                />
+                                <Button
+                                    isDestructive
+                                    icon={trash}
+                                    label={__('Delete Config', 'wp-playground-blueprint-editor')}
+                                    onClick={() => removeOption(index)}
+                                />
+                            </HStack>
+                        ))}
+                    </VStack>
+                </Modal>
+            )}
+        </div>
+    );
+}
+
+export default SiteOptionsSettings;