How to reload data stored for a sever side gutenberg block in the editor

Question

I am trying to create some “cards” to show data from another CPT so I need to store the post ID as part of the block.

The code below has a select in the sidebar which allows you to select the post ID and renders the HTML via a serverSideRender block

and looking at the HTML created and saved and return in the editor reload if has the data (post ID) in the comment block as shown here

<!-- wp:mvc/block-mvc-offer-details {"data_offer":"2426"} /-->

The front-end all works as well and renders the code correctly

But when you reload/re-edit the post the code wipes out the setting and errors the select is not set and no post id is not passed to the server-side code

And the comment gets reset to this without the data ( I can see the correct string in the page source code it gets stripped by JS )

<!-- wp:mvc/block-mvc-offer-details /-->

What have I missed???

/**
 * BLOCK: mvc-landing-pages
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

 //  Import CSS.
 import './editor.scss';
 import './style.scss';

  const {__} = wp.i18n; // Import __() from wp.i18n
  const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
  const {InspectorControls} = wp.blockEditor;
  const {Spinner, PanelBody, SelectControl,RangeControl,PanelRow,FormToggle} = wp.components;
  const {withSelect} = wp.data;
  const {Fragment} = wp.element;
  const {serverSideRender: ServerSideRender} = wp;


  /**
   * Register: a Gutenberg Block.
   *
   * Registers a new block provided a unique name and an object defining its
   * behavior. Once registered, the block is made editor as an option to any
  * editor interface where blocks are implemented.
   *
   * Permalink trouble https://wordpress.org/gutenberg/handbook/block-api/
   * @param  {string}   name     Block name.
   * @param  {Object}   settings Block settings.
   * @return {?WPBlock}          The block, if it has been successfully
   *                             registered; otherwise `undefined`.
   */
  registerBlockType('mvc/block-mvc-offer-details', {
// Block name. Block names must be string that contains a namespace             prefix. Example: my-plugin/my-custom-block.
title: __('MVC Offer details - MVC Block'), // Block title.
icon: 'tickets-alt', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'mvc-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
    __('mvc — CGB Block'),
    __('Attractions'),
],
attributes: {
    data_offer: {
        type: 'number',
    },
},

getEditWrapperProps( props ) {
     console.log(props);
    const { data_offer } = props;
    console.log(data_offer);
    return {
        'data_offer': data_offer,
    };
},
/**
 * The edit function describes the structure of your block in the context of the editor.
 * This represents what the editor will render when the block is used.
 *
 * The "edit" property must be a valid function.
 *
 * Permalink trouble https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
 *
 *
 * @returns {Mixed} JSX Component.
 */
edit: withSelect(select => {
    return {
        offers: select('core').getEntityRecords('postType', 'offer-landing', {per_page: -1})
        //, fields: ['id', 'name', 'location']
    };
})((props) => {
    let {
        attributes: {data_offer},
        className, setAttributes, offers
    } = props;

    if ( !  offers) {
        return (
            <p className={className}>
                <Spinner/>
                {__('Loading Resorts', 'mvc')}
            </p>
        );
    }

    let options = offers.map(obj => {
        var options = {};
        options = {label: obj.title.rendered, value: obj.id};
        return options;
    });
    options.unshift({label: 'Select Offer', value: null});

    return (<Fragment>
                <InspectorControls>
                    <PanelBody title={__('Offer Settings')} >
                        <PanelRow>
                            <label
                                htmlFor="mvc-offers"
                            >
                                { __( 'Resort', 'mvc' ) }
                            </label>
                            <SelectControl

                                id="mvc-offers"
                                label={__('Offer name', 'mvc')}
                                value={data_offer}
                                onChange={data_offer => setAttributes({data_offer})}
                                options={options}
                            />
                        </PanelRow>
                    </PanelBody>
                </InspectorControls>

                <ServerSideRender block="mvc/block-mvc-offer-details"
                                  attributes={{
                                      data_offer: data_offer,
                                      class_name: className,
                                  }}
                />
            </Fragment>);
}),


/**
 * The save function defines the way in which the different attributes should be combined
 * into the final markup, which is then serialized by Gutenberg into post_content.
 *
 * The "save" property must be specified and must be a valid function.
 *
 * Permalink trouble https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
 *
 * @param {Object} props Props.
 * @returns {Mixed} JSX Frontend HTML.
 */
save: (props) => {

    return null

},});
0
Pbearne 2 years 2020-01-04T08:38:50-05:00 0 Answers 99 views 0

Leave an answer

Browse
Browse