Changeset 3371900

under-the-weather/tags/2.2/README.md

-                      r3369072
+                      r3371900
 * **Requires at least:** 5.0
 * **Tested up to:** 6.8
 * **Stable tag:** 2.1
+* **Stable tag:** 2.2
 * **Requires PHP:** 7.2
 * **License:** GPLv2 or later
 …
 * **Server-Side Caching:** All API calls are cached on your server, dramatically reducing calls to the OpenWeather API and speeding up page loads for all users.
 * **Visual Performance Report:** Monitor your site's API usage with a bar chart that displays a 7-day history of cached requests versus new calls to the OpenWeather API - a clear look at how the caching system is working to keep your site fast and your API calls low.
+* **Highly Customizable:** Use the detailed settings page to control everything from cache duration to the number of forecast days.
+* **Flexible Display:** Show either the current live weather or the high/low forecast for the current day.
+* **Customizable Display:** Use the main display to show either the current live weather or the high/low forecast for the current day, and set the number of days to include in the forecast ahead.
 * **Imperial & Metric Units:** Display weather in Fahrenheit/mph or Celsius/kph on a per-widget basis.
 * **Extra Details:** Optionally display "Feels Like" temperature and detailed wind information.
+* **Weather Alerts:** Display official severe weather alerts directly in the widget to keep visitors informed.
+* **Sunrise & Sunset Times:** Optionally show daily sunrise and sunset times, with 12-hour and 24-hour format options.
 * **Lightweight:** Enqueues assets only when needed and does not rely on heavy JavaScript libraries.
 * **Settings Page Coordinate Finder:** An easy-to-use tool on the settings page retrieves coordinates by location name and generates ready-to-use widget `<div>` code.
 …
 The plugin's JavaScript will automatically find this element and populate it with the forecast.
+### Using the Shortcode (Classic Editor & Widgets)
+You can also display the weather by using the `[under_the_weather]` shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.
+**Available attributes:**
+* `lat`: (Required) The latitude for the forecast.
+* `lon`: (Required) The longitude for the forecast.
+* `location_name`: (Required) The name to display for the location.
+* `unit`: (Optional) The unit system. Accepts `metric` or `imperial`. Defaults to `imperial`.
+**Example:**
+`[under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]`
 ---
 …
 **Cache Expiration Time:**
+This setting controls how long the weather data is stored on your server before fetching a new forecast.
+Use the slider to set the maximum time weather data is stored before fetching a new forecast, from 30 minutes to 8 hours.
+The plugin also features a **smart caching** system that automatically ensures the cache expires after midnight in the location's local timezone. This prevents showing a stale forecast from the previous day, regardless of your slider setting.
 For displaying live conditions (using the **Primary Display** or **Extra Details** options), a shorter cache time of 1 or 2 hours is recommended.
 For displaying only the daily high/low, a longer cache time of 3 or 6 hours is effective at reducing API calls.
+For displaying only the daily high/low, a longer cache time of 3 or 8 hours is effective at reducing API calls.
 **Widget Display & Style**
 …
 **Extra Details:**
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+**Sunrise & Sunset:** This setting allows you to display the local sunrise and sunset times for the location, which is useful for planning outdoor activities.  Choose to show the times in a 12-hour (e.g., 6:30 AM) or 24-hour (e.g., 18:30) format.
+**Weather Alerts:** When enabled, the widget will display any active severe weather alerts (e.g., thunderstorm warnings, flood advisories) issued by official authorities for the specified location.  This provides critical, at-a-glance information for your visitors.
 **Display Timestamp:**
 …
 No. To retrieve fresh weather data every time a widget page loads, you can uncheck "Enable Cache" under the plugin's advanced settings. The caching system provides a great benefit for reducing API hits, but turning off this function during your initial widget setup may be useful.
+### Will my website ever show yesterday's weather If I set a long cache time?
+Cinderella's magic disappears at midnight, and weather caches expire at midnight too. Visitors should never see a cache of the previous day's forecast.
+For example, if you set the cache expiration time to 8 hours and a weather cache is created at 10 p.m. on a Friday (using the weather location's time), that cache will expire at midnight, and someone visiting the site the next day at 5 a.m. will not see the previous day's cache even though fewer than 8 hours have passed.
+The plugin uses whichever expiration time is **shorter** to provide the most effective caching.  You control the maximum cache duration with the "Cache Expiration Time" slider. However, to ensure your visitors never see yesterday's weather, the plugin also calculates the time until midnight in the widget's local timezone. If the time until midnight is shorter than your slider setting, the cache will expire at midnight.
 ### The weather isn't updating. Why?
 …
 ### Can I still use the manual div method if I prefer it?
+Absolutely! The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly. The new block is simply an additional, more user-friendly option for those using the WordPress block editor.
+The `<div>` method is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
+Absolutely! While the **block** is the recommended, user-friendly method for the modern WordPress editor, the plugin fully supports traditional methods for maximum flexibility.
+You can use the `[under_the_weather]` shortcode to easily place the widget in the Classic Editor, text widgets, or with various page builders.
+Additionally, the manual `<div>` method still works perfectly. It is particularly useful for theme developers who need to integrate the widget directly into template files or dynamically populate its data from custom fields.
+The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly and is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
 ### What coordinate format should I use?
 …
 If you're unsure what coordinates to use, the **Coordinate Finder** tool is the best way to retrieve accurate coordinates in the correct format.
+### Where do the weather alerts come from?
+The alerts are provided directly by the OpenWeather API, which sources them from official meteorological agencies in each country. This ensures the information is timely and authoritative.
 ### What does the "Enable Rate Limiting" setting do?
 …
 _The weather widget displaying current conditions with default icons (in Celsius) and extra details enabled._
+![The weather widget with Weather Alerts shown](https://ps.w.org/under-the-weather/assets/screenshot-8.png)
+_The weather widget with Weather Alerts shown._
+![The weather widget with Sunrise and Sunset times shown](https://ps.w.org/under-the-weather/assets/screenshot-9.png)
+_The weather widget with Sunrise and Sunset times shown._
 ---
 …
 ## Changelog
+### 2.2
+* **NEW:** Introduced a `[under_the_weather]` shortcode to allow for easy placement of the weather widget in the Classic Editor, text widgets, and other page builders.
+* **NEW:** Added a display option to show the day's sunrise time and sunset time, helpful in  scheduling outdoor activities.
+* **NEW:** Added an option to display severe weather alerts from official authorities directly within the widget. This feature can be enabled on the plugin's settings page.
+* **IMPROVEMENT:** Incorporated clear warning icons for severe weather alerts.
+* **IMPROVEMENT:** The plugin can now handle multiple weather widgets on a single page
+* **IMPROVEMENT:** The front-end widget now loads its data asynchronously (AJAX). This improves perceived page load performance and allows multiple widgets on the same page to load their data independently.
+* **IMPROVEMENT:** The settings page now features a Cache Expiration Time slider that allows greater flexibility and provides users with a visual way to select how long cached weather should be saved.
+* **NEW:** Midnight expiration is now built into the Cache Expiration logic, so you never have to worry about displaying a cached copy of yesterday's forecast.
 ### 2.1
 * **NEW:** The block editor can now parse and automatically convert coordinates from common formats like DMS (Degrees, Minutes, Seconds) and DDM (Degrees, Decimal Minutes) into the required decimal format.
 …
 ### 2.0
 This version includes a "Under The Weather Forecast" block for the WordPress block editor.
+### 2.2
+This version introduces a new `[under_the_weather]` shortcode for easy widget placement and adds options to display severe weather alerts and daily sunrise/sunset times.

under-the-weather/tags/2.2/build/block.json

r3369072	r3371900
3	3	"apiVersion": 3,
4	4	"name": "under-the-weather/widget",
5		"version": "2.1.0",
	5	"version": "2.2.0",
6	6	"title": "Under The Weather Forecast",
7	7	"category": "widgets",

under-the-weather/tags/2.2/css/admin-styles.css

-                      r3365104
+                      r3371900
      max-width: 100px;
+}
+.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555);}
+/* Usage Report Chart Styling */
+.under-the-weather-visual-reference-default-image{
+    filter:drop-shadow(1px 2px 3px #555);
+}
+/* --- Usage Report Chart Styling --- */
 .under-the-weather-usage-report {
     display: flex;
 …
     margin: 15px 0;
+}
+/* --- Coordinate Finder --- */
 .weather-widget-coordinate-finder-pre{
      background: #f1f1f1;
 …
     color: red;
+}
+.utw-result-wrapper{
+    margin-top:15px
+}
+/* --- Slider Control Styling --- */
+.utw-slider-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.utw-slider-wrapper {
+    width: 350px;
+}
+#utw-expiration-slider {
+    width: 100%;
+    margin: 0;
+}
+/* Styles for the datalist tick marks */
+.utw-slider-wrapper datalist {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0;
+    margin-top: 5px;
+    color: #50575e;
+}
+.utw-slider-value svg{
+    margin-bottom:-6px
+}
+/* Saved Message */
+.utw-section-save-wrapper {
+    padding: 10px 10px 10px 0;
+    width: 200px;
+    line-height: 1.3;
+    font-weight: 600;
+    display: inline-block;
+    vertical-align: middle;
+}
+.utw-unsaved-message {
+    display: none;
+    font-weight: 600;
+    display: none;
+    color: #d63638;
+}
+.utw-expiration-save-wrapper {
+   display: flex;
+   align-items: center;
+}
+#utw-min-cache-notice,
+#utw-expiration-save-btn-wrap th {
+    display: none;
+}
+#utw-expiration-save-btn-wrap td {
+    padding-left: 0;
+}

under-the-weather/tags/2.2/css/admin-styles.min.css

