cta progress

Author: EliasKau

blocks/cta/build/block.json

@@ -15,5 +15,16 @@
   "editorScript": "file:./index.js",
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
-  "viewScript": "file:./view.js"
+  "viewScript": "file:./view.js",
+  "attributes": {
+    "title": {
+      "type": "string",
+      "selector": "h2"
+    },
+    "content": {
+      "type": "string",
+      "source": "html",
+      "selector": "p"
+    }
+  }
 }

blocks/cta/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'cf68f46bdd87bb727410');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '55caffc50288a78d256d');

blocks/cta/build/index.js

@@ -1,19 +1,30 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"name": "air-light/cta",
-	"version": "0.1.0",
-	"title": "Cta",
-	"category": "widgets",
-	"icon": "smiley",
-	"description": "Example block scaffolded with Create Block tool.",
-	"example": {},
-	"supports": {
-		"html": false
-	},
-	"textdomain": "cta",
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js"
-}
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "air-light/cta",
+  "version": "0.1.0",
+  "title": "Cta",
+  "category": "widgets",
+  "icon": "smiley",
+  "description": "Example block scaffolded with Create Block tool.",
+  "example": {},
+  "supports": {
+    "html": false
+  },
+  "textdomain": "cta",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "viewScript": "file:./view.js",
+  "attributes": {
+    "title": {
+      "type": "string",
+      "selector": "h2"
+    },
+    "content": {
+      "type": "string",
+      "source": "html",
+      "selector": "p"
+    }
+  }
+}

blocks/cta/src/block.json

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
@@ -29,10 +29,30 @@ import './editor.scss';
  *
  * @return {Element} Element to render.
  */
-export default function Edit() {
+export default function Edit({ attributes, setAttributes }) {
   return (
-    <p { ...useBlockProps() }>
-      { __( 'Cta – hello from the editor!', 'cta' ) }
-    </p>
+    <section {...useBlockProps()}>
+      <div className='container'>
+        <RichText
+          tagName='h2'
+          value={attributes.title}
+          onChange={(title) => setAttributes({ title })}
+          placeholder='Otsikko...'
+        />
+
+        <RichText
+          tagName='p'
+          value={attributes.content}
+          onChange={(content) => setAttributes({ content })}
+        />
+      </div>
+
+      <InnerBlocks
+        template={[['core/button', {
+          text: 'Nappi'
+        }]]}
+        allowedBlocks={['core/button']}
+      />
+    </section>
   );
 }

blocks/cta/src/edit.js

@@ -4,7 +4,8 @@
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * The save function defines the way in which the different attributes should
@@ -15,10 +16,16 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @return {Element} Element to render.
  */
-export default function save() {
+export default function save({ attributes }) {
   return (
-    <p { ...useBlockProps.save() }>
-      { 'Cta – hello from the saved content!' }
-    </p>
+    <section {...useBlockProps.save()}>
+      <div className='container'>
+        <h2>
+          {attributes.title}
+        </h2>
+
+        <RichText.Content tagName='p' value={attributes.content} />
+      </div>
+    </section>
   );
 }