83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
/**
|
|
* Frontend Form block for the WordPress block editor.
|
|
*
|
|
* This file is part of Avatar Privacy.
|
|
*
|
|
* @file This file provides the edit method for the Avatar block.
|
|
* @author Peter Putzer <github@mundschenk.at>
|
|
* @license GPL-2.0-or-later
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import {
|
|
PanelBody,
|
|
PanelRow,
|
|
RangeControl,
|
|
ToggleControl,
|
|
} from '@wordpress/components';
|
|
import ServerSideRender from '@wordpress/server-side-render';
|
|
import { InspectorControls } from '@wordpress/editor';
|
|
import { Fragment } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Renders the markup for editing the block attributes of the Avatar block.
|
|
*
|
|
* @param {Object} props The block properties.
|
|
* @param {Object} props.attributes The block attributes.
|
|
* @param {string} props.className The CSS class to use.
|
|
* @param {Object} props.setAttributes The attribute setter function.
|
|
* @return {Object} ECMAScript JSX Markup for the editor
|
|
*/
|
|
export default ( { attributes, className, setAttributes } ) => {
|
|
return (
|
|
<Fragment>
|
|
<InspectorControls>
|
|
<PanelBody title={ __( 'Form', 'avatar-privacy' ) }>
|
|
<PanelRow>
|
|
<RangeControl
|
|
label={ __( 'Avatar Size', 'avatar-privacy' ) }
|
|
value={ attributes.avatar_size }
|
|
initialPosition={ attributes.avatar_size }
|
|
onChange={ ( newSize ) =>
|
|
setAttributes( { avatar_size: newSize } )
|
|
}
|
|
min={ 48 }
|
|
max={ 240 }
|
|
/>
|
|
</PanelRow>
|
|
<PanelRow>
|
|
<ToggleControl
|
|
label={ __(
|
|
'Show Descriptions',
|
|
'avatar-privacy'
|
|
) }
|
|
checked={ !! attributes.show_descriptions }
|
|
onChange={ () =>
|
|
setAttributes( {
|
|
show_descriptions:
|
|
! attributes.show_descriptions,
|
|
} )
|
|
}
|
|
/>
|
|
</PanelRow>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<ServerSideRender
|
|
block="avatar-privacy/form"
|
|
attributes={ {
|
|
avatar_size: attributes.avatar_size,
|
|
show_descriptions: attributes.show_descriptions,
|
|
className,
|
|
preview: true,
|
|
} }
|
|
/>
|
|
</Fragment>
|
|
);
|
|
};
|