r3365104	r3371900
1		.nav-tab-wrapper{margin-bottom:20px}.under-the-weather-visual-reference-container{display:flex;gap:50px;align-items:flex-start;background:#fff;border:1px solid #999;border-radius:5px;padding:10px 24px 15px 37px;width:288px}.under-the-weather-visual-reference-item{text-align:center}.under-the-weather-visual-reference-item img{max-width:100px}.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555)}.under-the-weather-usage-report{display:flex;flex-direction:column;max-width:800px}.under-the-weather-chart-container{display:flex;justify-content:space-around;align-items:flex-end;height:250px;border:1px solid #c3c4c7;padding:10px 0;gap:10px;background:#f9f9f9;}.under-the-weather-chart-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;position:relative;height:100%}.under-the-weather-chart-bars{display:flex;justify-content:center;align-items:flex-end;height:100%;gap:5px}.under-the-weather-chart-bar{width:30px;background-color:#9ec2e6;border-radius:3px 3px 0 0;transition:height 0.3s ease-in-out;position:relative}.under-the-weather-chart-bar.api,.under-the-weather-legend-color.api{background-color:#f0ad4e}.under-the-weather-chart-bar.cache,.under-the-weather-legend-color.cache{background-color:#5cb85c}.under-the-weather-chart-bar.value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:bold;color:#333}.under-the-weather-chart-day-label{margin-top:12px;font-size:13px;color:#555}.under-the-weather-chart-legend{display:flex;justify-content:center;gap:20px;background:#f9f9f9;border:1px solid #c3c4c7;padding:8px;}.under-the-weather-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}.under-the-weather-legend-color{width:15px;height:15px;border-radius:3px}.under-the-weather-data-table{width:100%;}.under-the-weather-status-box{background:#f9f9f9;padding:15px;border-left:4px solid #0073aa;border-top:1px solid #c3c4c7;border-right:1px solid #c3c4c7;border-bottom:1px solid #c3c4c7;margin:15px 0;}.weather-widget-coordinate-finder-pre{background:#f1f1f1;border-radius:4px;padding:10px;white-space:pre-wrap;}.coordinate-finder-red-message{color:red;}
	1	.nav-tab-wrapper{margin-bottom:20px}.under-the-weather-visual-reference-container{display:flex;gap:50px;align-items:flex-start;background:#fff;border:1px solid #999;border-radius:5px;padding:10px 24px 15px 37px;width:288px}.under-the-weather-visual-reference-item{text-align:center}.under-the-weather-visual-reference-item img{max-width:100px}.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555)}.under-the-weather-usage-report{display:flex;flex-direction:column;max-width:800px}.under-the-weather-chart-container{display:flex;justify-content:space-around;align-items:flex-end;height:250px;border:1px solid #c3c4c7;padding:10px 0;gap:10px;background:#f9f9f9}.under-the-weather-chart-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;position:relative;height:100%}.under-the-weather-chart-bars{display:flex;justify-content:center;align-items:flex-end;height:100%;gap:5px}.under-the-weather-chart-bar{width:30px;background-color:#9ec2e6;border-radius:3px 3px 0 0;transition:height .3s ease-in-out;position:relative}.under-the-weather-chart-bar.api,.under-the-weather-legend-color.api{background-color:#f0ad4e}.under-the-weather-chart-bar.cache,.under-the-weather-legend-color.cache{background-color:#5cb85c}.under-the-weather-chart-bar .value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#333}.under-the-weather-chart-day-label{margin-top:12px;font-size:13px;color:#555}.under-the-weather-chart-legend{display:flex;justify-content:center;gap:20px;background:#f9f9f9;border:1px solid #c3c4c7;padding:8px}.under-the-weather-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}.under-the-weather-legend-color{width:15px;height:15px;border-radius:3px}.under-the-weather-data-table{width:100%}.under-the-weather-status-box{background:#f9f9f9;padding:15px;border:1px solid #c3c4c7;border-left:4px solid #0073aa;margin:15px 0}.weather-widget-coordinate-finder-pre{background:#f1f1f1;border-radius:4px;padding:10px;white-space:pre-wrap}.coordinate-finder-red-message{color:red}.utw-result-wrapper{margin-top:15px}.utw-slider-container{display:flex;align-items:center;margin-bottom:10px}.utw-slider-wrapper{width:350px}#utw-expiration-slider{width:100%;margin:0}.utw-slider-wrapper datalist{display:flex;justify-content:space-between;width:100%;padding:0;margin-top:5px;color:#50575e}.utw-slider-value svg{margin-bottom:-6px}.utw-section-save-wrapper{padding:10px 10px 10px 0;width:200px;line-height:1.3;font-weight:600;display:inline-block;vertical-align:middle}.utw-unsaved-message{font-weight:600;display:none;color:#d63638}.utw-expiration-save-wrapper{display:flex;align-items:center}#utw-expiration-save-btn-wrap th,#utw-min-cache-notice{display:none}#utw-expiration-save-btn-wrap td{padding-left:0}

under-the-weather/tags/2.2/css/under-the-weather.css

-                      r3342551
+                      r3371900
 /* Weather Widget Styling */
+/* --- Weather Widget Styling --- */
 .weather-widget {
     min-height: 285px;
     /*this setting can be removed. However, etting a minimum height helps to reduce browser repaints */
+    /*this setting can be removed. However, setting a minimum height helps to reduce browser repaints */
+}
 .weather-location-name {
     border-bottom: 2px solid #eee;
+    font-size: 18px;
+    font-size: 1.375em;
+    font-weight: bold;
     margin-bottom: 15px;
     padding-bottom: 7px;
 …
 .forecast-day-name {
     color: #444;
     font-size: 14px;
+    font-size: 0.65em;
     margin-bottom: 8px;
+}
 …
+}
 .forecast-temps {
     color: #fff;
     font-size: 6px;
+.forecast-temps .slash {
+    color: transparent;
+    font-size: 0.375em;
     /*Change the color and size to see the / between high and low */
+}
 …
 .forecast-temps .high {
     color: #000;
     font-size: 17px;
+    font-size: 1.06em; /* Converted from 17px */
     font-weight: 700;
+}
 .forecast-temps .low {
     color: #666;
     font-size: 14px;
+    color: #555;
+    font-size: 0.875em; /* Converted from 14px */
+}
 …
 .today-forecast-label {
     font-size: 18px;
+    font-size: 1.125em; /* Converted from 18px */
     margin: 6px 0 11px;
+}
 .today-forecast-temps .temps-wrapper {
     color: #fff;
     font-size: 9px;
+.today-forecast-temps .temps-wrapper .slash{
+    color: transparent;
+    font-size: 0.55em;
     /*Change the color and size to see the / between high and low */
+}
 …
 .today-forecast-temps .high {
     color: #000;
     font-size: 36px;
+    font-size: 2.25em; /* Converted from 36px */
     font-weight: 700;
+}
 .today-forecast-temps .low {
+    color: #555;
+    font-size: 1.625em; /* Converted from 26px */
+    font-weight: 400;
+}
+.today-forecast-temps .temp-unit {
     color: #666;
+    font-size: 26px;
+    font-weight: 400;
+}
+.today-forecast-temps .temp-unit {
+    color: #777;
+    font-size: 15px;
+    font-size: 0.94em; /* Converted from 15px */
     font-weight: 400;
     position: relative;
 …
 .weather-widget .wi {
     color: #666;
+    color: #555;
     font-size: 45px;
     line-height: 1;
 …
 .weather-extra-details {
-    border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     color: #555;
 …
     color: #999;
     font-size: .8em;
     margin-top: 15px;
+    margin-top: 10px;
     text-align: center;
+}
+    border-top: 1px solid #eee;
+    padding-top: 5px;
+}
+/* --- Weather Alert Styling --- */
+.weather-alert {
+    display: flex;
+    align-items: center; /* Vertically aligns the icon with the text block */
+    background-color: #f0f8ff;
+    border: 1px solid #add8e6;
+    border-radius: 4px;
+    padding: 10px 12px;
+    margin-bottom: 15px;
+    color: #333;
+}
+/* Left column for the icon */
+.weather-alert-icon-left {
+    margin-right: 12px;
+}
+/* Right column for the text messages */
+.weather-alert-message {
+    flex-grow: 1; /* Allows the message area to take up remaining space */
+}
+.weather-alert-event {
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+.weather-alert-sender {
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+/* Styles for the PNG icon */
+.weather-alert-icon-left .weather-alert-icon {
+    width: 32px;  /* Slightly larger for better visibility */
+    height: 32px;
+    vertical-align: middle;
+}
+/* Styles for the Font Icon */
+.weather-alert-icon-left .wi {
+    font-size: 2em; /* Make the icon a bit bigger */
+    line-height: 1;
+}
+/* --- Sunrise & Sunset Styling --- */
+.sunrise-sunset-container {
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    padding: 10px 5px;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 10px;
+    color: #555;
+}
+.sunrise-time, .sunset-time {
+    flex-basis: 50%;
+}
+.sunrise-sunset-label {
+    font-size: 0.8em;
+    margin: 0 0 0 10px;
+    display: inline;
+}
+.sunrise-sunset-value {
+    font-weight: bold;
+    font-size: 1.25em;
+}
+/* Icon sizing */
+.sunrise-sunset-container .wi {
+    font-size: 30px; /* Smaller icon size */
+    line-height: 1;
+    color: #f28c1f; /* A nice sun color. Delete this to match forecast icons */
+    display: inline;
+}
+.sunrise-sunset-container .sunrise-sunset-icon {
+    width: 25px; /* Visually Match the forecast day icon size */
+    height: 25px;
+    filter: drop-shadow(1px 2px 2px #888);
+    display: inline;
+}

under-the-weather/tags/2.2/css/under-the-weather.min.css

r3342551	r3371900
1		.weather-widget{min-height:285px}.weather-location-name{border-bottom:2px solid #eee;font-size:18px;margin-bottom:15px;padding-bottom:7px;text-align:center}.current-weather{align-items:center;border-bottom:2px solid #eee;display:flex;justify-content:space-around;margin-bottom:8px;padding:10px}.current-temp{font-size:2.5em;font-weight:700}.current-conditions{align-items:center;display:flex;flex-direction:column;font-size:17px;text-transform:capitalize}.current-conditions img{filter: drop-shadow(1px 2px 3px #555);height:50px;width:50px}.forecast-container{display:flex;justify-content:space-between;text-align:center}.forecast-day{flex:1;padding:5px}.forecast-day-name{color:#444;font-size:14px;margin-bottom:8px}.forecast-day img{filter: drop-shadow(1px 2px 3px #666);height:40px;width:40px}.forecast-temps{color:#fff;font-size:6px}.forecast-temps .high{color:#000;font-size:17px;font-weight:700}.forecast-temps .low{color:#666;font-size:14px}.today-forecast-temps{align-items:center;display:flex;flex-direction:column;justify-content:center}.today-forecast-label{font-size:18px;margin:6px 0 11px}.today-forecast-temps .temps-wrapper{color:#fff;font-size:9px}.today-forecast-temps .high{color:#000;font-size:36px;font-weight:700}.today-forecast-temps .low{color:#666;font-size:26px;font-weight:400}.today-forecast-temps .temp-unit{color:#777;font-size:15px;font-weight:400;position:relative;top:-8px}.weather-widget .wi{color:#666;font-size:45px;line-height:1;margin-bottom:5px}.forecast-day .wi{font-size:40px}.weather-extra-details{border-top:1px solid #eee;border-bottom:1px solid #eee;color:#555;display:flex;font-size:.9em;justify-content:space-between;margin-bottom:10px;padding:10px 5px}.wind-details{align-items:center;display:flex}.wind-details .wi{font-size:1.5em;line-height:1;margin-right:5px}.last-updated{color:#999;font-size:.8em;margin-top:15px;text-align:center}
	1	.weather-widget{min-height:285px}.weather-location-name{border-bottom:2px solid #eee;font-size:1.375em;font-weight:700;margin-bottom:15px;padding-bottom:7px;text-align:center}.current-weather{align-items:center;border-bottom:2px solid #eee;display:flex;justify-content:space-around;margin-bottom:8px;padding:10px}.current-temp{font-size:2.5em;font-weight:700}.current-conditions{align-items:center;display:flex;flex-direction:column;font-size:17px;text-transform:capitalize}.current-conditions img{filter:drop-shadow(1px 2px 3px #555);height:50px;width:50px}.forecast-container{display:flex;justify-content:space-between;text-align:center}.forecast-day{flex:1;padding:5px}.forecast-day-name{color:#444;font-size:.65em;margin-bottom:8px}.forecast-day img{filter:drop-shadow(1px 2px 3px #666);height:40px;width:40px}.forecast-temps .slash{color:transparent;font-size:.375em}.forecast-temps .high{color:#000;font-size:1.06em;font-weight:700}.forecast-temps .low{color:#555;font-size:.875em}.today-forecast-temps{align-items:center;display:flex;flex-direction:column;justify-content:center}.today-forecast-label{font-size:1.125em;margin:6px 0 11px}.today-forecast-temps .temps-wrapper .slash{color:transparent;font-size:.55em}.today-forecast-temps .high{color:#000;font-size:2.25em;font-weight:700}.today-forecast-temps .low{color:#555;font-size:1.625em;font-weight:400}.today-forecast-temps .temp-unit{color:#666;font-size:.94em;font-weight:400;position:relative;top:-8px}.weather-widget .wi{color:#555;font-size:45px;line-height:1;margin-bottom:5px}.forecast-day .wi{font-size:40px}.weather-extra-details{border-bottom:1px solid #eee;color:#555;display:flex;font-size:.9em;justify-content:space-between;margin-bottom:10px;padding:10px 5px}.wind-details{align-items:center;display:flex}.wind-details .wi{font-size:1.5em;line-height:1;margin-right:5px}.last-updated{color:#999;font-size:.8em;margin-top:10px;text-align:center;border-top:1px solid #eee;padding-top:5px}.weather-alert{display:flex;align-items:center;background-color:#f0f8ff;border:1px solid #add8e6;border-radius:4px;padding:10px 12px;margin-bottom:15px;color:#333}.weather-alert-icon-left{margin-right:12px}.weather-alert-message{flex-grow:1}.weather-alert-event{font-weight:700;margin-bottom:4px}.weather-alert-sender{font-size:.9em;opacity:.8}.weather-alert-icon-left .weather-alert-icon{width:32px;height:32px;vertical-align:middle}.weather-alert-icon-left .wi{font-size:2em;line-height:1}.sunrise-sunset-container{display:flex;justify-content:space-around;text-align:center;padding:10px 5px;border-bottom:1px solid #eee;margin-bottom:10px;color:#555}.sunrise-time,.sunset-time{flex-basis:50%}.sunrise-sunset-label{font-size:.8em;margin:0 0 0 10px;display:inline}.sunrise-sunset-value{font-weight:700;font-size:1.25em}.sunrise-sunset-container .wi{font-size:30px;line-height:1;color:#f28c1f;display:inline}.sunrise-sunset-container .sunrise-sunset-icon{width:25px;height:25px;filter:drop-shadow(1px 2px 2px #888);display:inline}

under-the-weather/tags/2.2/js/admin-geocoder.js

-                      r3365104
+                      r3371900
 // js/admin-geocoder.js
 document.addEventListener('DOMContentLoaded', function() {
+    // ===================================================================
+    // EXPIRATION SLIDER - Runs on all admin pages
+    // ===================================================================
+    // --- Logic to prepare the top save button for styling ---
+    const topSaveBtn = document.getElementById('utw-expiration-save-btn');
+    if (topSaveBtn) {
+        // Find the parent table cell (td) and table row (tr)
+        const parentTd = topSaveBtn.closest('td');
+        const parentTr = topSaveBtn.closest('tr');
+        if (parentTd && parentTr) {
+            // 1. Add an ID to the table row for easy CSS targeting
+            parentTr.id = 'utw-expiration-save-btn-wrap';
+            // 2. Find and remove the empty label cell (th)
+            const thLabel = parentTr.querySelector('th');
+            if (thLabel) {
+                thLabel.remove();
+            }
+            // 3. Add the colspan="2" attribute to the button's cell
+            parentTd.setAttribute('colspan', '2');
+        }
+    }
+    const expirationSlider = document.getElementById('utw-expiration-slider');
+    const expirationValueDisplay = document.getElementById('utw-expiration-value');
+    const unsavedChangesMessage = document.getElementById('utw-unsaved-changes');
+    const expirationSaveBtn = document.getElementById('utw-expiration-save-btn');
+    const minCacheNotice = document.getElementById('utw-min-cache-notice');
+    if (expirationSlider && expirationValueDisplay) {
+        const originalValue = expirationSlider.getAttribute('data-original-value');
+        // Update display value in real-time as slider moves
+        expirationSlider.addEventListener('input', function() {
+            // Show the special notice if the user drags the slider to 0
+            if (parseFloat(this.value) === 0) {
+                minCacheNotice.style.display = 'block';
+            } else {
+                minCacheNotice.style.display = 'none';
+            }
+            // Enforce minimum of 0.5
+            let value = parseFloat(this.value);
+            if (value < 0.5) {
+                value = 0.5;
+                this.value = 0.5;
+            }
+            expirationValueDisplay.textContent = value;
+            // Show/hide unsaved changes message based on whether value changed
+            if (unsavedChangesMessage) {
+                if (String(value) !== originalValue) {
+                    unsavedChangesMessage.style.display = 'inline';
+                } else {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            }
+        });
+        // Additional validation on change (when user releases the slider)
+        expirationSlider.addEventListener('change', function() {
+            let value = parseFloat(this.value);
+            if (value < 0.5) {
+                this.value = 0.5;
+                expirationValueDisplay.textContent = '0.5';
+            }
+        });
+        // Hide unsaved changes message when the upper save button is clicked
+        if (expirationSaveBtn) {
+            expirationSaveBtn.addEventListener('click', function() {
+                if (unsavedChangesMessage) {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            });
+        }
+        // Also hide message if the main (bottom) form submit button is clicked
+        const mainSubmitBtn = document.querySelector('input[type="submit"][name="submit"]');
+        if (mainSubmitBtn && mainSubmitBtn.id !== 'utw-expiration-save-btn') {
+            mainSubmitBtn.addEventListener('click', function() {
+                if (unsavedChangesMessage) {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            });
+        }
+    }
+    // ===================================================================
+    // GEOCODER TOOL - Only runs when the tool exists on the page
+    // ===================================================================
     const geocoderTool = document.getElementById('utw-geocoder-tool');
     if (!geocoderTool) {
+        return;
+    }
+        return; // Exit only AFTER checking for the expiration slider
+    }
     const locationInput = document.getElementById('utw-location-input');
     const findButton = document.getElementById('utw-find-coords');
 …
     // --- HISTORY FUNCTIONS ---
     let searchHistory = []; // Local cache of the history
+    let searchHistory = [];
     const MAX_HISTORY = 5;
 …
     function formatWidgetHtml(html) {
         return html
-            //.replace('<div class="weather-widget"', '<div class="weather-widget"\n    ')
             .replace(' data-lat=', '\n     data-lat=')
             .replace(' data-lon=', '\n     data-lon=')
 …
     function saveToHistoryAndServer(newItem) {
-        // Add to local history first
         searchHistory.unshift(newItem);
         searchHistory = searchHistory.slice(0, MAX_HISTORY);
+        // Update the UI immediately with local data
+        console.log('UTW: Updated history:', searchHistory);
+        console.log('UTW: Updated history:', searchHistory);
         renderHistory();
-        // Save to server
         fetch(ajaxurl, {
             method: 'POST',
 …
                         const locationName = result.display_name;
-                        // Generate the HTML div for the user
                         const widgetHtml = `<div class="weather-widget" data-lat="${lat}" data-lon="${lon}" data-location-name="${locationQuery}"></div>`;
 …
                         `;
-                        // Add to history and save to server
                         saveToHistoryAndServer({ locationName: locationQuery, widgetHtml });
-                        // Add click listener to the new copy button
                         document.getElementById('utw-copy-button').addEventListener('click', function() {
                             copyToClipboard(formatWidgetHtml(widgetHtml), this);
 …
     if (historyList) {
-        // Use event delegation for copy buttons in the history list
         historyList.addEventListener('click', function(event) {
             if (event.target.classList.contains('copy-history-btn')) {
 …
         });
-        // Load history from server on page load
         loadHistoryFromServer();
+    }
-    // Copy searches to clipboard
     function copyToClipboard(text, button) {
         if (navigator.clipboard && window.isSecureContext) {
 …
+    }
-    // Helper function to escape HTML for display in a <pre> tag
     function escapeHtml(unsafe) {
         return unsafe

under-the-weather/tags/2.2/js/under-the-weather.js

-                      r3369072
+                      r3371900
+// Validate Coordinates
+function validateCoordinates(lat, lon) {
+    const latitude = parseFloat(lat);
+    const longitude = parseFloat(lon);
+    return (latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180);
+}
+// Validate data
+function validateWeatherData(data) {
+    return data &&
+           data.current &&
+           data.daily &&
+           Array.isArray(data.daily) &&
+           data.daily.length > 0;
+}
+// Convert a DMS (Degrees, Minutes, Seconds) coordinate, or a DDM string to the desired Decimal Degrees (DD) format.
+// This frontend parsing serves as a helpful handler to catch malformed coordinates when possible.
+// Decimal Degrees coordinates should be used at all time (e.g., 34.1195, -118.3005).
+// The quotation marks included in DMS coordinates will break the HTML structure of the weather widget.
+// DMS coordinates (e.g., 34°07'10.2"N 118°18'01.8"W) should therefore be avoided.
+function parseCoordinate(coordString) {
+    if (!coordString || typeof coordString !== 'string') {
+        return null;
+    }
+    // 1. Clean the input
+    let str = coordString.trim();
+    if (str.endsWith(',')) {
+        str = str.slice(0, -1).trim();
+    }
+    // 2. Try to parse as DDM (Degrees Decimal Minutes)
+    const ddmRegex = /([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i;
+    let parts = str.match(ddmRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const hemisphere = parts[3].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes)) return null;
+        let decimal = degrees + (minutes / 60);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 3. Try to parse as DMS (Degrees, Minutes, Seconds)
+    const dmsRegex = /([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i;
+    parts = str.match(dmsRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const seconds = parseFloat(parts[3]);
+        const hemisphere = parts[4].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes) || isNaN(seconds)) return null;
+        let decimal = degrees + (minutes / 60) + (seconds / 3600);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 4. Try to parse as simple Decimal Degrees
+    const dd = parseFloat(str);
+    if (!isNaN(dd)) {
+        return dd;
+    }
+    // 5. If all formats fail
+    return null;
+}
+// Check webpage for Weather Widgets and load widget data.
 document.addEventListener('DOMContentLoaded', function() {
+    const widget = document.querySelector('.weather-widget');
+    if (!widget) {
+        return;
+    }
+    // 1. Find ALL weather widgets on the page
+    const weatherWidgets = document.querySelectorAll('.weather-widget');
+    // 2. If no widgets are found, do nothing.
+    if (weatherWidgets.length === 0) {
+        return;
+    }
+    // 3. Loop through each widget and load its data
+    weatherWidgets.forEach(widget => {
+        loadWeatherData(widget);
+    });
+});
+/**
+ * Fetches and displays weather data for a single widget element.
+ * @param {HTMLElement} widget The widget's div element.
+ */
+function loadWeatherData(widget) {
     const locationName = widget.dataset.locationName;
+    const unit = widget.dataset.unit ? widget.dataset.unit.toLowerCase() : 'imperial';
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    // Get the lat/lon from the data attributes
+    // Get the lat/lon from the data attributes
     let lat = widget.dataset.lat;
     let lon = widget.dataset.lon;
     // Attempt to parse/convert them (this handles DD, DDM, and DMS formats)
     const parsedLat = parseCoordinate(lat);
 …
     widget.innerHTML = '<div class="weather-loading">Loading weather data...</div>';
+    const unit = widget.dataset.unit ? widget.dataset.unit.toLowerCase() : 'imperial';
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
     const apiUrl = `/wp-json/under-the-weather/v1/forecast?lat=${lat}&lon=${lon}&location_name=${encodeURIComponent(locationName)}&unit=${unit}`;
 …
       widget.innerHTML = `<p>Unable to load weather data. Please try again later.</p>`;
     });
+});
+}
+// Validate Coordinates
+function validateCoordinates(lat, lon) {
+    const latitude = parseFloat(lat);
+    const longitude = parseFloat(lon);
+    return (latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180);
+}
+// Validate Weather Data
+function validateWeatherData(data) {
+    return data &&
+           data.current &&
+           data.daily &&
+           Array.isArray(data.daily) &&
+           data.daily.length > 0;
+}
+// Convert a DMS (Degrees, Minutes, Seconds) coordinate, or a DDM string to the desired Decimal Degrees (DD) format.
+// This frontend parsing serves as a helpful handler to catch malformed coordinates when possible.
+// Decimal Degrees coordinates should be used at all time (e.g., 34.1195, -118.3005).
+// The quotation marks included in DMS coordinates will break the HTML structure of the weather widget.
+// DMS coordinates (e.g., 34°07'10.2"N 118°18'01.8"W) should therefore be avoided.
+function parseCoordinate(coordString) {
+    if (!coordString || typeof coordString !== 'string') {
+        return null;
+    }
+    // 1. Clean the input
+    let str = coordString.trim();
+    if (str.endsWith(',')) {
+        str = str.slice(0, -1).trim();
+    }
+    // 2. Try to parse as DDM (Degrees Decimal Minutes)
+    const ddmRegex = /([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i;
+    let parts = str.match(ddmRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const hemisphere = parts[3].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes)) return null;
+        let decimal = degrees + (minutes / 60);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 3. Try to parse as DMS (Degrees, Minutes, Seconds)
+    const dmsRegex = /([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i;
+    parts = str.match(dmsRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const seconds = parseFloat(parts[3]);
+        const hemisphere = parts[4].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes) || isNaN(seconds)) return null;
+        let decimal = degrees + (minutes / 60) + (seconds / 3600);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 4. Try to parse as simple Decimal Degrees
+    const dd = parseFloat(str);
+    if (!isNaN(dd)) {
+        return dd;
+    }
+    // 5. If all formats fail
+    return null;
+}
+/**
+ * Selects a weather icon based on the alert event text.
+ * @param {string} eventText The text of the weather alert (e.g., "Tornado Warning").
+ * @returns {string} The corresponding Weather Icons class name.
+ */
+function getAlertIconClass(eventText) {
+    const text = eventText.toLowerCase();
+    // Catastrophic Events
+    if (text.includes('tornado')) return 'wi-tornado';
+    if (text.includes('hurricane')) return 'wi-hurricane-warning';
+    if (text.includes('tsunami')) return 'wi-tsunami';
+    if (text.includes('earthquake')) return 'wi-earthquake';
+    // Storms & Precipitation
+    if (text.includes('thunderstorm') || text.includes('lightning')) return 'wi-thunderstorm';
+    if (text.includes('gale')) return 'wi-gale-warning';
+    if (text.includes('hail')) return 'wi-hail';
+    if (text.includes('rain') || text.includes('showers') || text.includes('drizzle')) return 'wi-rain';
+    if (text.includes('flood')) return 'wi-flood';
+    // Winter Weather
+    if (text.includes('winter') || text.includes('snow') || text.includes('blizzard')) return 'wi-snow';
+    if (text.includes('ice') || text.includes('frost') || text.includes('freeze') || text.includes('cold') || text.includes('chill')) return 'wi-snowflake-cold';
+    // Temperature & Wind
+    if (text.includes('heat') || text.includes('hot')) return 'wi-hot';
+    if (text.includes('wind')) return 'wi-strong-wind';
+    // Atmospheric & Air Quality
+    if (text.includes('fog')) return 'wi-fog';
+    if (text.includes('fire')) return 'wi-fire';
+    if (text.includes('smoke')) return 'wi-smoke';
+    if (text.includes('smog') || text.includes('air quality')) return 'wi-smog';
+    if (text.includes('dust')) return 'wi-dust';
+    if (text.includes('sandstorm') || text.includes('sand')) return 'wi-sandstorm';
+    // A good fallback for any other severe weather
+    return 'wi-storm-warning';
+}
 function displayWeather(data, widget) {
     const { style_set, display_mode, forecast_days, show_details, show_timestamp, show_unit } = under_the_weather_settings;
+    const { style_set, display_mode, forecast_days, show_details, show_unit, show_alerts, show_timestamp, sunrise_sunset_format } = under_the_weather_settings;
     const locationName = widget.dataset.locationName || '';
 …
         return "a minute ago";
+    }
+    // START: New Sunrise/Sunset Logic
+    let sunriseSunsetHtml = '';
+    // Check if the setting is enabled and the data exists
+    if (sunrise_sunset_format !== 'off' && data.current.sunrise && data.current.sunset) {
+        // Define formatting options based on the setting
+        const timeOptions = {
+            timeZone: data.timezone,
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: sunrise_sunset_format === '12' // Use 12-hour format if setting is '12'
+        };
+        // Convert timestamps to readable times
+        const sunriseTime = new Date(data.current.sunrise * 1000).toLocaleTimeString('en-US', timeOptions);
+        const sunsetTime = new Date(data.current.sunset * 1000).toLocaleTimeString('en-US', timeOptions);
+        // Get icons based on the style set
+        let sunriseIcon = '';
+        let sunsetIcon = '';
+        if (style_set === 'weather_icons_font') {
+            sunriseIcon = '<i class="wi wi-sunrise"></i>';
+            sunsetIcon = '<i class="wi wi-sunset"></i>';
+        } else {
+            // Using generic day/night icons as a fallback for the default image set
+            const sunriseImgUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-sunrise.png`;
+            const sunsetImgUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-sunset.png`;
+            sunriseIcon = `<img src="${sunriseImgUrl}" class="sunrise-sunset-icon" alt="Sunrise Time">`;
+            sunsetIcon = `<img src="${sunsetImgUrl}" class="sunrise-sunset-icon" alt="Sunset Time">`;
+        }
+        sunriseSunsetHtml = `
+            <div class="sunrise-sunset-container">
+                <div class="sunrise-time">
+                    ${sunriseIcon}
+                    <div class="sunrise-sunset-label">Sunrise</div>
+                    <div class="sunrise-sunset-value">${sunriseTime}</div>
+                </div>
+                <div class="sunset-time">
+                    ${sunsetIcon}
+                    <div class="sunrise-sunset-label">Sunset</div>
+                    <div class="sunrise-sunset-value">${sunsetTime}</div>
+                </div>
+            </div>
+        `;
+    }
+    // END: New Sunrise/Sunset Logic
     let primaryDisplayHtml = '';
 …
                     <div class="today-forecast-label">Today</div>
                     <div class="temps-wrapper">
                       <span class="high">${highTemp}${tempSymbol}</span> / <span class="low">${lowTemp}${tempSymbol}</span>${displayUnitString}
+                      <span class="high">${highTemp}${tempSymbol}</span><span class="slash"> / </span><span class="low">${lowTemp}${tempSymbol}</span>${displayUnitString}
                     </div>
                 </div>
 …
         `;
+    }
+    let alertHtml = '';
+    if (show_alerts && data.alerts && data.alerts.length > 0) {
+        data.alerts.forEach(alert => {
+            // Handle custom alert icons
+            let iconHtml = '';// This will hold the icon's HTML
+            if (style_set === 'weather_icons_font') {
+                // Use the dynamic font icon logic
+                const iconClass = getAlertIconClass(alert.event);
+                iconHtml = `<i class="wi ${iconClass}"></i>`;
+            } else {
+                // Use the new PNG fallback icon
+                const imageUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-warning.png`;
+                iconHtml = `<img src="${imageUrl}" class="weather-alert-icon" alt="Weather Alert">`;
+            }
+            alertHtml += `
+                <div class="weather-alert">
+                    <div class="weather-alert-icon-left">
+                        ${iconHtml}
+                    </div>
+                    <div class="weather-alert-message">
+                        <div class="weather-alert-event">${alert.event}</div>
+                        <div class="weather-alert-sender">Issued by: ${alert.sender_name}</div>
+                    </div>
+                </div>
+            `;
+        });
+    }
     const forecastDaysToShow = parseInt(forecast_days, 10) || 5;
 …
             ${getIconHtml(day.weather[0])}
             <div class="forecast-temps">
               <span class="high">${highTemp}${tempSymbol}</span> / <span class="low">${lowTemp}${tempSymbol}</span>
+              <span class="high">${highTemp}${tempSymbol}</span><span class="slash"> / </span><span class="low">${lowTemp}${tempSymbol}</span>
             </div>
           </div>
 …
     const finalHtml = `
         <div class="weather-location-name">${locationName}</div>
+        ${primaryDisplayHtml}
+        ${alertHtml}
+        ${primaryDisplayHtml}
         ${extraDetailsHtml}
+        ${sunriseSunsetHtml}
         <div class="forecast-container">
             ${forecastHtml}

under-the-weather/tags/2.2/js/under-the-weather.min.js

r3369072	r3371900
1		function validateCoordinates(e,t){const a=parseFloat(e),n=parseFloat(t);return a>=-90&&a<=90&&n>=-180&&n<=180}function validateWeatherData(e){return e&&e.current&&e.daily&&Array.isArray(e.daily)&&e.daily.length>0}function parseCoordinate(e){if(!e\|\|"string"!=typeof e)return null;let t=e.trim();t.endsWith(",")&&(t=t.slice(0,-1).trim());let a=t.match(/([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i);if(a){const e=parseFloat(a[1]),t=parseFloat(a[2]),n=a[3].toUpperCase();if(isNaN(e)\|\|isNaN(t))return null;let r=e+t/60;return"S"!==n&&"W"!==n\|\|(r=-r),parseFloat(r.toFixed(4))}if(a=t.match(/([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i),a){const e=parseFloat(a[1]),t=parseFloat(a[2]),n=parseFloat(a[3]),r=a[4].toUpperCase();if(isNaN(e)\|\|isNaN(t)\|\|isNaN(n))return null;let s=e+t/60+n/3600;return"S"!==r&&"W"!==r\|\|(s=-s),parseFloat(s.toFixed(4))}const n=parseFloat(t);return isNaN(n)?null:n}function displayWeather(e,t){const{style_set:a,display_mode:n,forecast_days:r,show_details:s,show_timestamp:o,show_unit:i}=under_the_weather_settings,d=t.dataset.locationName\|\|"",l="°",c="metric"===e.units?"C":"F",u="metric"===e.units?"kph":"mph",h=i?`<span class="temp-unit">${c}</span>`:"";function p(e){return"weather_icons_font"===a?`<i class="wi ${e.icon_class}"></i>`:`<img src="${under_the_weather_plugin_url.url}images/default-weather-images-${e.icon}.png" alt="${e.description}">`}let w="";if("today_forecast"===n){const t=e.daily[0],a=Math.round(t.temp.max),n=Math.round(t.temp.min);w=`<div class="current-weather"><div class="today-forecast-temps"><div class="today-forecast-label">Today</div><div class="temps-wrapper"><span class="high">${a}${l}</span> / <span class="low">${n}${l}</span>${h}</div></div><div class="current-conditions">${p(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}else{const t=e.current;w=`<div class="current-weather"><div class="current-temp">${Math.round(t.temp)}${l}${h}</div><div class="current-conditions">${p(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}let f="";if(s){const t=Math.round(e.current.feels_like),a=Math.round(e.current.wind_speed),n=(v=e.current.wind_deg,["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"][Math.round(v/22.5)%16]),r=function(e){return`wi wi-wind from-${Math.round(e)}-deg`}(e.current.wind_deg);f=`<div class="weather-extra-details"><span>Feels like: ${t}${l}${h}</span><span class="wind-details"><i class="${r}"></i> ${n} ${a} ${u}</span></div>`}var v;const m=parseInt(r,10)\|\|5,$=e.daily.slice(1,1+m);let g="";$.forEach((e=>{const t=new Date(1e3*e.dt).toLocaleDateString("en-US",{weekday:"short"}),a=Math.round(e.temp.max),n=Math.round(e.temp.min);g+=`<div class="forecast-day"><div class="forecast-day-name">${t}</div>${p(e.weather[0])}<div class="forecast-temps"><span class="high">${a}${l}</span> / <span class="low">${n}${l}</span></div></div>`}));let N="";o&&e.fetched_at&&(N=`<div class="last-updated">Updated ${function(e){const t=(new Date).getTime()/1e3,a=Math.floor(t-e);if(a<60)return"just now";let n=a/31536e3;return n>1?Math.floor(n)+" years ago":(n=a/2592e3,n>1?Math.floor(n)+" months ago":(n=a/86400,n>1?Math.floor(n)+" days ago":(n=a/3600,n>1?Math.floor(n)+" hours ago":(n=a/60,n>1?Math.floor(n)+" minutes ago":"a minute ago"))))}(e.fetched_at)}</div>`);const _=`<div class="weather-location-name">${d}</div>${w}${f}<div class="forecast-container">${g}</div>${N}`;t.innerHTML=_}document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelector(".weather-widget");if(!e)return;const t=e.dataset.locationName,a=e.dataset.unit?e.dataset.unit.toLowerCase():"imperial",n=new AbortController,r=setTimeout((()=>n.abort()),1e4);let s=e.dataset.lat,o=e.dataset.lon;const i=parseCoordinate(s),d=parseCoordinate(o);if(null!==i&&(s=i),null!==d&&(o=d),!s\|\|!o\|\|!t)return void(e.innerHTML="Location data is missing.");if(!validateCoordinates(s,o))return void(e.innerHTML="Invalid location coordinates.");e.innerHTML='<div class="weather-loading">Loading weather data...</div>';const l=`/wp-json/under-the-weather/v1/forecast?lat=${s}&lon=${o}&location_name=${encodeURIComponent(t)}&unit=${a}`;fetch(l,{signal:n.signal,headers:{"X-WP-Nonce":under_the_weather_settings.nonce}}).then((t=>{if(clearTimeout(r),!t.ok)throw t.text().then((t=>{console.error("Error fetching weather data:",t),e.innerHTML="<p>Could not retrieve forecast. Server error.</p>"})),new Error("Network response was not ok");return t.json()})).then((t=>{if(!validateWeatherData(t))throw new Error("The weather data structure is invalid");displayWeather(t,e)})).catch((t=>{console.error("Network Error:",t),e.innerHTML="<p>Unable to load weather data. Please try again later.</p>"}))}));
	1	function loadWeatherData(e){const t=e.dataset.locationName;let n=e.dataset.lat,s=e.dataset.lon;const a=parseCoordinate(n),i=parseCoordinate(s);if(null!==a&&(n=a),null!==i&&(s=i),!n\|\|!s\|\|!t)return void(e.innerHTML="Location data is missing.");if(!validateCoordinates(n,s))return void(e.innerHTML="Invalid location coordinates.");e.innerHTML='<div class="weather-loading">Loading weather data...</div>';const r=e.dataset.unit?e.dataset.unit.toLowerCase():"imperial",l=new AbortController,o=setTimeout((()=>l.abort()),1e4),d=`/wp-json/under-the-weather/v1/forecast?lat=${n}&lon=${s}&location_name=${encodeURIComponent(t)}&unit=${r}`;fetch(d,{signal:l.signal,headers:{"X-WP-Nonce":under_the_weather_settings.nonce}}).then((t=>{if(clearTimeout(o),!t.ok)throw t.text().then((t=>{console.error("Error fetching weather data:",t),e.innerHTML="<p>Could not retrieve forecast. Server error.</p>"})),new Error("Network response was not ok");return t.json()})).then((t=>{if(!validateWeatherData(t))throw new Error("The weather data structure is invalid");displayWeather(t,e)})).catch((t=>{console.error("Network Error:",t),e.innerHTML="<p>Unable to load weather data. Please try again later.</p>"}))}function validateCoordinates(e,t){const n=parseFloat(e),s=parseFloat(t);return n>=-90&&n<=90&&s>=-180&&s<=180}function validateWeatherData(e){return e&&e.current&&e.daily&&Array.isArray(e.daily)&&e.daily.length>0}function parseCoordinate(e){if(!e\|\|"string"!=typeof e)return null;let t=e.trim();t.endsWith(",")&&(t=t.slice(0,-1).trim());let n=t.match(/([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i);if(n){const e=parseFloat(n[1]),t=parseFloat(n[2]),s=n[3].toUpperCase();if(isNaN(e)\|\|isNaN(t))return null;let a=e+t/60;return"S"!==s&&"W"!==s\|\|(a=-a),parseFloat(a.toFixed(4))}if(n=t.match(/([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i),n){const e=parseFloat(n[1]),t=parseFloat(n[2]),s=parseFloat(n[3]),a=n[4].toUpperCase();if(isNaN(e)\|\|isNaN(t)\|\|isNaN(s))return null;let i=e+t/60+s/3600;return"S"!==a&&"W"!==a\|\|(i=-i),parseFloat(i.toFixed(4))}const s=parseFloat(t);return isNaN(s)?null:s}function getAlertIconClass(e){const t=e.toLowerCase();return t.includes("tornado")?"wi-tornado":t.includes("hurricane")?"wi-hurricane-warning":t.includes("tsunami")?"wi-tsunami":t.includes("earthquake")?"wi-earthquake":t.includes("thunderstorm")\|\|t.includes("lightning")?"wi-thunderstorm":t.includes("gale")?"wi-gale-warning":t.includes("hail")?"wi-hail":t.includes("rain")\|\|t.includes("showers")\|\|t.includes("drizzle")?"wi-rain":t.includes("flood")?"wi-flood":t.includes("winter")\|\|t.includes("snow")\|\|t.includes("blizzard")?"wi-snow":t.includes("ice")\|\|t.includes("frost")\|\|t.includes("freeze")\|\|t.includes("cold")\|\|t.includes("chill")?"wi-snowflake-cold":t.includes("heat")\|\|t.includes("hot")?"wi-hot":t.includes("wind")?"wi-strong-wind":t.includes("fog")?"wi-fog":t.includes("fire")?"wi-fire":t.includes("smoke")?"wi-smoke":t.includes("smog")\|\|t.includes("air quality")?"wi-smog":t.includes("dust")?"wi-dust":t.includes("sandstorm")\|\|t.includes("sand")?"wi-sandstorm":"wi-storm-warning"}function displayWeather(e,t){const{style_set:n,display_mode:s,forecast_days:a,show_details:i,show_unit:r,show_alerts:l,show_timestamp:o,sunrise_sunset_format:d}=under_the_weather_settings,c=t.dataset.locationName\|\|"",u="°",h="metric"===e.units?"C":"F",w="metric"===e.units?"kph":"mph",p=r?`<span class="temp-unit">${h}</span>`:"";function m(e){return"weather_icons_font"===n?`<i class="wi ${e.icon_class}"></i>`:`<img src="${under_the_weather_plugin_url.url}images/default-weather-images-${e.icon}.png" alt="${e.description}">`}let v="";if("off"!==d&&e.current.sunrise&&e.current.sunset){const t={timeZone:e.timezone,hour:"numeric",minute:"2-digit",hour12:"12"===d},s=new Date(1e3e.current.sunrise).toLocaleTimeString("en-US",t),a=new Date(1e3e.current.sunset).toLocaleTimeString("en-US",t);let i="",r="";if("weather_icons_font"===n)i='<i class="wi wi-sunrise"></i>',r='<i class="wi wi-sunset"></i>';else{i=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-sunrise.png`}" class="sunrise-sunset-icon" alt="Sunrise Time">`,r=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-sunset.png`}" class="sunrise-sunset-icon" alt="Sunset Time">`}v=`<div class="sunrise-sunset-container"><div class="sunrise-time">${i}<div class="sunrise-sunset-label">Sunrise</div><div class="sunrise-sunset-value">${s}</div></div><div class="sunset-time">${r}<div class="sunrise-sunset-label">Sunset</div><div class="sunrise-sunset-value">${a}</div></div></div>`}let f="";if("today_forecast"===s){const t=e.daily[0],n=Math.round(t.temp.max),s=Math.round(t.temp.min);f=`<div class="current-weather"><div class="today-forecast-temps"><div class="today-forecast-label">Today</div><div class="temps-wrapper"> <span class="high">${n}${u}</span><span class="slash"> / </span><span class="low">${s}${u}</span>${p}</div></div><div class="current-conditions">${m(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}else{const t=e.current;f=`<div class="current-weather"><div class="current-temp">${Math.round(t.temp)}${u}${p}</div><div class="current-conditions">${m(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}let g="";if(i){const t=Math.round(e.current.feels_like),n=Math.round(e.current.wind_speed),s=($=e.current.wind_deg,["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"][Math.round($/22.5)%16]),a=function(e){return`wi wi-wind from-${Math.round(e)}-deg`}(e.current.wind_deg);g=`<div class="weather-extra-details"><span>Feels like: ${t}${u}${p}</span><span class="wind-details"><i class="${a}"></i> ${s} ${n} ${w}</span></div>`}var $;let _="";l&&e.alerts&&e.alerts.length>0&&e.alerts.forEach((e=>{let t="";if("weather_icons_font"===n){t=`<i class="wi ${getAlertIconClass(e.event)}"></i>`}else{t=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-warning.png`}" class="weather-alert-icon" alt="Weather Alert">`}_+=`\n\t\t\t\t<div class="weather-alert">\n\t\t\t\t\t<div class="weather-alert-icon-left">\n\t\t\t\t\t\t${t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="weather-alert-message">\n\t\t\t\t\t\t<div class="weather-alert-event">${e.event}</div>\n\t\t\t\t\t\t<div class="weather-alert-sender">Issued by: ${e.sender_name}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>`}));const N=parseInt(a,10)\|\|5,y=e.daily.slice(1,1+N);let S="";y.forEach((e=>{const t=new Date(1e3*e.dt).toLocaleDateString("en-US",{weekday:"short"}),n=Math.round(e.temp.max),s=Math.round(e.temp.min);S+=` <div class="forecast-day"><div class="forecast-day-name">${t}</div>${m(e.weather[0])}<div class="forecast-temps"> <span class="high">${n}${u}</span><span class="slash"> / </span><span class="low">${s}${u}</span></div> </div>`}));let M="";o&&e.fetched_at&&(M=`<div class="last-updated">Updated ${function(e){const t=(new Date).getTime()/1e3,n=Math.floor(t-e);if(n<60)return"just now";let s=n/31536e3;return s>1?Math.floor(s)+" years ago":(s=n/2592e3,s>1?Math.floor(s)+" months ago":(s=n/86400,s>1?Math.floor(s)+" days ago":(s=n/3600,s>1?Math.floor(s)+" hours ago":(s=n/60,s>1?Math.floor(s)+" minutes ago":"a minute ago"))))}(e.fetched_at)}</div>`);const W=`<div class="weather-location-name">${c}</div>${_}\n\t\t${f}${g}\n\t\t${v}<div class="forecast-container">${S}</div>${M}\n`;t.innerHTML=W}document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelectorAll(".weather-widget");0!==e.length&&e.forEach((e=>{loadWeatherData(e)}))}));

under-the-weather/tags/2.2/readme.txt

-                      r3369072
+                      r3371900
 Requires at least: 5.0
 Tested up to: 6.8
 Stable tag: 2.1
+Stable tag: 2.2
 Requires PHP: 7.2
 License: GPLv2 or later
 …
 * **Easy to Use:** Add weather widgets using the WordPress block editor or by placing a simple `<div>` with data attributes anywhere on your site.
 * **Server-Side Caching:** All API calls are cached on your server, dramatically reducing calls to the OpenWeather API and speeding up page loads for all users.
+* **Smart Caching:** In addition to a configurable cache duration, the plugin automatically resets the forecast after midnight in the location's timezone, ensuring your visitors always see the current day's weather.
 * **Visual Performance Report:** Monitor your site's API usage with a bar chart that displays a 7-day history of cached requests versus new calls to the OpenWeather API - a clear look at how the caching system is working to keep your site fast and your API calls low.
+* **Highly Customizable:** Use the detailed settings page to control everything from cache duration to the number of forecast days.
+* **Flexible Display:** Show either the current live weather or the high/low forecast for the current day.
+* **Customizable Display:** Use the main display to show either the current live weather or the high/low forecast for the current day, and set the number of days to include in the forecast ahead.
 * **Imperial & Metric Units:** Display weather in Fahrenheit/mph or Celsius/kph on a per-widget basis.
 * **Extra Details:** Optionally display "Feels Like" temperature and detailed wind information.
+* **Weather Alerts:** Display official severe weather alerts directly in the widget to keep visitors informed.
+* **Sunrise & Sunset Times:** Optionally show daily sunrise and sunset times, with 12-hour and 24-hour format options.
 * **Lightweight:** Enqueues assets only when needed and does not rely on heavy JavaScript libraries.
 * **Settings Page Coordinate Finder:** An easy-to-use tool on the settings page retrieves coordinates by location name and generates ready-to-use widget `<div>` code.
 …
 The plugin's JavaScript will automatically find this element and populate it with the forecast.
+**Using the Shortcode (Classic Editor & Widgets)**
+You can also display the weather by using the `[under_the_weather]` shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.
+**Available attributes:**
+* `lat`: (Required) The latitude for the forecast.
+* `lon`: (Required) The longitude for the forecast.
+* `location_name`: (Required) The name to display for the location.
+* `unit`: (Optional) The unit system. Accepts `metric` or `imperial`. Defaults to `imperial`.
+**Example:**
+[under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]
 == Configuration ==
 …
 **Cache Expiration Time:**
+This setting controls how long the weather data is stored on your server before fetching a new forecast.
+Use the slider to set the maximum time weather data is stored before fetching a new forecast, from 30 minutes to 8 hours.
+The plugin also features a **smart caching** system that automatically ensures the cache expires after midnight in the location's local timezone. This prevents showing a stale forecast from the previous day, regardless of your slider setting.
 For displaying live conditions (using the **Primary Display** or **Extra Details** options), a shorter cache time of 1 or 2 hours is recommended.
 For displaying only the daily high/low, a longer cache time of 3 or 6 hours is effective at reducing API calls.
+For displaying only the daily high/low, a longer cache time of 3 or 8 hours is effective at reducing API calls.
 **Widget Display & Style**
 …
 **Extra Details:**
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+**Sunrise & Sunset:** This setting allows you to display the local sunrise and sunset times for the location, which is useful for planning outdoor activities.  Choose to show the times in a 12-hour (e.g., 6:30 AM) or 24-hour (e.g., 18:30) format.
+**Weather Alerts:** When enabled, the widget will display any active severe weather alerts (e.g., thunderstorm warnings, flood advisories) issued by official authorities for the specified location.  This provides critical, at-a-glance information for your visitors.
 **Display Timestamp:**
 …
 No. To retrieve fresh weather data every time a widget page loads, you can uncheck "Enable Cache" under the plugin's advanced settings. The caching system provides a great benefit for reducing API hits, but turning off this function during your initial widget setup may be useful.
+= Will my website ever show yesterday's weather If I set a long cache time? =
+Cinderella's magic disappears at midnight and weather caches expire at midnight too. Visitors should never see a cache of the previous day's forecast.
+For example, if you set the cache expiration time to 8 hours and a weather cache is created at 10 p.m. on a Friday (using the weather location's time), that cache will expire at midnight, and someone visiting the site the next day at 5 a.m. will not see the previous day's cache even though fewer than 8 hours have passed.
+The plugin uses whichever expiration time is **shorter** to provide the most effective caching.  You control the maximum cache duration with the "Cache Expiration Time" slider. However, to ensure your visitors never see yesterday's weather, the plugin also calculates the time until midnight in the widget's local timezone. If the time until midnight is shorter than your slider setting, the cache will expire at midnight.
 = The weather isn't updating. Why? =
 …
 = Can I still use the manual div method if I prefer it? =
+Absolutely! The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly. The new block is simply an additional, more user-friendly option for those using the WordPress block editor.
+The `<div>` method is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
+Absolutely! While the **block** is the recommended, user-friendly method for the modern WordPress editor, the plugin fully supports traditional methods for maximum flexibility.
+You can use the `[under_the_weather]` shortcode to easily place the widget in the Classic Editor, text widgets, or with various page builders.
+Additionally, the manual `<div>` method still works perfectly. It is particularly useful for theme developers who need to integrate the widget directly into template files or dynamically populate its data from custom fields.
+The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly and is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
 = What coordinate format should I use? =
 …
 If you're unsure what coordinates to use, the **Coordinate Finder** tool is the best way to retrieve accurate coordinates in the correct format.
+= Where do the weather alerts come from? =
+The alerts are provided directly by the OpenWeather API, which sources them from official meteorological agencies in each country. This ensures the information is timely and authoritative.
 = What does the "Enable Rate Limiting" setting do? =
 …
 . The Coordinate Finder tool, which generates widget code from a location name.
 . The "Under The Weather Forecast" block in the WordPress editor.
+. The weather widget with Weather Alerts shown
+. The weather widget with Sunrise and Sunset times shown
 == Credits ==
 …
 == Changelog ==
+= 2.2 =
+* NEW: Introduced a `[under_the_weather]` shortcode to allow for easy placement of the weather widget in the Classic Editor, text widgets, and other page builders.
+* NEW: Added a display option to show the day's sunrise time and sunset time, helpful in  scheduling outdoor activities.
+* NEW: Added an option to display severe weather alerts from official authorities directly within the widget. This feature can be enabled on the plugin's settings page.
+* IMPROVEMENT: Incorporated clear warning icons for severe weather alerts.
+* IMPROVEMENT: The plugin can now handle multiple weather widgets on a single page
+* IMPROVEMENT: The front-end widget now loads its data asynchronously (AJAX). This improves perceived page load performance and allows multiple widgets on the same page to load their data independently.
+* IMPROVEMENT: The settings page now features a Cache Expiration Time slider that allows greater flexibility and provides users with a visual way to select how long cached weather should be saved.
+* NEW: Midnight expiration is now built into the Cache Expiration logic, so you never have to worry about displaying a cached copy of yesterday's forecast.
 = 2.1 =
 …
 = 2.0 =
 This version includes a "Under The Weather Forecast" block for the WordPress block editor.
+= 2.2 =
+This version introduces a new `[under_the_weather]` shortcode for easy widget placement and adds options to display severe weather alerts and daily sunrise/sunset times.

under-the-weather/tags/2.2/under-the-weather.php

-                      r3369072
+                      r3371900
  * Plugin URI:        https://www.sethcreates.com/plugins-for-wordpress/under-the-weather/
  * Description:       A lightweight weather widget that caches OpenWeather API data and offers multiple style options.
  * Version:           2.1
+ * Version:           2.2
  * Author:            Seth Smigelski
  * Author URI:        https://www.sethcreates.com/plugins-for-wordpress/
 …
 // Define a constant for the plugin version for easy maintenance.
+define( 'UNDER_THE_WEATHER_VERSION', '2.1.0' );
+define( 'UNDER_THE_WEATHER_VERSION', '2.2.0' );
+// Add the Under The Weather Forecast block.
 add_action('init', 'under_the_weather_register_widget_block');
 function under_the_weather_register_widget_block() {
     register_block_type( __DIR__ . '/build' );
+}
+// Add shortcode support.
+add_action( 'init', 'under_the_weather_register_shortcode' );
+function under_the_weather_register_shortcode() {
+    add_shortcode( 'under_the_weather', 'under_the_weather_shortcode_callback' );
+}
 …
     add_settings_section('under_the_weather_settings_section', __('API & Cache Settings', 'under-the-weather'), 'under_the_weather_settings_section_callback', $page_slug);
     add_settings_field('under_the_weather_api_key', __('OpenWeather API Key', 'under-the-weather'), 'under_the_weather_api_key_field_html', $page_slug, 'under_the_weather_settings_section');
+    add_settings_field('under_the_weather_expiration', __('Cache Expiration Time', 'under-the-weather'), 'under_the_weather_expiration_field_html', $page_slug, 'under_the_weather_settings_section');
+    add_settings_field('under_the_weather_expiration', __('Cache Expiration Time (Hours)', 'under-the-weather'), 'under_the_weather_expiration_field_html', $page_slug, 'under_the_weather_settings_section');
+    // Extra save button field (with empty label)
+    add_settings_field('under_the_weather_section_save', '', 'under_the_weather_save_button_callback', $page_slug, 'under_the_weather_settings_section');
     // Section for controlling widget display and style
 …
     add_settings_field('under_the_weather_display_mode', __('Primary Display', 'under-the-weather'), 'under_the_weather_display_mode_field_html', $page_slug, 'under_the_weather_display_section');
     add_settings_field('under_the_weather_forecast_days', __('Number of Forecast Days', 'under-the-weather'), 'under_the_weather_forecast_days_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_unit', __('Unit Symbol', 'under-the-weather'), 'under_the_weather_show_unit_field_html', $page_slug, 'under_the_weather_display_section');
     add_settings_field('under_the_weather_show_details', __('Extra Details', 'under-the-weather'), 'under_the_weather_show_details_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_unit', __('Display Unit Symbol', 'under-the-weather'), 'under_the_weather_show_unit_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_timestamp', __('Display Timestamp', 'under-the-weather'), 'under_the_weather_show_timestamp_field_html', $page_slug, 'under_the_weather_display_section');
+add_settings_field('under_the_weather_sunrise_sunset', __('Sunrise & Sunset', 'under-the-weather'), 'under_the_weather_sunrise_sunset_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_alerts', __('Weather Alerts', 'under-the-weather'), 'under_the_weather_show_alerts_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_timestamp', __('Timestamps', 'under-the-weather'), 'under_the_weather_show_timestamp_field_html', $page_slug, 'under_the_weather_display_section');
     // Section for "Advanced Settings"
 …
  * Sanitize and validate all settings before saving to the database.
  */
+// Sanitize the API key
 function under_the_weather_sanitize_settings($input) {
     $new_input = [];
+    // Sanitize the API key
     if (isset($input['api_key'])) {
         $api_key = sanitize_text_field($input['api_key']);
+        if (empty($api_key) || under_the_weather_validate_api_key($api_key)) {
+        if (empty($api_key)) {
+            $new_input['api_key'] = ''; // Allow clearing
+        } elseif (under_the_weather_validate_api_key($api_key)) {
             $new_input['api_key'] = $api_key;
         } else {
             add_settings_error('under_the_weather_settings', 'invalid_api_key',
                 __('Invalid API key format. Please check your OpenWeather API key.', 'under-the-weather'));
+            // Keep the old value if new one is invalid
+            $old_options = get_option('under_the_weather_settings');
+            $new_input['api_key'] = isset($old_options['api_key']) ? $old_options['api_key'] : '';
+        }
+    }
+    if (isset($input['expiration']) && in_array($input['expiration'], ['1','2','3','6'])) { $new_input['expiration'] = $input['expiration']; }
+    if (isset($input['style_set']) && in_array($input['style_set'], ['default_images', 'weather_icons_font'])) { $new_input['style_set'] = $input['style_set']; }
+    if (isset($input['display_mode']) && in_array($input['display_mode'], ['current', 'today_forecast'])) { $new_input['display_mode'] = $input['display_mode']; }
+    if (isset($input['forecast_days']) && in_array($input['forecast_days'], ['2','3','4','5','6'])) { $new_input['forecast_days'] = $input['forecast_days']; }
+    // sanitization for Rate Limit options
+    // Sanitize the expiration time from the range slider
+    if (isset($input['expiration']) && is_numeric($input['expiration'])) {
+        $expiration = floatval($input['expiration']);
+    // Ensure the value is within the allowed range (0.5 to 8)
+        if ($expiration >= 0.5 && $expiration <= 8) {
+            $new_input['expiration'] = $expiration;
+        } else {
+            // If out of range, enforce minimum of 0.5
+            $new_input['expiration'] = max(0.5, min(8, $expiration));
+            add_settings_error('under_the_weather_settings', 'expiration_adjusted',
+                __('Cache expiration time adjusted to minimum of 0.5 hours (30 minutes).', 'under-the-weather'), 'updated');
+        }
+    } else {
+        $new_input['expiration'] = 4; // Default to 4 if not numeric
+    }
+    // Sanitize the Rate Limit options
     $new_input['enable_rate_limit'] = isset($input['enable_rate_limit']) ? '1' : '0';
     if (isset($input['rate_limit_count']) && is_numeric($input['rate_limit_count'])) {
 …
+    }
+    // Sanitize the  Sunrise and Sunset preference with 12 hour time format and 24 hour time format
+    if (isset($input['sunrise_sunset']) && in_array($input['sunrise_sunset'], ['off', '12', '24'])) {
+        $new_input['sunrise_sunset'] = $input['sunrise_sunset'];
+    } else {
+        $new_input['sunrise_sunset'] = 'off';
+    }
+    // Sanitize the major display options
+    if (isset($input['style_set']) && in_array($input['style_set'], ['default_images', 'weather_icons_font'])) { $new_input['style_set'] = $input['style_set']; }
+    if (isset($input['display_mode']) && in_array($input['display_mode'], ['current', 'today_forecast'])) { $new_input['display_mode'] = $input['display_mode']; }
+    if (isset($input['forecast_days']) && in_array($input['forecast_days'], ['2','3','4','5','6'])) { $new_input['forecast_days'] = $input['forecast_days']; }
     $new_input['show_details'] = isset($input['show_details']) ? '1' : '0';
     $new_input['show_unit'] = isset($input['show_unit']) ? '1' : '0';
+    $new_input['show_alerts'] = isset($input['show_alerts']) ? '1' : '0';
     $new_input['show_timestamp'] = isset($input['show_timestamp']) ? '1' : '0';
     $new_input['enable_cache'] = isset($input['enable_cache']) ? '1' : '0';
 …
             <p><em><?php esc_html_e('Default Images', 'under-the-weather'); ?></em></p>
         </div>
         <div style="text-align: center;">
+        <div class="under-the-weather-visual-reference-item">
             <img src="<?php echo esc_url($plugin_assets_url . 'font-style-example.svg'); ?>" alt="Weather Icons Font Style Example">
             <p><em><?php esc_html_e('Weather Icons Font', 'under-the-weather'); ?></em></p>
 …
     $options = get_option('under_the_weather_settings'); $value = isset($options['api_key']) ? $options['api_key'] : ''; echo '<input type="text" name="under_the_weather_settings[api_key]" value="' . esc_attr($value) . '" class="regular-text" placeholder="' . esc_attr__('Enter your API key', 'under-the-weather') . '">';
+    }
+function under_the_weather_expiration_field_html() {
+    $options = get_option('under_the_weather_settings'); $value = isset($options['expiration']) ? $options['expiration'] : '2'; echo '<select name="under_the_weather_settings[expiration]"><option value="1" '.selected($value, '1', false).'>' . esc_html__('1 Hour', 'under-the-weather') . '</option><option value="2" '.selected($value, '2', false).'>' . esc_html__('2 Hours', 'under-the-weather') . '</option><option value="3" '.selected($value, '3', false).'>' . esc_html__('3 Hours', 'under-the-weather') . '</option><option value="6" '.selected($value, '6', false).'>' . esc_html__('6 Hours', 'under-the-weather') . '</option></select>';
+// Use a slider to set the cache expiration time. Default: 4 hours.
+function under_the_weather_expiration_field_html() {
+    $options = get_option('under_the_weather_settings');
+    $value = isset($options['expiration']) ? $options['expiration'] : '4';
+    ?>
+    <div class="utw-slider-container">
+        <div class="utw-slider-wrapper">
+            <input
+                type="range"
+                id="utw-expiration-slider"
+                name="under_the_weather_settings[expiration]"
+                value="<?php echo esc_attr($value); ?>"
+                min="0"
+                max="8"
+                step="0.5"
+                list="expiration-markers"
+                data-original-value="<?php echo esc_attr($value); ?>"
+            >
+            <datalist id="expiration-markers">
+                <option value="0" label="0"></option>
+                <option value="1"></option> <option value="2" label="2"></option>
+                <option value="3"></option> <option value="4" label="4"></option>
+                <option value="5"></option> <option value="6" label="6"></option>
+                <option value="7"></option> <option value="8" label="8"></option>
+            </datalist>
+        </div>
+    </div>
+    <div class="utw-expiration-display">
+            <span class="utw-slider-value">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path fill="#48484A" d="M128 44a96 96 0 1 0 96 96a96.11 96.11 0 0 0-96-96m0 168a72 72 0 1 1 72-72a72.08 72.08 0 0 1-72 72m36.49-112.49a12 12 0 0 1 0 17l-28 28a12 12 0 0 1-17-17l28-28a12 12 0 0 1 17 0M92 16a12 12 0 0 1 12-12h48a12 12 0 0 1 0 24h-48a12 12 0 0 1-12-12"/></svg> Cached weather will expire after <strong id="utw-expiration-value"><?php echo esc_html($value); ?></strong> hours.
+            </span>
+    </div>
+    <p id="utw-min-cache-notice" class="description">
+        <?php esc_html_e('Minimum cache time is 30 minutes. To disable caching, use the advanced settings below.', 'under-the-weather'); ?>
+    </p>
+    <?php
+}
+// Add an extra save settigns button, just below the expiration slider.
+function under_the_weather_save_button_callback() {
+    ?>
+    <div class="utw-section-save-wrapper">
+        <?php submit_button(
+            __('Save Settings', 'under-the-weather'),
+            'primary',
+            'submit',
+            false,
+            ['id' => 'utw-expiration-save-btn']
+        ); ?>
+    </div>
+    <div id="utw-unsaved-changes" class="utw-unsaved-message">
+            <?php esc_html_e('You have unsaved changes', 'under-the-weather'); ?>
+    </div>
+    <?php
+}
 function under_the_weather_style_set_field_html() {
 …
+}
 function under_the_weather_show_unit_field_html() {
+    $options = get_option('under_the_weather_settings'); $value = isset($options['show_unit']) ? $options['show_unit'] : '0'; echo "<input type='checkbox' name='under_the_weather_settings[show_unit]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show the temperature unit symbol (F or C) in the primary display.', 'under-the-weather');
+    $options = get_option('under_the_weather_settings'); $value = isset($options['show_unit']) ? $options['show_unit'] : '0'; echo "<input type='checkbox' name='under_the_weather_settings[show_unit]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show the temperature unit symbol (F or C) in the primary display.', 'under-the-weather');
+}
+function under_the_weather_show_alerts_field_html() {
+    $options = get_option('under_the_weather_settings');
+    // Default to '1' (checked) to make the new feature visible
+    $value = isset($options['show_alerts']) ? $options['show_alerts'] : '1';
+    echo "<input type='checkbox' name='under_the_weather_settings[show_alerts]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show active weather alerts from reporting authorities.', 'under-the-weather');
+}
+function under_the_weather_sunrise_sunset_field_html() {
+    $options = get_option('under_the_weather_settings');
+    $value = isset($options['sunrise_sunset']) ? $options['sunrise_sunset'] : 'off'; // Default to 'off'
+    ?>
+    <fieldset>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="off" <?php checked($value, 'off'); ?>> <?php esc_html_e('Off', 'under-the-weather'); ?></label><br>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="12" <?php checked($value, '12'); ?>> <?php esc_html_e('Show in 12-hour format (e.g., 6:30 PM)', 'under-the-weather'); ?></label><br>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="24" <?php checked($value, '24'); ?>> <?php esc_html_e('Show in 24-hour format (e.g., 18:30)', 'under-the-weather'); ?></label>
+    </fieldset>
+    <?php
+}
 function under_the_weather_show_timestamp_field_html() {
 …
             <?php esc_html_e('Find Coordinates', 'under-the-weather'); ?>
         </button>
         <div id="utw-result-wrapper" style="margin-top: 15px;">
+        <div id="utw-result-wrapper">
             </div>
     </div>
 …
 function under_the_weather_enqueue_assets() {
     $options = get_option('under_the_weather_settings');
+    if (empty($options)) return;
+    if (empty($options)) return;
+    // Register the main style so WordPress knows about it.
+    wp_register_style('under-the-weather-styles', plugins_url('css/under-the-weather.min.css', __FILE__), [], UNDER_THE_WEATHER_VERSION);
+    // Register dependent icon styles.
+    if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
+        wp_register_style('under-the-weather-icons', plugins_url('css/weather-icons.min.css', __FILE__), [], '2.0');
+        if (!empty($options['show_details'])) {
+            wp_register_style('under-the-weather-wind-icons', plugins_url('css/weather-icons-wind.min.css', __FILE__), [], '2.0');
+        }
+    }
+    // Conditionally ENQUEUE based on the global setting.
     if (!empty($options['enqueue_style'])) {
         wp_enqueue_style('under-the-weather-styles', plugins_url('css/under-the-weather.min.css', __FILE__), [], UNDER_THE_WEATHER_VERSION);
+         wp_enqueue_style('under-the-weather-styles');
         if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
             wp_enqueue_style('under-the-weather-icons', plugins_url('css/weather-icons.min.css', __FILE__), [], '2.0');
+            wp_enqueue_style('under-the-weather-icons');
             if (!empty($options['show_details'])) {
                 wp_enqueue_style('under-the-weather-wind-icons', plugins_url('css/weather-icons-wind.min.css', __FILE__), [], '2.0');
+                wp_enqueue_style('under-the-weather-wind-icons');
+            }
+        }
 …
         'forecast_days'  => isset($options['forecast_days']) ? intval($options['forecast_days']) : 5,
         'show_details'   => !empty($options['show_details']),
+        'show_alerts'    => !empty($options['show_alerts']),
+        'sunrise_sunset_format' => isset($options['sunrise_sunset']) ? $options['sunrise_sunset'] : 'off',
         'show_timestamp' => !empty($options['show_timestamp']),
         'show_unit'      => !empty($options['show_unit']),
 …
     wp_localize_script('under-the-weather-script', 'under_the_weather_plugin_url', $plugin_url_data);
+}
 // =============================================================================
 …
     $api_url = "https://api.openweathermap.org/data/3.0/onecall?lat={$lat}&lon={$lon}&appid={$api_key}&units={$unit}";
     //Check API Response
+    // Check API Response
     $response_body = under_the_weather_safe_api_call($api_url);
     if ($response_body === false) {
 …
+    }
+    $weather_data = json_decode($response_body);
+    $weather_data = json_decode($response_body);
     under_the_weather_update_usage_stats('api');
 …
             $weather_data->daily[array_search($day, $weather_data->daily)]->weather[0]->icon_class = under_the_weather_get_icon_class($day->weather[0]->icon);
+        }
+    }
+    if ($caching_enabled) {
+        set_transient($transient_key, $weather_data, $expiration_hours * HOUR_IN_SECONDS);
+    }
+    }
+    // Establish midnight cache expiration logic, so the previous day's weather is not shown from the cache
+    // Incorporate midnight cache expiration with timed cache expiration preference
+    // Add a 10-minute buffer to avoid caching the previous day's forecast at midnight due to service clock differences.
+    // This is like treating 12:10 a.m. as midnight as a precaution
+    if ($caching_enabled) {
+        // Enforce minimum cache time of 30 minutes
+        $expiration_hours = isset($options['expiration']) ? floatval($options['expiration']) : 4;
+        $expiration_hours = max(0.5, $expiration_hours);
+        $midnight_expiration_seconds = 0;
+        if (isset($weather_data->timezone) && is_string($weather_data->timezone)) {
+            try {
+                $timezone_obj = new DateTimeZone($weather_data->timezone);
+                $now = new DateTime('now', $timezone_obj);
+                $midnight = new DateTime('tomorrow midnight', $timezone_obj);
+                $seconds_until_midnight = $midnight->getTimestamp() - $now->getTimestamp();
+                $midnight_expiration_seconds = $seconds_until_midnight + (10 * 60);
+            } catch (Exception $e) {
+                under_the_weather_log('Invalid timezone from API: ' . $weather_data->timezone);
+                $midnight_expiration_seconds = 0;
+            }
+        }
+        // Calculate fixed duration
+        $fixed_duration_seconds = $expiration_hours * HOUR_IN_SECONDS;
+        // Use the shorter of: fixed duration or midnight expiration
+        if ($midnight_expiration_seconds > 0) {
+            $final_expiration_seconds = min($fixed_duration_seconds, $midnight_expiration_seconds);
+        } else {
+            $final_expiration_seconds = $fixed_duration_seconds;
+        }
+        // Final safety check: ensure at least 30 minutes
+        $final_expiration_seconds = max(1800, $final_expiration_seconds);
+        set_transient($transient_key, $weather_data, $final_expiration_seconds);
+    }
     return new WP_REST_Response($weather_data, 200);
+}
+/**
+ *
+ * Callback function for the [under_the_weather] shortcode.
+ * @param array $atts Shortcode attributes.
+ * @return string HTML output for the weather widget.
+ *
+ */
+function under_the_weather_shortcode_callback( $atts ) {
+    // 1. Define attributes and set default values.
+    $atts = shortcode_atts(
+        array(
+            'lat'              => '',
+            'lon'              => '',
+            'location_name'    => '',
+            'unit'             => 'imperial', // Default to imperial
+        ),
+        $atts,
+        'under_the_weather'
+    );
+    // 2. Validate that essential attributes are present.
+    if ( empty( $atts['lat'] ) || empty( $atts['lon'] ) || empty( $atts['location_name'] ) ) {
+        // Return an error message or an empty string if essential data is missing.
+        return '';
+    }
+    // 3. Enqueue the necessary scripts and styles.
+    // This ensures they are only loaded on pages where the shortcode is used.
+    wp_enqueue_style( 'under-the-weather-styles' );
+    // We also need to enqueue the icon styles if they are selected in the settings.
+    $options = get_option('under_the_weather_settings');
+    if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
+        wp_enqueue_style('under-the-weather-icons');
+        if (!empty($options['show_details'])) {
+            wp_enqueue_style('under-the-weather-wind-icons');
+        }
+    }
+    under_the_weather_load_scripts_manually();
+    // 4. Build and return the HTML div.
+    return sprintf(
+        '<div class="weather-widget" data-lat="%s" data-lon="%s" data-location-name="%s" data-unit="%s"></div>',
+        esc_attr( $atts['lat'] ),
+        esc_attr( $atts['lon'] ),
+        esc_attr( $atts['location_name'] ),
+        esc_attr( $atts['unit'] )
+    );
+}

under-the-weather/trunk/README.md

-                      r3369072
+                      r3371900
 * **Requires at least:** 5.0
 * **Tested up to:** 6.8
 * **Stable tag:** 2.1
+* **Stable tag:** 2.2
 * **Requires PHP:** 7.2
 * **License:** GPLv2 or later
 …
 * **Server-Side Caching:** All API calls are cached on your server, dramatically reducing calls to the OpenWeather API and speeding up page loads for all users.
 * **Visual Performance Report:** Monitor your site's API usage with a bar chart that displays a 7-day history of cached requests versus new calls to the OpenWeather API - a clear look at how the caching system is working to keep your site fast and your API calls low.
+* **Highly Customizable:** Use the detailed settings page to control everything from cache duration to the number of forecast days.
+* **Flexible Display:** Show either the current live weather or the high/low forecast for the current day.
+* **Customizable Display:** Use the main display to show either the current live weather or the high/low forecast for the current day, and set the number of days to include in the forecast ahead.
 * **Imperial & Metric Units:** Display weather in Fahrenheit/mph or Celsius/kph on a per-widget basis.
 * **Extra Details:** Optionally display "Feels Like" temperature and detailed wind information.
+* **Weather Alerts:** Display official severe weather alerts directly in the widget to keep visitors informed.
+* **Sunrise & Sunset Times:** Optionally show daily sunrise and sunset times, with 12-hour and 24-hour format options.
 * **Lightweight:** Enqueues assets only when needed and does not rely on heavy JavaScript libraries.
 * **Settings Page Coordinate Finder:** An easy-to-use tool on the settings page retrieves coordinates by location name and generates ready-to-use widget `<div>` code.
 …
 The plugin's JavaScript will automatically find this element and populate it with the forecast.
+### Using the Shortcode (Classic Editor & Widgets)
+You can also display the weather by using the `[under_the_weather]` shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.
+**Available attributes:**
+* `lat`: (Required) The latitude for the forecast.
+* `lon`: (Required) The longitude for the forecast.
+* `location_name`: (Required) The name to display for the location.
+* `unit`: (Optional) The unit system. Accepts `metric` or `imperial`. Defaults to `imperial`.
+**Example:**
+`[under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]`
 ---
 …
 **Cache Expiration Time:**
+This setting controls how long the weather data is stored on your server before fetching a new forecast.
+Use the slider to set the maximum time weather data is stored before fetching a new forecast, from 30 minutes to 8 hours.
+The plugin also features a **smart caching** system that automatically ensures the cache expires after midnight in the location's local timezone. This prevents showing a stale forecast from the previous day, regardless of your slider setting.
 For displaying live conditions (using the **Primary Display** or **Extra Details** options), a shorter cache time of 1 or 2 hours is recommended.
 For displaying only the daily high/low, a longer cache time of 3 or 6 hours is effective at reducing API calls.
+For displaying only the daily high/low, a longer cache time of 3 or 8 hours is effective at reducing API calls.
 **Widget Display & Style**
 …
 **Extra Details:**
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+**Sunrise & Sunset:** This setting allows you to display the local sunrise and sunset times for the location, which is useful for planning outdoor activities.  Choose to show the times in a 12-hour (e.g., 6:30 AM) or 24-hour (e.g., 18:30) format.
+**Weather Alerts:** When enabled, the widget will display any active severe weather alerts (e.g., thunderstorm warnings, flood advisories) issued by official authorities for the specified location.  This provides critical, at-a-glance information for your visitors.
 **Display Timestamp:**
 …
 No. To retrieve fresh weather data every time a widget page loads, you can uncheck "Enable Cache" under the plugin's advanced settings. The caching system provides a great benefit for reducing API hits, but turning off this function during your initial widget setup may be useful.
+### Will my website ever show yesterday's weather If I set a long cache time?
+Cinderella's magic disappears at midnight, and weather caches expire at midnight too. Visitors should never see a cache of the previous day's forecast.
+For example, if you set the cache expiration time to 8 hours and a weather cache is created at 10 p.m. on a Friday (using the weather location's time), that cache will expire at midnight, and someone visiting the site the next day at 5 a.m. will not see the previous day's cache even though fewer than 8 hours have passed.
+The plugin uses whichever expiration time is **shorter** to provide the most effective caching.  You control the maximum cache duration with the "Cache Expiration Time" slider. However, to ensure your visitors never see yesterday's weather, the plugin also calculates the time until midnight in the widget's local timezone. If the time until midnight is shorter than your slider setting, the cache will expire at midnight.
 ### The weather isn't updating. Why?
 …
 ### Can I still use the manual div method if I prefer it?
+Absolutely! The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly. The new block is simply an additional, more user-friendly option for those using the WordPress block editor.
+The `<div>` method is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
+Absolutely! While the **block** is the recommended, user-friendly method for the modern WordPress editor, the plugin fully supports traditional methods for maximum flexibility.
+You can use the `[under_the_weather]` shortcode to easily place the widget in the Classic Editor, text widgets, or with various page builders.
+Additionally, the manual `<div>` method still works perfectly. It is particularly useful for theme developers who need to integrate the widget directly into template files or dynamically populate its data from custom fields.
+The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly and is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
 ### What coordinate format should I use?
 …
 If you're unsure what coordinates to use, the **Coordinate Finder** tool is the best way to retrieve accurate coordinates in the correct format.
+### Where do the weather alerts come from?
+The alerts are provided directly by the OpenWeather API, which sources them from official meteorological agencies in each country. This ensures the information is timely and authoritative.
 ### What does the "Enable Rate Limiting" setting do?
 …
 _The weather widget displaying current conditions with default icons (in Celsius) and extra details enabled._
+![The weather widget with Weather Alerts shown](https://ps.w.org/under-the-weather/assets/screenshot-8.png)
+_The weather widget with Weather Alerts shown._
+![The weather widget with Sunrise and Sunset times shown](https://ps.w.org/under-the-weather/assets/screenshot-9.png)
+_The weather widget with Sunrise and Sunset times shown._
 ---
 …
 ## Changelog
+### 2.2
+* **NEW:** Introduced a `[under_the_weather]` shortcode to allow for easy placement of the weather widget in the Classic Editor, text widgets, and other page builders.
+* **NEW:** Added a display option to show the day's sunrise time and sunset time, helpful in  scheduling outdoor activities.
+* **NEW:** Added an option to display severe weather alerts from official authorities directly within the widget. This feature can be enabled on the plugin's settings page.
+* **IMPROVEMENT:** Incorporated clear warning icons for severe weather alerts.
+* **IMPROVEMENT:** The plugin can now handle multiple weather widgets on a single page
+* **IMPROVEMENT:** The front-end widget now loads its data asynchronously (AJAX). This improves perceived page load performance and allows multiple widgets on the same page to load their data independently.
+* **IMPROVEMENT:** The settings page now features a Cache Expiration Time slider that allows greater flexibility and provides users with a visual way to select how long cached weather should be saved.
+* **NEW:** Midnight expiration is now built into the Cache Expiration logic, so you never have to worry about displaying a cached copy of yesterday's forecast.
 ### 2.1
 * **NEW:** The block editor can now parse and automatically convert coordinates from common formats like DMS (Degrees, Minutes, Seconds) and DDM (Degrees, Decimal Minutes) into the required decimal format.
 …
 ### 2.0
 This version includes a "Under The Weather Forecast" block for the WordPress block editor.
+### 2.2
+This version introduces a new `[under_the_weather]` shortcode for easy widget placement and adds options to display severe weather alerts and daily sunrise/sunset times.

under-the-weather/trunk/build/block.json

r3369072	r3371900
3	3	"apiVersion": 3,
4	4	"name": "under-the-weather/widget",
5		"version": "2.1.0",
	5	"version": "2.2.0",
6	6	"title": "Under The Weather Forecast",
7	7	"category": "widgets",

under-the-weather/trunk/css/admin-styles.css

-                      r3365104
+                      r3371900
      max-width: 100px;
+}
+.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555);}
+/* Usage Report Chart Styling */
+.under-the-weather-visual-reference-default-image{
+    filter:drop-shadow(1px 2px 3px #555);
+}
+/* --- Usage Report Chart Styling --- */
 .under-the-weather-usage-report {
     display: flex;
 …
     margin: 15px 0;
+}
+/* --- Coordinate Finder --- */
 .weather-widget-coordinate-finder-pre{
      background: #f1f1f1;
 …
     color: red;
+}
+.utw-result-wrapper{
+    margin-top:15px
+}
+/* --- Slider Control Styling --- */
+.utw-slider-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.utw-slider-wrapper {
+    width: 350px;
+}
+#utw-expiration-slider {
+    width: 100%;
+    margin: 0;
+}
+/* Styles for the datalist tick marks */
+.utw-slider-wrapper datalist {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0;
+    margin-top: 5px;
+    color: #50575e;
+}
+.utw-slider-value svg{
+    margin-bottom:-6px
+}
+/* Saved Message */
+.utw-section-save-wrapper {
+    padding: 10px 10px 10px 0;
+    width: 200px;
+    line-height: 1.3;
+    font-weight: 600;
+    display: inline-block;
+    vertical-align: middle;
+}
+.utw-unsaved-message {
+    display: none;
+    font-weight: 600;
+    display: none;
+    color: #d63638;
+}
+.utw-expiration-save-wrapper {
+   display: flex;
+   align-items: center;
+}
+#utw-min-cache-notice,
+#utw-expiration-save-btn-wrap th {
+    display: none;
+}
+#utw-expiration-save-btn-wrap td {
+    padding-left: 0;
+}

under-the-weather/trunk/css/admin-styles.min.css

r3365104	r3371900
1		.nav-tab-wrapper{margin-bottom:20px}.under-the-weather-visual-reference-container{display:flex;gap:50px;align-items:flex-start;background:#fff;border:1px solid #999;border-radius:5px;padding:10px 24px 15px 37px;width:288px}.under-the-weather-visual-reference-item{text-align:center}.under-the-weather-visual-reference-item img{max-width:100px}.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555)}.under-the-weather-usage-report{display:flex;flex-direction:column;max-width:800px}.under-the-weather-chart-container{display:flex;justify-content:space-around;align-items:flex-end;height:250px;border:1px solid #c3c4c7;padding:10px 0;gap:10px;background:#f9f9f9;}.under-the-weather-chart-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;position:relative;height:100%}.under-the-weather-chart-bars{display:flex;justify-content:center;align-items:flex-end;height:100%;gap:5px}.under-the-weather-chart-bar{width:30px;background-color:#9ec2e6;border-radius:3px 3px 0 0;transition:height 0.3s ease-in-out;position:relative}.under-the-weather-chart-bar.api,.under-the-weather-legend-color.api{background-color:#f0ad4e}.under-the-weather-chart-bar.cache,.under-the-weather-legend-color.cache{background-color:#5cb85c}.under-the-weather-chart-bar.value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:bold;color:#333}.under-the-weather-chart-day-label{margin-top:12px;font-size:13px;color:#555}.under-the-weather-chart-legend{display:flex;justify-content:center;gap:20px;background:#f9f9f9;border:1px solid #c3c4c7;padding:8px;}.under-the-weather-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}.under-the-weather-legend-color{width:15px;height:15px;border-radius:3px}.under-the-weather-data-table{width:100%;}.under-the-weather-status-box{background:#f9f9f9;padding:15px;border-left:4px solid #0073aa;border-top:1px solid #c3c4c7;border-right:1px solid #c3c4c7;border-bottom:1px solid #c3c4c7;margin:15px 0;}.weather-widget-coordinate-finder-pre{background:#f1f1f1;border-radius:4px;padding:10px;white-space:pre-wrap;}.coordinate-finder-red-message{color:red;}
	1	.nav-tab-wrapper{margin-bottom:20px}.under-the-weather-visual-reference-container{display:flex;gap:50px;align-items:flex-start;background:#fff;border:1px solid #999;border-radius:5px;padding:10px 24px 15px 37px;width:288px}.under-the-weather-visual-reference-item{text-align:center}.under-the-weather-visual-reference-item img{max-width:100px}.under-the-weather-visual-reference-default-image{filter:drop-shadow(1px 2px 3px #555)}.under-the-weather-usage-report{display:flex;flex-direction:column;max-width:800px}.under-the-weather-chart-container{display:flex;justify-content:space-around;align-items:flex-end;height:250px;border:1px solid #c3c4c7;padding:10px 0;gap:10px;background:#f9f9f9}.under-the-weather-chart-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;position:relative;height:100%}.under-the-weather-chart-bars{display:flex;justify-content:center;align-items:flex-end;height:100%;gap:5px}.under-the-weather-chart-bar{width:30px;background-color:#9ec2e6;border-radius:3px 3px 0 0;transition:height .3s ease-in-out;position:relative}.under-the-weather-chart-bar.api,.under-the-weather-legend-color.api{background-color:#f0ad4e}.under-the-weather-chart-bar.cache,.under-the-weather-legend-color.cache{background-color:#5cb85c}.under-the-weather-chart-bar .value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#333}.under-the-weather-chart-day-label{margin-top:12px;font-size:13px;color:#555}.under-the-weather-chart-legend{display:flex;justify-content:center;gap:20px;background:#f9f9f9;border:1px solid #c3c4c7;padding:8px}.under-the-weather-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}.under-the-weather-legend-color{width:15px;height:15px;border-radius:3px}.under-the-weather-data-table{width:100%}.under-the-weather-status-box{background:#f9f9f9;padding:15px;border:1px solid #c3c4c7;border-left:4px solid #0073aa;margin:15px 0}.weather-widget-coordinate-finder-pre{background:#f1f1f1;border-radius:4px;padding:10px;white-space:pre-wrap}.coordinate-finder-red-message{color:red}.utw-result-wrapper{margin-top:15px}.utw-slider-container{display:flex;align-items:center;margin-bottom:10px}.utw-slider-wrapper{width:350px}#utw-expiration-slider{width:100%;margin:0}.utw-slider-wrapper datalist{display:flex;justify-content:space-between;width:100%;padding:0;margin-top:5px;color:#50575e}.utw-slider-value svg{margin-bottom:-6px}.utw-section-save-wrapper{padding:10px 10px 10px 0;width:200px;line-height:1.3;font-weight:600;display:inline-block;vertical-align:middle}.utw-unsaved-message{font-weight:600;display:none;color:#d63638}.utw-expiration-save-wrapper{display:flex;align-items:center}#utw-expiration-save-btn-wrap th,#utw-min-cache-notice{display:none}#utw-expiration-save-btn-wrap td{padding-left:0}

under-the-weather/trunk/css/under-the-weather.css

-                      r3342551
+                      r3371900
 /* Weather Widget Styling */
+/* --- Weather Widget Styling --- */
 .weather-widget {
     min-height: 285px;
     /*this setting can be removed. However, etting a minimum height helps to reduce browser repaints */
+    /*this setting can be removed. However, setting a minimum height helps to reduce browser repaints */
+}
 .weather-location-name {
     border-bottom: 2px solid #eee;
+    font-size: 18px;
+    font-size: 1.375em;
+    font-weight: bold;
     margin-bottom: 15px;
     padding-bottom: 7px;
 …
 .forecast-day-name {
     color: #444;
     font-size: 14px;
+    font-size: 0.65em;
     margin-bottom: 8px;
+}
 …
+}
 .forecast-temps {
     color: #fff;
     font-size: 6px;
+.forecast-temps .slash {
+    color: transparent;
+    font-size: 0.375em;
     /*Change the color and size to see the / between high and low */
+}
 …
 .forecast-temps .high {
     color: #000;
     font-size: 17px;
+    font-size: 1.06em; /* Converted from 17px */
     font-weight: 700;
+}
 .forecast-temps .low {
     color: #666;
     font-size: 14px;
+    color: #555;
+    font-size: 0.875em; /* Converted from 14px */
+}
 …
 .today-forecast-label {
     font-size: 18px;
+    font-size: 1.125em; /* Converted from 18px */
     margin: 6px 0 11px;
+}
 .today-forecast-temps .temps-wrapper {
     color: #fff;
     font-size: 9px;
+.today-forecast-temps .temps-wrapper .slash{
+    color: transparent;
+    font-size: 0.55em;
     /*Change the color and size to see the / between high and low */
+}
 …
 .today-forecast-temps .high {
     color: #000;
     font-size: 36px;
+    font-size: 2.25em; /* Converted from 36px */
     font-weight: 700;
+}
 .today-forecast-temps .low {
+    color: #555;
+    font-size: 1.625em; /* Converted from 26px */
+    font-weight: 400;
+}
+.today-forecast-temps .temp-unit {
     color: #666;
+    font-size: 26px;
+    font-weight: 400;
+}
+.today-forecast-temps .temp-unit {
+    color: #777;
+    font-size: 15px;
+    font-size: 0.94em; /* Converted from 15px */
     font-weight: 400;
     position: relative;
 …
 .weather-widget .wi {
     color: #666;
+    color: #555;
     font-size: 45px;
     line-height: 1;
 …
 .weather-extra-details {
-    border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     color: #555;
 …
     color: #999;
     font-size: .8em;
     margin-top: 15px;
+    margin-top: 10px;
     text-align: center;
+}
+    border-top: 1px solid #eee;
+    padding-top: 5px;
+}
+/* --- Weather Alert Styling --- */
+.weather-alert {
+    display: flex;
+    align-items: center; /* Vertically aligns the icon with the text block */
+    background-color: #f0f8ff;
+    border: 1px solid #add8e6;
+    border-radius: 4px;
+    padding: 10px 12px;
+    margin-bottom: 15px;
+    color: #333;
+}
+/* Left column for the icon */
+.weather-alert-icon-left {
+    margin-right: 12px;
+}
+/* Right column for the text messages */
+.weather-alert-message {
+    flex-grow: 1; /* Allows the message area to take up remaining space */
+}
+.weather-alert-event {
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+.weather-alert-sender {
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+/* Styles for the PNG icon */
+.weather-alert-icon-left .weather-alert-icon {
+    width: 32px;  /* Slightly larger for better visibility */
+    height: 32px;
+    vertical-align: middle;
+}
+/* Styles for the Font Icon */
+.weather-alert-icon-left .wi {
+    font-size: 2em; /* Make the icon a bit bigger */
+    line-height: 1;
+}
+/* --- Sunrise & Sunset Styling --- */
+.sunrise-sunset-container {
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    padding: 10px 5px;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 10px;
+    color: #555;
+}
+.sunrise-time, .sunset-time {
+    flex-basis: 50%;
+}
+.sunrise-sunset-label {
+    font-size: 0.8em;
+    margin: 0 0 0 10px;
+    display: inline;
+}
+.sunrise-sunset-value {
+    font-weight: bold;
+    font-size: 1.25em;
+}
+/* Icon sizing */
+.sunrise-sunset-container .wi {
+    font-size: 30px; /* Smaller icon size */
+    line-height: 1;
+    color: #f28c1f; /* A nice sun color. Delete this to match forecast icons */
+    display: inline;
+}
+.sunrise-sunset-container .sunrise-sunset-icon {
+    width: 25px; /* Visually Match the forecast day icon size */
+    height: 25px;
+    filter: drop-shadow(1px 2px 2px #888);
+    display: inline;
+}

under-the-weather/trunk/css/under-the-weather.min.css

r3342551	r3371900
1		.weather-widget{min-height:285px}.weather-location-name{border-bottom:2px solid #eee;font-size:18px;margin-bottom:15px;padding-bottom:7px;text-align:center}.current-weather{align-items:center;border-bottom:2px solid #eee;display:flex;justify-content:space-around;margin-bottom:8px;padding:10px}.current-temp{font-size:2.5em;font-weight:700}.current-conditions{align-items:center;display:flex;flex-direction:column;font-size:17px;text-transform:capitalize}.current-conditions img{filter: drop-shadow(1px 2px 3px #555);height:50px;width:50px}.forecast-container{display:flex;justify-content:space-between;text-align:center}.forecast-day{flex:1;padding:5px}.forecast-day-name{color:#444;font-size:14px;margin-bottom:8px}.forecast-day img{filter: drop-shadow(1px 2px 3px #666);height:40px;width:40px}.forecast-temps{color:#fff;font-size:6px}.forecast-temps .high{color:#000;font-size:17px;font-weight:700}.forecast-temps .low{color:#666;font-size:14px}.today-forecast-temps{align-items:center;display:flex;flex-direction:column;justify-content:center}.today-forecast-label{font-size:18px;margin:6px 0 11px}.today-forecast-temps .temps-wrapper{color:#fff;font-size:9px}.today-forecast-temps .high{color:#000;font-size:36px;font-weight:700}.today-forecast-temps .low{color:#666;font-size:26px;font-weight:400}.today-forecast-temps .temp-unit{color:#777;font-size:15px;font-weight:400;position:relative;top:-8px}.weather-widget .wi{color:#666;font-size:45px;line-height:1;margin-bottom:5px}.forecast-day .wi{font-size:40px}.weather-extra-details{border-top:1px solid #eee;border-bottom:1px solid #eee;color:#555;display:flex;font-size:.9em;justify-content:space-between;margin-bottom:10px;padding:10px 5px}.wind-details{align-items:center;display:flex}.wind-details .wi{font-size:1.5em;line-height:1;margin-right:5px}.last-updated{color:#999;font-size:.8em;margin-top:15px;text-align:center}
	1	.weather-widget{min-height:285px}.weather-location-name{border-bottom:2px solid #eee;font-size:1.375em;font-weight:700;margin-bottom:15px;padding-bottom:7px;text-align:center}.current-weather{align-items:center;border-bottom:2px solid #eee;display:flex;justify-content:space-around;margin-bottom:8px;padding:10px}.current-temp{font-size:2.5em;font-weight:700}.current-conditions{align-items:center;display:flex;flex-direction:column;font-size:17px;text-transform:capitalize}.current-conditions img{filter:drop-shadow(1px 2px 3px #555);height:50px;width:50px}.forecast-container{display:flex;justify-content:space-between;text-align:center}.forecast-day{flex:1;padding:5px}.forecast-day-name{color:#444;font-size:.65em;margin-bottom:8px}.forecast-day img{filter:drop-shadow(1px 2px 3px #666);height:40px;width:40px}.forecast-temps .slash{color:transparent;font-size:.375em}.forecast-temps .high{color:#000;font-size:1.06em;font-weight:700}.forecast-temps .low{color:#555;font-size:.875em}.today-forecast-temps{align-items:center;display:flex;flex-direction:column;justify-content:center}.today-forecast-label{font-size:1.125em;margin:6px 0 11px}.today-forecast-temps .temps-wrapper .slash{color:transparent;font-size:.55em}.today-forecast-temps .high{color:#000;font-size:2.25em;font-weight:700}.today-forecast-temps .low{color:#555;font-size:1.625em;font-weight:400}.today-forecast-temps .temp-unit{color:#666;font-size:.94em;font-weight:400;position:relative;top:-8px}.weather-widget .wi{color:#555;font-size:45px;line-height:1;margin-bottom:5px}.forecast-day .wi{font-size:40px}.weather-extra-details{border-bottom:1px solid #eee;color:#555;display:flex;font-size:.9em;justify-content:space-between;margin-bottom:10px;padding:10px 5px}.wind-details{align-items:center;display:flex}.wind-details .wi{font-size:1.5em;line-height:1;margin-right:5px}.last-updated{color:#999;font-size:.8em;margin-top:10px;text-align:center;border-top:1px solid #eee;padding-top:5px}.weather-alert{display:flex;align-items:center;background-color:#f0f8ff;border:1px solid #add8e6;border-radius:4px;padding:10px 12px;margin-bottom:15px;color:#333}.weather-alert-icon-left{margin-right:12px}.weather-alert-message{flex-grow:1}.weather-alert-event{font-weight:700;margin-bottom:4px}.weather-alert-sender{font-size:.9em;opacity:.8}.weather-alert-icon-left .weather-alert-icon{width:32px;height:32px;vertical-align:middle}.weather-alert-icon-left .wi{font-size:2em;line-height:1}.sunrise-sunset-container{display:flex;justify-content:space-around;text-align:center;padding:10px 5px;border-bottom:1px solid #eee;margin-bottom:10px;color:#555}.sunrise-time,.sunset-time{flex-basis:50%}.sunrise-sunset-label{font-size:.8em;margin:0 0 0 10px;display:inline}.sunrise-sunset-value{font-weight:700;font-size:1.25em}.sunrise-sunset-container .wi{font-size:30px;line-height:1;color:#f28c1f;display:inline}.sunrise-sunset-container .sunrise-sunset-icon{width:25px;height:25px;filter:drop-shadow(1px 2px 2px #888);display:inline}

under-the-weather/trunk/js/admin-geocoder.js

-                      r3365104
+                      r3371900
 // js/admin-geocoder.js
 document.addEventListener('DOMContentLoaded', function() {
+    // ===================================================================
+    // EXPIRATION SLIDER - Runs on all admin pages
+    // ===================================================================
+    // --- Logic to prepare the top save button for styling ---
+    const topSaveBtn = document.getElementById('utw-expiration-save-btn');
+    if (topSaveBtn) {
+        // Find the parent table cell (td) and table row (tr)
+        const parentTd = topSaveBtn.closest('td');
+        const parentTr = topSaveBtn.closest('tr');
+        if (parentTd && parentTr) {
+            // 1. Add an ID to the table row for easy CSS targeting
+            parentTr.id = 'utw-expiration-save-btn-wrap';
+            // 2. Find and remove the empty label cell (th)
+            const thLabel = parentTr.querySelector('th');
+            if (thLabel) {
+                thLabel.remove();
+            }
+            // 3. Add the colspan="2" attribute to the button's cell
+            parentTd.setAttribute('colspan', '2');
+        }
+    }
+    const expirationSlider = document.getElementById('utw-expiration-slider');
+    const expirationValueDisplay = document.getElementById('utw-expiration-value');
+    const unsavedChangesMessage = document.getElementById('utw-unsaved-changes');
+    const expirationSaveBtn = document.getElementById('utw-expiration-save-btn');
+    const minCacheNotice = document.getElementById('utw-min-cache-notice');
+    if (expirationSlider && expirationValueDisplay) {
+        const originalValue = expirationSlider.getAttribute('data-original-value');
+        // Update display value in real-time as slider moves
+        expirationSlider.addEventListener('input', function() {
+            // Show the special notice if the user drags the slider to 0
+            if (parseFloat(this.value) === 0) {
+                minCacheNotice.style.display = 'block';
+            } else {
+                minCacheNotice.style.display = 'none';
+            }
+            // Enforce minimum of 0.5
+            let value = parseFloat(this.value);
+            if (value < 0.5) {
+                value = 0.5;
+                this.value = 0.5;
+            }
+            expirationValueDisplay.textContent = value;
+            // Show/hide unsaved changes message based on whether value changed
+            if (unsavedChangesMessage) {
+                if (String(value) !== originalValue) {
+                    unsavedChangesMessage.style.display = 'inline';
+                } else {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            }
+        });
+        // Additional validation on change (when user releases the slider)
+        expirationSlider.addEventListener('change', function() {
+            let value = parseFloat(this.value);
+            if (value < 0.5) {
+                this.value = 0.5;
+                expirationValueDisplay.textContent = '0.5';
+            }
+        });
+        // Hide unsaved changes message when the upper save button is clicked
+        if (expirationSaveBtn) {
+            expirationSaveBtn.addEventListener('click', function() {
+                if (unsavedChangesMessage) {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            });
+        }
+        // Also hide message if the main (bottom) form submit button is clicked
+        const mainSubmitBtn = document.querySelector('input[type="submit"][name="submit"]');
+        if (mainSubmitBtn && mainSubmitBtn.id !== 'utw-expiration-save-btn') {
+            mainSubmitBtn.addEventListener('click', function() {
+                if (unsavedChangesMessage) {
+                    unsavedChangesMessage.style.display = 'none';
+                }
+            });
+        }
+    }
+    // ===================================================================
+    // GEOCODER TOOL - Only runs when the tool exists on the page
+    // ===================================================================
     const geocoderTool = document.getElementById('utw-geocoder-tool');
     if (!geocoderTool) {
+        return;
+    }
+        return; // Exit only AFTER checking for the expiration slider
+    }
     const locationInput = document.getElementById('utw-location-input');
     const findButton = document.getElementById('utw-find-coords');
 …
     // --- HISTORY FUNCTIONS ---
     let searchHistory = []; // Local cache of the history
+    let searchHistory = [];
     const MAX_HISTORY = 5;
 …
     function formatWidgetHtml(html) {
         return html
-            //.replace('<div class="weather-widget"', '<div class="weather-widget"\n    ')
             .replace(' data-lat=', '\n     data-lat=')
             .replace(' data-lon=', '\n     data-lon=')
 …
     function saveToHistoryAndServer(newItem) {
-        // Add to local history first
         searchHistory.unshift(newItem);
         searchHistory = searchHistory.slice(0, MAX_HISTORY);
+        // Update the UI immediately with local data
+        console.log('UTW: Updated history:', searchHistory);
+        console.log('UTW: Updated history:', searchHistory);
         renderHistory();
-        // Save to server
         fetch(ajaxurl, {
             method: 'POST',
 …
                         const locationName = result.display_name;
-                        // Generate the HTML div for the user
                         const widgetHtml = `<div class="weather-widget" data-lat="${lat}" data-lon="${lon}" data-location-name="${locationQuery}"></div>`;
 …
                         `;
-                        // Add to history and save to server
                         saveToHistoryAndServer({ locationName: locationQuery, widgetHtml });
-                        // Add click listener to the new copy button
                         document.getElementById('utw-copy-button').addEventListener('click', function() {
                             copyToClipboard(formatWidgetHtml(widgetHtml), this);
 …
     if (historyList) {
-        // Use event delegation for copy buttons in the history list
         historyList.addEventListener('click', function(event) {
             if (event.target.classList.contains('copy-history-btn')) {
 …
         });
-        // Load history from server on page load
         loadHistoryFromServer();
+    }
-    // Copy searches to clipboard
     function copyToClipboard(text, button) {
         if (navigator.clipboard && window.isSecureContext) {
 …
+    }
-    // Helper function to escape HTML for display in a <pre> tag
     function escapeHtml(unsafe) {
         return unsafe

under-the-weather/trunk/js/under-the-weather.js

-                      r3369072
+                      r3371900
+// Validate Coordinates
+function validateCoordinates(lat, lon) {
+    const latitude = parseFloat(lat);
+    const longitude = parseFloat(lon);
+    return (latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180);
+}
+// Validate data
+function validateWeatherData(data) {
+    return data &&
+           data.current &&
+           data.daily &&
+           Array.isArray(data.daily) &&
+           data.daily.length > 0;
+}
+// Convert a DMS (Degrees, Minutes, Seconds) coordinate, or a DDM string to the desired Decimal Degrees (DD) format.
+// This frontend parsing serves as a helpful handler to catch malformed coordinates when possible.
+// Decimal Degrees coordinates should be used at all time (e.g., 34.1195, -118.3005).
+// The quotation marks included in DMS coordinates will break the HTML structure of the weather widget.
+// DMS coordinates (e.g., 34°07'10.2"N 118°18'01.8"W) should therefore be avoided.
+function parseCoordinate(coordString) {
+    if (!coordString || typeof coordString !== 'string') {
+        return null;
+    }
+    // 1. Clean the input
+    let str = coordString.trim();
+    if (str.endsWith(',')) {
+        str = str.slice(0, -1).trim();
+    }
+    // 2. Try to parse as DDM (Degrees Decimal Minutes)
+    const ddmRegex = /([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i;
+    let parts = str.match(ddmRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const hemisphere = parts[3].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes)) return null;
+        let decimal = degrees + (minutes / 60);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 3. Try to parse as DMS (Degrees, Minutes, Seconds)
+    const dmsRegex = /([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i;
+    parts = str.match(dmsRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const seconds = parseFloat(parts[3]);
+        const hemisphere = parts[4].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes) || isNaN(seconds)) return null;
+        let decimal = degrees + (minutes / 60) + (seconds / 3600);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 4. Try to parse as simple Decimal Degrees
+    const dd = parseFloat(str);
+    if (!isNaN(dd)) {
+        return dd;
+    }
+    // 5. If all formats fail
+    return null;
+}
+// Check webpage for Weather Widgets and load widget data.
 document.addEventListener('DOMContentLoaded', function() {
+    const widget = document.querySelector('.weather-widget');
+    if (!widget) {
+        return;
+    }
+    // 1. Find ALL weather widgets on the page
+    const weatherWidgets = document.querySelectorAll('.weather-widget');
+    // 2. If no widgets are found, do nothing.
+    if (weatherWidgets.length === 0) {
+        return;
+    }
+    // 3. Loop through each widget and load its data
+    weatherWidgets.forEach(widget => {
+        loadWeatherData(widget);
+    });
+});
+/**
+ * Fetches and displays weather data for a single widget element.
+ * @param {HTMLElement} widget The widget's div element.
+ */
+function loadWeatherData(widget) {
     const locationName = widget.dataset.locationName;
+    const unit = widget.dataset.unit ? widget.dataset.unit.toLowerCase() : 'imperial';
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    // Get the lat/lon from the data attributes
+    // Get the lat/lon from the data attributes
     let lat = widget.dataset.lat;
     let lon = widget.dataset.lon;
     // Attempt to parse/convert them (this handles DD, DDM, and DMS formats)
     const parsedLat = parseCoordinate(lat);
 …
     widget.innerHTML = '<div class="weather-loading">Loading weather data...</div>';
+    const unit = widget.dataset.unit ? widget.dataset.unit.toLowerCase() : 'imperial';
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
     const apiUrl = `/wp-json/under-the-weather/v1/forecast?lat=${lat}&lon=${lon}&location_name=${encodeURIComponent(locationName)}&unit=${unit}`;
 …
       widget.innerHTML = `<p>Unable to load weather data. Please try again later.</p>`;
     });
+});
+}
+// Validate Coordinates
+function validateCoordinates(lat, lon) {
+    const latitude = parseFloat(lat);
+    const longitude = parseFloat(lon);
+    return (latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180);
+}
+// Validate Weather Data
+function validateWeatherData(data) {
+    return data &&
+           data.current &&
+           data.daily &&
+           Array.isArray(data.daily) &&
+           data.daily.length > 0;
+}
+// Convert a DMS (Degrees, Minutes, Seconds) coordinate, or a DDM string to the desired Decimal Degrees (DD) format.
+// This frontend parsing serves as a helpful handler to catch malformed coordinates when possible.
+// Decimal Degrees coordinates should be used at all time (e.g., 34.1195, -118.3005).
+// The quotation marks included in DMS coordinates will break the HTML structure of the weather widget.
+// DMS coordinates (e.g., 34°07'10.2"N 118°18'01.8"W) should therefore be avoided.
+function parseCoordinate(coordString) {
+    if (!coordString || typeof coordString !== 'string') {
+        return null;
+    }
+    // 1. Clean the input
+    let str = coordString.trim();
+    if (str.endsWith(',')) {
+        str = str.slice(0, -1).trim();
+    }
+    // 2. Try to parse as DDM (Degrees Decimal Minutes)
+    const ddmRegex = /([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i;
+    let parts = str.match(ddmRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const hemisphere = parts[3].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes)) return null;
+        let decimal = degrees + (minutes / 60);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 3. Try to parse as DMS (Degrees, Minutes, Seconds)
+    const dmsRegex = /([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i;
+    parts = str.match(dmsRegex);
+    if (parts) {
+        const degrees = parseFloat(parts[1]);
+        const minutes = parseFloat(parts[2]);
+        const seconds = parseFloat(parts[3]);
+        const hemisphere = parts[4].toUpperCase();
+        if (isNaN(degrees) || isNaN(minutes) || isNaN(seconds)) return null;
+        let decimal = degrees + (minutes / 60) + (seconds / 3600);
+        if (hemisphere === 'S' || hemisphere === 'W') decimal = -decimal;
+        return parseFloat(decimal.toFixed(4));
+    }
+    // 4. Try to parse as simple Decimal Degrees
+    const dd = parseFloat(str);
+    if (!isNaN(dd)) {
+        return dd;
+    }
+    // 5. If all formats fail
+    return null;
+}
+/**
+ * Selects a weather icon based on the alert event text.
+ * @param {string} eventText The text of the weather alert (e.g., "Tornado Warning").
+ * @returns {string} The corresponding Weather Icons class name.
+ */
+function getAlertIconClass(eventText) {
+    const text = eventText.toLowerCase();
+    // Catastrophic Events
+    if (text.includes('tornado')) return 'wi-tornado';
+    if (text.includes('hurricane')) return 'wi-hurricane-warning';
+    if (text.includes('tsunami')) return 'wi-tsunami';
+    if (text.includes('earthquake')) return 'wi-earthquake';
+    // Storms & Precipitation
+    if (text.includes('thunderstorm') || text.includes('lightning')) return 'wi-thunderstorm';
+    if (text.includes('gale')) return 'wi-gale-warning';
+    if (text.includes('hail')) return 'wi-hail';
+    if (text.includes('rain') || text.includes('showers') || text.includes('drizzle')) return 'wi-rain';
+    if (text.includes('flood')) return 'wi-flood';
+    // Winter Weather
+    if (text.includes('winter') || text.includes('snow') || text.includes('blizzard')) return 'wi-snow';
+    if (text.includes('ice') || text.includes('frost') || text.includes('freeze') || text.includes('cold') || text.includes('chill')) return 'wi-snowflake-cold';
+    // Temperature & Wind
+    if (text.includes('heat') || text.includes('hot')) return 'wi-hot';
+    if (text.includes('wind')) return 'wi-strong-wind';
+    // Atmospheric & Air Quality
+    if (text.includes('fog')) return 'wi-fog';
+    if (text.includes('fire')) return 'wi-fire';
+    if (text.includes('smoke')) return 'wi-smoke';
+    if (text.includes('smog') || text.includes('air quality')) return 'wi-smog';
+    if (text.includes('dust')) return 'wi-dust';
+    if (text.includes('sandstorm') || text.includes('sand')) return 'wi-sandstorm';
+    // A good fallback for any other severe weather
+    return 'wi-storm-warning';
+}
 function displayWeather(data, widget) {
     const { style_set, display_mode, forecast_days, show_details, show_timestamp, show_unit } = under_the_weather_settings;
+    const { style_set, display_mode, forecast_days, show_details, show_unit, show_alerts, show_timestamp, sunrise_sunset_format } = under_the_weather_settings;
     const locationName = widget.dataset.locationName || '';
 …
         return "a minute ago";
+    }
+    // START: New Sunrise/Sunset Logic
+    let sunriseSunsetHtml = '';
+    // Check if the setting is enabled and the data exists
+    if (sunrise_sunset_format !== 'off' && data.current.sunrise && data.current.sunset) {
+        // Define formatting options based on the setting
+        const timeOptions = {
+            timeZone: data.timezone,
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: sunrise_sunset_format === '12' // Use 12-hour format if setting is '12'
+        };
+        // Convert timestamps to readable times
+        const sunriseTime = new Date(data.current.sunrise * 1000).toLocaleTimeString('en-US', timeOptions);
+        const sunsetTime = new Date(data.current.sunset * 1000).toLocaleTimeString('en-US', timeOptions);
+        // Get icons based on the style set
+        let sunriseIcon = '';
+        let sunsetIcon = '';
+        if (style_set === 'weather_icons_font') {
+            sunriseIcon = '<i class="wi wi-sunrise"></i>';
+            sunsetIcon = '<i class="wi wi-sunset"></i>';
+        } else {
+            // Using generic day/night icons as a fallback for the default image set
+            const sunriseImgUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-sunrise.png`;
+            const sunsetImgUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-sunset.png`;
+            sunriseIcon = `<img src="${sunriseImgUrl}" class="sunrise-sunset-icon" alt="Sunrise Time">`;
+            sunsetIcon = `<img src="${sunsetImgUrl}" class="sunrise-sunset-icon" alt="Sunset Time">`;
+        }
+        sunriseSunsetHtml = `
+            <div class="sunrise-sunset-container">
+                <div class="sunrise-time">
+                    ${sunriseIcon}
+                    <div class="sunrise-sunset-label">Sunrise</div>
+                    <div class="sunrise-sunset-value">${sunriseTime}</div>
+                </div>
+                <div class="sunset-time">
+                    ${sunsetIcon}
+                    <div class="sunrise-sunset-label">Sunset</div>
+                    <div class="sunrise-sunset-value">${sunsetTime}</div>
+                </div>
+            </div>
+        `;
+    }
+    // END: New Sunrise/Sunset Logic
     let primaryDisplayHtml = '';
 …
                     <div class="today-forecast-label">Today</div>
                     <div class="temps-wrapper">
                       <span class="high">${highTemp}${tempSymbol}</span> / <span class="low">${lowTemp}${tempSymbol}</span>${displayUnitString}
+                      <span class="high">${highTemp}${tempSymbol}</span><span class="slash"> / </span><span class="low">${lowTemp}${tempSymbol}</span>${displayUnitString}
                     </div>
                 </div>
 …
         `;
+    }
+    let alertHtml = '';
+    if (show_alerts && data.alerts && data.alerts.length > 0) {
+        data.alerts.forEach(alert => {
+            // Handle custom alert icons
+            let iconHtml = '';// This will hold the icon's HTML
+            if (style_set === 'weather_icons_font') {
+                // Use the dynamic font icon logic
+                const iconClass = getAlertIconClass(alert.event);
+                iconHtml = `<i class="wi ${iconClass}"></i>`;
+            } else {
+                // Use the new PNG fallback icon
+                const imageUrl = `${under_the_weather_plugin_url.url}images/seths--weather-images-warning.png`;
+                iconHtml = `<img src="${imageUrl}" class="weather-alert-icon" alt="Weather Alert">`;
+            }
+            alertHtml += `
+                <div class="weather-alert">
+                    <div class="weather-alert-icon-left">
+                        ${iconHtml}
+                    </div>
+                    <div class="weather-alert-message">
+                        <div class="weather-alert-event">${alert.event}</div>
+                        <div class="weather-alert-sender">Issued by: ${alert.sender_name}</div>
+                    </div>
+                </div>
+            `;
+        });
+    }
     const forecastDaysToShow = parseInt(forecast_days, 10) || 5;
 …
             ${getIconHtml(day.weather[0])}
             <div class="forecast-temps">
               <span class="high">${highTemp}${tempSymbol}</span> / <span class="low">${lowTemp}${tempSymbol}</span>
+              <span class="high">${highTemp}${tempSymbol}</span><span class="slash"> / </span><span class="low">${lowTemp}${tempSymbol}</span>
             </div>
           </div>
 …
     const finalHtml = `
         <div class="weather-location-name">${locationName}</div>
+        ${primaryDisplayHtml}
+        ${alertHtml}
+        ${primaryDisplayHtml}
         ${extraDetailsHtml}
+        ${sunriseSunsetHtml}
         <div class="forecast-container">
             ${forecastHtml}

under-the-weather/trunk/js/under-the-weather.min.js

r3369072	r3371900
1		function validateCoordinates(e,t){const a=parseFloat(e),n=parseFloat(t);return a>=-90&&a<=90&&n>=-180&&n<=180}function validateWeatherData(e){return e&&e.current&&e.daily&&Array.isArray(e.daily)&&e.daily.length>0}function parseCoordinate(e){if(!e\|\|"string"!=typeof e)return null;let t=e.trim();t.endsWith(",")&&(t=t.slice(0,-1).trim());let a=t.match(/([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i);if(a){const e=parseFloat(a[1]),t=parseFloat(a[2]),n=a[3].toUpperCase();if(isNaN(e)\|\|isNaN(t))return null;let r=e+t/60;return"S"!==n&&"W"!==n\|\|(r=-r),parseFloat(r.toFixed(4))}if(a=t.match(/([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i),a){const e=parseFloat(a[1]),t=parseFloat(a[2]),n=parseFloat(a[3]),r=a[4].toUpperCase();if(isNaN(e)\|\|isNaN(t)\|\|isNaN(n))return null;let s=e+t/60+n/3600;return"S"!==r&&"W"!==r\|\|(s=-s),parseFloat(s.toFixed(4))}const n=parseFloat(t);return isNaN(n)?null:n}function displayWeather(e,t){const{style_set:a,display_mode:n,forecast_days:r,show_details:s,show_timestamp:o,show_unit:i}=under_the_weather_settings,d=t.dataset.locationName\|\|"",l="°",c="metric"===e.units?"C":"F",u="metric"===e.units?"kph":"mph",h=i?`<span class="temp-unit">${c}</span>`:"";function p(e){return"weather_icons_font"===a?`<i class="wi ${e.icon_class}"></i>`:`<img src="${under_the_weather_plugin_url.url}images/default-weather-images-${e.icon}.png" alt="${e.description}">`}let w="";if("today_forecast"===n){const t=e.daily[0],a=Math.round(t.temp.max),n=Math.round(t.temp.min);w=`<div class="current-weather"><div class="today-forecast-temps"><div class="today-forecast-label">Today</div><div class="temps-wrapper"><span class="high">${a}${l}</span> / <span class="low">${n}${l}</span>${h}</div></div><div class="current-conditions">${p(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}else{const t=e.current;w=`<div class="current-weather"><div class="current-temp">${Math.round(t.temp)}${l}${h}</div><div class="current-conditions">${p(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}let f="";if(s){const t=Math.round(e.current.feels_like),a=Math.round(e.current.wind_speed),n=(v=e.current.wind_deg,["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"][Math.round(v/22.5)%16]),r=function(e){return`wi wi-wind from-${Math.round(e)}-deg`}(e.current.wind_deg);f=`<div class="weather-extra-details"><span>Feels like: ${t}${l}${h}</span><span class="wind-details"><i class="${r}"></i> ${n} ${a} ${u}</span></div>`}var v;const m=parseInt(r,10)\|\|5,$=e.daily.slice(1,1+m);let g="";$.forEach((e=>{const t=new Date(1e3*e.dt).toLocaleDateString("en-US",{weekday:"short"}),a=Math.round(e.temp.max),n=Math.round(e.temp.min);g+=`<div class="forecast-day"><div class="forecast-day-name">${t}</div>${p(e.weather[0])}<div class="forecast-temps"><span class="high">${a}${l}</span> / <span class="low">${n}${l}</span></div></div>`}));let N="";o&&e.fetched_at&&(N=`<div class="last-updated">Updated ${function(e){const t=(new Date).getTime()/1e3,a=Math.floor(t-e);if(a<60)return"just now";let n=a/31536e3;return n>1?Math.floor(n)+" years ago":(n=a/2592e3,n>1?Math.floor(n)+" months ago":(n=a/86400,n>1?Math.floor(n)+" days ago":(n=a/3600,n>1?Math.floor(n)+" hours ago":(n=a/60,n>1?Math.floor(n)+" minutes ago":"a minute ago"))))}(e.fetched_at)}</div>`);const _=`<div class="weather-location-name">${d}</div>${w}${f}<div class="forecast-container">${g}</div>${N}`;t.innerHTML=_}document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelector(".weather-widget");if(!e)return;const t=e.dataset.locationName,a=e.dataset.unit?e.dataset.unit.toLowerCase():"imperial",n=new AbortController,r=setTimeout((()=>n.abort()),1e4);let s=e.dataset.lat,o=e.dataset.lon;const i=parseCoordinate(s),d=parseCoordinate(o);if(null!==i&&(s=i),null!==d&&(o=d),!s\|\|!o\|\|!t)return void(e.innerHTML="Location data is missing.");if(!validateCoordinates(s,o))return void(e.innerHTML="Invalid location coordinates.");e.innerHTML='<div class="weather-loading">Loading weather data...</div>';const l=`/wp-json/under-the-weather/v1/forecast?lat=${s}&lon=${o}&location_name=${encodeURIComponent(t)}&unit=${a}`;fetch(l,{signal:n.signal,headers:{"X-WP-Nonce":under_the_weather_settings.nonce}}).then((t=>{if(clearTimeout(r),!t.ok)throw t.text().then((t=>{console.error("Error fetching weather data:",t),e.innerHTML="<p>Could not retrieve forecast. Server error.</p>"})),new Error("Network response was not ok");return t.json()})).then((t=>{if(!validateWeatherData(t))throw new Error("The weather data structure is invalid");displayWeather(t,e)})).catch((t=>{console.error("Network Error:",t),e.innerHTML="<p>Unable to load weather data. Please try again later.</p>"}))}));
	1	function loadWeatherData(e){const t=e.dataset.locationName;let n=e.dataset.lat,s=e.dataset.lon;const a=parseCoordinate(n),i=parseCoordinate(s);if(null!==a&&(n=a),null!==i&&(s=i),!n\|\|!s\|\|!t)return void(e.innerHTML="Location data is missing.");if(!validateCoordinates(n,s))return void(e.innerHTML="Invalid location coordinates.");e.innerHTML='<div class="weather-loading">Loading weather data...</div>';const r=e.dataset.unit?e.dataset.unit.toLowerCase():"imperial",l=new AbortController,o=setTimeout((()=>l.abort()),1e4),d=`/wp-json/under-the-weather/v1/forecast?lat=${n}&lon=${s}&location_name=${encodeURIComponent(t)}&unit=${r}`;fetch(d,{signal:l.signal,headers:{"X-WP-Nonce":under_the_weather_settings.nonce}}).then((t=>{if(clearTimeout(o),!t.ok)throw t.text().then((t=>{console.error("Error fetching weather data:",t),e.innerHTML="<p>Could not retrieve forecast. Server error.</p>"})),new Error("Network response was not ok");return t.json()})).then((t=>{if(!validateWeatherData(t))throw new Error("The weather data structure is invalid");displayWeather(t,e)})).catch((t=>{console.error("Network Error:",t),e.innerHTML="<p>Unable to load weather data. Please try again later.</p>"}))}function validateCoordinates(e,t){const n=parseFloat(e),s=parseFloat(t);return n>=-90&&n<=90&&s>=-180&&s<=180}function validateWeatherData(e){return e&&e.current&&e.daily&&Array.isArray(e.daily)&&e.daily.length>0}function parseCoordinate(e){if(!e\|\|"string"!=typeof e)return null;let t=e.trim();t.endsWith(",")&&(t=t.slice(0,-1).trim());let n=t.match(/([0-9]{1,3})[°\s]+([0-9]+(?:\.[0-9]+)?)['\s]+([NSEW])/i);if(n){const e=parseFloat(n[1]),t=parseFloat(n[2]),s=n[3].toUpperCase();if(isNaN(e)\|\|isNaN(t))return null;let a=e+t/60;return"S"!==s&&"W"!==s\|\|(a=-a),parseFloat(a.toFixed(4))}if(n=t.match(/([0-9]{1,3})[°\s]+([0-9]{1,2})['\s]+([0-9]{1,2}(?:\.[0-9]+)?)["\s]+([NSEW])/i),n){const e=parseFloat(n[1]),t=parseFloat(n[2]),s=parseFloat(n[3]),a=n[4].toUpperCase();if(isNaN(e)\|\|isNaN(t)\|\|isNaN(s))return null;let i=e+t/60+s/3600;return"S"!==a&&"W"!==a\|\|(i=-i),parseFloat(i.toFixed(4))}const s=parseFloat(t);return isNaN(s)?null:s}function getAlertIconClass(e){const t=e.toLowerCase();return t.includes("tornado")?"wi-tornado":t.includes("hurricane")?"wi-hurricane-warning":t.includes("tsunami")?"wi-tsunami":t.includes("earthquake")?"wi-earthquake":t.includes("thunderstorm")\|\|t.includes("lightning")?"wi-thunderstorm":t.includes("gale")?"wi-gale-warning":t.includes("hail")?"wi-hail":t.includes("rain")\|\|t.includes("showers")\|\|t.includes("drizzle")?"wi-rain":t.includes("flood")?"wi-flood":t.includes("winter")\|\|t.includes("snow")\|\|t.includes("blizzard")?"wi-snow":t.includes("ice")\|\|t.includes("frost")\|\|t.includes("freeze")\|\|t.includes("cold")\|\|t.includes("chill")?"wi-snowflake-cold":t.includes("heat")\|\|t.includes("hot")?"wi-hot":t.includes("wind")?"wi-strong-wind":t.includes("fog")?"wi-fog":t.includes("fire")?"wi-fire":t.includes("smoke")?"wi-smoke":t.includes("smog")\|\|t.includes("air quality")?"wi-smog":t.includes("dust")?"wi-dust":t.includes("sandstorm")\|\|t.includes("sand")?"wi-sandstorm":"wi-storm-warning"}function displayWeather(e,t){const{style_set:n,display_mode:s,forecast_days:a,show_details:i,show_unit:r,show_alerts:l,show_timestamp:o,sunrise_sunset_format:d}=under_the_weather_settings,c=t.dataset.locationName\|\|"",u="°",h="metric"===e.units?"C":"F",w="metric"===e.units?"kph":"mph",p=r?`<span class="temp-unit">${h}</span>`:"";function m(e){return"weather_icons_font"===n?`<i class="wi ${e.icon_class}"></i>`:`<img src="${under_the_weather_plugin_url.url}images/default-weather-images-${e.icon}.png" alt="${e.description}">`}let v="";if("off"!==d&&e.current.sunrise&&e.current.sunset){const t={timeZone:e.timezone,hour:"numeric",minute:"2-digit",hour12:"12"===d},s=new Date(1e3e.current.sunrise).toLocaleTimeString("en-US",t),a=new Date(1e3e.current.sunset).toLocaleTimeString("en-US",t);let i="",r="";if("weather_icons_font"===n)i='<i class="wi wi-sunrise"></i>',r='<i class="wi wi-sunset"></i>';else{i=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-sunrise.png`}" class="sunrise-sunset-icon" alt="Sunrise Time">`,r=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-sunset.png`}" class="sunrise-sunset-icon" alt="Sunset Time">`}v=`<div class="sunrise-sunset-container"><div class="sunrise-time">${i}<div class="sunrise-sunset-label">Sunrise</div><div class="sunrise-sunset-value">${s}</div></div><div class="sunset-time">${r}<div class="sunrise-sunset-label">Sunset</div><div class="sunrise-sunset-value">${a}</div></div></div>`}let f="";if("today_forecast"===s){const t=e.daily[0],n=Math.round(t.temp.max),s=Math.round(t.temp.min);f=`<div class="current-weather"><div class="today-forecast-temps"><div class="today-forecast-label">Today</div><div class="temps-wrapper"> <span class="high">${n}${u}</span><span class="slash"> / </span><span class="low">${s}${u}</span>${p}</div></div><div class="current-conditions">${m(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}else{const t=e.current;f=`<div class="current-weather"><div class="current-temp">${Math.round(t.temp)}${u}${p}</div><div class="current-conditions">${m(t.weather[0])}<span>${t.weather[0].description}</span></div></div>`}let g="";if(i){const t=Math.round(e.current.feels_like),n=Math.round(e.current.wind_speed),s=($=e.current.wind_deg,["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"][Math.round($/22.5)%16]),a=function(e){return`wi wi-wind from-${Math.round(e)}-deg`}(e.current.wind_deg);g=`<div class="weather-extra-details"><span>Feels like: ${t}${u}${p}</span><span class="wind-details"><i class="${a}"></i> ${s} ${n} ${w}</span></div>`}var $;let _="";l&&e.alerts&&e.alerts.length>0&&e.alerts.forEach((e=>{let t="";if("weather_icons_font"===n){t=`<i class="wi ${getAlertIconClass(e.event)}"></i>`}else{t=`<img src="${`${under_the_weather_plugin_url.url}images/seths--weather-images-warning.png`}" class="weather-alert-icon" alt="Weather Alert">`}_+=`\n\t\t\t\t<div class="weather-alert">\n\t\t\t\t\t<div class="weather-alert-icon-left">\n\t\t\t\t\t\t${t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="weather-alert-message">\n\t\t\t\t\t\t<div class="weather-alert-event">${e.event}</div>\n\t\t\t\t\t\t<div class="weather-alert-sender">Issued by: ${e.sender_name}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>`}));const N=parseInt(a,10)\|\|5,y=e.daily.slice(1,1+N);let S="";y.forEach((e=>{const t=new Date(1e3*e.dt).toLocaleDateString("en-US",{weekday:"short"}),n=Math.round(e.temp.max),s=Math.round(e.temp.min);S+=` <div class="forecast-day"><div class="forecast-day-name">${t}</div>${m(e.weather[0])}<div class="forecast-temps"> <span class="high">${n}${u}</span><span class="slash"> / </span><span class="low">${s}${u}</span></div> </div>`}));let M="";o&&e.fetched_at&&(M=`<div class="last-updated">Updated ${function(e){const t=(new Date).getTime()/1e3,n=Math.floor(t-e);if(n<60)return"just now";let s=n/31536e3;return s>1?Math.floor(s)+" years ago":(s=n/2592e3,s>1?Math.floor(s)+" months ago":(s=n/86400,s>1?Math.floor(s)+" days ago":(s=n/3600,s>1?Math.floor(s)+" hours ago":(s=n/60,s>1?Math.floor(s)+" minutes ago":"a minute ago"))))}(e.fetched_at)}</div>`);const W=`<div class="weather-location-name">${c}</div>${_}\n\t\t${f}${g}\n\t\t${v}<div class="forecast-container">${S}</div>${M}\n`;t.innerHTML=W}document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelectorAll(".weather-widget");0!==e.length&&e.forEach((e=>{loadWeatherData(e)}))}));

under-the-weather/trunk/readme.txt

-                      r3369072
+                      r3371900
 Requires at least: 5.0
 Tested up to: 6.8
 Stable tag: 2.1
+Stable tag: 2.2
 Requires PHP: 7.2
 License: GPLv2 or later
 …
 * **Easy to Use:** Add weather widgets using the WordPress block editor or by placing a simple `<div>` with data attributes anywhere on your site.
 * **Server-Side Caching:** All API calls are cached on your server, dramatically reducing calls to the OpenWeather API and speeding up page loads for all users.
+* **Smart Caching:** In addition to a configurable cache duration, the plugin automatically resets the forecast after midnight in the location's timezone, ensuring your visitors always see the current day's weather.
 * **Visual Performance Report:** Monitor your site's API usage with a bar chart that displays a 7-day history of cached requests versus new calls to the OpenWeather API - a clear look at how the caching system is working to keep your site fast and your API calls low.
+* **Highly Customizable:** Use the detailed settings page to control everything from cache duration to the number of forecast days.
+* **Flexible Display:** Show either the current live weather or the high/low forecast for the current day.
+* **Customizable Display:** Use the main display to show either the current live weather or the high/low forecast for the current day, and set the number of days to include in the forecast ahead.
 * **Imperial & Metric Units:** Display weather in Fahrenheit/mph or Celsius/kph on a per-widget basis.
 * **Extra Details:** Optionally display "Feels Like" temperature and detailed wind information.
+* **Weather Alerts:** Display official severe weather alerts directly in the widget to keep visitors informed.
+* **Sunrise & Sunset Times:** Optionally show daily sunrise and sunset times, with 12-hour and 24-hour format options.
 * **Lightweight:** Enqueues assets only when needed and does not rely on heavy JavaScript libraries.
 * **Settings Page Coordinate Finder:** An easy-to-use tool on the settings page retrieves coordinates by location name and generates ready-to-use widget `<div>` code.
 …
 The plugin's JavaScript will automatically find this element and populate it with the forecast.
+**Using the Shortcode (Classic Editor & Widgets)**
+You can also display the weather by using the `[under_the_weather]` shortcode. This is ideal for the Classic Editor, text widgets, or other page builders.
+**Available attributes:**
+* `lat`: (Required) The latitude for the forecast.
+* `lon`: (Required) The longitude for the forecast.
+* `location_name`: (Required) The name to display for the location.
+* `unit`: (Optional) The unit system. Accepts `metric` or `imperial`. Defaults to `imperial`.
+**Example:**
+[under_the_weather lat="48.8566" lon="2.3522" location_name="Paris, France" unit="metric"]
 == Configuration ==
 …
 **Cache Expiration Time:**
+This setting controls how long the weather data is stored on your server before fetching a new forecast.
+Use the slider to set the maximum time weather data is stored before fetching a new forecast, from 30 minutes to 8 hours.
+The plugin also features a **smart caching** system that automatically ensures the cache expires after midnight in the location's local timezone. This prevents showing a stale forecast from the previous day, regardless of your slider setting.
 For displaying live conditions (using the **Primary Display** or **Extra Details** options), a shorter cache time of 1 or 2 hours is recommended.
 For displaying only the daily high/low, a longer cache time of 3 or 6 hours is effective at reducing API calls.
+For displaying only the daily high/low, a longer cache time of 3 or 8 hours is effective at reducing API calls.
 **Widget Display & Style**
 …
 **Extra Details:**
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+Selecting this option will **display 'Feels Like' and wind** (direction and speed) information beneath the primary display. This setting adds nuance to the current weather conditions display.
+**Sunrise & Sunset:** This setting allows you to display the local sunrise and sunset times for the location, which is useful for planning outdoor activities.  Choose to show the times in a 12-hour (e.g., 6:30 AM) or 24-hour (e.g., 18:30) format.
+**Weather Alerts:** When enabled, the widget will display any active severe weather alerts (e.g., thunderstorm warnings, flood advisories) issued by official authorities for the specified location.  This provides critical, at-a-glance information for your visitors.
 **Display Timestamp:**
 …
 No. To retrieve fresh weather data every time a widget page loads, you can uncheck "Enable Cache" under the plugin's advanced settings. The caching system provides a great benefit for reducing API hits, but turning off this function during your initial widget setup may be useful.
+= Will my website ever show yesterday's weather If I set a long cache time? =
+Cinderella's magic disappears at midnight and weather caches expire at midnight too. Visitors should never see a cache of the previous day's forecast.
+For example, if you set the cache expiration time to 8 hours and a weather cache is created at 10 p.m. on a Friday (using the weather location's time), that cache will expire at midnight, and someone visiting the site the next day at 5 a.m. will not see the previous day's cache even though fewer than 8 hours have passed.
+The plugin uses whichever expiration time is **shorter** to provide the most effective caching.  You control the maximum cache duration with the "Cache Expiration Time" slider. However, to ensure your visitors never see yesterday's weather, the plugin also calculates the time until midnight in the widget's local timezone. If the time until midnight is shorter than your slider setting, the cache will expire at midnight.
 = The weather isn't updating. Why? =
 …
 = Can I still use the manual div method if I prefer it? =
+Absolutely! The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly. The new block is simply an additional, more user-friendly option for those using the WordPress block editor.
+The `<div>` method is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
+Absolutely! While the **block** is the recommended, user-friendly method for the modern WordPress editor, the plugin fully supports traditional methods for maximum flexibility.
+You can use the `[under_the_weather]` shortcode to easily place the widget in the Classic Editor, text widgets, or with various page builders.
+Additionally, the manual `<div>` method still works perfectly. It is particularly useful for theme developers who need to integrate the widget directly into template files or dynamically populate its data from custom fields.
+The traditional method of adding `<div class="weather-widget">` with data attributes still works perfectly and is particularly useful for theme developers and sites that dynamically populate widget attributes from post meta or custom fields.
 = What coordinate format should I use? =
 …
 If you're unsure what coordinates to use, the **Coordinate Finder** tool is the best way to retrieve accurate coordinates in the correct format.
+= Where do the weather alerts come from? =
+The alerts are provided directly by the OpenWeather API, which sources them from official meteorological agencies in each country. This ensures the information is timely and authoritative.
 = What does the "Enable Rate Limiting" setting do? =
 …
 . The Coordinate Finder tool, which generates widget code from a location name.
 . The "Under The Weather Forecast" block in the WordPress editor.
+. The weather widget with Weather Alerts shown
+. The weather widget with Sunrise and Sunset times shown
 == Credits ==
 …
 == Changelog ==
+= 2.2 =
+* NEW: Introduced a `[under_the_weather]` shortcode to allow for easy placement of the weather widget in the Classic Editor, text widgets, and other page builders.
+* NEW: Added a display option to show the day's sunrise time and sunset time, helpful in  scheduling outdoor activities.
+* NEW: Added an option to display severe weather alerts from official authorities directly within the widget. This feature can be enabled on the plugin's settings page.
+* IMPROVEMENT: Incorporated clear warning icons for severe weather alerts.
+* IMPROVEMENT: The plugin can now handle multiple weather widgets on a single page
+* IMPROVEMENT: The front-end widget now loads its data asynchronously (AJAX). This improves perceived page load performance and allows multiple widgets on the same page to load their data independently.
+* IMPROVEMENT: The settings page now features a Cache Expiration Time slider that allows greater flexibility and provides users with a visual way to select how long cached weather should be saved.
+* NEW: Midnight expiration is now built into the Cache Expiration logic, so you never have to worry about displaying a cached copy of yesterday's forecast.
 = 2.1 =
 …
 = 2.0 =
 This version includes a "Under The Weather Forecast" block for the WordPress block editor.
+= 2.2 =
+This version introduces a new `[under_the_weather]` shortcode for easy widget placement and adds options to display severe weather alerts and daily sunrise/sunset times.

under-the-weather/trunk/under-the-weather.php

-                      r3369072
+                      r3371900
  * Plugin URI:        https://www.sethcreates.com/plugins-for-wordpress/under-the-weather/
  * Description:       A lightweight weather widget that caches OpenWeather API data and offers multiple style options.
  * Version:           2.1
+ * Version:           2.2
  * Author:            Seth Smigelski
  * Author URI:        https://www.sethcreates.com/plugins-for-wordpress/
 …
 // Define a constant for the plugin version for easy maintenance.
+define( 'UNDER_THE_WEATHER_VERSION', '2.1.0' );
+define( 'UNDER_THE_WEATHER_VERSION', '2.2.0' );
+// Add the Under The Weather Forecast block.
 add_action('init', 'under_the_weather_register_widget_block');
 function under_the_weather_register_widget_block() {
     register_block_type( __DIR__ . '/build' );
+}
+// Add shortcode support.
+add_action( 'init', 'under_the_weather_register_shortcode' );
+function under_the_weather_register_shortcode() {
+    add_shortcode( 'under_the_weather', 'under_the_weather_shortcode_callback' );
+}
 …
     add_settings_section('under_the_weather_settings_section', __('API & Cache Settings', 'under-the-weather'), 'under_the_weather_settings_section_callback', $page_slug);
     add_settings_field('under_the_weather_api_key', __('OpenWeather API Key', 'under-the-weather'), 'under_the_weather_api_key_field_html', $page_slug, 'under_the_weather_settings_section');
+    add_settings_field('under_the_weather_expiration', __('Cache Expiration Time', 'under-the-weather'), 'under_the_weather_expiration_field_html', $page_slug, 'under_the_weather_settings_section');
+    add_settings_field('under_the_weather_expiration', __('Cache Expiration Time (Hours)', 'under-the-weather'), 'under_the_weather_expiration_field_html', $page_slug, 'under_the_weather_settings_section');
+    // Extra save button field (with empty label)
+    add_settings_field('under_the_weather_section_save', '', 'under_the_weather_save_button_callback', $page_slug, 'under_the_weather_settings_section');
     // Section for controlling widget display and style
 …
     add_settings_field('under_the_weather_display_mode', __('Primary Display', 'under-the-weather'), 'under_the_weather_display_mode_field_html', $page_slug, 'under_the_weather_display_section');
     add_settings_field('under_the_weather_forecast_days', __('Number of Forecast Days', 'under-the-weather'), 'under_the_weather_forecast_days_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_unit', __('Unit Symbol', 'under-the-weather'), 'under_the_weather_show_unit_field_html', $page_slug, 'under_the_weather_display_section');
     add_settings_field('under_the_weather_show_details', __('Extra Details', 'under-the-weather'), 'under_the_weather_show_details_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_unit', __('Display Unit Symbol', 'under-the-weather'), 'under_the_weather_show_unit_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_timestamp', __('Display Timestamp', 'under-the-weather'), 'under_the_weather_show_timestamp_field_html', $page_slug, 'under_the_weather_display_section');
+add_settings_field('under_the_weather_sunrise_sunset', __('Sunrise & Sunset', 'under-the-weather'), 'under_the_weather_sunrise_sunset_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_alerts', __('Weather Alerts', 'under-the-weather'), 'under_the_weather_show_alerts_field_html', $page_slug, 'under_the_weather_display_section');
+    add_settings_field('under_the_weather_show_timestamp', __('Timestamps', 'under-the-weather'), 'under_the_weather_show_timestamp_field_html', $page_slug, 'under_the_weather_display_section');
     // Section for "Advanced Settings"
 …
  * Sanitize and validate all settings before saving to the database.
  */
+// Sanitize the API key
 function under_the_weather_sanitize_settings($input) {
     $new_input = [];
+    // Sanitize the API key
     if (isset($input['api_key'])) {
         $api_key = sanitize_text_field($input['api_key']);
+        if (empty($api_key) || under_the_weather_validate_api_key($api_key)) {
+        if (empty($api_key)) {
+            $new_input['api_key'] = ''; // Allow clearing
+        } elseif (under_the_weather_validate_api_key($api_key)) {
             $new_input['api_key'] = $api_key;
         } else {
             add_settings_error('under_the_weather_settings', 'invalid_api_key',
                 __('Invalid API key format. Please check your OpenWeather API key.', 'under-the-weather'));
+            // Keep the old value if new one is invalid
+            $old_options = get_option('under_the_weather_settings');
+            $new_input['api_key'] = isset($old_options['api_key']) ? $old_options['api_key'] : '';
+        }
+    }
+    if (isset($input['expiration']) && in_array($input['expiration'], ['1','2','3','6'])) { $new_input['expiration'] = $input['expiration']; }
+    if (isset($input['style_set']) && in_array($input['style_set'], ['default_images', 'weather_icons_font'])) { $new_input['style_set'] = $input['style_set']; }
+    if (isset($input['display_mode']) && in_array($input['display_mode'], ['current', 'today_forecast'])) { $new_input['display_mode'] = $input['display_mode']; }
+    if (isset($input['forecast_days']) && in_array($input['forecast_days'], ['2','3','4','5','6'])) { $new_input['forecast_days'] = $input['forecast_days']; }
+    // sanitization for Rate Limit options
+    // Sanitize the expiration time from the range slider
+    if (isset($input['expiration']) && is_numeric($input['expiration'])) {
+        $expiration = floatval($input['expiration']);
+    // Ensure the value is within the allowed range (0.5 to 8)
+        if ($expiration >= 0.5 && $expiration <= 8) {
+            $new_input['expiration'] = $expiration;
+        } else {
+            // If out of range, enforce minimum of 0.5
+            $new_input['expiration'] = max(0.5, min(8, $expiration));
+            add_settings_error('under_the_weather_settings', 'expiration_adjusted',
+                __('Cache expiration time adjusted to minimum of 0.5 hours (30 minutes).', 'under-the-weather'), 'updated');
+        }
+    } else {
+        $new_input['expiration'] = 4; // Default to 4 if not numeric
+    }
+    // Sanitize the Rate Limit options
     $new_input['enable_rate_limit'] = isset($input['enable_rate_limit']) ? '1' : '0';
     if (isset($input['rate_limit_count']) && is_numeric($input['rate_limit_count'])) {
 …
+    }
+    // Sanitize the  Sunrise and Sunset preference with 12 hour time format and 24 hour time format
+    if (isset($input['sunrise_sunset']) && in_array($input['sunrise_sunset'], ['off', '12', '24'])) {
+        $new_input['sunrise_sunset'] = $input['sunrise_sunset'];
+    } else {
+        $new_input['sunrise_sunset'] = 'off';
+    }
+    // Sanitize the major display options
+    if (isset($input['style_set']) && in_array($input['style_set'], ['default_images', 'weather_icons_font'])) { $new_input['style_set'] = $input['style_set']; }
+    if (isset($input['display_mode']) && in_array($input['display_mode'], ['current', 'today_forecast'])) { $new_input['display_mode'] = $input['display_mode']; }
+    if (isset($input['forecast_days']) && in_array($input['forecast_days'], ['2','3','4','5','6'])) { $new_input['forecast_days'] = $input['forecast_days']; }
     $new_input['show_details'] = isset($input['show_details']) ? '1' : '0';
     $new_input['show_unit'] = isset($input['show_unit']) ? '1' : '0';
+    $new_input['show_alerts'] = isset($input['show_alerts']) ? '1' : '0';
     $new_input['show_timestamp'] = isset($input['show_timestamp']) ? '1' : '0';
     $new_input['enable_cache'] = isset($input['enable_cache']) ? '1' : '0';
 …
             <p><em><?php esc_html_e('Default Images', 'under-the-weather'); ?></em></p>
         </div>
         <div style="text-align: center;">
+        <div class="under-the-weather-visual-reference-item">
             <img src="<?php echo esc_url($plugin_assets_url . 'font-style-example.svg'); ?>" alt="Weather Icons Font Style Example">
             <p><em><?php esc_html_e('Weather Icons Font', 'under-the-weather'); ?></em></p>
 …
     $options = get_option('under_the_weather_settings'); $value = isset($options['api_key']) ? $options['api_key'] : ''; echo '<input type="text" name="under_the_weather_settings[api_key]" value="' . esc_attr($value) . '" class="regular-text" placeholder="' . esc_attr__('Enter your API key', 'under-the-weather') . '">';
+    }
+function under_the_weather_expiration_field_html() {
+    $options = get_option('under_the_weather_settings'); $value = isset($options['expiration']) ? $options['expiration'] : '2'; echo '<select name="under_the_weather_settings[expiration]"><option value="1" '.selected($value, '1', false).'>' . esc_html__('1 Hour', 'under-the-weather') . '</option><option value="2" '.selected($value, '2', false).'>' . esc_html__('2 Hours', 'under-the-weather') . '</option><option value="3" '.selected($value, '3', false).'>' . esc_html__('3 Hours', 'under-the-weather') . '</option><option value="6" '.selected($value, '6', false).'>' . esc_html__('6 Hours', 'under-the-weather') . '</option></select>';
+// Use a slider to set the cache expiration time. Default: 4 hours.
+function under_the_weather_expiration_field_html() {
+    $options = get_option('under_the_weather_settings');
+    $value = isset($options['expiration']) ? $options['expiration'] : '4';
+    ?>
+    <div class="utw-slider-container">
+        <div class="utw-slider-wrapper">
+            <input
+                type="range"
+                id="utw-expiration-slider"
+                name="under_the_weather_settings[expiration]"
+                value="<?php echo esc_attr($value); ?>"
+                min="0"
+                max="8"
+                step="0.5"
+                list="expiration-markers"
+                data-original-value="<?php echo esc_attr($value); ?>"
+            >
+            <datalist id="expiration-markers">
+                <option value="0" label="0"></option>
+                <option value="1"></option> <option value="2" label="2"></option>
+                <option value="3"></option> <option value="4" label="4"></option>
+                <option value="5"></option> <option value="6" label="6"></option>
+                <option value="7"></option> <option value="8" label="8"></option>
+            </datalist>
+        </div>
+    </div>
+    <div class="utw-expiration-display">
+            <span class="utw-slider-value">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256"><path fill="#48484A" d="M128 44a96 96 0 1 0 96 96a96.11 96.11 0 0 0-96-96m0 168a72 72 0 1 1 72-72a72.08 72.08 0 0 1-72 72m36.49-112.49a12 12 0 0 1 0 17l-28 28a12 12 0 0 1-17-17l28-28a12 12 0 0 1 17 0M92 16a12 12 0 0 1 12-12h48a12 12 0 0 1 0 24h-48a12 12 0 0 1-12-12"/></svg> Cached weather will expire after <strong id="utw-expiration-value"><?php echo esc_html($value); ?></strong> hours.
+            </span>
+    </div>
+    <p id="utw-min-cache-notice" class="description">
+        <?php esc_html_e('Minimum cache time is 30 minutes. To disable caching, use the advanced settings below.', 'under-the-weather'); ?>
+    </p>
+    <?php
+}
+// Add an extra save settigns button, just below the expiration slider.
+function under_the_weather_save_button_callback() {
+    ?>
+    <div class="utw-section-save-wrapper">
+        <?php submit_button(
+            __('Save Settings', 'under-the-weather'),
+            'primary',
+            'submit',
+            false,
+            ['id' => 'utw-expiration-save-btn']
+        ); ?>
+    </div>
+    <div id="utw-unsaved-changes" class="utw-unsaved-message">
+            <?php esc_html_e('You have unsaved changes', 'under-the-weather'); ?>
+    </div>
+    <?php
+}
 function under_the_weather_style_set_field_html() {
 …
+}
 function under_the_weather_show_unit_field_html() {
+    $options = get_option('under_the_weather_settings'); $value = isset($options['show_unit']) ? $options['show_unit'] : '0'; echo "<input type='checkbox' name='under_the_weather_settings[show_unit]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show the temperature unit symbol (F or C) in the primary display.', 'under-the-weather');
+    $options = get_option('under_the_weather_settings'); $value = isset($options['show_unit']) ? $options['show_unit'] : '0'; echo "<input type='checkbox' name='under_the_weather_settings[show_unit]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show the temperature unit symbol (F or C) in the primary display.', 'under-the-weather');
+}
+function under_the_weather_show_alerts_field_html() {
+    $options = get_option('under_the_weather_settings');
+    // Default to '1' (checked) to make the new feature visible
+    $value = isset($options['show_alerts']) ? $options['show_alerts'] : '1';
+    echo "<input type='checkbox' name='under_the_weather_settings[show_alerts]' value='1' " . checked($value, '1', false) . "> " . esc_html__('Show active weather alerts from reporting authorities.', 'under-the-weather');
+}
+function under_the_weather_sunrise_sunset_field_html() {
+    $options = get_option('under_the_weather_settings');
+    $value = isset($options['sunrise_sunset']) ? $options['sunrise_sunset'] : 'off'; // Default to 'off'
+    ?>
+    <fieldset>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="off" <?php checked($value, 'off'); ?>> <?php esc_html_e('Off', 'under-the-weather'); ?></label><br>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="12" <?php checked($value, '12'); ?>> <?php esc_html_e('Show in 12-hour format (e.g., 6:30 PM)', 'under-the-weather'); ?></label><br>
+        <label><input type="radio" name="under_the_weather_settings[sunrise_sunset]" value="24" <?php checked($value, '24'); ?>> <?php esc_html_e('Show in 24-hour format (e.g., 18:30)', 'under-the-weather'); ?></label>
+    </fieldset>
+    <?php
+}
 function under_the_weather_show_timestamp_field_html() {
 …
             <?php esc_html_e('Find Coordinates', 'under-the-weather'); ?>
         </button>
         <div id="utw-result-wrapper" style="margin-top: 15px;">
+        <div id="utw-result-wrapper">
             </div>
     </div>
 …
 function under_the_weather_enqueue_assets() {
     $options = get_option('under_the_weather_settings');
+    if (empty($options)) return;
+    if (empty($options)) return;
+    // Register the main style so WordPress knows about it.
+    wp_register_style('under-the-weather-styles', plugins_url('css/under-the-weather.min.css', __FILE__), [], UNDER_THE_WEATHER_VERSION);
+    // Register dependent icon styles.
+    if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
+        wp_register_style('under-the-weather-icons', plugins_url('css/weather-icons.min.css', __FILE__), [], '2.0');
+        if (!empty($options['show_details'])) {
+            wp_register_style('under-the-weather-wind-icons', plugins_url('css/weather-icons-wind.min.css', __FILE__), [], '2.0');
+        }
+    }
+    // Conditionally ENQUEUE based on the global setting.
     if (!empty($options['enqueue_style'])) {
         wp_enqueue_style('under-the-weather-styles', plugins_url('css/under-the-weather.min.css', __FILE__), [], UNDER_THE_WEATHER_VERSION);
+         wp_enqueue_style('under-the-weather-styles');
         if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
             wp_enqueue_style('under-the-weather-icons', plugins_url('css/weather-icons.min.css', __FILE__), [], '2.0');
+            wp_enqueue_style('under-the-weather-icons');
             if (!empty($options['show_details'])) {
                 wp_enqueue_style('under-the-weather-wind-icons', plugins_url('css/weather-icons-wind.min.css', __FILE__), [], '2.0');
+                wp_enqueue_style('under-the-weather-wind-icons');
+            }
+        }
 …
         'forecast_days'  => isset($options['forecast_days']) ? intval($options['forecast_days']) : 5,
         'show_details'   => !empty($options['show_details']),
+        'show_alerts'    => !empty($options['show_alerts']),
+        'sunrise_sunset_format' => isset($options['sunrise_sunset']) ? $options['sunrise_sunset'] : 'off',
         'show_timestamp' => !empty($options['show_timestamp']),
         'show_unit'      => !empty($options['show_unit']),
 …
     wp_localize_script('under-the-weather-script', 'under_the_weather_plugin_url', $plugin_url_data);
+}
 // =============================================================================
 …
     $api_url = "https://api.openweathermap.org/data/3.0/onecall?lat={$lat}&lon={$lon}&appid={$api_key}&units={$unit}";
     //Check API Response
+    // Check API Response
     $response_body = under_the_weather_safe_api_call($api_url);
     if ($response_body === false) {
 …
+    }
+    $weather_data = json_decode($response_body);
+    $weather_data = json_decode($response_body);
     under_the_weather_update_usage_stats('api');
 …
             $weather_data->daily[array_search($day, $weather_data->daily)]->weather[0]->icon_class = under_the_weather_get_icon_class($day->weather[0]->icon);
+        }
+    }
+    if ($caching_enabled) {
+        set_transient($transient_key, $weather_data, $expiration_hours * HOUR_IN_SECONDS);
+    }
+    }
+    // Establish midnight cache expiration logic, so the previous day's weather is not shown from the cache
+    // Incorporate midnight cache expiration with timed cache expiration preference
+    // Add a 10-minute buffer to avoid caching the previous day's forecast at midnight due to service clock differences.
+    // This is like treating 12:10 a.m. as midnight as a precaution
+    if ($caching_enabled) {
+        // Enforce minimum cache time of 30 minutes
+        $expiration_hours = isset($options['expiration']) ? floatval($options['expiration']) : 4;
+        $expiration_hours = max(0.5, $expiration_hours);
+        $midnight_expiration_seconds = 0;
+        if (isset($weather_data->timezone) && is_string($weather_data->timezone)) {
+            try {
+                $timezone_obj = new DateTimeZone($weather_data->timezone);
+                $now = new DateTime('now', $timezone_obj);
+                $midnight = new DateTime('tomorrow midnight', $timezone_obj);
+                $seconds_until_midnight = $midnight->getTimestamp() - $now->getTimestamp();
+                $midnight_expiration_seconds = $seconds_until_midnight + (10 * 60);
+            } catch (Exception $e) {
+                under_the_weather_log('Invalid timezone from API: ' . $weather_data->timezone);
+                $midnight_expiration_seconds = 0;
+            }
+        }
+        // Calculate fixed duration
+        $fixed_duration_seconds = $expiration_hours * HOUR_IN_SECONDS;
+        // Use the shorter of: fixed duration or midnight expiration
+        if ($midnight_expiration_seconds > 0) {
+            $final_expiration_seconds = min($fixed_duration_seconds, $midnight_expiration_seconds);
+        } else {
+            $final_expiration_seconds = $fixed_duration_seconds;
+        }
+        // Final safety check: ensure at least 30 minutes
+        $final_expiration_seconds = max(1800, $final_expiration_seconds);
+        set_transient($transient_key, $weather_data, $final_expiration_seconds);
+    }
     return new WP_REST_Response($weather_data, 200);
+}
+/**
+ *
+ * Callback function for the [under_the_weather] shortcode.
+ * @param array $atts Shortcode attributes.
+ * @return string HTML output for the weather widget.
+ *
+ */
+function under_the_weather_shortcode_callback( $atts ) {
+    // 1. Define attributes and set default values.
+    $atts = shortcode_atts(
+        array(
+            'lat'              => '',
+            'lon'              => '',
+            'location_name'    => '',
+            'unit'             => 'imperial', // Default to imperial
+        ),
+        $atts,
+        'under_the_weather'
+    );
+    // 2. Validate that essential attributes are present.
+    if ( empty( $atts['lat'] ) || empty( $atts['lon'] ) || empty( $atts['location_name'] ) ) {
+        // Return an error message or an empty string if essential data is missing.
+        return '';
+    }
+    // 3. Enqueue the necessary scripts and styles.
+    // This ensures they are only loaded on pages where the shortcode is used.
+    wp_enqueue_style( 'under-the-weather-styles' );
+    // We also need to enqueue the icon styles if they are selected in the settings.
+    $options = get_option('under_the_weather_settings');
+    if (isset($options['style_set']) && $options['style_set'] === 'weather_icons_font') {
+        wp_enqueue_style('under-the-weather-icons');
+        if (!empty($options['show_details'])) {
+            wp_enqueue_style('under-the-weather-wind-icons');
+        }
+    }
+    under_the_weather_load_scripts_manually();
+    // 4. Build and return the HTML div.
+    return sprintf(
+        '<div class="weather-widget" data-lat="%s" data-lon="%s" data-location-name="%s" data-unit="%s"></div>',
+        esc_attr( $atts['lat'] ),
+        esc_attr( $atts['lon'] ),
+        esc_attr( $atts['location_name'] ),
+        esc_attr( $atts['unit'] )
+    );
+}

Plugin Directory

Context Navigation

Legend:

under-the-weather/tags/2.2/README.md

under-the-weather/tags/2.2/build/block.json

under-the-weather/tags/2.2/css/admin-styles.css

under-the-weather/tags/2.2/css/admin-styles.min.css

under-the-weather/tags/2.2/css/under-the-weather.css

under-the-weather/tags/2.2/css/under-the-weather.min.css

under-the-weather/tags/2.2/js/admin-geocoder.js

under-the-weather/tags/2.2/js/under-the-weather.js

under-the-weather/tags/2.2/js/under-the-weather.min.js

under-the-weather/tags/2.2/readme.txt

under-the-weather/tags/2.2/under-the-weather.php

under-the-weather/trunk/README.md

under-the-weather/trunk/build/block.json

under-the-weather/trunk/css/admin-styles.css

under-the-weather/trunk/css/admin-styles.min.css

under-the-weather/trunk/css/under-the-weather.css

under-the-weather/trunk/css/under-the-weather.min.css

under-the-weather/trunk/js/admin-geocoder.js

under-the-weather/trunk/js/under-the-weather.js

under-the-weather/trunk/js/under-the-weather.min.js

under-the-weather/trunk/readme.txt

under-the-weather/trunk/under-the-weather.php

Download in other formats: