/* global wpforms_gutenberg_form_selector */ /* jshint es3: false, esversion: 6 */ /** * @param strings.border_radius * @param strings.border_size * @param strings.button_color_notice * @param strings.button_styles * @param strings.dashed * @param strings.solid */ /** * Gutenberg editor block. * * Button styles panel module. * * @since 1.8.8 */ export default ( ( function() { /** * WP core components. * * @since 1.8.8 */ const { PanelColorSettings } = wp.blockEditor || wp.editor; const { SelectControl, PanelBody, Flex, FlexBlock, __experimentalUnitControl } = wp.components; /** * Localized data aliases. * * @since 1.8.8 */ const { strings, defaults } = wpforms_gutenberg_form_selector; // noinspection UnnecessaryLocalVariableJS /** * Public functions and properties. * * @since 1.8.8 * * @type {Object} */ const app = { /** * Get block attributes. * * @since 1.8.8 * * @return {Object} Block attributes. */ getBlockAttributes() { return { buttonSize: { type: 'string', default: defaults.buttonSize, }, buttonBorderStyle: { type: 'string', default: defaults.buttonBorderStyle, }, buttonBorderSize: { type: 'string', default: defaults.buttonBorderSize, }, buttonBorderRadius: { type: 'string', default: defaults.buttonBorderRadius, }, buttonBackgroundColor: { type: 'string', default: defaults.buttonBackgroundColor, }, buttonTextColor: { type: 'string', default: defaults.buttonTextColor, }, buttonBorderColor: { type: 'string', default: defaults.buttonBorderColor, }, }; }, /** * Get Button styles JSX code. * * @since 1.8.8 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * @param {Object} sizeOptions Size selector options. * @param {Object} formSelectorCommon Form selector common object. * * @return {Object} Button styles JSX code. */ getButtonStyles( props, handlers, sizeOptions, formSelectorCommon ) { // eslint-disable-line max-lines-per-function return ( handlers.styleAttrChange( 'buttonSize', value ) } /> handlers.styleAttrChange( 'buttonBorderStyle', value ) } /> <__experimentalUnitControl label={ strings.border_size } value={ props.attributes.buttonBorderStyle === 'none' ? '' : props.attributes.buttonBorderSize } min={ 0 } disabled={ props.attributes.buttonBorderStyle === 'none' } onChange={ ( value ) => handlers.styleAttrChange( 'buttonBorderSize', value ) } isUnitSelectTabbable /> <__experimentalUnitControl onChange={ ( value ) => handlers.styleAttrChange( 'buttonBorderRadius', value ) } label={ strings.border_radius } min={ 0 } isUnitSelectTabbable value={ props.attributes.buttonBorderRadius } />
{ strings.colors }
handlers.styleAttrChange( 'buttonBackgroundColor', value ), label: strings.background, }, { value: props.attributes.buttonBorderColor, onChange: ( value ) => handlers.styleAttrChange( 'buttonBorderColor', value ), label: strings.border, }, { value: props.attributes.buttonTextColor, onChange: ( value ) => handlers.styleAttrChange( 'buttonTextColor', value ), label: strings.text, }, ] } />
{ strings.button_color_notice }
); }, }; return app; } )() );