Как использовать тег в новом редакторе WordPress Gutenberg? ⇐ Php

[Anonymous]

Несколько месяцев назад я создал блог для клиента, и они потребовали заменить стандартный HTML-вывод изображения редактора WordPress на адаптивный тег изображения.
Мне потребовалось некоторое время, чтобы разобраться в этом. но в конце концов я нашел достойное решение. Однако со следующим обновлением WordPress заменит старый редактор wysiwyg на Gutenberg, который переопределит мои изменения и заменит их выводом HTML Gutenberg, что, в свою очередь, нарушит макет новых сообщений на сайте. Мне нужно будет быстро исправить эту проблему после обновления, но я понятия не имею, как это сделать, поскольку на данный момент я не знаком с тем, как работает Гутенберг.

Это это функция, которую я создал, чтобы заменить вывод изображения в формате 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 = "/]*>/";
$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("

Подробнее здесь: [url]https://stackoverflow.com/questions/49558606/how-to-use-the-picture-tag-in-new-wordpress-gutenberg-editor[/url]