Adding new blocks

Author: Ariel Jolo

themes/osi/blocks/about-area/block.json

@@ -0,0 +1,31 @@
+{
+    "apiVersion": 2,
+    "name": "custom/about-area",
+    "title": "About Area",
+    "description": "A custom block for the about area with tabs.",
+    "category": "layout",
+    "icon": "admin-users",
+    "supports": {
+        "align": ["wide", "full"]
+    },
+    "attributes": {
+        "title": {
+            "type": "string",
+            "default": "What's Open Source AI?"
+        },
+        "description": {
+            "type": "string",
+            "default": "Following the same idea behind Open Source Software, an Open Source AI is a system made available under terms that grant users the freedoms to:"
+        },
+        "tabs": {
+            "type": "array",
+            "default": [
+                { "label": "Use", "content": "Use the system for any purpose and without having to ask for permission." },
+                { "label": "Study", "content": "Study how the system works and understand how its results were created." },
+                { "label": "Modify", "content": "Modify the system for any purpose, including to change its output." },
+                { "label": "Share", "content": "Share the system for others to use with or without modifications, for any purpose." }
+            ]
+        }
+    },
+    "editorScript": "file:./index.js"
+}

themes/osi/blocks/about-area/index.js

@@ -0,0 +1,86 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+
+registerBlockType('custom/about-area', {
+    edit: ({ attributes, setAttributes }) => {
+        const blockProps = useBlockProps();
+        const { title, description, tabs } = attributes;
+
+        const updateTabContent = (index, content) => {
+            const updatedTabs = [...tabs];
+            updatedTabs[index].content = content;
+            setAttributes({ tabs: updatedTabs });
+        };
+
+        return (
+            <div {...blockProps} className="rts-about-area rts-section-gap">
+                <div className="container">
+                    <div className="title-area-left">
+                        <RichText
+                            tagName="h2"
+                            className="title skew-up"
+                            value={title}
+                            onChange={(newTitle) => setAttributes({ title: newTitle })}
+                        />
+                        <RichText
+                            tagName="p"
+                            value={description}
+                            onChange={(newDesc) => setAttributes({ description: newDesc })}
+                        />
+                    </div>
+                    <ul className="nav custom-nav-soalr-about nav-pills" id="pills-tab" role="tablist">
+                        {tabs.map((tab, index) => (
+                            <li key={index} className="nav-item" role="presentation">
+                                <button className={`nav-link ${index === 0 ? 'active' : ''}`} data-bs-toggle="pill">
+                                    {tab.label}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                    <div className="tab-content">
+                        {tabs.map((tab, index) => (
+                            <div key={index} className={`tab-pane fade ${index === 0 ? 'show active' : ''}`}>
+                                <RichText
+                                    tagName="p"
+                                    className="disc"
+                                    value={tab.content}
+                                    onChange={(newContent) => updateTabContent(index, newContent)}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        );
+    },
+    save: ({ attributes }) => {
+        const { title, description, tabs } = attributes;
+
+        return (
+            <div className="rts-about-area rts-section-gap">
+                <div className="container">
+                    <div className="title-area-left">
+                        <h2 className="title skew-up">{title}</h2>
+                        <p>{description}</p>
+                    </div>
+                    <ul className="nav custom-nav-soalr-about nav-pills" id="pills-tab" role="tablist">
+                        {tabs.map((tab, index) => (
+                            <li key={index} className="nav-item" role="presentation">
+                                <button className={`nav-link ${index === 0 ? 'active' : ''}`} data-bs-toggle="pill">
+                                    {tab.label}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                    <div className="tab-content">
+                        {tabs.map((tab, index) => (
+                            <div key={index} className={`tab-pane fade ${index === 0 ? 'show active' : ''}`}>
+                                <p className="disc">{tab.content}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});