# blockspare/2.7.0/admin/pages/Settings.js

BlockSpare – Gutenberg Blocks, AI Content Generator & Site Builder for News, Magazine & Blogs, version 2.7.0. 120 lines.

- Page: https://pluginprobe.com/plugins/blockspare/2.7.0/code/admin/pages/Settings.js
- Raw: https://pluginprobe.com/plugins/blockspare/2.7.0/raw/admin/pages/Settings.js
- Modified: 2023-09-19T10:56:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/blockspare/2.7.0/code/admin/pages/Settings.js#L10-L20`.

```javascript
import React, { useState, useEffect } from 'react'
import SettingWithInput from '../components/SettingWithInput'
const { apiFetch } = wp;
const Settings = () => {
    useEffect(() => {
        getScreensizes()
    }, [])
    const [success, setSuccess] = useState(false);
    const [blockSettings, setBlockSettings] = useState({
        aligncenter_size: '',
        alignwide_size: '',
        mobile_breakpoint: '768',
        tablet_breakpoint: '1024'
    });

    function handleInputChange(event) {
        const { name, value } = event.target;
        setBlockSettings(prevState => ({
            ...prevState,
            [name]: value
        }));

    }

    const getScreensizes = async (value) => {
        let aligncenter_size = await apiFetch({
            path: `blockspare-dashboard/v1/blocksettings`,
            method: 'GET',

        });
        setBlockSettings(aligncenter_size)

    }

    const saveSettings = async (blockSettings) => {

        const success = await apiFetch({
            path: `blockspare-dashboard/v1/updateblocksettings`,
            method: 'POST',
            data: {
                aligncenter_size: blockSettings.aligncenter_size,
                alignwide_size: blockSettings.alignwide_size,
                tablet_breakpoint: blockSettings.tablet_breakpoint,
                mobile_breakpoint: blockSettings.mobile_breakpoint
            }

        });

        setSuccess(true)
        setTimeout(function () {
            setSuccess(false)
        }, 3000)


    }

    function handleInputBlur() {

        saveSettings(blockSettings)


    }






    return (
        <div className="content-wrapper settings">
            <div className="settings-tab-container">
                <div className="setting-header">
                    <h1>General Settings</h1>

                    {success &&
                        <p>Settings Updated</p>
                    }

                </div>
                <div className="setting-body">
                    <SettingWithInput
                        title="Nested Block Width"
                        description="The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly."
                        name="aligncenter_size"
                        value={blockSettings.aligncenter_size}
                        handleChange={handleInputChange}
                        handleBlur={handleInputBlur}
                    />
                    <SettingWithInput
                        title="Nested Wide Block Width"
                        description="The width used when a Columns block has its Content Width set to center. This is automatically detected from your theme. You can adjust it if your blocks are not aligned correctly."
                        name="alignwide_size"
                        value={blockSettings.alignwide_size}
                        handleChange={handleInputChange}
                        handleBlur={handleInputBlur}
                    />
                    <SettingWithInput
                        title="Tablet Breakpoint"
                        description="Donec sollicitudin molestie malesuada. Donec sollicitudin molestie malesuada."
                        name="tablet_breakpoint"
                        value={blockSettings.tablet_breakpoint}
                        handleChange={handleInputChange}
                        handleBlur={handleInputBlur}
                    />
                    <SettingWithInput
                        title="Mobile Breakpoint"
                        description="Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus."
                        name="mobile_breakpoint"
                        value={blockSettings.mobile_breakpoint}
                        handleChange={handleInputChange}
                        handleBlur={handleInputBlur}
                    />
                </div>
            </div>
        </div>
    )
}

export default Settings

```