zacharyjrich

Thanks so much for all of your help finding a solution. Cheers!

I am not able to share a link on this platform for confidentiality purposes. Would it make sense to contact Hubspot through your website support?

We are not using a page builder. Here is the custom JS for the modal. Thanks!

/* global hbspt */
const modalDataAttr = 'data-modal';
const modalSelector = '.at-modal';
const modalContentSelector = '.modal-content-inner';
const modalCloseSelector = '.modal-background, .modal-close';
const activeClass = 'is-active';
const clippedClass = 'is-clipped';

document.addEventListener( 'DOMContentLoaded', () => {
    const ctas = document.querySelectorAll( '[' + modalDataAttr + ']' );
    const modal = document.querySelector( modalSelector );

    // If there are buttons for opening the modal
    if ( ctas.length && modal ) {
        const modalContent = modal.querySelector( modalContentSelector );

        // Get html DOM element to disable scrolling when the modal is open
        const html = document.querySelector( 'html' );

        const openModal = ( e ) => {
            e.preventDefault();
            const cta = e.currentTarget;
            const modalData = JSON.parse( atob( cta.getAttribute( modalDataAttr ) ) );

            switch ( modalData.type ) {
            case 'url':
                // Render modal content by loading an iframe
                modalContent.innerHTML = '
                    <figure class="image is-16by9">
                        <iframe
                            class="has-ratio"
                            src="${ modalData.url }"
                            frameborder="0"
                            allowfullscreen />
                    </figure>';
                break;
            case 'form':
                // Render HubSpot form via JS.
                // Advanced options: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options
                hbspt.forms.create( {
                    portalId: modalData.portalId,
                    formId: modalData.id,
                    target: modalContentSelector,
                } );

                break;
            }

            // Add custom modal class.
            if ( modalData.class ) {
                modal.classList.add( ...modalData.class.split( ' ' ) );
            }

            // Add display classes
            modal.classList.add( activeClass );
            html.classList.add( clippedClass, activeClass );
        };

        const closeModal = () => {
            // Remove display classes
            modal.className = modal.getAttribute( modalDataAttr + '-default-classes' );
            html.classList.remove( clippedClass, activeClass );

            // Empty the modal content
            modalContent.innerHTML = '';
        };

        // Add listeners for each of the CTAs in the page
        ctas.forEach( ( cta ) => {
            cta.addEventListener( 'click', openModal );
        } );

        // Add listeners for closing the modal when clicking on the background or the close button
        modal.querySelectorAll( modalCloseSelector ).forEach( ( el ) => {
            el.addEventListener( 'click', closeModal );
        } );
    }
} );

We don’t currently have a deployed link to where the issue is occurring since we reverted to version 8.7.7 to fix the issue, although that just happens to be the last version we had in our code base that worked as expected. The plugin had not been updated in a while but we noticed the breaking change when testing plugin updates on 6-27-22. Hope that helps, thanks!

@ryankienstra Thanks again for your help! Will continue to look for solutions.

Cheers!

Hello @ryankienstra , this indeed fixed the error occurring in WP when updating an image. Unfortunately, it’s still replacing the image-src with a number.

image-src":2081

VS

image-src":"https://mysite.local/wp-content/uploads/2019/04/my_image_1920x884.jpg

We’re hoping to use GCB alongside WP GraphQL, WP Gatsby, and WP GraphQL Gutenberg to query blocks to use with Gatsby on the frontend. So without a proper image path, we can’t query images. Any recommendations for a fix?

Thanks again for all of your help! Very much appreciated

Hi Ryan, thanks for the quick response!

The 400 error:

api-fetch.min.js?ver=4dec825c071b87c57f687eb90f7c23c3:2 POST https://mysite.local/wp-json/wp/v2/block-renderer/genesis-custom-blocks/large?context=edit&post_id=6&_locale=user

Answer to 1.

– This is the block after the migration but before trying to update the image and is working as expected

<!-- wp:genesis-custom-blocks/large {"image-src":"https://mysite.local/wp-content/uploads/2019/04/my_image_1920x884.jpg","horizontal-alignment":"horizontal-alignment-right","title-tag":["h3"],"title":"My Title.","cta":"MORE","cta-link-to":"/my-url"} /-->

– After trying to update the image and getting the error

<!-- wp:genesis-custom-blocks/large {"image-src":2081,"horizontal-alignment":"horizontal-alignment-right","title-tag":["h3"],"title":"My Title","cta":"MORE","cta-link-to":"/my-url"} /-->

Answer to 3.

{"genesis-custom-blocks\/large":{"name":"large","title":"Block Large","icon":"genesis_custom_blocks","category":"layout","keywords":[""],"fields":{"block-class-name":{"name":"block-class-name","label":"Block Class Name","control":"text","type":"string","location":"editor","order":0,"help":"","default":"","placeholder":"","maxlength":null},"image-src":{"name":"image-src","label":"Image Src","control":"image","type":"string","location":"editor","order":1,"help":"","default":""},"horizontal-alignment":{"name":"horizontal-alignment","label":"Horizontal Alignment","control":"select","type":"string","location":"editor","order":2,"help":"","options":[{"label":"horizontal-alignment-left","value":"horizontal-alignment-left"},{"label":"horizontal-alignment-center","value":"horizontal-alignment-center"},{"label":"horizontal-alignment-right","value":"horizontal-alignment-right"}],"default":""},"title-tag":{"name":"title-tag","label":"Title Tag","control":"multiselect","type":"array","location":"editor","order":3,"help":"","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"}],"default":["h2"]},"title-class-name":{"name":"title-class-name","label":"Title Class Name","control":"text","type":"string","location":"editor","order":4,"help":"","default":"","placeholder":"","maxlength":null},"title":{"name":"title","label":"Title","control":"text","type":"string","location":"editor","order":5,"help":"","default":"","placeholder":"","maxlength":null},"text":{"name":"text","label":"Text","control":"text","type":"string","location":"editor","order":6,"help":"","default":"","placeholder":"","maxlength":null},"cta":{"name":"cta","label":"CTA","control":"text","type":"string","location":"editor","order":7,"help":"","default":"","placeholder":"","maxlength":null},"cta-link-to":{"name":"cta-link-to","label":"CTA Link To","control":"text","type":"string","location":"editor","order":8,"help":"","default":"","placeholder":"","maxlength":null},"initial-letter":{"name":"initial-letter","label":"Initial Letter","control":"text","type":"string","location":"editor","order":9,"help":"","default":"","placeholder":"","maxlength":null},"initial-letter-horizontal-alignment":{"name":"initial-letter-horizontal-alignment","label":"Initial Letter Horizontal Alignment","control":"select","type":"string","location":"editor","order":10,"help":"","options":[{"label":"horizontal-alignment-left","value":"horizontal-alignment-left"},{"label":"horizontal-alignment-center","value":"horizontal-alignment-center"},{"label":"horizontal-alignment-right","value":"horizontal-alignment-right"}],"default":""}}}}