Basic

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

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

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

• পোস্টসিএসএস সহ লোকাল টেইলউইন্ডসিএসএস।
• দুটি কাস্টম গুটেনবার্গ প্যাটার্ন:
• About Us (আমাদের সম্পর্কে): একটি সাধারণ সেকশন প্যাটার্ন।
• Team Card (টিম কার্ড): একটি একক টিম মেম্বার কার্ড প্যাটার্ন।
• গুটেনবার্গ ব্লক এডিটর সমর্থন।
• প্রোডাকশন বিল্ডের জন্য সম্পূর্ণ প্রস্তুত।

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

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

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

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

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

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

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

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

mkdir custom-gutenberg-patterns
cd custom-gutenberg-patterns

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

npm init -y

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

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

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

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

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: স্বয়ংক্রিয়ভাবে ব্রাউজার প্রিফিক্স যোগ করার জন্য।
• @babel/core, @babel/preset-env, @babel/preset-react, babel-loader: যদি ভবিষ্যতে আপনি এই প্লাগইনে কাস্টম জাভাস্ক্রিপ্ট ব্লক যোগ করতে চান, তাহলে JSX সিনট্যাক্স প্রসেস করার জন্য এইগুলি প্রয়োজন হবে। যদিও প্যাটার্নের জন্য সরাসরি প্রয়োজন নেই, এটি একটি সম্পূর্ণ বিল্ড সিস্টেমের অংশ হিসেবে রাখা হচ্ছে।

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

৩. এখন, আপনার custom-gutenberg-patterns/ ফোল্ডারের ভিতরে package.json ফাইলটি খুলুন এবং এর সম্পূর্ণ বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

// custom-gutenberg-patterns/package.json
{
  "name": "custom-gutenberg-patterns",
  "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": {
    "@babel/core": "^7.x.x",
    "@babel/preset-env": "^7.x.x",
    "@babel/preset-react": "^7.x.x",
    "babel-loader": "^9.x.x",
    "autoprefixer": "^10.4.x",
    "css-loader": "^6.x.x",
    "postcss": "^8.x.x",
    "postcss-cli": "^11.x.x",
    "postcss-loader": "^8.x.x",
    "style-loader": "^4.x.x",
    "tailwindcss": "^3.x.x",
    "webpack": "^5.x.x",
    "webpack-cli": "^6.x.x"
  }
}

ব্যাখ্যা:

• "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 ফাইলগুলি তৈরি করবে। -p ফ্ল্যাগটি এখানে অত্যন্ত গুরুত্বপূর্ণ।

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

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

ব্যাখ্যা:

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

২. এখন, আপনার custom-gutenberg-patterns/ ফোল্ডারের ভিতরে tailwind.config.js ফাইলটি খুলুন এবং এর সম্পূর্ণ বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন।

// custom-gutenberg-patterns/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './patterns/**/*.php', // প্যাটার্ন PHP ফাইলগুলিতে Tailwind ক্লাস খুঁজুন
    // যদি ভবিষ্যতে কাস্টম JS ব্লক যোগ করেন, তাহলে এখানে তাদের পাথ যোগ করুন:
    // './src/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

ব্যাখ্যা:

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

৩. আপনার custom-gutenberg-patterns/ ফোল্ডারের ভিতরে postcss.config.js ফাইলটি খুলুন এবং এর সম্পূর্ণ বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন (বা যাচাই করুন)।

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

ব্যাখ্যা:

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

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

যদিও প্যাটার্নের জন্য সরাসরি JSX প্রসেসিং প্রয়োজন নেই, একটি সম্পূর্ণ বিল্ড সিস্টেমের অংশ হিসেবে এবং ভবিষ্যতে কাস্টম ব্লক যোগ করার সুবিধার জন্য আমরা .babelrc ফাইলটি তৈরি করব।

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

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

ব্যাখ্যা:

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

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

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

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

mkdir src

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

