AlkantarClanX12
Your IP : 18.227.114.218
/**
* WordPress dependencies
*/
import {
__,
} from '@wordpress/i18n';
import {
BaseControl,
Button,
PanelBody,
PanelRow,
Placeholder,
Spinner,
ToggleControl,
SelectControl,
TextControl,
} from '@wordpress/components';
import {
render,
Component,
Fragment,
} from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import {
applyFilters,
} from '@wordpress/hooks';
/**
* Internal dependencies
*/
import './dashboard.scss';
class App extends Component {
constructor() {
super( ...arguments );
this.state = {
isAPILoaded: false,
isAPISaving: false,
isRegeneratingCSS: false,
settings: generateBlocksSettings.settings,
};
this.getSetting = this.getSetting.bind( this );
this.updateSettings = this.updateSettings.bind( this );
}
componentDidMount() {
this.setState( {
isAPILoaded: true,
} );
}
getSetting( name, defaultVal ) {
let result = defaultVal;
if ( 'undefined' !== typeof this.state.settings[ name ] ) {
result = this.state.settings[ name ];
}
return result;
}
updateSettings( e ) {
this.setState( { isAPISaving: true } );
const message = e.target.nextElementSibling;
apiFetch( {
path: '/generateblocks/v1/settings',
method: 'POST',
data: {
settings: this.state.settings,
},
} ).then( ( result ) => {
this.setState( { isAPISaving: false } );
message.classList.add( 'gblocks-action-message--show' );
message.textContent = result.response;
if ( ! result.success || ! result.response ) {
message.classList.add( 'gblocks-action-message--error' );
} else {
setTimeout( function() {
message.classList.remove( 'gblocks-action-message--show' );
}, 3000 );
}
} );
}
render() {
if ( ! this.state.isAPILoaded ) {
return (
<Placeholder className="gblocks-settings-placeholder">
<Spinner />
</Placeholder>
);
}
return (
<Fragment>
<div className="generateblocks-settings-main">
{ applyFilters( 'generateblocks.dashboard.beforeSettings', '', this ) }
<PanelBody
title={ __( 'Settings', 'generateblocks' ) }
>
<div className="gblocks-dashboard-panel-row-wrapper">
<PanelRow className="gblocks-container-width">
<div className="gblocks-units">px</div>
<TextControl
type="number"
label={ __( 'Global max-width', 'generateblocks' ) }
help={ !! generateBlocksSettings.gpContainerWidth
? __( 'The global max-width is set by GeneratePress in the Customizer.', 'generateblocks' )
: __( 'The global max-width value you can use in your blocks.', 'generateblocks' )
}
disabled={ !! generateBlocksSettings.gpContainerWidth }
value={ generateBlocksSettings.gpContainerWidth || this.getSetting( 'container_width' ) }
onChange={ ( value ) => {
this.setState( {
settings: {
...this.state.settings,
container_width: value,
},
} );
} }
/>
{ !! generateBlocksSettings.gpContainerWidthLink &&
<a href={ generateBlocksSettings.gpContainerWidthLink } target="_blank" rel="noopener noreferrer" style={ { fontSize: '12px' } }>
{ __( 'Go to option →', 'generateblocks' ) }
</a>
}
</PanelRow>
<PanelRow className="gblocks-css-print-method">
<SelectControl
label={ __( 'CSS Print Method', 'generateblocks' ) }
help={ __( 'Generating your CSS in external files is better for overall performance.', 'generateblocks' ) }
value={ this.getSetting( 'css_print_method' ) }
options={ [
{ label: __( 'External File', 'generateblocks' ), value: 'file' },
{ label: __( 'Inline Embedding', 'generateblocks' ), value: 'inline' },
] }
onChange={ ( value ) => {
this.setState( {
settings: {
...this.state.settings,
css_print_method: value,
},
} );
} }
/>
</PanelRow>
{ 'file' === this.getSetting( 'css_print_method' ) &&
<PanelRow>
<BaseControl
id="gblocks-regenerate-css"
className="gblocks-regenerate-css"
help={ __( 'Force your external CSS files to regenerate next time their page is loaded.', 'generateblocks' ) }
>
<div className="gblocks-action-button">
<Button
isSecondary
onClick={ ( e ) => {
this.setState( { isRegeneratingCSS: true } );
const message = e.target.nextElementSibling;
apiFetch( {
path: '/generateblocks/v1/regenerate_css_files',
method: 'POST',
} ).then( ( result ) => {
this.setState( { isRegeneratingCSS: false } );
message.classList.add( 'gblocks-action-message--show' );
message.textContent = result.response;
if ( ! result.success || ! result.response ) {
message.classList.add( 'gblocks-action-message--error' );
} else {
setTimeout( function() {
message.classList.remove( 'gblocks-action-message--show' );
}, 3000 );
}
} );
} }
>
{ this.state.isRegeneratingCSS && <Spinner /> }
{ ! this.state.isRegeneratingCSS && __( 'Regenerate CSS Files', 'generateblocks' ) }
</Button>
<span className="gblocks-action-message"></span>
</div>
</BaseControl>
</PanelRow>
}
<PanelRow>
<ToggleControl
label={ __( 'Sync Responsive Previews', 'generateblocks' ) }
help={ __( 'Sync our responsive preview controls with the editor responsive previews.', 'generateblocks' ) }
checked={ this.getSetting( 'sync_responsive_previews' ) }
onChange={ ( value ) => {
this.setState( {
settings: {
...this.state.settings,
sync_responsive_previews: value,
},
} );
} }
/>
</PanelRow>
<PanelRow>
<ToggleControl
label={ __( 'Disable Google Fonts', 'generateblocks' ) }
help={ __( 'Prevent Google Fonts from being called on your website and remove them from the font family lists.', 'generateblocks' ) }
checked={ this.getSetting( 'disable_google_fonts' ) }
onChange={ ( value ) => {
this.setState( {
settings: {
...this.state.settings,
disable_google_fonts: value,
},
} );
} }
/>
</PanelRow>
{ applyFilters( 'generateblocks.dashboard.settings', '', this ) }
<div className="gblocks-action-button">
<Button
isPrimary
disabled={ this.state.isAPISaving }
onClick={ ( e ) => this.updateSettings( e ) }
>
{ this.state.isAPISaving && <Spinner /> }
{ ! this.state.isAPISaving && __( 'Save', 'generateblocks' ) }
</Button>
<span className="gblocks-action-message"></span>
</div>
</div>
</PanelBody>
{ applyFilters( 'generateblocks.dashboard.afterSettings', '', this ) }
</div>
</Fragment>
);
}
}
window.addEventListener( 'DOMContentLoaded', () => {
render(
<App />,
document.getElementById( 'gblocks-block-default-settings' )
);
} );