render_block_core_image

The timeline below displays how wordpress function render_block_core_image has changed across different WordPress versions. If a version is not listed, refer to the next available version below.

WordPress Version: 6.5

/**
 * Server-side rendering of the `core/image` block.
 *
 * @package WordPress
 */
/**
 * Renders the `core/image` block on the server,
 * adding a data-id attribute to the element if core/gallery has added on pre-render.
 *
 * @param array    $attributes The block attributes.
 * @param string   $content    The block content.
 * @param WP_Block $block      The block object.
 *
 * @return string The block content with the data-id attribute added.
 */
function render_block_core_image($attributes, $content, $block)
{
    if (false === stripos($content, '<img')) {
        return '';
    }
    $p = new WP_HTML_Tag_Processor($content);
    if (!$p->next_tag('img') || null === $p->get_attribute('src')) {
        return '';
    }
    if (isset($attributes['data-id'])) {
        // Adds the data-id="$id" attribute to the img element to provide backwards
        // compatibility for the Gallery Block, which now wraps Image Blocks within
        // innerBlocks. The data-id attribute is added in a core/gallery
        // `render_block_data` hook.
        $p->set_attribute('data-id', $attributes['data-id']);
    }
    $link_destination = isset($attributes['linkDestination']) ? $attributes['linkDestination'] : 'none';
    $lightbox_settings = block_core_image_get_lightbox_settings($block->parsed_block);
    /*
     * If the lightbox is enabled and the image is not linked, adds the filter and
     * the JavaScript view file.
     */
    if (isset($lightbox_settings) && 'none' === $link_destination && isset($lightbox_settings['enabled']) && true === $lightbox_settings['enabled']) {
        $suffix = wp_scripts_get_suffix();
        if (defined('IS_GUTENBERG_PLUGIN') && IS_GUTENBERG_PLUGIN) {
            $module_url = gutenberg_url('/build/interactivity/image.min.js');
        }
        wp_register_script_module('@wordpress/block-library/image', isset($module_url) ? $module_url : includes_url("blocks/image/view{$suffix}.js"), array('@wordpress/interactivity'), defined('GUTENBERG_VERSION') ? GUTENBERG_VERSION : get_bloginfo('version'));
        wp_enqueue_script_module('@wordpress/block-library/image');
        /*
         * This render needs to happen in a filter with priority 15 to ensure that
         * it runs after the duotone filter and that duotone styles are applied to
         * the image in the lightbox. Lightbox has to work with any plugins that
         * might use filters as well. Removing this can be considered in the future
         * if the way the blocks are rendered changes, or if a new kind of filter is
         * introduced.
         */
        add_filter('render_block_core/image', 'block_core_image_render_lightbox', 15, 2);
    } else {
        /*
         * Remove the filter if previously added by other Image blocks.
         */
        remove_filter('render_block_core/image', 'block_core_image_render_lightbox', 15);
    }
    return $p->get_updated_html();
}

WordPress Version: 6.4

/**
 * Server-side rendering of the `core/image` block.
 *
 * @package WordPress
 */
/**
 * Renders the `core/image` block on the server,
 * adding a data-id attribute to the element if core/gallery has added on pre-render.
 *
 * @param array    $attributes The block attributes.
 * @param string   $content    The block content.
 * @param WP_Block $block      The block object.
 *
 * @return string The block content with the data-id attribute added.
 */