/* custom-gutenberg-patterns/src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

ব্যাখ্যা:

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

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

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

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

// custom-gutenberg-patterns/webpack.config.js
const path = require('path');

module.exports = {
    entry: './index.js', // একটি ডামি JS এন্ট্রি পয়েন্ট
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js', // একটি ন্যূনতম JS ফাইল তৈরি হবে
    },
    module: {
        rules: [
            {
                test: /\.js$/, // .js ফাইলগুলির জন্য নিয়ম
                exclude: /node_modules/, // node_modules ফোল্ডার বাদ দিন
                use: {
                    loader: 'babel-loader', // babel-loader ব্যবহার করুন
                },
            },
            // CSS নিয়মটি এখানে সরাসরি প্রয়োজন নেই কারণ postcss-cli এটি হ্যান্ডেল করবে,
            // তবে ভবিষ্যতের জন্য রাখা যেতে পারে।
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ],
    },
};

ব্যাখ্যা:

• entry: './index.js': আমরা একটি ডামি index.js ফাইলকে এন্ট্রি পয়েন্ট হিসেবে ব্যবহার করছি। এটি ওয়েবপ্যাককে চালানোর জন্য একটি ন্যূনতম জাভাস্ক্রিপ্ট ফাইল তৈরি করবে, যদিও এই প্লাগইনে এর কোনো কার্যকরী ভূমিকা নেই।
• babel-loader নিয়মটি রাখা হয়েছে যাতে ভবিষ্যতে আপনি যদি কাস্টম জাভাস্ক্রিপ্ট ব্লক যোগ করেন, তাহলে সেটআপ প্রস্তুত থাকে।

ধাপ ৭: ডামি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন (index.js)

ওয়েবপ্যাকের entry পয়েন্টের জন্য একটি খালি জাভাস্ক্রিপ্ট ফাইল প্রয়োজন।

১. আপনার custom-gutenberg-patterns/ ফোল্ডারের রুটে index.js নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন।

// custom-gutenberg-patterns/index.js (এই ফাইলটি খালি থাকবে)

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

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

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

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

<?php
// custom-gutenberg-patterns/plugin.php
/**
 * Plugin Name: Custom Gutenberg Patterns
 * Description: Custom Gutenberg Block Patterns with TailwindCSS.
 * Version: 1.0
 * Author: Your Name
 */

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

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

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

    // গুটেনবার্গ এডিটরে স্টাইল লোড করুন
    add_editor_style($dir . 'build/style.css');
}
add_action('init', 'cgp_register_assets'); // 'init' হুকে অ্যাসেট নিবন্ধন করুন

/**
 * কাস্টম প্যাটার্ন ক্যাটাগরি নিবন্ধন করুন।
 */
function cgp_register_pattern_category() {
    register_block_pattern_category(
        'cgp-patterns', // ক্যাটাগরি স্ল্যাগ
        [ 'label' => __( 'আমার কাস্টম প্যাটার্নস', 'custom-gutenberg-patterns' ) ] // ক্যাটাগরি লেবেল
    );
}
add_action( 'init', 'cgp_register_pattern_category' );

/**
 * কাস্টম প্যাটার্ন নিবন্ধন করুন।
 */
function cgp_register_patterns() {
    // প্যাটার্ন ফাইলগুলি অন্তর্ভুক্ত করুন
    require_once plugin_dir_path( __FILE__ ) . 'patterns/about-us.php';
    require_once plugin_dir_path( __FILE__ ) . 'patterns/team-card.php';
}
add_action( 'init', 'cgp_register_patterns' );

/**
 * ফ্রন্টএন্ডে স্টাইল এনকিউ করুন।
 */
function cgp_enqueue_frontend_styles() {
    wp_enqueue_style( 'cgp-patterns-style' );
}
add_action( 'wp_enqueue_scripts', 'cgp_enqueue_frontend_styles' );

ব্যাখ্যা:

