如何在新的WordPress Gutenberg编辑器中使用<picture>标签？

几个月前，我为客户 Build 了一个博客，他们要求的一件事就是为响应式图片标签替换默认的WordPress编辑器图像html输出 . 我花了一些时间才弄明白，但最终我想出了一个不错的解决方案 . 然而，随着下一次更新，WordPress将用Gutenberg替换旧的所见即所得编辑器，这将覆盖我的更改并用Gutenberg的html输出替换它们，这将打破网站上新帖子的布局 . 我需要在更新后快速解决这个问题，但我不知道该怎么做，因为目前我不熟悉古腾堡的工作原理 .

这是我为了替换默认的post image html输出而构建的函数：

if ( !function_exists( 'responsive_insert_image()' ) ) {
    function responsive_insert_image($html, $id, $caption, $title, $align, $url, $size) {
        $alt_text = get_post_meta($id, '_wp_attachment_image_alt', true);
        if ( !$alt_text ) { 
            $alt_text = esc_html( get_the_title($post_id) ); 
        }   

        $full = wp_get_attachment_image_src($id, 'full');
        $xl = wp_get_attachment_image_src($id, 'extra-large');
        $lg = wp_get_attachment_image_src($id, 'large');
        $md = wp_get_attachment_image_src($id, 'medium'); 
        $sm = wp_get_attachment_image_src($id, 'small');
        $xs = wp_get_attachment_image_src($id, 'thumbnail');                
        $xl_2x = wp_get_attachment_image_src($id, 'extra-large-2x');
        $lg_2x = wp_get_attachment_image_src($id, 'large-2x');
        $md_2x = wp_get_attachment_image_src($id, 'medium-2x'); 
        $sm_2x = wp_get_attachment_image_src($id, 'small-2x');
        $xs_2x = wp_get_attachment_image_src($id, 'thumbnail-2x');

        $attributes  = (!empty($id) ? ' id="attachment_' . esc_attr($id) . '"' : '' );
        $class = ' class="' . 'align'.esc_attr($align) . '"';
        if($a_elem != "" || $caption != "") {
            $pic_atts = "";
        } else {
            $pic_atts = $attributes . $class;
        }
        if($caption != "") {
            $link_atts = "img-link";
        } else {
            $link_atts = $attributes . $class;
        }

        $linkptrn = "/<a[^>]*>/";
        $found = preg_match($linkptrn, $html, $a_elem);
        if($found > 0) {
            $a_elem = $a_elem[0];
            if(strstr($a_elem, "class=\"") !== false){ // If link already has class defined inject it to attribute
                $a_elem = str_replace("class=\"", "target=\"_blank\" " . $class . $link_atts . " ", $a_elem);
            } else { // If no class defined, just add class attribute
                $a_elem = str_replace("<a ", "<a " . $class . $attributes . " target=\"_blank\" ", $a_elem);
            }
        } else {
            $a_elem = "";
        }   

        if ($size == 'full') {
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $full[0] . '" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $full[0] . '" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }
        } elseif ($size == 'extra-large') {
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $xl[0] . ', ' . $xl_2x[0] . ' 2x" media="(min-width: 1200px)">';
            $html .= '<source srcset="' . $lg[0] . ', ' . $lg_2x[0] . ' 2x" media="(min-width: 992px)">';
            $html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
            $html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }
        } elseif ($size == 'large') {   
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $lg[0] . ', ' . $lg_2x[0] . ' 2x" media="(min-width: 992px)">';
            $html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
            $html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }           
        } elseif ($size == 'medium') {
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $md[0] . ', ' . $md_2x[0] . ' 2x" media="(min-width: 768px)">';
            $html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }               
        } elseif ($size == 'small') {
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }               
        } elseif ($size == 'thumbnail') {
            if ($caption) {
                $html = '<figure' . $attributes .'>';
            } else {
                $html = '';
            }
            $html .= $a_elem;       
            $html .= '<picture' . $pic_atts .'>';
            $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
            $html .= '<source srcset="' . $sm[0] . ', ' . $sm_2x[0] . ' 2x" media="(min-width: 576px)">';
            $html .= '<!--[if IE 9]></video><![endif]-->';
            $html .= '<img srcset="' . $xs[0] . ', ' . $xs_2x[0] . ' 2x" alt="' . $alt_text . '">';
            $html .= '</picture>';
            if($a_elem != "") {
                $html .= '</a>';
            }
            if ($caption) {
                $html .= '<figcaption class="caption wp-caption-text">'.$caption.'</figcaption>';
                $html .= '</figure>';
            }               
        }
        return $html;
    }
    add_filter( 'image_send_to_editor', 'responsive_insert_image', 10, 9 );
    add_filter( 'disable_captions', create_function('$a', 'return true;') );
}

有没有办法以某种方式修改此功能，以使其与新的Gutenberg编辑器兼容？