02. some advance

অবশ্যই! আপনি একজন নতুন ব্যবহারকারী হওয়ায় আমি প্রতিটি ধাপ খুব সহজভাবে এবং বিস্তারিতভাবে ব্যাখ্যা করব, যাতে আপনি সহজেই আপনার ওয়ার্ডপ্রেস গুটেনবার্গ প্লাগইন তৈরি করতে পারেন। এই টিউটোরিয়ালটি এমনভাবে তৈরি করা হয়েছে যেন আপনি সরাসরি ওয়ার্ডপ্রেস এডিটরে কপি-পেস্ট করতে পারেন।

ওয়ার্ডপ্রেস গুটেনবার্গ প্লাগইন তৈরি: একটি সম্পূর্ণ গাইড

এই টিউটোরিয়ালে, আমরা একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত ওয়ার্ডপ্রেস গুটেনবার্গ প্লাগইন তৈরি করব। এই প্লাগইনটিতে ভ্যানিলা জাভাস্ক্রিপ্ট, রিচটেক্সট, ইনস্পেক্টর কন্ট্রোলস এবং লোকাল টেইলউইন্ডসিএসএস ব্যবহার করা হবে। আমরা কোনো সিডিএন ব্যবহার করব না, বরং এনপিএম এবং ওয়েবপ্যাক (বা wp-scripts) ব্যবহার করে একটি বিল্ড সিস্টেম তৈরি করব।

আপনি যা শিখবেন:

• পোস্টসিএসএস সহ লোকাল টেইলউইন্ডসিএসএস সেটআপ করা।
• দুটি কাস্টম গুটেনবার্গ ব্লক তৈরি করা:
• ব্লক ওয়ান: একটি সাধারণ রিচটেক্সট এডিটযোগ্য হেডিং।
• ব্লক টু: একটি প্যারাগ্রাফ ব্লক যেখানে ইনস্পেক্টর সেটিংস থেকে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা যাবে।
• গুটেনবার্গ ব্লক এডিটর সমর্থন যোগ করা।
• প্রোডাকশন বিল্ডের জন্য প্লাগইন প্রস্তুত করা।

প্রয়োজনীয়তা:

• আপনার কম্পিউটারে Node.js এবং npm ইনস্টল করা থাকতে হবে।
• একটি ওয়ার্ডপ্রেস ইনস্টলেশন (লোকাল বা লাইভ সার্ভারে)।

custom-gutenberg-plugin/
├── block-one/
│   └── index.js
├── block-two/
│   └── index.js
├── build/  (এই ফোল্ডারটি খালি রাখুন, বিল্ড করার পর ফাইল এখানে আসবে)
├── src/
│   ├── style.css
│   ├── tailwind.config.js
├── plugin.php
├── package.json
├── webpack.config.js
├── postcss.config.js
└── tailwind.config.js

ব্যাখ্যা:

• block-one/ এবং block-two/: এই ফোল্ডারগুলিতে আমাদের কাস্টম ব্লকগুলির জাভাস্ক্রিপ্ট কোড থাকবে।
• build/: ওয়েবপ্যাক দ্বারা কম্পাইল করা চূড়ান্ত জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলি এখানে জমা হবে।
• src/: এখানে আপনার মূল সিএসএস ফাইল এবং টেইলউইন্ডসিএসএস কনফিগারেশন ফাইল থাকবে।
• plugin.php: এটি ওয়ার্ডপ্রেসের মূল প্লাগইন ফাইল, যা ব্লকগুলি নিবন্ধন করবে এবং স্টাইল/স্ক্রিপ্ট লোড করবে।
• package.json: আপনার প্রোজেক্টের মেটাডেটা এবং প্রয়োজনীয় এনপিএম ডিপেন্ডেন্সিগুলি এখানে তালিকাভুক্ত করা হবে।
• webpack.config.js: ওয়েবপ্যাকের কনফিগারেশন ফাইল, যা জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলিকে কম্পাইল করবে।
• postcss.config.js: পোস্টসিএসএস কনফিগারেশন ফাইল, যা টেইলউইন্ডসিএসএস এবং অটোপ্রেফিক্সার ব্যবহার করবে।
• tailwind.config.js: টেইলউইন্ডসিএসএস কনফিগারেশন ফাইল।

