Block error when loading (SVG marker icon)

  • strarsis

    (@strarsis)


    4 years, 5 months ago

    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.