Working scale section without settings

src/scale-section/block.json

@@ -12,6 +12,12 @@
 		"html": false
 	},
 	"textdomain": "spearfishing-stuff",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"default": "Heading"
+		}
+	},
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",

src/scale-section/edit.js

@@ -1,24 +1,6 @@
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
- */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps, RichText } from '@wordpress/block-editor';
 
-/**
- * React hook that is used to mark the block wrapper element.
- * It provides all the necessary props like the class name.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * Those files can contain any CSS code that gets applied to the editor.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
 import './editor.scss';
 
 /**
@@ -29,10 +11,17 @@ import './editor.scss';
  *
  * @return {Element} Element to render.
  */
-export default function Edit() {
+export default function Edit( { attributes, setAttributes } ) {
 	return (
-		<p { ...useBlockProps() }>
-			{ __( 'This is a SCALE section!', 'spearfishing-stuff' ) }
-		</p>
+		<div { ...useBlockProps() }>
+			<div className="wp-scale-section-content">
+				<RichText
+					tagName="h2"
+					placeholder={ __( 'Add your heading…', 'scale-section' ) }
+					value={ attributes.content }
+					onChange={ ( content ) => setAttributes( { content } ) }
+				/>
+			</div>
+		</div>
 	);
 }

src/scale-section/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 solid #f00;
-}
+.wp-block-spearfishing-stuff-scale-section {
+	border: 1px solid #fff;
+}

src/scale-section/save.js

@@ -1,10 +1,4 @@
-/**
- * React hook that is used to mark the block wrapper element.
- * It provides all the necessary props like the class name.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
- */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, RichText } from "@wordpress/block-editor";
 
 /**
  * The save function defines the way in which the different attributes should
@@ -15,10 +9,17 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @return {Element} Element to render.
  */
-export default function save() {
+export default function save({ attributes }) {
+	const blockProps = useBlockProps.save();
+
 	return (
-		<p { ...useBlockProps.save() }>
-			{ 'Spearfishing Stuff – hello from the saved content!' }
-		</p>
+		<div {...blockProps}>
+			<div className="wp-scale-section-content">
+				<RichText.Content
+					tagName="h2"
+					value={attributes.content}
+				/>
+			</div>
+		</div>
 	);
 }

src/scale-section/style.scss

@@ -1,12 +1,30 @@
-/**
- * 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-spearfishing-stuff-scale-section {
+	display: grid;
+	place-content: center;
+	background-color: white;
+	background-image: url(../../assets/fish-background.svg);
+	background-size: 5%;  
+	height: 500px;
+	width: 1000px;
+	animation: pan 100s linear infinite;
+	will-change: background-position;
+	border: none;
+
+	.wp-scale-section-content {
+		background-color: white;
+		text-align: center;
 
-.wp-block-create-block-spearfishing-stuff {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
+		h2 {
+			margin: 40px 100px;
+		}
+	}
 }
+
+@keyframes pan {
+	0% {
+		background-position: 0% 0%;
+	}
+	100% {
+		background-position: 100% 0%;
+	}
+}