ধাপ ১: প্লাগইন ফোল্ডার তৈরি এবং এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন

প্রথমে, আপনার ওয়ার্ডপ্রেস ইনস্টলেশনের wp-content/plugins/ ডিরেক্টরিতে আপনার প্লাগইনের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন।

১. আপনার কম্পিউটারের টার্মিনাল বা কমান্ড প্রম্পট খুলুন।
২. নিম্নলিখিত কমান্ডটি ব্যবহার করে আপনার ওয়ার্ডপ্রেসের plugins ফোল্ডারে যান:

cd path/to/your/wordpress/wp-content/plugins/

(এখানে path/to/your/wordpress/ এর জায়গায় আপনার ওয়ার্ডপ্রেস ইনস্টলেশনের সঠিক পাথ দিন।)

৩. এখন, আপনার প্লাগইনের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারে প্রবেশ করুন:

mkdir custom-gutenberg-plugin
cd custom-gutenberg-plugin

৪. এই ফোল্ডারের ভিতরে এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন। এটি আপনার জন্য একটি প্রাথমিক package.json ফাইল তৈরি করবে:

npm init -y

আমি এবার আপনার জন্য একটি খুবই সহজ, ধাপে ধাপে এবং পেশাদারী টিউটোরিয়াল তৈরি করব, যেখানে আমরা এনপিএম কমান্ড ব্যবহার করে লাইব্রেরি ইনস্টল করব এবং ফাইলগুলি তৈরি করার প্রক্রিয়াটি যতটা সম্ভব স্বয়ংক্রিয় করব। প্রতিটি ধাপ বিস্তারিতভাবে ব্যাখ্যা করা হবে, যাতে আপনি সরাসরি ওয়ার্ডপ্রেস এডিটরে কপি-পেস্ট করে কাজ করতে পারেন।

ওয়ার্ডপ্রেস গুটেনবার্গ প্লাগইন তৈরি: সহজ এবং পেশাদার গাইড (ধাপে ধাপে)

এই টিউটোরিয়ালে, আমরা একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত ওয়ার্ডপ্রেস গুটেনবার্গ প্লাগইন তৈরি করব। এই প্লাগইনটিতে ভ্যানিলা জাভাস্ক্রিপ্ট, রিচটেক্সট, ইনস্পেক্টর কন্ট্রোলস এবং লোকাল টেইলউইন্ডসিএসএস ব্যবহার করা হবে। আমরা কোনো সিডিএন ব্যবহার করব না, বরং এনপিএম এবং ওয়েবপ্যাক ব্যবহার করে একটি সম্পূর্ণ বিল্ড সিস্টেম সেটআপ করব।

প্লাগইন বৈশিষ্ট্য:

• পোস্টসিএসএস সহ লোকাল টেইলউইন্ডসিএসএস।
• দুটি কাস্টম ব্লক:
• ব্লক ওয়ান: একটি সাধারণ রিচটেক্সট এডিটযোগ্য হেডিং।
• ব্লক টু: একটি প্যারাগ্রাফ ব্লক যেখানে ইনস্পেক্টর সেটিংস থেকে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা যাবে।
• গুটেনবার্গ ব্লক এডিটর সমর্থন।
• প্রোডাকশন বিল্ডের জন্য সম্পূর্ণ প্রস্তুত।

প্রয়োজনীয়তা:

• আপনার কম্পিউটারে Node.js এবং npm ইনস্টল করা থাকতে হবে।
• একটি ওয়ার্ডপ্রেস ইনস্টলেশন (লোকাল বা লাইভ সার্ভারে)।

ধাপ ১: প্লাগইন ফোল্ডার তৈরি এবং এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন

প্রথমে, আপনার ওয়ার্ডপ্রেস ইনস্টলেশনের wp-content/plugins/ ডিরেক্টরিতে আপনার প্লাগইনের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন।

১. আপনার কম্পিউটারের টার্মিনাল বা কমান্ড প্রম্পট খুলুন।
২. নিম্নলিখিত কমান্ডটি ব্যবহার করে আপনার ওয়ার্ডপ্রেসের plugins ফোল্ডারে যান:

cd path/to/your/wordpress/wp-content/plugins/

(এখানে path/to/your/wordpress/ এর জায়গায় আপনার ওয়ার্ডপ্রেস ইনস্টলেশনের সঠিক পাথ দিন।)

৩. এখন, আপনার প্লাগইনের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারে প্রবেশ করুন:

mkdir custom-gutenberg-plugin
cd custom-gutenberg-plugin

৪. এই ফোল্ডারের ভিতরে এনপিএম প্রজেক্ট ইনিশিয়ালাইজ করুন। এটি আপনার জন্য একটি প্রাথমিক package.json ফাইল তৈরি করবে:

npm init -y

ব্যাখ্যা: npm init -y কমান্ডটি স্বয়ংক্রিয়ভাবে একটি ডিফল্ট package.json ফাইল তৈরি করে। এটি আপনার প্রজেক্টের জন্য একটি স্ট্যান্ডার্ড শুরু।

ধাপ ২: প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন

এখন আমরা আমাদের প্লাগইনের জন্য প্রয়োজনীয় সমস্ত ডেভেলপমেন্ট লাইব্রেরি ইনস্টল করব। আমরা npm install --save-dev কমান্ড ব্যবহার করে প্রতিটি লাইব্রেরি যোগ করব, যাতে package.json ফাইলটি স্বয়ংক্রিয়ভাবে আপডেট হয়।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npm install --save-dev webpack webpack-cli style-loader css-loader postcss-loader postcss postcss-cli tailwindcss autoprefixer @babel/core @babel/preset-env @babel/preset-react babel-loader

ব্যাখ্যা:

• webpack এবং webpack-cli: জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলিকে কম্পাইল ও বান্ডেল করার জন্য।
• style-loader, css-loader, postcss-loader: ওয়েবপ্যাককে সিএসএস ফাইলগুলি হ্যান্ডেল করতে সাহায্য করে।
• postcss এবং postcss-cli: সিএসএস প্রসেসিং এবং টেইলউইন্ডসিএসএস চালানোর জন্য।
• tailwindcss: ইউটিলিটি-ফার্স্ট সিএসএস ফ্রেমওয়ার্ক।
• autoprefixer: স্বয়ংক্রিয়ভাবে ব্রাউজার প্রিফিক্স যোগ করার জন্য।

এই কমান্ডটি চালানোর পর, আপনার package.json ফাইলটি স্বয়ংক্রিয়ভাবে আপডেট হবে এবং devDependencies সেকশনে ইনস্টল করা লাইব্রেরিগুলির তালিকা থাকবে।

৩. এখন, আপনার package.json ফাইলটি খুলুন এবং scripts সেকশনটি নিম্নলিখিত কোড দিয়ে আপডেট করুন। এটি আমাদের বিল্ড এবং ডেভেলপমেন্ট স্ক্রিপ্ট যোগ করবে:

{
  "name": "custom-gutenberg-plugin",
  "version": "1.0.0",
  "private": true,
"scripts": {
    "dev": "webpack --mode=development --watch",
    "build": "webpack --mode=production && postcss src/style.css -o build/style.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "css-loader": "^6.7.1",
    "postcss": "^8.4.21",
    "postcss-cli": "^10.1.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.3.2",
    "webpack": "^5.78.0",
    "webpack-cli": "^4.10.0"
  }
}

ব্যাখ্যা:

