Why my widget is not visible in the Wordpress theme Twenty Twenty-Three

Question

Why my widget is not visible in the Wordpress theme Twenty Twenty-Three ? in other wordpress themes that I have tried it can be used normally. even though the plugin is normally installed, the widget block is not visible among other blocks

i receive this error: Your site doesn’t include support for the "weather-widget-block/weather-widget" block. You can leave this block intact or remove it entirely.

this is from: weather-widget.php

<?php
class Weather_Widget extends WP_Widget {

    // Widget setup
    public function __construct() {
        parent::__construct(
            'weather_widget', // Widget ID
            'Weather Widget', // Widget name
            array('description' => 'Display weather information for a specific city.') // Widget description
        );
    }

// Display the widget
public function widget($args, $instance) {
    $city = isset($instance['city']) ? $instance['city'] : 'New York';
    $unit = isset($instance['unit']) ? $instance['unit'] : 'c';
    $api_key = get_option('weather_api_key');

    // Check if API key is set
    if (empty($api_key)) {
        echo '<p>Please enter an API key on the <a href="' . esc_url(admin_url('options-general.php?page=weather-plugin')) . '">Weather Plugin Settings</a> page.</p>';
        return;
    }

    // Get weather data from API
    $url = 'http://api.weatherapi.com/v1/current.json?key=' . $api_key . '&q=' . urlencode($city) . '&units=' . $unit;
    $response = wp_remote_get($url);

    if (is_wp_error($response)) {
        echo '<p>Error getting weather data.</p>';
    } else {
        $data = json_decode(wp_remote_retrieve_body($response), true);
        $temp = $data['current']['temp_' . $unit];
        $condition = $data['current']['condition']['text'];

        $weather_image = ''; // Inicijalizacija varijable za sliku vremenskog uvjeta

    // Provjera vremenskog uvjeta i odabir slike
    if ($condition == 'Sunny') {
          $weather_image = 'sunny.png'; 
    }    
        elseif ($condition == 'Partly cloudy') {
        $weather_image = 'partly-cloudy.png'; 
    }    

// Definirajte globalnu varijablu za brojčanik widgeta
global $widget_counter;
if (!isset($widget_counter)) {
    $widget_counter = 1;
} else {
    $widget_counter++;
}

// Prikaz slike ako je odabrana
if (!empty($weather_image)) {
    $image_url = plugins_url('weather-condition/' . $weather_image, __FILE__);
    echo '<section id="block-' . $widget_counter . '" class="widget widget_block weather_widget_container">';
    echo '<div class="weather-widget-container">';
    echo '<div class="weather-image"><img src="' . $image_url . '" alt="' . $condition . '"></div>';
    echo '<div class="weather-text">';
}

// Dodajte sljedeći kod za uključivanje CSS datoteke
wp_enqueue_style('weather-widget-style', plugins_url('weather-widget.css', __FILE__));

echo '<div class="weather-widget-container">';
echo $args['before_widget'];
echo $args['before_title'] . 'Weather in ' . $city . $args['after_title'];
echo '<div class="weather-text">';
echo '<p>Temperature: ' . $temp . '&deg;' . strtoupper($unit) . '</p>';
echo '<p>Condition: ' . $condition . '</p>';
echo '</div>'; // Zatvaranje <div> za weather-text

echo '</div>'; // Zatvaranje <div> za weather-widget-container
echo $args['after_widget'];

if (!empty($weather_image)) {
    echo '</div>'; // Zatvaranje <div> za weather-text
    echo '</section>'; // Zatvaranje <section> za weather widget
}

}
    }

    // Widget settings form
    public function form($instance) {
        $city = isset($instance['city']) ? $instance['city'] : '';
        $unit = isset($instance['unit']) ? $instance['unit'] : 'c';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('city'); ?>">City:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('city'); ?>" name="<?php echo $this->get_field_name('city'); ?>" type="text" value="<?php echo esc_attr($city); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('unit'); ?>">Unit:</label>
            <select class="widefat" id="<?php echo $this->get_field_id('unit'); ?>" name="<?php echo $this->get_field_name('unit'); ?>">
                <option value="c" <?php selected($unit, 'c'); ?>>Celsius</option>
                <option value="f" <?php selected($unit, 'f'); ?>>Fahrenheit</option>
            </select>
        </p>
        <?php
    }

    // Update widget settings
    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['city'] = strip_tags($new_instance['city']);
        $instance['unit'] = strip_tags($new_instance['unit']);
        return $instance;
    }
}

can you tell me what i need to do to make the widget compatible with most wordpress themes ?

thank you

Answer 1

Actually Twenty Twenty Three theme supports full site editing and is a Gutenberg Block theme, so it doesn't support classic widgets, to use the widget mentioned above you would have to convert it to Gutenberg Block.

Thanks