Add SSR to weather block - ready to launch

arcangelini · Jun 5, 2024 · 0c4265f · 0c4265f
1 parent a3b0c90
commit 0c4265f
Show file tree

Hide file tree

Showing 10 changed files with 866 additions and 197 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,10 +18,10 @@
 		"npm": "^10.8.0"
 	},
 	"dependencies": {
-		"@tanstack/react-query": "^5.40.0",
 		"@types/wordpress__block-editor": "^11.5.14",
 		"@wordpress/block-editor": "^12.26.0",
 		"@wordpress/components": "^27.6.0",
+		"@wordpress/server-side-render": "^5.0.0",
 		"chalk": "^4.1.2",
 		"react": "^18.3.1",
 		"webpack": "^5.91.0"

diff --git a/spearfishing-stuff.php b/spearfishing-stuff.php
@@ -18,8 +18,13 @@
  * through the block editor in the corresponding context.
  */
 function spearfishing_stuff_register_blocks() {
+	require_once __DIR__ . '/weather-block-render.php';
+
 	/* Weather Block */
-	register_block_type( __DIR__ . '/build/weather' );
+	register_block_type( __DIR__ . '/build/weather', array(
+		'render_callback' => 'render_weather_block',
+	) );
+
 	/* Scale Section Block */
 	register_block_type( __DIR__ . '/build/scale-section' );
 }

diff --git a/src/weather/edit.tsx b/src/weather/edit.tsx
@@ -1,63 +1,21 @@
 import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import ServerSideRender from "@wordpress/server-side-render";
 import { PanelBody } from "@wordpress/components";
-import { useWeatherData } from "./utils";
-import { Waves, Wind } from "./icons";
 import "./editor.scss";
 import React from "react";
 
-const queryClient = new QueryClient();
-
-function TheEdit({ attributes, setAttributes }) {
+export default function Edit({ attributes, setAttributes }) {
 	const blockProps = useBlockProps();
-	const { windData, waveData } = useWeatherData();
-	const { data: windDataData, isLoading: windDataIsLoading } = windData;
-	const { data: waveDataData, isLoading: waveDataIsLoading } = waveData;
 
 	return (
 		<>
 			<div {...blockProps}>
-				<div className="wp-weather-content">
-					<div className="weather-data heading">
-						<h2>Current Weather Conditions</h2>
-					</div>
-					<div className="weather-data wind">
-						<Wind />
-						{windDataIsLoading ? (
-							<h2>Loading...</h2>
-						) : (
-							<div className="data">
-								<p>Speed <span className="meters">{windDataData?.windspeed}</span></p>
-								<p>Temperature <span className="degrees">{windDataData?.temperature}</span></p>
-								<p>Direction <span className="degrees">{windDataData?.winddir}</span></p>
-							</div>
-						)}
-					</div>
-					<div className="weather-data water">
-						<Waves />
-						{waveDataIsLoading ? (
-							<h2>Loading...</h2>
-						) : (
-							<div className="data">
-								<p>Height <span className="meters">{waveDataData?.hm0}</span></p>
-								<p>Temperature <span className="degrees">{waveDataData?.watertemp}</span></p>
-								<p>Direction <span className="degrees">{waveDataData?.meandir}</span></p>
-							</div>
-						)}
-					</div>
-				</div>
+				<ServerSideRender block="spearfishing-stuff/weather" />
 			</div>
 			<InspectorControls>
-				<PanelBody title='Block Settings' initialOpen={true}></PanelBody>
+				<PanelBody title="Block Settings" initialOpen={true}></PanelBody>
+				{/* Add settings in the future here */}
 			</InspectorControls>
 		</>
 	);
 }
-
-export default function Edit({ attributes, setAttributes }) {
-	return (
-		<QueryClientProvider client={queryClient}>
-			<TheEdit attributes={attributes} setAttributes={setAttributes} />
-		</QueryClientProvider>
-	);
-}
diff --git a/src/weather/icons.tsx b/src/weather/icons.tsx
@@ -19,6 +19,12 @@ export const Wind = () => (
 	</SVG>
 );
 
+export const Arrow = ( {direction} ) => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={45} height={45} style={{transform: `rotate( ${ direction }deg )`}}>
+		<Path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/>
+	</SVG>
+);
+
 export const Temperature = () => (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width={45} height={45}>
 		<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" />

diff --git a/src/weather/index.ts b/src/weather/index.ts
@@ -4,7 +4,6 @@ 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';
 
@@ -15,9 +14,4 @@ registerBlockType( metadata.name, {
 	 * @see ./edit.js
 	 */
 	edit: Edit,
-
-	/**
-	 * @see ./save.js
-	 */
-	save,
 } );
diff --git a/src/weather/save.tsx b/src/weather/save.tsx
diff --git a/src/weather/style.scss b/src/weather/style.scss
@@ -1,5 +1,5 @@
 .wp-block-spearfishing-stuff-weather {
-	margin-top: 20px auto;
+	margin: 20px auto;
 	max-width: 1440px;
 
 	.wp-weather-content {
@@ -16,37 +16,39 @@
 			border-radius: 5px;
 			padding: 20px;
 
-			h2.heading {
-				margin: 5px auto;
+			&.heading h2 {
 				font-weight: 100;
 			}
 
-			svg {
-				fill: #fff;
-				margin: 0 50px;
-			}
-
-			div {
-				display: grid;
-				grid-template-columns: 1fr auto;
-				align-items: center;
+			.direction {
+				svg {
+					fill: #fff;
+					margin: 0;
+				}
 
 				p {
-					margin: 0 10px 0 0;
-					justify-self: end;
+					margin: 0;
+					font-size: 12px;
+				}
+
+				h3 {
+					font-weight: 100;
+					margin: 0;
 				}
+			}
+
+			.data {
+				display: flex;
+				flex-direction: column;
 
 				span {
-					&.meters:after {
-						content: 'm';
-						font-size: 10px;
-					}
-
-					&.degrees:after {
-						content: '°';
-						position: absolute;
-						font-size: 10px;
-					}
+					font-size: 26px;
+					margin-bottom: -10px;
+				}
+
+				p {
+					margin: 0;
+					font-size: 12px;
 				}
 			}
 		}

diff --git a/src/weather/utils.ts b/src/weather/utils.ts