৫: গুটেনবার্গ ব্লক ডেভেলপমেন্ট (Gutenberg Block Development)

ওয়ার্ডপ্রেস ৫.০ ভার্সনের সাথে যে ব্লক-ভিত্তিক এডিটর, যা গুটেনবার্গ নামে পরিচিত, যুক্ত হয়েছে, তা ওয়ার্ডপ্রেসের কনটেন্ট তৈরির অভিজ্ঞতাকে পুরোপুরি বদলে দিয়েছে। এখন সবকিছুই এক-একটি ব্লক: প্যারাগ্রাফ, ছবি, হেডিং, এমনকি লেআউটও। একজন আধুনিক ওয়ার্ডপ্রেস ডেভেলপার হিসেবে আপনার জন্য কাস্টম গুটেনবার্গ ব্লক তৈরি করার দক্ষতা অর্জন করা অপরিহার্য।

এই অধ্যায়টি আপনাকে গুটেনবার্গ ব্লক ডেভেলপমেন্টের জগতে নিয়ে যাবে। প্রথমবার এই বিষয়টি কিছুটা কঠিন মনে হতে পারে, কারণ এর জন্য জাভাস্ক্রিপ্ট, বিশেষ করে React-এর জ্ঞান প্রয়োজন। কিন্তু ভয় পাওয়ার কিছু নেই! ওয়ার্ডপ্রেস টিম এমন চমৎকার টুলস তৈরি করেছে যা দিয়ে ব্লক ডেভেলপমেন্টের প্রক্রিয়াটি অনেক সহজ হয়ে গেছে। আমরা ধাপে ধাপে একটি কাস্টম ব্লক তৈরি করব।

৫.১ ব্লক ডেভেলপমেন্টের এনভাইরনমেন্ট তৈরি

গুটেনবার্গ ব্লক তৈরির জন্য আমাদের একটি আধুনিক জাভাস্ক্রিপ্ট ডেভেলপমেন্ট এনভাইরনমেন্ট প্রয়োজন। এর জন্য দুটি প্রধান টুলস লাগবে:

1. Node.js: এটি একটি জাভাস্ক্রিপ্ট রানটাইম যা আপনাকে আপনার কম্পিউটারে জাভাস্ক্রিপ্ট কোড চালাতে দেয়।

2. npm (Node Package Manager): এটি Node.js-এর সাথে ডিফল্টভাবে ইনস্টল হয়ে আসে এবং জাভাস্ক্রিপ্ট প্যাকেজ বা লাইব্রেরি ম্যানেজ করতে ব্যবহৃত হয়।

পদক্ষেপ ১: টুলস ইনস্টল করা

আপনার কম্পিউটারে Node.js ওয়েবসাইট থেকে LTS (Long Term Support) ভার্সনটি ডাউনলোড এবং ইনস্টল করুন। এটি স্বয়ংক্রিয়ভাবে npm-ও ইনস্টল করে দেবে।

পদক্ষেপ ২: ব্লক স্ক্যাফোল্ডিং (Scaffolding)

ওয়ার্ডপ্রেস টিম @wordpress/create-block নামে একটি অসাধারণ কমান্ড-লাইন টুল তৈরি করেছে, যা দিয়ে একটি নতুন ব্লকের জন্য প্রয়োজনীয় সমস্ত ফাইল এবং কনফিগারেশন স্বয়ংক্রিয়ভাবে তৈরি হয়ে যায়।

আপনার টার্মিনাল বা কমান্ড প্রম্পট খুলুন, আপনার ওয়ার্ডপ্রেস সাইটের wp-content/plugins ডিরেক্টরিতে যান এবং নিচের কমান্ডটি চালান:

npx @wordpress/create-block awesome-info-box

এই কমান্ডটি awesome-info-box নামে একটি নতুন ফোল্ডার তৈরি করবে এবং এর ভেতরে একটি বেসিক ওয়ার্ডপ্রেস প্লাগিনসহ একটি কার্যকরী গুটেনবার্গ ব্লকের জন্য প্রয়োজনীয় সমস্ত ফাইল (PHP, JavaScript, CSS, JSON) তৈরি করে দেবে।

