Basic API call and styling changes

package.json

@@ -7,7 +7,8 @@
 	"scripts": {
 		"build": "wp-scripts build --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts build --webpack-src-dir=src/weather --output-path=build/weather",
 		"sync": "rsync -avz --exclude={'.github','node_modules','src','.*','package*','webpack*'} ./ $RSYNC_DESTINATION",
-		"start": "wp-scripts start --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts start --webpack-src-dir=src/weather --output-path=build/weather",
+		"start:scale": "wp-scripts start --webpack-src-dir=src/scale-section --output-path=build/scale-section",
+		"start:weather": "wp-scripts start --webpack-src-dir=src/weather --output-path=build/weather",
 		"lint:js": "wp-scripts lint-js",
 		"lint:css": "wp-scripts lint-style",
 		"format": "wp-scripts format"

src/weather/block.json

@@ -3,15 +3,24 @@
 	"apiVersion": 3,
 	"name": "spearfishing-stuff/weather",
 	"version": "0.1.0",
-	"title": "Weather Data",
+	"title": "Fishing Weather",
 	"category": "widgets",
-	"icon": "smiley",
-	"description": "Live weather data from Barcelona.",
+	"description": "Weather stuff.",
 	"example": {},
 	"supports": {
 		"html": false
 	},
 	"textdomain": "spearfishing-stuff",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"default": "Heading"
+		},
+		"height": {
+			"type": "number",
+			"default": 300
+		}
+	},
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",

src/weather/edit.tsx

@@ -0,0 +1,61 @@
+import { __ } from "@wordpress/i18n";
+import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
+import { PanelBody } from "@wordpress/components";
+
+import { useWeatherData } from "./utils";
+import { Waves, Wind, Temperature } from "./icons";
+import "./editor.scss";
+import React, { useEffect } from "react";
+
+export default function Edit({ attributes, setAttributes }) {
+	const blockProps = useBlockProps();
+	const { data, isLoading } = useWeatherData();
+
+	return (
+		<>
+			<div {...blockProps}>
+				<div className="wp-weather-content">
+					<div className="weather-data wind">
+						<Wind />
+						<div className="wind-speed">
+							<p>{__("Wind\nSpeed", "wespearfish")}</p>
+							{isLoading ? (
+								<p>{__("Loading...", "wespearfish")}</p>
+							) : (
+								<p>{data.wind.windspeed} m</p>
+							)}
+						</div>
+					</div>
+					<div className="weather-data waves">
+						<Waves />
+						<div className="wave-height">
+							<p>{__("Wave\nHeight", "wespearfish")}</p>
+							{isLoading ? (
+								<p>{__("Loading...", "wespearfish")}</p>
+							) : (
+								<p>{data.buoy.hm0} m</p>
+							)}
+						</div>
+					</div>
+					<div className="weather-data temperature">
+						<Temperature />
+						<div className="water-temperature">
+							<p>{__("Water\nTemperature", "wespearfish")}</p>
+							{isLoading ? (
+								<p>{__("Loading...", "wespearfish")}</p>
+							) : (
+								<p>{data.buoy.watertemp} m</p>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+			<InspectorControls>
+				<PanelBody
+					title={__("Block Settings", "wespearfish")}
+					initialOpen={true}
+				></PanelBody>
+			</InspectorControls>
+		</>
+	);
+}

src/weather/editor.scss

@@ -1,9 +1,3 @@
 /**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-spearfishing-stuff {
-	border: 1px dotted red;
-}
+ * Empty for now.
+ */

src/weather/icons.tsx

@@ -0,0 +1,26 @@
+import { SVG, Path } from "@wordpress/components";
+import React from "react";
+
+export const BlockIcon = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+		<Path d="M236.9 .2c-5.5-.7-11 1.4-14.5 5.7s-4.6 10.1-2.8 15.3c2.8 8.2 4.3 16.9 4.3 26.1c0 21.7-8.5 37.2-21.9 47.6c-13.8 10.8-34 17-57.8 17H128c-35.3 0-64 28.7-64 64c0 12.2 3.4 23.5 9.3 33.2C31.7 216.2 0 252.4 0 296c0 40.9 28 75.4 65.8 85.2c-5.3-18.5 1-38.5 16.2-50.7l160-128c17.6-14.1 42.6-14 60.2 .2s22.8 38.6 12.8 58.8L285.7 320H304c20.4 0 38.5 12.9 45.3 32.1c3.7 10.6 3.5 21.8 0 31.9H360c48.6 0 88-39.4 88-88c0-43.6-31.7-79.8-73.3-86.8c5.9-9.7 9.3-21.1 9.3-33.2c0-35.3-28.7-64-64-64h-1.4c.9-5.4 1.4-10.9 1.4-16.6c0-48.7-36.1-88.9-83.1-95.2zm45.1 227.4c-5.8-4.7-14.2-4.7-20.1-.1l-160 128c-5.3 4.2-7.4 11.4-5.1 17.8s8.3 10.7 15.1 10.7h70.1L129.7 488.8c-3.4 6.7-1.6 14.9 4.3 19.6s14.2 4.7 20.1 .1l160-128c5.3-4.2 7.4-11.4 5.1-17.8s-8.3-10.7-15.1-10.7H233.9l52.4-104.8c3.4-6.7 1.6-14.9-4.3-19.6z" />
+	</SVG>
+);
+
+export const Waves = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width={24} height={24}>
+		<Path d="M269.5 69.9c11.1-7.9 25.9-7.9 37 0C329 85.4 356.5 96 384 96c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 149.7 417 160 384 160c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4C42.8 92.6 61 83.5 75.3 71.6c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 85.2 165.1 96 192 96c27.5 0 55-10.6 77.5-26.1zm37 288C329 373.4 356.5 384 384 384c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 437.7 417 448 384 448c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7l0 0C136.7 373.2 165.1 384 192 384c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0zm0-144C329 229.4 356.5 240 384 240c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 293.7 417 304 384 304c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.5 27.3-10.1 39.2-1.7l0 0C136.7 229.2 165.1 240 192 240c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z" />
+	</SVG>
+);
+
+export const Wind = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={24} height={24}>
+		<Path d="M288 32c0 17.7 14.3 32 32 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c53 0 96-43 96-96s-43-96-96-96H320c-17.7 0-32 14.3-32 32zm64 352c0 17.7 14.3 32 32 32h32c53 0 96-43 96-96s-43-96-96-96H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H384c-17.7 0-32 14.3-32 32zM128 512h32c53 0 96-43 96-96s-43-96-96-96H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H160c17.7 0 32 14.3 32 32s-14.3 32-32 32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32z" />
+	</SVG>
+);
+
+export const Temperature = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={24} height={24}>
+		<Path d="M448 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM320 96a96 96 0 1 1 192 0A96 96 0 1 1 320 96zM144 64c-26.5 0-48 21.5-48 48V276.5c0 17.3-7.1 31.9-15.3 42.5C70.2 332.6 64 349.5 64 368c0 44.2 35.8 80 80 80s80-35.8 80-80c0-18.5-6.2-35.4-16.7-48.9c-8.2-10.6-15.3-25.2-15.3-42.5V112c0-26.5-21.5-48-48-48zM32 112C32 50.2 82.1 0 144 0s112 50.1 112 112V276.5c0 .1 .1 .3 .2 .6c.2 .6 .8 1.6 1.7 2.8c18.9 24.4 30.1 55 30.1 88.1c0 79.5-64.5 144-144 144S0 447.5 0 368c0-33.2 11.2-63.8 30.1-88.1c.9-1.2 1.5-2.2 1.7-2.8c.1-.3 .2-.5 .2-.6V112zM192 368c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-20.9 13.4-38.7 32-45.3V272c0-8.8 7.2-16 16-16s16 7.2 16 16v50.7c18.6 6.6 32 24.4 32 45.3z" />
+	</SVG>
+);

