Working forecast block with base styling

src/scale-section/style.scss

@@ -9,7 +9,7 @@
 	border: none;
 
 	.wp-scale-section-content {
-		background-color: white;
+		background-color: #fff;
 		text-align: center;
 
 		h2 {

src/weather/block.json

@@ -12,13 +12,9 @@
 	},
 	"textdomain": "spearfishing-stuff",
 	"attributes": {
-		"content": {
+		"time": {
 			"type": "string",
-			"default": "Heading"
-		},
-		"height": {
-			"type": "number",
-			"default": 300
+			"default": "current"
 		}
 	},
 	"editorScript": "file:./index.js",

src/weather/edit.tsx

@@ -1,20 +1,30 @@
 import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
 import ServerSideRender from "@wordpress/server-side-render";
-import { PanelBody } from "@wordpress/components";
+import { PanelBody, RadioControl } from "@wordpress/components";
 import "./editor.scss";
 import React from "react";
 
 export default function Edit({ attributes, setAttributes }) {
 	const blockProps = useBlockProps();
+	const { time } = attributes;
 
 	return (
 		<>
 			<div {...blockProps}>
-				<ServerSideRender block="spearfishing-stuff/weather" />
+				<ServerSideRender block="spearfishing-stuff/weather" attributes={{time: time}}/>
 			</div>
 			<InspectorControls>
-				<PanelBody title="Block Settings" initialOpen={true}></PanelBody>
-				{/* Add settings in the future here */}
+				<PanelBody title="Data" initialOpen={true}>
+					<RadioControl
+						label="Weather type"
+						selected={time}
+						options={[
+							{ label: "Current", value: "current" },
+							{ label: "Forecast", value: "forecast" },
+						]}
+						onChange={(value) => setAttributes({ time: value })}
+					/>
+				</PanelBody>
 			</InspectorControls>
 		</>
 	);

src/weather/style.scss

@@ -1,11 +1,23 @@
 .wp-block-spearfishing-stuff-weather {
 	margin: 20px auto;
-	max-width: 1440px;
+	max-width: 1440px !important;
+	width: 100%;
 
-	.wp-weather-content {
+	// Mobile responsive for screens smaller  than 500px
+	@media (max-width: 500px) {
+		.wp-spearfishing-weather-content {
+			flex-direction: column;
+		}
+	}
+
+	.wp-spearfishing-weather-content {
 		display: flex;
 		gap: 20px;
 
+		span.unit {
+			font-size: 12px;
+		}
+
 		.weather-data {
 			color: #fff;
 			background-color: rgb(0 3 55 / 50%);
@@ -16,41 +28,84 @@
 			border-radius: 5px;
 			padding: 20px;
 
-			&.heading h2 {
-				font-weight: 100;
+			svg {
+				fill: #fff;
 			}
 
-			.direction {
-				svg {
-					fill: #fff;
-					margin: 0;
-				}
+			p,
+			h3 {
+				margin: 0;
+			}
+		}
 
-				p {
-					margin: 0;
-					font-size: 12px;
-				}
+		.forecast-day {
+			width: 100%;
 
-				h3 {
-					font-weight: 100;
-					margin: 0;
-				}
-			}
+			.forecast-data {
+				display: grid;
+				grid-template-rows: repeat(14, auto);
+				width: 100%;
+				overflow: hidden;
+				border: 1px solid #000;
+				border-radius: 5px;
+
+				.forecast-hour {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					height: 0;
+					overflow: hidden;
+					opacity: 0;
+					transition: 500ms ease-in-out all, opacity 500ms 100ms ease-in-out;
+
+					&.best-hour {
+						opacity: 1;
+						height: 40px;
+						padding: 5px;
+						background-color: #ffcc00;
+						border: 1px solid black;
+						margin: -1px;
+					}
 
-			.data {
-				display: flex;
-				flex-direction: column;
+					.wind,
+					.wave {
+						&.good {
+							color: green;
+						}
+						&.bad {
+							color: var(--wp--preset--color--secondary);
+						}
+					}
 
-				span {
-					font-size: 26px;
-					margin-bottom: -10px;
+					& > div {
+						display: flex;
+						width: 25%;
+						justify-content: space-between;
+					}
+
+					h4,
+					p {
+						margin: 0;
+					} 
 				}
+			}
 
-				p {
-					margin: 0;
-					font-size: 12px;
+			&.open {
+				.forecast-hour {
+					opacity: 1;
+					height: 40px;
+					padding: 5px;
+					border-bottom: 1px solid #000;
+
+					&:last-of-type {
+						border-bottom: none;
+					}
 				}
 			}
 		}
 	}
-}
+}
+
+.wp-block-cover {
+	border-radius: 5px;
+}

src/weather/view.js

@@ -1,3 +1,42 @@
 /**
- * Empty for now.
+ * On DOM Ready
+ * @param {Object} options
  */
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	const forecastDays = document.querySelectorAll( '.forecast-day' );
+
+	forecastDays.forEach( ( day ) => {
+		// Add the toggle class to the forecast-day element
+		day.addEventListener( 'click', () => day.classList.toggle( 'open' ) );
+
+		// Sort the hours by data-rating
+		const hours = day.querySelectorAll( '.forecast-hour' );
+		const hoursArray = Array.from( hours );
+		const sortedHours = hoursArray.sort( ( a, b ) => a.dataset.rating - b.dataset.rating );
+		sortedHours[0].classList.add( 'best-hour' );
+		sortedHours[1].classList.add( 'best-hour' );
+
+		// Tag the best and worst wind and wave forecasts
+		const wind = day.querySelectorAll( '.wind' );
+		const windArray = Array.from( wind );
+		windArray.map( ( wind ) => {
+			if ( 3.9 >= wind.dataset.speed ) {
+				wind.classList.add( 'good' );
+			} else if ( 10 <= wind.dataset.speed ) {
+				wind.classList.add( 'bad' );
+			}
+		} );
+
+		const wave = day.querySelectorAll( '.wave' );
+		const waveArray = Array.from( wave );
+		waveArray.map( ( wave ) => {
+			if ( .3 >= wave.dataset.height ) {
+				wave.classList.add( 'good' );
+			} else if ( 1 <= wave.dataset.height ) {
+				wave.classList.add( 'bad' );
+			}
+		} );
+	} );
+
+});