Support » Developing with WordPress » Gutenberg FormToggle example?

  • Resolved Insomnia88

    (@insomnia88)


    I am trying to implement a FormToggle but I can’t get it working. The documentation isn’t really helping (the example seems incomplete and doesn’t work for me) so I can work around this problem by using a checkbox (that works like a charm) but that shouldn’t be the solution..
    I am using ESnext for my script. My Code looks like this

    const { __ } = wp.i18n;
    const { registerBlockType } = wp.blocks;
    
    const { InspectorControls, PlainText } = wp.editor;
    const { PanelBody, PanelRow, SelectControl, CheckboxControl, FormToggle, TextControl  } = wp.components;
    const { withState } = wp.compose;
    const { RawHTML } = wp.element;
    
    registerBlockType( 'superblocks/my-block', {
    	title: __('This is my box'),
    	//description: __('xxx'),
    	icon: 'admin-tools',
    	category: 'common',
    	attributes: {
            check_bigbox: {
                type: 'boolean',
                default: false
            }
    	},
    	edit: props => {
    		const { className } = props;
    		const { attributes, setAttributes } = props;
    		var output = render_output(props);
    		
    		return [
    			<InspectorControls>
    				<PanelBody title={ __( 'Optionen' ) }>
    					<FormToggle
    						onChange={ function(e){
    							//change the attribute value ("check_bigbox") and toggle the button
    						} }
    					/>
    				</PanelBody>
    			</InspectorControls>,
    			<RawHTML>{ output }</RawHTML>
    		]
    	},
    	save: props => {
    		var output = render_output(props);
    		return (
    			<RawHTML>{ output }</RawHTML>
    		);
    	}
    	
    } );
    
    function render_output(props) {
    	console.log(props);
    	return 'test';
    }

    Could someone tell me how I get the FormToggle Element working as intended?

Viewing 1 replies (of 1 total)
  • Solved it my own. Somehow I have to write the onChange differently compared to a CheckboxControl. Like this

    <FormToggle
    	checked={ attributes.check_bigbox }
    	onChange={ () => setAttributes( { check_bigbox: ! attributes.check_bigbox } ) }
    />
Viewing 1 replies (of 1 total)
  • The topic ‘Gutenberg FormToggle example?’ is closed to new replies.