src/weather/index.ts

@@ -0,0 +1,23 @@
+
+import { registerBlockType } from '@wordpress/blocks';
+
+import './style.scss';
+
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import { BlockIcon } from './icons';
+
+// @ts-expect-error - TS doesn't know about the block.json
+registerBlockType( metadata.name, {
+	icon: BlockIcon,
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

src/weather/save.tsx

@@ -0,0 +1,18 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+import React from 'react';
+
+export default function Save( { attributes } ) {
+	const { content, height } = attributes;
+	const blockProps = useBlockProps.save( {
+		style: { height: `${ height }px` },
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<div className="wp-scale-section-content">
+				<RichText.Content tagName="h2" value={ content } />
+			</div>
+		</div>
+	);
+}

src/weather/style.scss

@@ -1,12 +1,37 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-spearfishing-stuff {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
-}
+.wp-block-spearfishing-stuff-weather {
+	background-color: #f3f3f3;
+	margin-top: 20px;
+	width: 100%;
+	height: 200px;
+
+	.wp-weather-content {
+		display: flex;
+		height: 100%;
+		gap: 5px;
+
+		.weather-data {
+			color: #fff;
+			background-color: #000;
+			opacity: 0.7;
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			border-radius: 5px;
+
+			svg {
+				fill: #fff;
+				margin: 0 auto;
+			}
+
+			div {
+				display: flex;
+				flex-direction: column;
+				width: 75%;
+
+				p {
+					margin: 0;
+				}
+			}
+		}
+	}
+}