Support » Plugin: Gutenberg » Gallery breaks with update to 5.3. Images show as unordered list

  • The link above is from a test website posting.
    I will include the screen grabs as well from the test site.

    Earlier in the week, we upgraded to WP 5.3 and found one ‘update’ error in the theme being used. Fixed that and all was good until I tried to create a new post with a gallery today.
    I created a new post, starting adding headers and paragraphs and then added a gallery. In the editor, the preview looks right and as expected. When the post was previewed or published and viewed, the images were full sized and stacked as an unordered list. https://photos.app.goo.gl/tU8MMW529nm8ZWbq7

    I removed the gallery, re-saved the post, and repeated. Also tried a gallery on a page. I then went to a site that was not upgraded to WP 5.3 and repeated the process (this test post link). With WP 5.2 and the same plugins as the live site on WP 5.3, I created a gallery and it worked perfectly. https://photos.app.goo.gl/zaeV2wP8JmrnexEK8

    I then upgraded the site to WP 5.3 and refreshed the page and the gallery broke.
    There seems to possibly be something in the upgrade that breaks it. I am still testing the theme as a possible cause of error.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Riad Benguella

    (@youknowriad)

    Hi There!

    So according to the WordPress 5.3 dev note published here https://make.wordpress.org/core/2019/09/27/block-editor-theme-related-updates-in-wordpress-5-3/ the markup of the Gallery block changed in this release. So it’s possible that theme was optimizing the styles according to the previous markup and that the styles don’t apply properly to the new markup.

    That link was close, I have tried adjusting the CSS and it was formatting the first image but then while looking at the code I found this issue. When using the 2019 theme, it appears to work. So I guess something in the theme I am using is breaking the unordered list as well.

    In the editor, the code is

    <figure class="wp-block-gallery columns-2 is-cropped">
      <ul class="blocks-gallery-grid">
        <li class="blocks-gallery-item">...</li>
        <li class="blocks-gallery-item">...</li>
        <li class="blocks-gallery-item">...</li>
        <li class="blocks-gallery-item">...</li>
      </ul>
    </figure>

    and in the rendered page, the code is

    <figure class="wp-block-gallery columns-2 is-cropped">
      <ul class="blocks-gallery-grid">
        <li class="blocks-gallery-item">...</li>
      </ul>
    </figure> 
    <li class="blocks-gallery-item">...</li>
    <li class="blocks-gallery-item">...</li>
    <li class="blocks-gallery-item">...</li>

    Thanks for link above, I did not see it while doing a search for the issue.

    • This reply was modified 3 weeks, 5 days ago by johnamp.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.