• প্লাগইন হেডার: এটি ওয়ার্ডপ্রেসকে আপনার প্লাগইন সম্পর্কে তথ্য দেয়।
• cgp_register_assets(): এই ফাংশনটি আপনার কম্পাইল করা সিএসএস (build/style.css) ফাইলটিকে ওয়ার্ডপ্রেসে নিবন্ধন করে এবং গুটেনবার্গ এডিটরে লোড করে।
• cgp_register_pattern_category(): এটি গুটেনবার্গ এডিটরে আপনার কাস্টম প্যাটার্নগুলির জন্য একটি নতুন ক্যাটাগরি তৈরি করে।
• cgp_register_patterns(): এই ফাংশনটি আপনার প্যাটার্ন ফাইলগুলি (about-us.php, team-card.php) অন্তর্ভুক্ত করে, যা প্যাটার্নগুলি নিবন্ধন করবে।
• cgp_enqueue_frontend_styles(): এটি নিশ্চিত করে যে আপনার Tailwind CSS স্টাইলগুলি ওয়েবসাইটের ফ্রন্টএন্ডেও লোড হয়।

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

এখন আমরা আমাদের দুটি কাস্টম গুটেনবার্গ প্যাটার্নের জন্য PHP ফাইল তৈরি করব। এই ফাইলগুলিতে ব্লক মার্কআপ থাকবে এবং Tailwind CSS ক্লাস ব্যবহার করা হবে।

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

mkdir patterns

২. custom-gutenberg-patterns/patterns/ ফোল্ডারের ভিতরে about-us.php নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন।

<?php
// custom-gutenberg-patterns/patterns/about-us.php
register_block_pattern(
    'cgp/about-us-section', // প্যাটার্ন স্ল্যাগ
    array(
        'title'       => __( 'আমাদের সম্পর্কে সেকশন', 'custom-gutenberg-patterns' ), // প্যাটার্নের শিরোনাম
        'description' => __( 'একটি সাধারণ "আমাদের সম্পর্কে" সেকশন, শিরোনাম এবং প্যারাগ্রাফ সহ।', 'custom-gutenberg-patterns' ), // প্যাটার্নের বর্ণনা
        'categories'  => array( 'cgp-patterns' ), // কাস্টম ক্যাটাগরি
        'content'     => '<!-- wp:group {"align":"full","className":"py-16 px-4 bg-gray-100 text-center"} -->
                          <div class="wp-block-group alignfull py-16 px-4 bg-gray-100 text-center">
                              <!-- wp:heading {"level":2,"className":"text-4xl font-bold mb-4 text-gray-800"} -->
                              <h2 class="text-4xl font-bold mb-4 text-gray-800">আমাদের গল্প</h2>
                              <!-- /wp:heading -->
                              <!-- wp:paragraph {"className":"text-lg text-gray-600 max-w-3xl mx-auto"} -->
                              <p class="text-lg text-gray-600 max-w-3xl mx-auto">আমরা একটি নিবেদিত দল যারা আপনার প্রয়োজন মেটাতে উচ্চ-মানের সমাধান প্রদানে বিশ্বাসী। আমাদের লক্ষ্য হল উদ্ভাবন এবং শ্রেষ্ঠত্বের মাধ্যমে আপনার ব্যবসাকে এগিয়ে নিয়ে যাওয়া।</p>
                              <!-- /wp:paragraph -->
                          </div>
                          <!-- /wp:group -->',
    )
);

ব্যাখ্যা:

• register_block_pattern: একটি নতুন গুটেনবার্গ প্যাটার্ন নিবন্ধন করে।
• content: এটি ব্লক মার্কআপ ধারণ করে। এখানে আমরা core/group, core/heading, এবং core/paragraph ব্লক ব্যবহার করেছি এবং সেগুলিতে Tailwind CSS ক্লাস যোগ করেছি।

