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


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} =;
  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
   * @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 →
category: 'mvc-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
    __('mvc — CGB Block'),
attributes: {
    data_offer: {
        type: 'number',

getEditWrapperProps( props ) {
    const { data_offer } = props;
    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
 * @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}>
                {__('Loading Resorts', 'mvc')}

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

    return (<Fragment>
                    <PanelBody title={__('Offer Settings')} >
                                { __( 'Resort', 'mvc' ) }

                                label={__('Offer name', 'mvc')}
                                onChange={data_offer => setAttributes({data_offer})}

                <ServerSideRender block="mvc/block-mvc-offer-details"
                                      data_offer: data_offer,
                                      class_name: className,

 * 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
 * @param {Object} props Props.
 * @returns {Mixed} JSX Frontend HTML.
save: (props) => {

    return null

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

Leave an answer