I want to create a dynamic panel for my WordPress theme using PHP code. To do this, I have placed the following code in the functions.php file:

function dynamic_panel($title, $content) {
  $allowed_tags = '<p><strong><em><img>'; // List of allowed tags
  $content = wp_kses($content, $allowed_tags); // Sanitize content with allowed tags

  // Extract image content from $content
  $image_pattern = '/<img[^>]*?>/i'; // Regex pattern to match image tags
  preg_match($image_pattern, $content, $image_matches);

  if (isset($image_matches[0])) {
    $image_html = $image_matches[0]; // Extract the first image tag
    $text_content = preg_replace($image_pattern, '', $content); // Remove image tag from text content
  } else {
    $image_html = ''; // No image found
    $text_content = $content; // Text content remains unchanged
  }

  echo '<div id="panelMine"';
  echo '<div>';
  echo '<ul>';
  echo '<li>';
  echo '<p class="fas fa-circle-chevron-right">­</p>';
  echo '<p class="fas fa-circle-chevron-down">­</p>';
  echo '<h3>' . $title . '</h3>';
  echo '<ul>';
  echo '<li>';
  echo '<hr>';

  // Display image if available
  if ($image_html) {
    echo $image_html;
  }

  echo '<p>' . $text_content . '</p>'; // Display text content

  echo '<hr>';
  echo '</li>';
  echo '</ul>';
  echo '</li>';
  echo '</ul>';
  echo '</div>';
  echo '</div>';
}

function dynamic_panel_shortcode($atts) {
  $title = isset($atts['title']) ? $atts['title'] : '';
  $content = isset($atts['content']) ? $atts['content'] : '';

  return dynamic_panel($title, $content);
}

add_shortcode('dynamic_panel', 'dynamic_panel_shortcode');

With the code above, I can now easily create a panel on the page in the WordPress post editor using the following shortcode:

[dynamic_panel title=”Title Contect” content=”content”]

So far, everything works fine without any problems. However, if I use the shortcode as follows:

[dynamic_panel title="Title Contect" content="
<img src="https://localhost/site/wp-content/uploads/2024/05/WordPress-background_15-300x188.jpg" alt="" width="300" height="188" class="alignnone size-medium wp-image-132" />
"]

Naturally, it should display a panel with an image as its content. But this is not happening!

When I check the HTML of the page, I see only an empty <p> tag in the panel content between the <li> tags, and there is no <img> tag!

I would be very grateful for any help in solving this problem.