function render_block_core_image($attributes, $content, $block)
{
    if (false === stripos($content, '<img')) {
        return '';
    }
    $processor = new WP_HTML_Tag_Processor($content);
    if (!$processor->next_tag('img') || null === $processor->get_attribute('src')) {
        return '';
    }
    if (isset($attributes['data-id'])) {
        // Add the data-id="$id" attribute to the img element
        // to provide backwards compatibility for the Gallery Block,
        // which now wraps Image Blocks within innerBlocks.
        // The data-id attribute is added in a core/gallery `render_block_data` hook.
        $processor->set_attribute('data-id', $attributes['data-id']);
    }
    $link_destination = isset($attributes['linkDestination']) ? $attributes['linkDestination'] : 'none';
    $lightbox_settings = block_core_image_get_lightbox_settings($block->parsed_block);
    $view_js_file_handle = 'wp-block-image-view';
    $script_handles = $block->block_type->view_script_handles;
    /*
     * If the lightbox is enabled and the image is not linked, add the filter
     * and the JavaScript view file.
     */
    if (isset($lightbox_settings) && 'none' === $link_destination && isset($lightbox_settings['enabled']) && true === $lightbox_settings['enabled']) {
        $block->block_type->supports['interactivity'] = true;
        if (!in_array($view_js_file_handle, $script_handles, true)) {
            $block->block_type->view_script_handles = array_merge($script_handles, array($view_js_file_handle));
        }
        /*
         * This render needs to happen in a filter with priority 15 to ensure
         * that it runs after the duotone filter and that duotone styles are
         * applied to the image in the lightbox. We also need to ensure that the
         * lightbox works with any plugins that might use filters as well. We
         * can consider removing this in the future if the way the blocks are
         * rendered changes, or if a new kind of filter is introduced.
         */
        add_filter('render_block_core/image', 'block_core_image_render_lightbox', 15, 2);
    } else {
        /*
         * Remove the filter and the JavaScript view file if previously added by
         * other Image blocks.
         */
        remove_filter('render_block_core/image', 'block_core_image_render_lightbox', 15);
        // If the script is not needed, and it is still in the `view_script_handles`, remove it.
        if (in_array($view_js_file_handle, $script_handles, true)) {
            $block->block_type->view_script_handles = array_diff($script_handles, array($view_js_file_handle));
        }
    }
    return $processor->get_updated_html();
}

WordPress Version: 6.3

/**
 * Server-side rendering of the `core/image` block.
 *
 * @package WordPress
 */
/**
 * Renders the `core/image` block on the server,
 * adding a data-id attribute to the element if core/gallery has added on pre-render.
 *
 * @param  array  $attributes The block attributes.
 * @param  string $content    The block content.
 * @return string Returns the block content with the data-id attribute added.
 */
function render_block_core_image($attributes, $content)
{
    $processor = new WP_HTML_Tag_Processor($content);
    $processor->next_tag('img');
    if ($processor->get_attribute('src') === null) {
        return '';
    }
    if (isset($attributes['data-id'])) {
        // Add the data-id="$id" attribute to the img element
        // to provide backwards compatibility for the Gallery Block,
        // which now wraps Image Blocks within innerBlocks.
        // The data-id attribute is added in a core/gallery `render_block_data` hook.
        $processor->set_attribute('data-id', $attributes['data-id']);
    }
    return $processor->get_updated_html();
}

WordPress Version: 6.1

/**
 * Server-side rendering of the `core/image` block.
 *
 * @package WordPress
 */
/**
 * Renders the `core/image` block on the server,
 * adding a data-id attribute to the element if core/gallery has added on pre-render.
 *
 * @param  array  $attributes The block attributes.
 * @param  string $content    The block content.
 * @return string Returns the block content with the data-id attribute added.
 */
function render_block_core_image($attributes, $content)
{
    if (isset($attributes['data-id'])) {
        // Add the data-id="$id" attribute to the img element
        // to provide backwards compatibility for the Gallery Block,
        // which now wraps Image Blocks within innerBlocks.
        // The data-id attribute is added in a core/gallery `render_block_data` hook.
        $data_id_attribute = 'data-id="' . esc_attr($attributes['data-id']) . '"';
        if (!str_contains($content, $data_id_attribute)) {
            $content = str_replace('<img', '<img ' . $data_id_attribute . ' ', $content);
        }
    }
    return $content;
}

WordPress Version: 5.9

/**
 * Server-side rendering of the `core/image` block.
 *
 * @package WordPress
 */
/**
 * Renders the `core/image` block on the server,
 * adding a data-id attribute to the element if core/gallery has added on pre-render.
 *
 * @param  array $attributes The block attributes.
 * @param  array $content    The block content.
 * @return string Returns the block content with the data-id attribute added.
 */
function render_block_core_image($attributes, $content)
{
    if (isset($attributes['data-id'])) {
        // Add the data-id="$id" attribute to the img element
        // to provide backwards compatibility for the Gallery Block,
        // which now wraps Image Blocks within innerBlocks.
        // The data-id attribute is added in a core/gallery `render_block_data` hook.
        $data_id_attribute = 'data-id="' . esc_attr($attributes['data-id']) . '"';
        if (!strpos($content, $data_id_attribute)) {
            $content = str_replace('<img', '<img ' . $data_id_attribute . ' ', $content);
        }
    }
    return $content;
}