• "dev": "webpack --mode=development --watch": এই স্ক্রিপ্টটি ডেভেলপমেন্টের সময় ফাইল পরিবর্তন নিরীক্ষণ করবে এবং স্বয়ংক্রিয়ভাবে পুনরায় কম্পাইল করবে।
• "build": "webpack --mode=production && postcss src/style.css -o build/style.css": এই স্ক্রিপ্টটি প্রোডাকশনের জন্য আপনার জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলিকে কম্পাইল করবে।

ধাপ ৩: টেইলউইন্ডসিএসএস এবং পোস্টসিএসএস কনফিগারেশন সেটআপ করুন

এই ধাপে আমরা npx tailwindcss init -p কমান্ড ব্যবহার করব, যা স্বয়ংক্রিয়ভাবে tailwind.config.js এবং postcss.config.js ফাইলগুলি তৈরি করবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npm install -D tailwindcss@3
npx tailwindcss init -p

ব্যাখ্যা:

• এই কমান্ডটি আপনার প্রজেক্টের রুটে tailwind.config.js এবং postcss.config.js নামে দুটি ফাইল তৈরি করবে।
• -p ফ্ল্যাগটি স্বয়ংক্রিয়ভাবে postcss.config.js ফাইল তৈরি করে এবং তাতে tailwindcss এবং autoprefixer প্লাগইন যোগ করে।

২. এখন, স্বয়ংক্রিয়ভাবে তৈরি হওয়া tailwind.config.js ফাইলটি খুলুন এবং content অ্যারেটি নিম্নলিখিত কোড দিয়ে আপডেট করুন। এটি টেইলউইন্ডসিএসএসকে বলে দেবে যে কোন ফাইলগুলিতে টেইলউইন্ডসিএসএস ক্লাসগুলি খুঁজতে হবে।

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './block-one/**/*.js', // ব্লক ওয়ান ফোল্ডারের সমস্ত JS ফাইল
    './block-two/**/*.js', // ব্লক টু ফোল্ডারের সমস্ত JS ফাইল
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

ব্যাখ্যা:

• content: এটি টেইলউইন্ডসিএসএসকে বলে দেয় যে আপনার জাভাস্ক্রিপ্ট ফাইলগুলিতে ব্যবহৃত টেইলউইন্ডসিএসএস ক্লাসগুলি স্ক্যান করে চূড়ান্ত সিএসএস বান্ডেলে অন্তর্ভুক্ত করতে হবে।

৩. স্বয়ংক্রিয়ভাবে তৈরি হওয়া postcss.config.js ফাইলটি যাচাই করুন। এটি নিম্নলিখিত কোডের মতো হওয়া উচিত:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

ব্যাখ্যা:

• এই ফাইলটি পোস্টসিএসএসকে বলে দেয় যে এটি টেইলউইন্ডসিএসএস এবং অটোপ্রেফিক্সার প্লাগইন ব্যবহার করবে।

ধাপ ৪: Babel কনফিগারেশন ফাইল তৈরি করুন (.babelrc)

ওয়েবপ্যাককে JSX প্রসেস করার জন্য Babel ব্যবহার করতে বলার জন্য আমাদের একটি .babelrc ফাইল তৈরি করতে হবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে .babelrc নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

ব্যাখ্যা:

• এই ফাইলটি Babel কে বলে দেয় যে এটি preset-env (আধুনিক জাভাস্ক্রিপ্ট) এবং preset-react (JSX) প্রিসেটগুলি ব্যবহার করবে।

ধাপ ৪: মূল সিএসএস ফাইল তৈরি করুন (src/style.css)

এখন আমরা src/ ফোল্ডার তৈরি করব এবং তার ভিতরে style.css ফাইলটি তৈরি করব। এই ফাইলটি টেইলউইন্ডসিএসএসকে ইম্পোর্ট করার জন্য ব্যবহৃত হবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে src/ নামে একটি নতুন ফোল্ডার তৈরি করুন:

mkdir src

২. src/ ফোল্ডারের ভিতরে style.css নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ব্যাখ্যা:

