Footnote not working in custom gutenberg block
-
Hi Team,
We have created custom gutenberg block, when we try to add any footnote, that footnote is not getting added to the block. Below is the reference link of the video
Viewing 3 replies - 1 through 3 (of 3 total)
-
Hi @shridham! Can you share some more details about this, or perhaps a link to your code, if it’s published somewhere?
Hi @properlypurple
Below is our custom gutenberg block code snippet( 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, ) );Hi there. I only skimmed your block code, and couldn’t find anything obvious that would cause the Footnotes block not to provided you with a text block to enter the information.
I see in your video that you also have additional plugins installed on your site. Did you try deactivating all of them except for the plugin you are testing, and see if you can eliminate possible plugin conflicts? The plugin Health Check & Troubleshooting allows you do troubleshoot your site by deactivating plugins (and themes) only for the Admin user, and leaving the front end intact for your visitors. It’s the fastest way to start eliminating conflicts. Let use know if that makes a difference.
Viewing 3 replies - 1 through 3 (of 3 total)
- The topic ‘Footnote not working in custom gutenberg block’ is closed to new replies.
