Support » Developing with WordPress » How to change the markup of images from Gutenberg blocks?

  • Hi there,
    is there a way to use a filter to change the class/src/srcset/sizes attributes of images before they get rendered by a block? Not just the image block, any core Gutenberg block that uses a form of image. Ideally I will need access to the $block variable at that point.

    I am trying to improve the load speed of my site with many images, as the standard Gutenberg markup serves images which are too big.

    I have tried the following filters:
    1. render_block -> there are still things happening after this filter is called with srcset calculated etc afaics
    2. wp_get_attachment_url -> no block data available
    3. wp_calculate_image_srcset -> no block data available

Viewing 6 replies - 1 through 6 (of 6 total)
  • Also tried:
    4. wp_get_attachment_image_attributes
    5. get_image_tag

    Both do not get fired.

    Moderator bcworkz

    (@bcworkz)

    Those attributes are not from one source. For srcset and sizes you would use “wp_calculate_image_srcset” and “wp_calculate_image_sizes” filters. It’s true there is no block data passed. What do you need block data for? The size info is provided, isn’t that all that matters?

    For the block’s classes, you can add additional classes when the block is inserted using the “advanced” block sidebar item. What is it you need to change about the src attribute?

    Because the block editor is largely JavaScript based, there is not much you can do related to blocks through PHP. They will often require some sort of JavaScript solution.

    1. The sizes attribute is pretty useless. I need to modify this according to the block and the context the block sits in. At the moment core/media-text for instance loads an image of 1800 width (on a 2500px monitor), where I only use it at 25% in a layout area of my theme of 770px. So the image loaded should be a maximum 200px wide. Gutenberg loads 1800px wide becuse of this sizes attribute:sizes=”(max-width: 1800px) 100vw, 1800px”
    There are a lot of cases in other blocks and it is a known problem.

    2. I need the class to be on the image not on the block. I use lazysizes for lazy loading and do not want to add a class manually to each image/block.

    I do not mind using JS hooks, I just do not know where to begin. If you could point me in the right direction, I would be very grateful.

    There is a discussion on github, so you understand what the problem is:
    https://github.com/WordPress/gutenberg/issues/6177

    Unfortunately I cannot see, if there is any solution yet. And if not I would like to know if there are any hooks/filters (PHP or JS) that I can use to solve the problem manually/in my theme until it has been tackled in Gutenberg Core.

    Thanks,
    Sascha

    Moderator bcworkz

    (@bcworkz)

    The JS side of the block editor is alien technology to me. You could start with https://developer.wordpress.org/block-editor/developers/ though there’s a fair chance you’ve already seen this.

    Maybe the blocks.getBlockAttributes filter would help in some way?

    I would be grateful, if yo could pass it on to somebody who knows how to achieve this. I have tried a fair amount and always come to a “road block” (either no block data available or other).

    Thanks!

    Bump!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.