• এই ফাইলটি টেইলউইন্ডসিএসএস-এর বেস স্টাইল, কম্পোনেন্ট স্টাইল এবং ইউটিলিটি ক্লাসগুলিকে ইম্পোর্ট করে। postcss-cli এই ফাইলটিকে প্রসেস করবে এবং আপনার টেইলউইন্ডসিএসএস ক্লাসগুলিকে চূড়ান্ত সিএসএস ফাইলে রূপান্তর করবে।

ধাপ ৫: ওয়েবপ্যাক কনফিগারেশন ফাইল তৈরি করুন (webpack.config.js)

এই ধাপে আমরা webpack.config.js ফাইলটি তৈরি করব। এই ফাইলটি ওয়েবপ্যাককে বলে দেবে যে আপনার জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলিকে কীভাবে কম্পাইল করতে হবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে webpack.config.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

// webpack.config.js
const path = require('path');

module.exports = {
    entry: ['./block-one/index.js', './block-two/index.js'], // এন্ট্রি পয়েন্ট: দুটি ব্লকের JS ফাইল
    output: {
        path: path.resolve(__dirname, 'build'), // কম্পাইল করা ফাইলগুলি build ফোল্ডারে যাবে
        filename: 'index.js', // আউটপুট ফাইলের নাম
    },
    module: {
        rules: [
            {
                test: /\.js$/, // .js ফাইলগুলির জন্য নিয়ম
                exclude: /node_modules/, // node_modules ফোল্ডার বাদ দিন
                use: {
                    loader: 'babel-loader', // babel-loader ব্যবহার করুন
                },
            },
            {
                test: /\.css$/i, // .css ফাইলগুলির জন্য নিয়ম
                use: ['style-loader', 'css-loader', 'postcss-loader'], // এই লোডারগুলি ব্যবহার করুন
            },
        ],
    },
};

ব্যাখ্যা:

• entry: এটি ওয়েবপ্যাককে বলে দেয় যে কোন জাভাস্ক্রিপ্ট ফাইলগুলি থেকে কম্পাইল করা শুরু করতে হবে।
• output: কম্পাইল করা ফাইলগুলি কোথায় এবং কী নামে সেভ হবে তা এখানে সংজ্ঞায়িত করা হয়েছে।
• module.rules: এটি ওয়েবপ্যাককে বলে দেয় যে .css ফাইলগুলি কীভাবে হ্যান্ডেল করতে হবে।

ধাপ ৬: ওয়ার্ডপ্রেস প্লাগইন ফাইল তৈরি করুন (plugin.php)

এই ধাপে আমরা plugin.php ফাইলটি তৈরি করব। এটি আপনার ওয়ার্ডপ্রেস প্লাগইনের মূল ফাইল, যা ব্লকগুলি নিবন্ধন করবে এবং প্রয়োজনীয় স্টাইল ও স্ক্রিপ্ট লোড করবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে plugin.php নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

<?php
/**
 * Plugin Name: Custom Gutenberg Plugin
 * Description: Two Gutenberg blocks with TailwindCSS, RichText, and InspectorControls
 * Version: 1.0
 * Author: Your Name
 */

// সরাসরি ফাইল অ্যাক্সেস প্রতিরোধ করুন
defined('ABSPATH') || exit;

/**
 * প্লাগইনের অ্যাসেট (স্টাইল এবং স্ক্রিপ্ট) নিবন্ধন করুন।
 */
