feat: block-y

README.md

@@ -30,19 +30,19 @@ Structure to work with multiple Gutenberg blocks in a single plugin. Contains fo
 
 ### Block X
 
-[To do]
+Receives an attribute and displays it in frontend.
 
 ### Block Y
 
-[To do]
+Retrieve and display data from an API.
 
 ### Block W
 
-[To do]
+Show latest custom posts.
 
 ### Block Z
 
-[To do]
+Slider image.
 
 ## Custom block category
 

blocks/block-y/block.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "title": "Block Y",
+  "name": "xywz-blocks/block-y",
+  "description": "Block Y",
+  "version": "1.0.0-beta",
+  "category": "xywz-blocks",
+  "icon": "rest-api",
+  "supports": {
+    "html": true
+  },
+  "attributes": {
+    "exampleAttribute": {
+      "type": "string"
+    }
+  },
+  "keywords": ["basic", "model"],
+  "editorScript": "file:./build/index.js",
+  "editorStyle": "file:./src/style.css"
+}

blocks/block-y/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => '00b087886b1e7ea641f9');

blocks/block-y/src/edit.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { __ } from "@wordpress/i18n";
+import { useBlockProps } from "@wordpress/block-editor";
+
+function Edit(props) {
+  function setExampleAttribute(e) {
+    props.setAttributes({ exampleAttribute: e.target.value });
+  }
+
+  return (
+    <div {...useBlockProps()}>
+      <div>
+        <h4>Block Y</h4>
+        <p>Insert the attribute value below</p>
+        <input
+          type="text"
+          value={props.attributes.exampleAttribute}
+          onChange={setExampleAttribute}
+          placeholder="Attribute value that will be displayed in the frontend"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Edit;

blocks/block-y/src/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from "@wordpress/blocks";
+
+import Edit from "./edit";
+import Save from "./save";
+import metadata from "../block.json";
+
+registerBlockType(metadata, {
+  edit: Edit,
+  save: Save,
+});

blocks/block-y/src/save.js

@@ -0,0 +1,12 @@
+import { __ } from "@wordpress/i18n";
+import { useBlockProps } from "@wordpress/block-editor";
+
+function Save(props) {
+  return (
+    <p {...useBlockProps.save()}>
+      {__(<div>{props.attributes.exampleAttribute}</div>)}
+    </p>
+  );
+}
+
+export default Save;

package.json

@@ -9,7 +9,9 @@
     "start": "wp-scripts start",
     "build": "wp-scripts build",
     "start:block-x": "wp-scripts start ./blocks/block-x/src/index.js --output-path=./blocks/block-x/build",
-    "build:block-x": "wp-scripts build ./blocks/block-x/src/index.js --output-path=./blocks/block-x/build"
+    "build:block-x": "wp-scripts build ./blocks/block-x/src/index.js --output-path=./blocks/block-x/build",
+    "start:block-y": "wp-scripts start ./blocks/block-y/src/index.js --output-path=./blocks/block-y/build",
+    "build:block-y": "wp-scripts build ./blocks/block-y/src/index.js --output-path=./blocks/block-y/build"
   },
   "repository": {
     "type": "git",