Block error when loading (SVG marker icon)

  • When an SVG marker icon is used, the block doesn’t load anymore in Gutenberg editor:

    Block validation: Block validation failed for cgb/block-gosign-googlemaps (

    Content generated by save function:

    `
<div class="gosign-googlemaps" style="min-height:350px" data-lat="<redacted>" data-lng="<redacted>" data-zoom="17" data-show-zoom-buttons="true" data-show-map-type-buttons="true" data-show-street-view-button="true" data-show-fullscreen-button="true" data-option-scroll-wheel="true" data-option-draggable="true" data-styles="[{&quot;featureType&quot;:&quot;administrative&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;lightness&quot;:33}]},{&quot;featureType&quot;:&quot;landscape&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#f2e5d4&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#c5dac6&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;labels&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;lightness&quot;:20}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;lightness&quot;:20}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#c5c6c6&quot;}]},{&quot;featureType&quot;:&quot;road.arterial&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#e4d7c6&quot;}]},{&quot;featureType&quot;:&quot;road.local&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#fbfaf7&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;color&quot;:&quot;#acbcc9&quot;}]}]" data-gesture-handling="cooperative"><div class="gosign-googlemaps-marker" data-lat="<redacted>" data-lng="<redacted>" data-address="<redacted>" data-iconurl="https://<redacted>/app/uploads/2022/01/Icon.min_.svg" data-markerwidth="27"></div></div>

    

Content retrieved from post body:
<pre><code>

    <div class="gosign-googlemaps" style="min-height:350px" data-lat="<redacted>" data-lng="<redacted>" data-zoom="17" data-show-zoom-buttons="true" data-show-map-type-buttons="true" data-show-street-view-button="true" data-show-fullscreen-button="true" data-option-scroll-wheel="true" data-option-draggable="true" data-styles="[{&quot;featureType&quot;:&quot;administrative&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;lightness&quot;:33}]},{&quot;featureType&quot;:&quot;landscape&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#f2e5d4&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#c5dac6&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;labels&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;lightness&quot;:20}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;lightness&quot;:20}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#c5c6c6&quot;}]},{&quot;featureType&quot;:&quot;road.arterial&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#e4d7c6&quot;}]},{&quot;featureType&quot;:&quot;road.local&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#fbfaf7&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;color&quot;:&quot;#acbcc9&quot;}]}]" data-gesture-handling="cooperative"><div class="gosign-googlemaps-marker" data-lat="<redacted>" data-lng="<redacted>" data-address="<redacted>" data-iconurl="https://<redacted>/app/uploads/2022/01/Icon.min_.svg&quot; data-markerwidth="27" data-markerheight="NaN"></div></div>

    `

    The height of the marker icon is NaN in the markup to save, while it is not in the post markup. So some value is not passed around correctly.

  • The topic ‘Block error when loading (SVG marker icon)’ is closed to new replies.