function cgp_register_assets() {
    $dir = plugin_dir_url(__FILE__); // প্লাগইন ডিরেক্টরির URL

    // স্টাইলশীট নিবন্ধন করুন
    wp_register_style(
        'cgp-style', // স্টাইলশীটের হ্যান্ডেল
        $dir . 'build/style.css', // স্টাইলশীটের URL
        [], // কোনো ডিপেন্ডেন্সি নেই
        filemtime(plugin_dir_path(__FILE__) . 'build/style.css') // ফাইল পরিবর্তনের সময় (ক্যাশে ব্রেকিংয়ের জন্য)
    );

    // জাভাস্ক্রিপ্ট স্ক্রিপ্ট নিবন্ধন করুন
    wp_register_script(
        'cgp-script', // স্ক্রিপ্টের হ্যান্ডেল
        $dir . 'build/index.js', // স্ক্রিপ্টের URL
        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n'], // ওয়ার্ডপ্রেসের কোর স্ক্রিপ্ট ডিপেন্ডেন্সি
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js'), // ফাইল পরিবর্তনের সময়
        true // ফুটার লোড করুন
    );
}
add_action('init', 'cgp_register_assets'); // 'init' হুকে অ্যাসেট নিবন্ধন করুন

/**
 * কাস্টম গুটেনবার্গ ব্লক নিবন্ধন করুন।
 */
function cgp_register_blocks() {
    // ব্লক ওয়ান নিবন্ধন করুন
    register_block_type('cgp/block-one', [
        'editor_script' => 'cgp-script', // ব্লক এডিটরের জন্য স্ক্রিপ্ট
        'editor_style'  => 'cgp-style',  // ব্লক এডিটরের জন্য স্টাইল
        'style'         => 'cgp-style',  // ফ্রন্টএন্ডের জন্য স্টাইল
    ]);

    // ব্লক টু নিবন্ধন করুন
    register_block_type('cgp/block-two', [
        'editor_script' => 'cgp-script',
        'editor_style'  => 'cgp-style',
        'style'         => 'cgp-style',
    ]);
}
add_action('init', 'cgp_register_blocks'); // 'init' হুকে ব্লক নিবন্ধন করুন

ব্যাখ্যা:

• প্লাগইন হেডার: এটি ওয়ার্ডপ্রেসকে আপনার প্লাগইন সম্পর্কে তথ্য দেয়।
• cgp_register_assets(): এই ফাংশনটি আপনার কম্পাইল করা সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলিকে ওয়ার্ডপ্রেসে নিবন্ধন করে।
• cgp_register_blocks(): এই ফাংশনটি আপনার কাস্টম গুটেনবার্গ ব্লকগুলিকে ওয়ার্ডপ্রেসে নিবন্ধন করে।

ধাপ ৭: গুটেনবার্গ ব্লক ফাইল তৈরি করুন

এখন আমরা আমাদের দুটি কাস্টম গুটেনবার্গ ব্লকের জন্য জাভাস্ক্রিপ্ট ফাইল তৈরি করব।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে block-one/ নামে একটি নতুন ফোল্ডার তৈরি করুন:

mkdir block-one

২. block-one/ ফোল্ডারের ভিতরে index.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

// block-one/index.js
const { registerBlockType } = window.wp.blocks; // ব্লক নিবন্ধন করার জন্য
const { RichText } = window.wp.blockEditor; // রিচটেক্সট কম্পোনেন্টের জন্য

registerBlockType('cgp/block-one', {
    title: 'ব্লক ওয়ান', // ব্লকের শিরোনাম যা এডিটরে দেখা যাবে
    icon: 'smiley', // ব্লকের জন্য একটি আইকন
    category: 'design', // ব্লকের ক্যাটাগরি
    attributes: {
        content: { type: 'string', default: 'ব্লক ওয়ান থেকে স্বাগতম!' }, // ব্লকের ডেটা অ্যাট্রিবিউট
    },
    edit({ attributes, setAttributes }) {
        // ব্লক এডিটরের জন্য রেন্ডার ফাংশন
        return (
            <div className="p-4 bg-blue-200 rounded">
                <RichText
                    tagName="h2" // হেডিং ট্যাগ
                    value={attributes.content} // অ্যাট্রিবিউটের বর্তমান মান
                    onChange={(content) => setAttributes({ content })} // মান পরিবর্তন হলে অ্যাট্রিবিউট আপডেট করুন
                    placeholder="এখানে টেক্সট লিখুন..." // প্লেসহোল্ডার টেক্সট
                    className="text-xl font-bold" // টেইলউইন্ডসিএসএস ক্লাস
                />
            </div>
        );
    },
    save({ attributes }) {
        // ফ্রন্টএন্ডে সেভ করার জন্য রেন্ডার ফাংশন
        return (
            <div className="p-4 bg-blue-200 rounded">
                <RichText.Content
                    tagName="h2"
                    value={attributes.content}
                    className="text-xl font-bold"
                />
            </div>
        );
    },
});

