image block svg image became disappear

Hi there!

Thank you for your kind words, and sorry for the late reply.

We’ve tested your issue, and we were able to use an SVG just fine within a column created with Grids. Working with SVGs it’s a good idea to define the size of the image in the block editing sidebar, but other than that there’s nothing specific we’ve done.

Now, I suspect that your issue could fall under either of these two options:

1. The problem is with how the SVG file itself is built. If you could provide us with a link to the SVG file you’re using, we can test that one specifically to exclude this potential cause for the issue.
2. You perhaps have some plugin that works within Gutenberg, and conflicts with the display of image blocks. We have performed the test with the latest version of Grids running on WordPress 5.2.2. We’ve also separately tested this with the latest version of the Gutenberg plugin.

Let us know!

Hi, Thank you for taking time and testing this for me.

I re-tested it with Genesis and Twenty Seventeen theme on latest WordPress but faced the almost same problem. Tried Twenty Nineteen theme too. The svg outputs in frontend but goes hidden in Block editor.

I am using svg from thenounproject dot com /creativestall/collection/web-hosting-doodle-icons/ with plugin Safe SVG to upload svg in WordPress.

Here is a sample code with 3 column block. Please let me know if you need more information about it.

I am using laravel Valet on localhost. WordPress 5.2.2

<!-- wp:grids/section {"blockId":"2897e538-1d19-4d0c-9a07-8cfdb87a1a0a","grid":"1","columns":3,"rows":1} -->
<!-- wp:grids/area {"blockId":"00b2f509-b5be-4e8c-8c30-a044d0d12f67","column":{"start":1,"end":1},"row":{"start":1,"end":1}} -->
<!-- wp:image {"id":28,"align":"center","width":146,"height":149} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_global-server_1769248.svg" alt="" class="wp-image-28" width="146" height="149"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":47,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Globe-Arrow_1763048.svg" alt="" class="wp-image-47"/></figure></div>
<!-- /wp:image -->
<!-- /wp:grids/area -->

<!-- wp:grids/area {"blockId":"0ffe7e29-f6a1-4300-8442-283f38e9976a","column":{"start":2,"end":2},"row":{"start":1,"end":1}} -->
<!-- wp:image {"id":31,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Web-Antivirus_1770127.svg" alt="" class="wp-image-31"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":34,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Web-Antivirus_1770127-1.svg" alt="" class="wp-image-34"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":38} -->
<figure class="wp-block-image"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Shopping-Cart_1763189.svg" alt="" class="wp-image-38"/></figure>
<!-- /wp:image -->
<!-- /wp:grids/area -->

<!-- wp:grids/area {"blockId":"7676b97f-1798-41be-be5b-82c53c4b03de","column":{"start":3,"end":3},"row":{"start":1,"end":1}} -->
<!-- wp:image {"id":32,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_e-commerce-website_1769787.svg" alt="" class="wp-image-32"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":39,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Landing-Pages_1763042.svg" alt="" class="wp-image-39"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":35,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_Cloud-Backup_1770145.svg" alt="" class="wp-image-35"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"id":41,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://genesis-update.test/wp-content/uploads/2019/08/noun_web-security_1762307.svg" alt="" class="wp-image-41"/></figure></div>
<!-- /wp:image -->
<!-- /wp:grids/area -->
<!-- /wp:grids/section -->

Hello there,

thank you for the example code of your page.

The issue is related to your SVG file because is missing height and width properties.
The WordPress block editor UI breaks if you align center or right an SVG without dimensions, you can try to align one of your SVG icons in the normal content, without Grids and you’ll see the icon disappear.

In order to fix the issue, you need to edit your SVG file and add width and height values.

Let me know if everything is clear or if you have more questions.

Best,

Simone

Hi,

Thank you so much for putting your time in this issue. I understand now and will remember to add height and width in SVG.

Thanks once again for creating Grids.

Thanks to you for trying out Grids!

Since this is not an issue that’s strictly related to Grids, I’m going to mark this ticket as resolved.

Have a nice day!

Andrea