৫.২ একটি ব্লকের গঠন (Anatomy of a Block)

create-block টুলটি যে ফাইলগুলো তৈরি করেছে, আসুন সেগুলোর সাথে পরিচিত হই।

• awesome-info-box.php: এটি মূল প্লাগিন ফাইল। এর প্রধান কাজ হলো সার্ভার সাইডে আপনার ব্লকটিকে রেজিস্টার করা, যাতে ওয়ার্ডপ্রেস এডিটর ব্লকটিকে চিনতে পারে।

• build/: এই ফোল্ডারে আপনার ব্লকের কম্পাইল করা জাভাস্ক্রিপ্ট ও সিএসএস ফাইলগুলো থাকে। এই ফাইলগুলোই মূলত ব্রাউজারে লোড হয়। আপনার এই ফোল্ডারের কোড সরাসরি এডিট করার প্রয়োজন নেই।

• src/: এই ফোল্ডারেই আপনি আপনার ব্লকের মূল কোড লিখবেন।

  • index.js: এটি আপনার ব্লকের প্রধান জাভাস্ক্রিপ্ট ফাইল। এখান থেকেই ব্লক রেজিস্ট্রেশন শুরু হয়।

  • edit.js: এটি একটি React কম্পোনেন্ট। এডিটর স্ক্রিনে আপনার ব্লকটি দেখতে কেমন হবে এবং কীভাবে কাজ করবে তা এখানে ডিফাইন করা হয়।

  • save.js: এটিও একটি React কম্পোনেন্ট। যখন আপনি পোস্ট সেভ করবেন, তখন আপনার ব্লকের HTML আউটপুট কেমন হবে তা এখানে ডিফাইন করা হয়।

• block.json: এটি আপনার ব্লকের মেটাডেটা ফাইল। এটি খুবই গুরুত্বপূর্ণ। এখানে ব্লকের নাম, টাইটেল, আইকন, ক্যাটাগরি এবং অ্যাট্রিবিউটস (attributes) ডিফাইন করা হয়।

৫.৩ block.json: ব্লকের পরিচয়

এই ফাইলটি আপনার ব্লকের মস্তিষ্ক। আসুন এর কিছু গুরুত্বপূর্ণ প্রপার্টি দেখি:

{
    "apiVersion": 3,
    "name": "create-block/awesome-info-box",
    "version": "0.1.0",
    "title": "Awesome Info Box",
    "category": "widgets",
    "icon": "smiley",
    "description": "An awesome block to display important information.",
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p"
        }
    },
    "supports": {
        "html": false
    },
    "textdomain": "awesome-info-box",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

• name: ব্লকের একটি অনন্য নাম।

• title: এডিটরে ব্লকটির যে নাম দেখানো হবে।

• category: ব্লকটি কোন ক্যাটাগরিতে পাওয়া যাবে (e.g., text, media, widgets)।

• icon: ব্লকের আইকন। ওয়ার্ডপ্রেস ড্যাশআইকন থেকে যেকোনো আইকনের নাম ব্যবহার করা যায়।

• attributes: এটি সবচেয়ে গুরুত্বপূর্ণ অংশ। অ্যাট্রিবিউট হলো এমন একটি অবজেক্ট যা আপনার ব্লকের ডেটা (যেমন: টেক্সট, ইমেজ ইউআরএল, কালার) সংরক্ষণ করে। উপরের উদাহরণে, content নামে একটি অ্যাট্রিবিউট ডিফাইন করা হয়েছে যা একটি প্যারাগ্রাফ (

  ) ট্যাগের ভেতরের HTML কনটেন্ট সংরক্ষণ করবে।

৫.৪ ব্লক এডিট করা: edit.js এবং save.js

edit.js: এডিটরের অভিজ্ঞতা

এই ফাইলে থাকা React কম্পোনেন্টটি নির্ধারণ করে যে ব্লকটি এডিটর স্ক্রিনে কেমন দেখাবে। এটি দুটি প্রধান props গ্রহণ করে: attributes (ব্লকের বর্তমান ডেটা) এবং setAttributes (ডেটা আপডেট করার ফাংশন)।