ব্যাখ্যা:

• registerBlockType: একটি নতুন গুটেনবার্গ ব্লক নিবন্ধন করে।
• attributes: ব্লকের ডেটা স্টোর করে।
• edit(): ব্লক এডিটরে ব্লকের চেহারা এবং এডিটিং ক্ষমতা সংজ্ঞায়িত করে।
• save(): ফ্রন্টএন্ডে ব্লকের চেহারা সংজ্ঞায়িত করে।

৩. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে block-two/ নামে একটি নতুন ফোল্ডার তৈরি করুন:

mkdir block-two

৪. block-two/ ফোল্ডারের ভিতরে index.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

// block-two/index.js
const { registerBlockType } = window.wp.blocks; // ব্লক নিবন্ধন করার জন্য
const { RichText, InspectorControls } = window.wp.blockEditor; // রিচটেক্সট এবং ইনস্পেক্টর কন্ট্রোলসের জন্য
const { PanelBody, ColorPicker } = window.wp.components; // সাইডবার প্যানেল এবং কালার পিকারের জন্য

registerBlockType('cgp/block-two', {
    title: 'ব্লক টু', // ব্লকের শিরোনাম
    icon: 'star-filled', // ব্লকের আইকন
    category: 'design', // ব্লকের ক্যাটাগরি
    attributes: {
        text: { type: 'string', default: 'ব্লক টু-তে স্বাগতম!' }, // প্যারাগ্রাফ টেক্সট
        backgroundColor: { type: 'string', default: '#BBF7D0' }, // ব্যাকগ্রাউন্ড কালার অ্যাট্রিবিউট
    },
    edit({ attributes, setAttributes }) {
        // ব্লক এডিটরের জন্য রেন্ডার ফাংশন
        return (
            <>
                {/* ইনস্পেক্টর কন্ট্রোলস: ব্লকের সাইডবারে সেটিংস যোগ করার জন্য */}
                <InspectorControls>
                    <PanelBody title="ব্যাকগ্রাউন্ড কালার">
                        <ColorPicker
                            color={attributes.backgroundColor} // বর্তমান কালার
                            onChangeComplete={(value) =>
                                setAttributes({ backgroundColor: value.hex }) // কালার পরিবর্তন হলে অ্যাট্রিবিউট আপডেট করুন
                            }
                        />
                    </PanelBody>
                </InspectorControls>
                {/* ব্লকের মূল কন্টেন্ট */}
                <div
                    style={{ backgroundColor: attributes.backgroundColor }} // ইনলাইন স্টাইল ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করুন
                    className="p-4 rounded" // টেইলউইন্ডসিএসএস ক্লাস
                >
                    <RichText
                        tagName="p" // প্যারাগ্রাফ ট্যাগ
                        value={attributes.text}
                        onChange={(text) => setAttributes({ text })}
                        placeholder="এখানে প্যারাগ্রাফ লিখুন..."
                        className="text-lg" // টেইলউইন্ডসিএসএস ক্লাস
                    />
                </div>
            </>
        );
    },
    save({ attributes }) {
        // ফ্রন্টএন্ডে সেভ করার জন্য রেন্ডার ফাংশন
        return (
            <div
                style={{ backgroundColor: attributes.backgroundColor }}
                className="p-4 rounded"
            >
                <RichText.Content
                    tagName="p"
                    value={attributes.text}
                    className="text-lg"
                />
            </div>
        );
    },
});

ব্যাখ্যা:

