blocks-version.js
97 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { Button, PanelBody, PanelRow, Placeholder, Spinner, ToggleControl } from '@wordpress/components'; |
| 3 | import { useEffect, useState } from '@wordpress/element'; |
| 4 | import apiFetch from '@wordpress/api-fetch'; |
| 5 | |
| 6 | import compatibleRender from '@utils/compatible-render'; |
| 7 | |
| 8 | function BlocksVersionSettings() { |
| 9 | const [ isAPILoaded, setIsAPILoaded ] = useState( false ); |
| 10 | const [ isAPISaving, setIsAPISaving ] = useState( false ); |
| 11 | const [ useV1Blocks, setUseV1Blocks ] = useState( generateBlocksSettings.useV1Blocks ); |
| 12 | |
| 13 | useEffect( () => { |
| 14 | setIsAPILoaded( true ); |
| 15 | }, [] ); |
| 16 | |
| 17 | async function updateSetting( e, name, value ) { |
| 18 | setIsAPISaving( true ); |
| 19 | const message = e.target.nextElementSibling; |
| 20 | |
| 21 | await apiFetch( { |
| 22 | path: '/generateblocks/v1/setting', |
| 23 | method: 'POST', |
| 24 | data: { |
| 25 | name, |
| 26 | value, |
| 27 | }, |
| 28 | } ).then( ( result ) => { |
| 29 | setIsAPISaving( false ); |
| 30 | message.classList.add( 'gblocks-action-message--show' ); |
| 31 | message.textContent = result.response; |
| 32 | |
| 33 | if ( ! result.success || ! result.response ) { |
| 34 | message.classList.add( 'gblocks-action-message--error' ); |
| 35 | } else { |
| 36 | setTimeout( function() { |
| 37 | message.classList.remove( 'gblocks-action-message--show' ); |
| 38 | }, 3000 ); |
| 39 | } |
| 40 | } ); |
| 41 | } |
| 42 | |
| 43 | if ( ! generateBlocksSettings.useV1Blocks ) { |
| 44 | return null; |
| 45 | } |
| 46 | |
| 47 | if ( ! isAPILoaded ) { |
| 48 | return ( |
| 49 | <Placeholder className="gblocks-settings-placeholder"> |
| 50 | <Spinner /> |
| 51 | </Placeholder> |
| 52 | ); |
| 53 | } |
| 54 | |
| 55 | return ( |
| 56 | <> |
| 57 | <div className="generateblocks-settings-main"> |
| 58 | <PanelBody |
| 59 | title={ __( 'Blocks Version', 'generateblocks' ) } |
| 60 | > |
| 61 | <div className="gblocks-dashboard-panel-row-wrapper"> |
| 62 | <PanelRow> |
| 63 | <ToggleControl |
| 64 | label={ __( 'Use version 1 blocks', 'generateblocks' ) } |
| 65 | help={ __( 'Enabling this option will make it so only version 1 blocks display in the block inserter.', 'generateblocks' ) } |
| 66 | checked={ !! useV1Blocks } |
| 67 | onChange={ ( value ) => setUseV1Blocks( value ) } |
| 68 | /> |
| 69 | </PanelRow> |
| 70 | |
| 71 | <div className="gblocks-action-button"> |
| 72 | <Button |
| 73 | isPrimary |
| 74 | disabled={ !! isAPISaving } |
| 75 | onClick={ ( e ) => updateSetting( e, 'gb_use_v1_blocks', useV1Blocks ) } |
| 76 | > |
| 77 | { !! isAPISaving && <Spinner /> } |
| 78 | { ! isAPISaving && __( 'Save', 'generateblocks' ) } |
| 79 | </Button> |
| 80 | |
| 81 | <span className="gblocks-action-message"></span> |
| 82 | </div> |
| 83 | |
| 84 | </div> |
| 85 | </PanelBody> |
| 86 | </div> |
| 87 | </> |
| 88 | ); |
| 89 | } |
| 90 | |
| 91 | window.addEventListener( 'DOMContentLoaded', () => { |
| 92 | compatibleRender( |
| 93 | document.getElementById( 'gblocks-blocks-version-settings' ), |
| 94 | <BlocksVersionSettings /> |
| 95 | ); |
| 96 | } ); |
| 97 |