Convert Dynamic Block To Static

Hi @jordesign

I have created dynamic gutenberg block and now i want to convert that dynamic block to static block how can i achieve this?

I have created a Dynamic block and have used render_callback property of register_block_type, the probelm what i am facing is, the characters that are present in this block are not getting counted in wordpress document overview.

So i have removed the dependancy of render_callback property and now i am rendering the output in save: property of JS.

Now character count is getting reflected in wordpress document overview but the blocks which were created previously are showing below error

because of this issue i want to convert the previously created blocks to static block. How can i achieve this?

Below is the code for your reference

( function( blocks, element, editor, components, i18n ) {
    
  const { __ }          = i18n;
  
  var el                = element.createElement;
  var RichText          = editor.RichText;
  var MediaUpload       = editor.MediaUpload;       
  var IconButton        = components.IconButton;
  var AlignmentToolbar  = editor.AlignmentToolbar;
  var BlockControls     = editor.BlockControls;    
  var InspectorControls = editor.InspectorControls;

  var PanelBody         = components.PanelBody;
  var SelectControl     = components.SelectControl;
  var TextControl       = components.TextControl;
  
          
  blocks.registerBlockType( 'saswp/faq-block', {
      title: __('FAQ (SASWP)', 'schema-and-structured-data-for-wp'),
      icon: 'text',
      category: 'saswp-blocks',
      keywords: ['schema', 'structured data', 'FAQ', 'faq'],
      
      // Allow only one How To block per post.
      supports: {
              multiple: false
      },
                      
      attributes: {            
          alignment: {
              type: 'string',
              default: 'none'
          },
          headingTag: {
            type: 'string' ,
            default:'h5',             
          },
          listStyle:{
                type: 'string',
              default:'None',
            },                         
          items: {                     
            default: [{index: 0, title: "", description: "", imageUrl: "", imageId: null}],
            selector: '.saswp-faq-block-data',
            query: {
              title: {
                type: 'string',                  
                selector: '.title'
              },
              description: {
                type: 'string',                  
                selector: '.description'
              },
              questionID: {
                type: 'string',                                    
              },
              imageId: {
                type: 'integer'                
              },
              imageUrl: {
                type: 'string'                 
              },
              image_size: {
                type: 'string',
                default: 'full'                
              },
              image_sizes: {
                type: 'object'                  
              },
              image_align:{
                type:'string',
                default:'right'
              },
              image_alignment:{
                type:'object'
              },
              image_height: {
                type: 'number'                
              },
              image_width: {
                type: 'number'                
              },
              image_selected: {
                type: 'boolean',
                default:false                
              },
              index: {            
                type: 'number',                  
                attribute: 'data-index'            
              },
              isSelected: {            
                type: 'boolean',
                default:false      
              }
            }
          }       
        },               
      edit: function(props) {
          
          var attributes = props.attributes;
          var alignment  = props.attributes.alignment;
                          
          //List of function for the current blocks starts here
          
          function saswpGetImageSrc( item ) {
              
              var contents = item.description;
              
              if ( ! contents ) {
                  
                  return false;
                }
                            
                const image = contents.match(/<img/);
                            
                if ( image ) {
                  return true;
                }else {
                      
                      return false;
              }
                  
          }
          
                      
          function moveElementsByDirection(direction, item){
              
                              var newIndex            = null;
                              var oldIndex            = parseInt(item.index);
                              const oldAttributes     =  attributes; 
                              const oldItems          =  attributes.items;                                  
                              
                              if(direction == 'up'){
                                  newIndex = parseInt(item.index)-1;
                              }
                              
                              if(direction == 'down'){
                                  newIndex = parseInt(item.index)+1;
                              }
                             
                              if(newIndex >= oldItems.length){
                                  newIndex = 0;
                              }
                                                                      
                              const newTestimonials    =  move(oldItems, oldIndex, newIndex);                                                                    
                              
                              newTestimonials.forEach(function(value, index){                                     
                                      newTestimonials[index]['title']       = value['title'];
                                      newTestimonials[index]['description'] = value['description'];
                                      newTestimonials[index]['index']       = index; 
                                      newTestimonials[index]['isSelected']  = false; 
                                  
                               });

                               oldAttributes['items'] = newTestimonials;
                               props.setAttributes({
                                 attributes: oldAttributes
                               });
              
          }
          
          function move(arr, old_index, new_index) {
                  while (old_index < 0) {
                      old_index += arr.length;
                  }
                  while (new_index < 0) {
                      new_index += arr.length;
                  }
                  if (new_index >= arr.length) {
                      var k = new_index - arr.length;
                      while ((k--) + 1) {
                          arr.push(undefined);
                      }
                  }
                   arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);  
                 return arr;
              }
          
          function _cloneArray(arr) { 
              if (Array.isArray(arr)) { 
                  for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { 
                    arr2[i] = arr[i]; 
                  } 
                  return arr2; 
              } else { 
                  return Array.from(arr); 
              } 
          }
          
          function saswpGetButtons(item){
              
              if(!item.isSelected){
                  return null;
              }
                                      
              return el('div', {className:'saswp-faq-button-container'},                        
                      !saswpGetImageSrc(item) ? 
                      el(MediaUpload, {
                          onSelect: function(media){  
                                  
                                  const image = '<img style="height:'+media.height+'px; width: '+media.width+'px;" src="'+media.url+'" alt="'+media.alt+'" class="alignright" key="'+media.id+'"/>'; 
                                  
                                  const oldAttributes      =  attributes; 
                                  const oldItems           =  attributes.items;                                                                                                        
                                  oldItems.forEach(function(value, index){ 
                                     
                                     if(index == item.index){
                                                                                     
                                          oldItems[index]['description'] = image+value['description'];                                            
                                          oldItems[index]['imageUrl']    = media.url;
                                          oldItems[index]['imageId']     = media.id;
                                          oldItems[index]['image_sizes'] = media.sizes;
                                          oldItems[index]['image_alignment']=media.alignment
                                          oldItems[index]['image_height']= media.height;
                                          oldItems[index]['image_width'] = media.width;                              
                                     }
                                                                             
                                  });
                                  
                                  oldAttributes['items'] = oldItems;
                                  props.setAttributes({
                                    attributes: oldAttributes
                                  }); 
                                                          
                          },
                         allowedTypes:[ "image" ],
                         value: item.id,
                         render:function(obj){
                             return el( IconButton, {
                                  icon: "insert",
                                  className: 'saswp-faq-step-button saswp-to-step-add-media',            
                                  onClick: obj.open
                                },
                              __('Add Image', 'schema-and-structured-data-for-wp')
                          )
                         }
                      }): null,
                      el( IconButton, {
                          icon: "trash",
                          className: 'saswp-faq-step-button',            
                          onClick: function() { 
                              
                               const oldAttributes      =  attributes; 
                               const oldItems           =  attributes.items;  
                               const newTestimonials    =  oldItems
                               
                                  .filter(function(itemFilter){
                                     return itemFilter.index != item.index
                                  }).map(function(t){                                          
                                       if (t.index > oldItems.index) {
                                           t.index -= 1;
                                       }
                                       return t;
                                  });
                                  
                                  newTestimonials.forEach(function(value, index){                                        
                                     newTestimonials[index]['title']       = value['title'];
                                     newTestimonials[index]['description'] = value['description'];
                                     newTestimonials[index]['index']       = index;
                                     newTestimonials[index]['isSelected']  = false; 
                                  });
                                  
                                  oldAttributes['items'] = newTestimonials;
                                  props.setAttributes({
                                    attributes: oldAttributes
                                  });                                
                              
                          }
                        }                          
                      ),

                      

                      el( IconButton, {
                          icon: "insert",
                          className: 'saswp-faq-step-button',            
                          onClick: function() {              
                              
                              const oldAttributes      =  attributes;
                              const oldItems           =  attributes.items;                                
                                                              
                              const insertitem = {title:"",description:"",index:item.index, isSelected:false};
                                    oldItems.splice(parseInt(item.index)+1, 0, insertitem);
                                  
                                  const newTestimonials    = oldItems;
                                  
                                  newTestimonials.forEach(function(value, index){                                        
                                     newTestimonials[index]['title']       = value['title'];
                                     newTestimonials[index]['description'] = value['description'];
                                     newTestimonials[index]['index']       = index;
                                     newTestimonials[index]['isSelected']  = false;
                                  });
                                  
                                  oldAttributes['items'] = newTestimonials;
                                  props.setAttributes({
                                    attributes: oldAttributes
                                  });                                                                 
                              }
                          }                      
                      )
              
              );
              
          }
          
              
          
          function saswpReplaceImage(desc, image){
            
            let modified_desc = desc.replace(/<img (.*?)\/>/g, image);
                modified_desc = desc.replace(/<img (.*?)>/g, image);
            
            return modified_desc;
          }
          function saswpImageUpdate(value, item, height, width, image_type,image_align){
                      let image_url;
                      let image;
                      let imageClass = 'alignright';
                      if(typeof value == 'undefined'){
                        value = 'full';
                      }
                      if(typeof image_align == 'undefined'){
                        image_align = 'right';
                      }else if(image_align == 'left'){
                        imageClass = 'alignleft';
                      }
                      image_url = item.imageUrl;
                      
                      switch (value) {
                          case 'full':
                            if(image_type != null){
                              if(typeof item.image_sizes.full != 'undefined'){
                                height = item.image_sizes.full.height;                                
                                width  = item.image_sizes.full.width;
                                image_url    = item.image_sizes.full.url;
                              }else{
                                height = item.image_height
                                width = item.image_width
                              }
                            }
                            
                            image = '<img class="'+imageClass+'" style="height:'+height+'px; width: '+width+'px;" src="'+image_url+'"  key="'+image_url+'" />';
                          break;
                          case 'large':
                            if(image_type != null){
                              if(typeof item.image_sizes.large != 'undefined'){
                                height = item.image_sizes.large.height;                                
                                width = item.image_sizes.large.width;
                                image_url    = item.image_sizes.large.url;
                              }else{
                                height = item.image_height
                                width = item.image_width
                              }
                            }                              
                            
                            image = '<img class="'+imageClass+'" style="height:'+height+'px; width: '+width+'px;" src="'+image_url+'"  key="'+image_url+'" />';
                          break;
                          case 'medium':
                            if(image_type != null){
                              if(typeof item.image_sizes.medium != 'undefined'){
                                height = item.image_sizes.medium.height;                                
                                width = item.image_sizes.medium.width;
                                image_url    = item.image_sizes.medium.url;
                              }else{
                                height = item.image_height
                                width = item.image_width
                              }
                            }                              
                            
                            image = '<img class="'+imageClass+'" style="height:'+height+'px; width: '+width+'px;" src="'+image_url+'"  key="'+image_url+'" />';
                          break;
                          case 'thumbnail':
                            if(image_type != null){
                              if(typeof item.image_sizes.thumbnail != 'undefined'){
                                height = item.image_sizes.thumbnail.height;                                
                                width  = item.image_sizes.thumbnail.width;
                                image_url    = item.image_sizes.thumbnail.url;
                              }else{
                                height = item.image_height
                                width = item.image_width
                              }
                            }                              
                            
                            image = '<img class="'+imageClass+'" style="height:'+height+'px; width: '+width+'px;" src="'+image_url+'"  key="'+image_url+'" />';
                          break;
                          case 'right':
                              image = '<img class="alignright" style="height:'+height+'px; width: '+width+'px; float:right;" src="'+image_url+'"  key="'+image_url+'" />';
                              image_align = 'right';
                            break;
                          case 'left':
                                image = '<img class="alignleft" style="height:'+height+'px; width: '+width+'px; float:left;" src="'+image_url+'"  key="'+image_url+'" />';
                                image_align = 'left';
                            break;
                      
                        default:
                          break;
                      }
                      
                      var newObject = Object.assign({}, item, {
                        image_size: value,
                        image_height: height,
                        image_align: image_align,
                        image_width: width,
                        imageUrl   : image_url,
                        image_align : image_align,
                        description : saswpReplaceImage(item.description, image)                          
                      });
                      return newObject;
          }

          function saswpImageSettings(item){
            if(item.isSelected && item.imageUrl != ''){
              return el(InspectorControls,
                {
                 className:'saswp-faq-inspector',
                 key: 'inspector'  
                },
                   el(PanelBody,
                  {className:'saswp-faq-panel-body',
                   title:__('Image Settings', 'schema-and-structured-data-for-wp')  
                  },
                  el(SelectControl,{
                    value : item.image_size,
                    className:"saswp-image-size",
                    label: __('Image Size', 'schema-and-structured-data-for-wp'),
                    options:[
                      { label: 'Full Size', value: 'full' },
                      { label: 'Large', value: 'large' },
                      { label: 'Medium', value: 'medium' },
                      { label: 'Thumbnail', value: 'thumbnail' },
                    ] ,
                    onChange: function(value){
                      var newObject = saswpImageUpdate(value, item, item.image_height, item.image_width, 'image_type', item.image_align);
                      return props.setAttributes({
                        items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                          return itemFilter.index != item.index;
                        })), [newObject])
                      });
                    }
                }),
                el(SelectControl,{
                 value: item.image_align,
                 className:"saswp-image-align",
                 label: __( 'Image Align' , 'schema-and-structured-data-for-wp' ),
                 options: [
                  
                  { label: 'Right' , value: 'right'},
                  { label: 'Left' , value: 'left'},
                  // { label: 'Center' , value: 'center'},
                  
                 ],
                  onChange: function(value){
                    var newObject = saswpImageUpdate(value, item, item.image_height, item.image_width, 'image_type', item.image_align);
                  return props.setAttributes({
                    items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                      return itemFilter.index != item.index;
                    })), [newObject])
                  });
                }
                }),
                el('p',{
                  className: 'saswp-faq-dimesion-p'
                }, 'Image Dimensions'),
                el('div', {
                  className: "saswp-faq-dimension"
                },                        
                el( TextControl, {                                          
                  className:'saswp-faq-image-dimension',
                  label:'Height',
                  type: 'number',
                  min:0,
                  placeholder: __('20', 'schema-and-structured-data-for-wp'),                          
                  value: item.image_height,                                                    
                  onChange: function( value ) {
                    var newObject = saswpImageUpdate(item.image_size, item, value, item.image_width, null, item.image_align);
                    
                    return props.setAttributes({
                      items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                        return itemFilter.index != item.index;
                      })), [newObject])
                    });
                  }
                }            
              ),
              el( TextControl, {                                          
                className:'saswp-faq-image-dimension',
                label:'Width',
                type: 'number',
                min:0,
                placeholder: __('20', 'schema-and-structured-data-for-wp'),                          
                value: item.image_width,                                                    
                onChange: function( value ) {                                
                  
                  var newObject = saswpImageUpdate(item.image_size, item, item.image_height, value, null, item.image_align);
                  return props.setAttributes({
                    items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                      return itemFilter.index != item.index;
                    })), [newObject])
                    });
                  }
                }            
                ),
                )                                      
                  )            
                );
            }else{
              return null;
            }
            
          }
          function saswpGetMover(item){
              
              if(!item.isSelected){
                  return null;
              }
              
              return el('div',
                      {className:'saswp-faq-step-mover'},
                      el( IconButton, {
                          icon: "arrow-up-alt2",
                          className: 'editor-block-mover__control',            
                          onClick: function() {              
                                                                       
                            moveElementsByDirection('up', item);  
                            
                          }
                        },
                        
                      ),
                      el( IconButton, {
                          icon: "arrow-down-alt2",
                          className: 'editor-block-mover__control',            
                          onClick: function() {              
                           
                           moveElementsByDirection('down', item);
                              
                          }
                        },                         
                      )
                      );
          }
          //List of function for the current blocks ends here
            
            var itemli = attributes.items.sort(function(a , b) {
                
                  return a.index - b.index;
                  }).map(function(item){  
                      
                      if(!saswpGetImageSrc(item)){
                          item.imageUrl = '';
                          item.imageId = null;
                      }
                      
                    return el('li', 
                          { 
                              className: 'item',
                              onClick: function(){
                                                                                                            
                                  const oldAttributes      =  attributes; 
                                  const oldItems           =  attributes.items;                                                                                                        
                                  oldItems.forEach(function(value, index){ 
                                     
                                     if(index == item.index){                                            
                                          oldItems[index]['isSelected']  = true;                                                                                       
                                     }else{                                            
                                          oldItems[index]['isSelected']  = false;                                                                                       
                                     }
                                                                             
                                  });
                                  
                                  oldAttributes['items'] = oldItems;
                                  props.setAttributes({
                                    attributes: oldAttributes
                                  });                                    
                              }
                          }, 
                        el('span',{
                            className:'saswp-faq-step-number'                             
                        },
                        attributes.listStyle == 'none'? '' : attributes.listStyle =='disc' ?'•': attributes.listStyle=='number' ?
                        ( parseInt(item.index) + 1) + "." :''
                        ),    
                        el( RichText, {                
                        tagName: attributes.headingTag,
                        className:'saswp-faq-step-title',
                        placeholder: __('Enter a question', 'schema-and-structured-data-for-wp'), 
                        style: { textAlign: alignment },
                        value: item.title,
                        autoFocus: true,
                        onChange: function( value ) {                                
                          var newObject = Object.assign({}, item, {
                            title: value
                          });
                          return props.setAttributes({
                            items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                              return itemFilter.index != item.index;
                            })), [newObject])
                          });
                        }
                      }            
                    ),
                    el('div', {
                      
                      className:"saswp",
                    },
                    el( RichText, {                
                        tagName: 'p',
                        placeholder: __('Enter answer to the question', 'schema-and-structured-data-for-wp'), 
                        className:'saswp-faq-step-description',
                        style: { textAlign: alignment },
                        value: item.description,
                        autoFocus: true,
                        onChange: function( value ) {

                          var newObject = Object.assign({}, item, {
                            description: value
                          });
                          return props.setAttributes({
                            items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                              return itemFilter.index != item.index;
                            })), [newObject])
                          });

                        }
                      }            
                    ), 
                    ),                
                    el('div', {className:'saswp-faq-step-controls-container'},                        
                      item.isSelected ?
                      el(TextControl,
                        {                             
                          className:'saswp-faq-question-id',
                          value: item.questionID,
                          placeholder: __('Question ID (Optional)', 'schema-and-structured-data-for-wp'), 
                          onChange: function(value){
                           
                            var newObject = Object.assign({}, item, {
                              questionID: value
                            });
                            return props.setAttributes({
                              items: [].concat(_cloneArray(props.attributes.items.filter(function (itemFilter) {
                                return itemFilter.index != item.index;
                              })), [newObject])
                            });
                         }
                        }                          
                        )
                      : '',
                      saswpImageSettings(item),
                      saswpGetMover(item),
                      saswpGetButtons(item)        
                    )
                    )
            });
            
          var itemlist = el('ul',{}, itemli);
          
          return [
              el(InspectorControls,
              {
               className:'saswp-faq-inspector',
               key: 'inspector'   
              },
              el(PanelBody,
              {className:'saswp-faq-panel-body',
               title:'List Order Type'   
              },
              el(SelectControl,{
                    className:'saswp-faq-toggle-list',  
                    value: attributes.listStyle,
                    options:[
                          { label:'None', value: 'none' },
                          { label: 'Number', value:'number' },
                          { label:'disc', value:'disc' },
                        ],
                    onChange: function(newContent){
                        props.setAttributes( { listStyle: newContent } );
                    },
                    help: function(value){
                      if(value=='none')
                        return '<li "style:list-style-type:none"></li>';
                      if( value == 'number')
                        return '<li "style:list-style-type:decimal"></li>';
                      if(value=='disc' )
                        return '<li "style:list-style-type:disc"></li>';
                    }
                },
                ),
              el(SelectControl,{
                value : attributes.headingTag,
                className: "saswp-heading",
                label: __('Heading Tag', 'schema-and-structured-data-for-wp'),
                options:[                    
                  { label: 'H1', value: 'h1' },
                  { label: 'H2', value: 'h2' },
                  { label: 'H3', value: 'h3' },
                  { label: 'H4', value: 'h4' },
                  { label: 'H5', value: 'h5' },
                  { label: 'H6', value: 'h6' },
                  { label: 'Div', value:'div' },
                  { label:'P', value:'p' },
                  { label:'Strong', value:'strong' }

                ] ,
                onChange: function(value){
                     props.setAttributes( { headingTag: value } ); 
                }
              }),
              )
              ),
              el(
                  BlockControls,
                  { key: 'controls' },
                  el(
                      AlignmentToolbar,
                      {
                          value: alignment,
                          onChange: function(newAlignment){
                             props.setAttributes( { alignment: newAlignment === undefined ? 'none' : newAlignment } ); 
                          }
                      }
                  )
              ),
              ,el(
              'div',
              { className: props.className },                                                
              el('div', { className: 'saswp-faq-setp-list' },        
                itemlist,
              ),
              el( IconButton, {
                  icon: "insert",
                  className: 'saswp-faq-step-button',            
                  onClick: function() {              
                    return props.setAttributes({
                      items: [].concat(_cloneArray(props.attributes.items), [{
                        index: props.attributes.items.length,                  
                        title: "",
                        description:""
                      }])
                    });                            
                  }
                },
                __('Add A Question', 'schema-and-structured-data-for-wp')
              )        
            )];
          
      },
      save: function( props ) {
        var attributes = props.attributes;
        var listTypeElStart = 'ol';
        if(attributes.listStyle == 'none'){
          listTypeElStart = 'ol';
        }else{
          listTypeElStart = 'ul';
        }  

        var listWrapper = attributes.items.map(function(item){
          var itemDescription = item.description;
          var liAttributes = {style:{listStyleType:attributes.listStyle}}
          if(typeof item.questionID != 'undefined'){
            liAttributes = {id: item.questionID, style:{listStyleType:attributes.listStyle}}
          }
          var liImagetag = '';
          if(typeof item.imageUrl != 'undefined' && item.imageUrl.length > 0){
            var imageHeight = ${item.image_height}px;
            var imageWidth = ${item.image_width}px;
            var imageAlign = 'right';
            if(typeof item.image_align != 'undefined'){
              imageAlign = item.image_align;
            }
            console.log("imageAlign " + imageAlign);
            liImagetag = el('img', 
                            {src:item.imageUrl,key:item.imageUrl, style:{height:imageHeight,width:imageWidth,float:imageAlign}});
            itemDescription = item.description.replace(/<img[^>]*>/g,"");
          }
          return el('li', 
                    liAttributes,
                    el( attributes.headingTag, {className:'saswp-faq-question-title'}, item.title),
                    el( 'p', {className: 'saswp-faq-answer-text'}, 
                      el('span', {}, liImagetag),
                      el('span', {}, itemDescription),
                    )
                );
        });

          return el( 'div', {className: 'saswp-faq-block-section'},
              el(listTypeElStart, {}, listWrapper),
          );                      
        }
  } );
}(
  window.wp.blocks,
  window.wp.element,
  window.wp.blockEditor,
  window.wp.components,
  window.wp.i18n,
) );

Looking forward for your response.