• InspectorControls: ব্লকের সাইডবারে সেটিংস যোগ করার জন্য।
• ColorPicker: সাইডবারে একটি কালার পিকার যোগ করে।
• backgroundColor অ্যাট্রিবিউট: ব্লকের ব্যাকগ্রাউন্ড কালার স্টোর করে।

ধাপ ৮: build/ ফোল্ডার তৈরি করুন এবং প্লাগইন বিল্ড করুন

এখন আপনার প্লাগইনের সমস্ত ফাইল তৈরি করা হয়েছে। পরবর্তী ধাপে, আপনাকে একটি খালি build/ ফোল্ডার তৈরি করতে হবে এবং আপনার ব্লক ও টেইলউইন্ডসিএসএস স্টাইলগুলি কম্পাইল করতে হবে।

১. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে build/ নামে একটি খালি ফোল্ডার তৈরি করুন:

mkdir build

ব্যাখ্যা: এই ফোল্ডারে ওয়েবপ্যাক এবং পোস্টসিএসএস দ্বারা কম্পাইল করা চূড়ান্ত জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলি জমা হবে।

২. আপনার custom-gutenberg-plugin/ ফোল্ডারের ভিতরে টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npm run build

ব্যাখ্যা:

• এই কমান্ডটি package.json ফাইলে সংজ্ঞায়িত build স্ক্রিপ্টটি চালাবে।
• এটি ওয়েবপ্যাক ব্যবহার করে আপনার জাভাস্script ফাইলগুলিকে build/index.js এ কম্পাইল করবে।
• একই সাথে, postcss-cli ব্যবহার করে src/style.css ফাইলটিকে প্রসেস করবে এবং টেইলউইন্ডসিএসএস ক্লাসগুলিকে build/style.css এ কম্পাইল করবে।
• বিল্ড সফল হলে, আপনি build/ ফোল্ডারের ভিতরে index.js এবং style.css ফাইলগুলি দেখতে পাবেন।

টিপস (ডেভেলপমেন্টের জন্য):
ডেভেলপমেন্টের সময়, আপনি স্বয়ংক্রিয়ভাবে ফাইল পরিবর্তন নিরীক্ষণ এবং কম্পাইল করার জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করতে পারেন:

npm run dev

ধাপ ৯: ওয়ার্ডপ্রেসে প্লাগইন সক্রিয় করুন এবং ব্যবহার করুন

এখন আপনার প্লাগইন ব্যবহারের জন্য প্রস্তুত।

১. আপনার ওয়ার্ডপ্রেস অ্যাডমিন ড্যাশবোর্ডে লগইন করুন।
২. বাম পাশের মেনু থেকে Plugins (প্লাগইনস) এ যান।
৩. আপনি “Custom Gutenberg Plugin” নামে একটি নতুন প্লাগইন দেখতে পাবেন। এর নিচে Activate (সক্রিয় করুন) লিঙ্কে ক্লিক করুন।

৪. এখন একটি নতুন পোস্ট বা পেজ তৈরি করুন (বা একটি বিদ্যমান পোস্ট/পেজ এডিট করুন)।
৫. গুটেনবার্গ এডিটরে, Add block (+) বাটনে ক্লিক করুন।
৬. আপনি “ব্লক ওয়ান” এবং “ব্লক টু” নামে আপনার কাস্টম ব্লকগুলি দেখতে পাবেন।

• ব্লক ওয়ান: এটিতে ক্লিক করুন এবং হেডিং টেক্সট এডিট করুন। আপনি দেখবেন টেইলউইন্ডসিএসএস স্টাইলগুলি স্বয়ংক্রিয়ভাবে প্রয়োগ হয়েছে।
• ব্লক টু: এটিতে ক্লিক করুন এবং প্যারাগ্রাফ টেক্সট এডিট করুন। ব্লকের সাইডবারে (ডানদিকে) আপনি একটি “ব্যাকগ্রাউন্ড কালার” প্যানেল দেখতে পাবেন। সেখান থেকে কালার পিকার ব্যবহার করে ব্লকের ব্যাকগ্রাউন্ড কালার পরিবর্তন করুন।