৩. custom-gutenberg-patterns/patterns/ ফোল্ডারের ভিতরে team-card.php নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন।

<?php
// custom-gutenberg-patterns/patterns/team-card.php
register_block_pattern(
    'cgp/team-card', // প্যাটার্ন স্ল্যাগ
    array(
        'title'       => __( 'টিম মেম্বার কার্ড', 'custom-gutenberg-patterns' ), // প্যাটার্নের শিরোনাম
        'description' => __( 'একটি একক টিম মেম্বার কার্ড, ছবি, নাম এবং পদবি সহ।', 'custom-gutenberg-patterns' ), // প্যাটার্নের বর্ণনা
        'categories'  => array( 'cgp-patterns' ), // কাস্টম ক্যাটাগরি
        'content'     => '<!-- wp:group {"className":"p-6 bg-white rounded-lg shadow-md text-center max-w-xs mx-auto"} -->
                          <div class="wp-block-group p-6 bg-white rounded-lg shadow-md text-center max-w-xs mx-auto">
                              <!-- wp:image {"id":123,"sizeSlug":"large","linkDestination":"none","className":"w-32 h-32 rounded-full mx-auto mb-4 object-cover"} -->
                              <figure class="wp-block-image size-large w-32 h-32 rounded-full mx-auto mb-4 object-cover">
                                  <img src="/placeholder.svg?height=128&width=128" alt="টিম মেম্বার ছবি" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"/>
                              </figure>
                              <!-- /wp:image -->
                              <!-- wp:heading {"level":3,"className":"text-xl font-semibold text-gray-900 mb-1"} -->
                              <h3 class="text-xl font-semibold text-gray-900 mb-1">সাদিয়া রহমান</h3>
                              <!-- /wp:heading -->
                              <!-- wp:paragraph {"className":"text-gray-500"} -->
                              <p class="text-gray-500">প্রজেক্ট ম্যানেজার</p>
                              <!-- /wp:paragraph -->
                          </div>
                          <!-- /wp:group -->',
    )
);

ব্যাখ্যা:

• register_block_pattern: একটি নতুন গুটেনবার্গ প্যাটার্ন নিবন্ধন করে।
• content: এখানে আমরা core/group, core/image, core/heading, এবং core/paragraph ব্লক ব্যবহার করেছি এবং সেগুলিতে Tailwind CSS ক্লাস যোগ করেছি।
• src="/placeholder.svg?height=128&width=128": এটি একটি প্লেসহোল্ডার ইমেজ URL।

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

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

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

mkdir build

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

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

npm run build

ব্যাখ্যা:

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

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

npm run dev

এটি আপনার ডেভেলপমেন্ট প্রক্রিয়াকে অনেক দ্রুত করবে, কারণ প্রতিবার ফাইল পরিবর্তন করার পর আপনাকে ম্যানুয়ালি npm run build চালাতে হবে না।

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

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

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

৪. এখন একটি নতুন পোস্ট বা পেজ তৈরি করুন (বা একটি বিদ্যমান পোস্ট/পেজ এডিট করুন)।
৫. গুটেনবার্গ এডিটরে, Add block (+) বাটনে ক্লিক করুন।
৬. Patterns (প্যাটার্নস) ট্যাবে ক্লিক করুন।
৭. ড্রপডাউন থেকে “আমার কাস্টম প্যাটার্নস” (My Custom Patterns) ক্যাটাগরি নির্বাচন করুন।
৮. আপনি “আমাদের সম্পর্কে সেকশন” এবং “টিম মেম্বার কার্ড” প্যাটার্নগুলি দেখতে পাবেন। সেগুলিতে ক্লিক করে আপনার পোস্টে যোগ করুন।

• আপনি দেখবেন প্যাটার্নগুলি Tailwind CSS দ্বারা স্টাইল করা হয়েছে। আপনি এডিটর থেকে তাদের টেক্সট এবং ছবি পরিবর্তন করতে পারবেন।