feat(organigram) - first experiments

wip RRZE-Webteam#167

build/organigram/block.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "rrze-elements/organigram",
+  "version": "1.0.10",
+  "title": "Organigram",
+  "category": "rrze_elements",
+  "description": "Creates a blueprint block.",
+  "supports": {
+    "html": false
+  },
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": "Blueprint"
+    }
+  },
+  "textdomain": "rrze-elements-blocks",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css"
+}

build/organigram/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components'), 'version' => 'b3a9e06e1436a1ef1556');

build/tab/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2f31110bc7ec9f2fad8c');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2403190e9cd31ec34358');

build/tabs/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react-jsx-runtime', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'd0d8d12b8d395d1e5688');
+<?php return array('dependencies' => array('lodash', 'react-jsx-runtime', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '06845d9e1774f32b614a');

includes/Blocks.php

@@ -42,7 +42,7 @@ private function rrze_register_blocks_and_translations()
     {
         $blocks = [
             'collapsibles', 'collapse', 'accordions', 'accordion', 'alert', 'notice', 'iconbox',
-            'tabs', 'tab', 'cta', 'insertion', 'contentwidthlimiter', 'columns', 'counter', 'counter-row'
+            'tabs', 'tab', 'cta', 'insertion', 'contentwidthlimiter', 'columns', 'counter', 'counter-row','organigram'
         ];
 
         foreach ($blocks as $block) {

package.json

@@ -14,6 +14,7 @@
     "packages-update": "wp-scripts packages-update",
     "plugin-zip": "wp-scripts plugin-zip",
     "start": "wp-scripts start",
+    "sass-compile": "sass src/_shared/scss/rrze-elements-blocks.scss assets/css/rrze-elements-blocks.css",
     "build-all": "node check-compatibility.js && sass src/_shared/scss/rrze-elements-blocks.scss assets/css/rrze-elements-blocks.css && npm run build && npx playwright test",
     "update-version": "node update-version.js && npm run build"
   },

src/_shared/scss/_organigram.scss

@@ -0,0 +1,3 @@
+.wp-block-rrze-elements-organigram {
+    background-color: cornflowerblue !important;
+}

src/_shared/scss/rrze-elements-blocks.scss

@@ -83,4 +83,7 @@
 @import "iconbox";
 
 //Scroll Stories
-@import "scrollstories";
+@import "scrollstories";
+
+//Organigram
+@import "organigram";

src/organigram/block.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "rrze-elements/organigram",
+  "version": "1.0.10",
+  "title": "Organigram",
+  "category": "rrze_elements",
+  "description": "Creates a blueprint block.",
+  "supports": {
+    "html": false
+  },
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": "Blueprint"
+    }
+  },
+  "textdomain": "rrze-elements-blocks",
+  "editorScript": "file:./index.ts",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css"
+}

src/organigram/edit.tsx

@@ -0,0 +1,51 @@
+// Imports from WordPress libraries
+import {
+  useBlockProps,
+  InnerBlocks,
+  BlockControls,
+} from "@wordpress/block-editor";
+
+import { __ } from "@wordpress/i18n";
+import { useState, useEffect } from "@wordpress/element";
+import { symbol } from "@wordpress/icons";
+import { Notice } from "@wordpress/components";
+
+
+
+/**
+ * Interface representing the properties for the Edit component.
+ * 
+ * @interface EditProps
+ * @property {Object} attributes - The block attributes.
+ */
+interface EditProps {
+  blockProps: string[];
+  attributes: {
+    title?: string;
+  };
+  setAttributes: (attributes: Partial<EditProps["attributes"]>) => void;
+}
+
+/**
+ * Edit component for the Blueprint block.
+ *
+ * Provides controls for customizing the Blueprint-block and renders the block inside the editor.
+ *
+ * @param {EditProps} props - The properties passed to the component.
+ * @returns {JSX.Element} The JSX representation of the component.
+ */
+export default function Edit({
+  blockProps,
+  attributes,
+  setAttributes
+}: EditProps) {
+  const props = useBlockProps();
+
+  return (
+    <div {...props}>
+      <h2>Hello World!</h2>
+      <Notice status="error">An unknown error occurred.</Notice>
+
+    </div>
+  );
+}

src/organigram/editor.scss

@@ -0,0 +1,31 @@
+svg.elements-tabs-icon-modal{
+    float: left;
+    clear: both;
+    width: 2ch;
+    height: 2ch;
+    padding-right: 2ch;
+    border: 1px solid #000;
+    padding: 1ch;
+}
+
+.elements-tabs-icon-modal-input .components-text-control__input{
+    // width: 80%;
+    display: inline-block;
+}
+
+.components-base-control.elements-tabs-icon-modal-input{
+    width: auto;
+}
+
+.rrze-elements-tabs-modal-container{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+// .is-selected.wp-block-rrze-elements-tab{
+//     padding-top: 4em;
+//     margin-top: -4em;
+// }
+.wp-block-rrze-elements-organigram {
+    background-color: red !important;
+}