feat: new block w

blocks/block-w/block.json

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

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

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

blocks/block-w/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 W</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-w/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-w/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;

inc/class-block-w.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Block W
+ *
+ * @package xywzblocks
+ */
+
+namespace XYWZBlocks\Inc;
+
+/**
+ * Block W
+ */
+class Block_W {
+
+
+	/**
+	 * Constructor for handle WordPress Hooks
+	 */
+	public function __construct() {
+		add_action( 'init', [ $this, 'block_w_register' ] );
+		add_action( 'enqueue_block_editor_assets', [ $this, 'block_w_enqueues' ] );
+		add_filter( 'block_categories_all', [ $this, 'register_new_category' ], 10, 2 );
+	}
+
+	/**
+	 * Register Block
+	 */
+	public function block_w_register() {
+		register_block_type( __DIR__ );
+	}
+
+	/**
+	 * Enqueues
+	 */
+	public function block_w_enqueues() {
+		wp_enqueue_script(
+			'block-w',
+			plugin_dir_url( __FILE__ ) . '../blocks/block-w/build/index.js',
+			[ 'wp-blocks', 'wp-i18n', 'wp-editor' ]
+		);
+
+		wp_enqueue_style(
+			'block-w',
+			plugin_dir_url( __FILE__ ) . '..style/style.css',
+			[],
+		);
+	}
+
+	/**
+	 * Register custom category
+	 */
+	public function register_new_category( $categories ) {
+		$categories[] = [
+			'slug'  => 'xywz-blocks',
+			'title' => 'XYW...Z Blocks',
+		];
+
+		return $categories;
+	}
+}

package.json

@@ -11,7 +11,9 @@
     "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",
     "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"
+    "build:block-y": "wp-scripts build ./blocks/block-y/src/index.js --output-path=./blocks/block-y/build",
+    "start:block-w": "wp-scripts start ./blocks/block-w/src/index.js --output-path=./blocks/block-w/build",
+    "build:block-w": "wp-scripts build ./blocks/block-w/src/index.js --output-path=./blocks/block-w/build"
   },
   "repository": {
     "type": "git",

xywz-blocks.php

@@ -32,3 +32,10 @@
 require dirname( __FILE__ ) . '/inc/class-block-y.php';
 use XYWZBlocks\Inc\Block_Y;
 new Block_Y();
+
+/**
+ * Block W
+ */
+require dirname( __FILE__ ) . '/inc/class-block-w.php';
+use XYWZBlocks\Inc\Block_W;
+new Block_W();