ওয়ার্ডপ্রেস @wordpress/block-editor প্যাকেজের মাধ্যমে অনেক বিল্ট-ইন কম্পোনেন্ট সরবরাহ করে যা দিয়ে সহজেই ইউজার ইনপুট নেওয়া যায়। RichText কম্পোনেন্টটি এর মধ্যে অন্যতম।

// src/edit.js
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                placeholder={__('Write your info here...', 'awesome-info-box')}
            />
        </div>
    );
}

এখানে RichText কম্পোনেন্ট ব্যবহারকারীকে একটি প্যারাগ্রাফ এডিট করার সুযোগ দিচ্ছে। যখনই ব্যবহারকারী কিছু টাইপ করবে, onChange ইভেন্টটি ফায়ার হবে এবং setAttributes ফাংশনটি কল করে content অ্যাট্রিবিউটের মান আপডেট করবে।

save.js: ফ্রন্টএন্ডের আউটপুট

এই ফাইলটি নির্ধারণ করে যে পোস্ট সেভ করার পর ব্লকের চূড়ান্ত HTML আউটপুট কী হবে। এটি শুধুমাত্র attributes প্রপটি গ্রহণ করে। এখানে setAttributes ব্যবহার করা যায় না, কারণ এটি শুধু ডেটা প্রদর্শন করে।

// src/save.js
import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const blockProps = useBlockProps.save();

    return (
        <div {...blockProps}>
            <RichText.Content tagName="p" value={attributes.content} />
        </div>
    );
}

এখানে RichText.Content ব্যবহার করে অ্যাট্রিবিউটে সংরক্ষিত HTML কনটেন্টটি একটি

ট্যাগের মধ্যে রেন্ডার করা হচ্ছে।

কোড কম্পাইল করা

আপনি src ফোল্ডারে কোড পরিবর্তন করার পর, আপডেটগুলো ব্রাউজারে দেখার জন্য কোডটিকে কম্পাইল করতে হবে। টার্মিনালে আপনার প্লাগিন ফোল্ডারে গিয়ে নিচের কমান্ডটি চালান:

npm start

এই কমান্ডটি একটি ওয়াচ মোড (watch mode) চালু করবে। এখন থেকে আপনি যখনই কোনো ফাইল সেভ করবেন, কোড স্বয়ংক্রিয়ভাবে কম্পাইল হয়ে যাবে।

সারসংক্ষেপ

এই অধ্যায়ে আমরা আধুনিক ওয়ার্ডপ্রেস ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ—গুটেনবার্গ ব্লক ডেভেলপমেন্ট—সম্পর্কে জেনেছি। যদিও এটি প্রথমে কিছুটা ভিন্ন মনে হতে পারে, @wordpress/create-block টুলের মাধ্যমে প্রক্রিয়াটি অনেক সহজ হয়ে গেছে। আমরা শিখেছি:

• ব্লক ডেভেলপমেন্টের জন্য Node.js এবং npm কীভাবে সেটআপ করতে হয়।

• @wordpress/create-block ব্যবহার করে একটি নতুন ব্লকের ভিত্তি কীভাবে তৈরি করতে হয়।

• block.json ফাইলের মাধ্যমে একটি ব্লকের মেটাডেটা কীভাবে সংজ্ঞায়িত করতে হয়।

• edit.js এবং save.js ফাইলে React কম্পোনেন্ট ব্যবহার করে এডিটর এবং ফ্রন্টএন্ডের আউটপুট কীভাবে নিয়ন্ত্রণ করতে হয়।

• attributes এবং setAttributes ব্যবহার করে ব্লকের ডেটা কীভাবে ম্যানেজ করতে হয়।

পরবর্তী অধ্যায়ে…

আমরা এখন ফ্রন্টএন্ড এবং ব্যাকএন্ড—উভয় দিকেই আমাদের প্লাগিনের কার্যকারিতা যোগ করতে পারি। কিন্তু আমাদের কোড কি সিকিউর? পরবর্তী অধ্যায়ে আমরা প্লাগিন নিরাপত্তার বিভিন্ন দিক নিয়ে আলোচনা করব এবং শিখব কীভাবে আপনার প্লাগিনকে সাধারণ হ্যাকিং প্রচেষ্টা থেকে সুরক্ষিত রাখা যায়।