Gutenberg Issues

  • Resolved Bryce Jacobson

    (@drivenfaroff)


    7 years, 7 months ago

    I have this up and running correctly on a site I just installed Gutenberg on and am testing.

    It looks like Gutenberg by default now wraps images in the following inside a post:

    <figure class="wp-block-image"><img src="" data-lazy-type="image" data-src="" alt="" class="wp-image-3249 lazy-loaded"></figure>

    The plugin is still working, however I’m not seeing the background spinner and everything is loading at once since the figure doesn’t have a width set to it so a equivalent height doesn’t get set.

    It looks to be that adding .wp-block-image { width: 100%; } fixes this.

    Thinking a check might need to be added to the plugin and then add this CSS in your plugin if Gutenberg is enabled?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Bryce Jacobson

    (@drivenfaroff)

    7 years, 7 months ago

    I also had to add img[data-lazy-type="image"] { width: 100%; } to make this work.

    Plugin Author Steve Truman

    (@a3rev)

    7 years, 7 months ago

    @drivenfaroff

    Thanks for posting this – we ran some tests – and have put out update version 1.9.1 to resolve the issue.

    The is no issue with images added inline in Gutenberg – but there was an issue with images added by Gutenberg image block, which also occurs if theme or plugin adds images that don’t set a minimum width. Gutenberg image block does not set a minimum width for the image tag. I mean this https://gyazo.com/c7253a496028fda3fe65de138809a92e

    Just Gutenberg image block, if use image inline then it’s fine because that Gutenberg will auto add width and height for the image inline.

    To resolve this Gutenberg issue or any image tag use without have width and height we have set min-width for placeholder at 150px. After placeholder is replace by real image then it auto remove that min-width.

    To resolve it in version 1.9.1 we have add this

    figure.wp-block-image img.lazy-hidden {
    min-width: 150px;
}

    When real image is replace, .lazy-hidden class on image, the min-width is auto removed.

    Please test and let me know if that resolves the image for you.

    Regards
    Steve

    Thread Starter Bryce Jacobson

    (@drivenfaroff)

    7 years, 7 months ago

    @a3rev

    Thanks. I can confirm that the update fixed the issue of the loader not showing when using the Gutenberg Image Block.

    I still applied some custom styles to make the loader 100% width but that is more theme based on my part.

    One other off topic note, thoughts on making the loading.gif retina (@2x size)?

    Thanks for the plugin and the quick fix.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Gutenberg Issues’ is closed to new replies.