Gutenberg blocks – processing server data within a block

Question

I have a block that renders titles of all existing posts in the <Modal/>. I retrieve it from the server using <ServerSideRender/> (that returns plain html). I want to be able to choose one of the titles (ideally save it in the postTitle attribute) and display it in the block.

attributes: {
    postTitle: {
        type: 'string'
    }
},

edit(props) {
    const { attributes } = props;
    const { postTitle } = props.attributes;

    const MyModal = withState( {
        isOpen: false,
    } )
    ( ( { isOpen, setState } ) => (
        <div>
            <Button isDefault onClick={ () => setState( { isOpen: true } ) }>Choose</Button>
            { isOpen ?
                <Modal onRequestClose={ () => setState( { isOpen: false } ) }>
                        <ServerSideRender
                            block="my-blocks/wordpress-title"
                            attributes={attributes}
                        />
                </Modal>
                : null }
        </div>
    ) );

return ([
        <InspectorControls>
            <div>
                <strong>Choose WordPress title:</strong>
                <MyModal/>
            </div>
        </InspectorControls>,
    ]);
},

Is there any sensible way to retrieve data from a server, so it was possible to operate on it within a block?

0
Michal Karbownik 4 years 2018-09-05T17:14:13-05:00 0 Answers 81 views 0

Leave an answer

Browse
Browse