Inspiro Lite – Gutenberg | Homepage Gallery Images Grid

Just installed InspiroVersion: 1.6.3
By WPZOOM

New WP Install

Theme Demo link:
https://demo.wpzoom.com/inspiro-lite-blocks/

The Homepage has a Gallery with SIX images displayed in two rows with 3 images.

Gallery Block
Gallery Settings:
Columns 3
Crop images: Enabled

I used the suggested “One Click Demo Import” Plugin (Version 3.0.2 By OCDI) to import and create the site layout.

The Homepage looks great with the fresh import. However, as soon as ANYTHING is changed on the Homepage via the WordPress Dashboard Editor, the HTML is changed automatically, and the Gallery Images display in a single Column (six images) instead of two rows of 3 columns.

The Block Editor still shows Gallery Settings:
Columns 3

However, the Gallery Images now display in single, left justified column.

This can be repeated easily. If any updates are made (e.g. change single word anywhere on the Homepage), and the page is saved, then the Gallery Images no longer display correctly in a Grid.

I saved the HTML from the ORIGINAL page generated by the One Click Demo Import Plugin. I then compared the ORIGINAL HTML to the UPDATED HTML that is automatically generated when the page is Saved.

In the Original HTML, the Gallery Image Grid FIGURE Items are Nested within an UNORDERED LIST with LIST ITEM for each.

However, as soon as the page is changed (anywhere), and then saved, the UNORDERED List and List Item structure is completely stripped, and ONLY the FIGURE Items are preserved.

***** EXAMPLE HTML *****

———- ORIGINAL HTML GENERATED (WORKS GREAT) ———-

<figure class="wp-block-gallery aligncenter columns-3 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_P9QYJ8AAL8.jpg" alt="" data-id="28" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_P9QYJ8AAL8.jpg" data-link="#" class="wp-image-28"/></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_M6D1GS9PSL.jpg" alt="" data-id="27" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_M6D1GS9PSL.jpg" data-link="#" class="wp-image-27"/></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_JKMGVEJMPU.jpg" alt="" data-id="26" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_JKMGVEJMPU.jpg" data-link="#" class="wp-image-26"/></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_CXVCF2NNWJ.jpg" alt="" data-id="25" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_CXVCF2NNWJ.jpg" data-link="#" class="wp-image-25"/></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_89BQZ89TLH.jpg" alt="" data-id="24" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_89BQZ89TLH.jpg" data-link="#" class="wp-image-24"/></figure>
</li>
<li class="blocks-gallery-item">
<figure><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_PGXCCTCLB5.jpg" alt="" data-id="29" data-full-url="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_PGXCCTCLB5.jpg" data-link="#" class="wp-image-29"/></figure>
</li>
</ul>
</figure>

———- REPLACEMENT HTML GENERATED WHEN PAGE UDPATED (Image Grid does NOT display correctly) ———-

<figure class="wp-block-gallery aligncenter has-nested-images columns-default is-cropped">
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_P9QYJ8AAL8.jpg" alt="" class="wp-image-28"/></figure>
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_M6D1GS9PSL.jpg" alt="" class="wp-image-27"/></figure>
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_JKMGVEJMPU.jpg" alt="" class="wp-image-26"/></figure>
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_CXVCF2NNWJ.jpg" alt="" class="wp-image-25"/></figure>
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_89BQZ89TLH.jpg" alt="" class="wp-image-24"/></figure>
<figure class="wp-block-image size-large"><img src="https://wp-themes.com/wp-content/themes/inspiro/assets/images/StockSnap_PGXCCTCLB5.jpg" alt="" class="wp-image-29"/></figure>
</figure>

***** END OF EXAMPLE HTML *****

How do you get the Gallery Image Grid to go back to correct alignment?
Want 2 Rows, with 3 Columns each, instead of SINGLE Column of all images left-justified and stacked.

This is easy to duplicate.

Any suggestions?

Thanks!