Pattern Development

mypatternplugin/
├── mypatternplugin.php       # মূল প্লাগইন ফাইল
├── includes/                 # ফাংশন ফাইলগুলি
│   └── functions.php         # প্লাগইনের মূল ফাংশনগুলি
├── patterns/                 # প্যাটার্ন ফাইলগুলি
│   └── aboutus.html          # "আমাদের সম্পর্কে" প্যাটার্ন
├── src/                      # সোর্স ফাইলগুলি
│   └── tailwind.css          # টেইলউইন্ড সোর্স CSS
├── dist/                     # কম্পাইল করা ফাইলগুলি
│   └── tailwind.min.css      # কম্পাইল করা টেইলউইন্ড CSS
├── package.json              # npm প্যাকেজ কনফিগারেশন
├── tailwind.config.js        # টেইলউইন্ড কনফিগারেশন
└── postcss.config.js         # PostCSS কনফিগারেশন

cd wp-content/plugins/
mkdir mypatternplugin
cd mypatternplugin

mkdir includes
mkdir patterns
mkdir src
mkdir dist

touch mypatternplugin.php

<?php
/**
 * Plugin Name: My Pattern Plugin
 * Plugin URI:  https://yourwebsite.com/
 * Description: কাস্টম ব্লক প্যাটার্ন সহ একটি সাধারণ প্লাগইন।
 * Version: 1.0
 * Author: আপনার নাম
 * License: GPL2
 */

// সরাসরি অ্যাক্সেস প্রতিরোধ করুন
if (!defined('ABSPATH')) exit;

// প্লাগইন অ্যাক্টিভেশন হুক
register_activation_hook(__FILE__, 'mypatternplugin_activate');

function mypatternplugin_activate() {
    // অ্যাক্টিভেশন লজিক (যদি প্রয়োজন হয়)
}

// প্লাগইন ডিঅ্যাক্টিভেশন হুক
register_deactivation_hook(__FILE__, 'mypatternplugin_deactivate');

function mypatternplugin_deactivate() {
    // ডিঅ্যাক্টিভেশন লজিক (যদি প্রয়োজন হয়)
}

// প্লাগইন ফাংশনগুলি লোড করুন
require_once plugin_dir_path(__FILE__) . 'includes/functions.php';

touch includes/functions.php

<?php
// সরাসরি অ্যাক্সেস প্রতিরোধ করুন
if (!defined('ABSPATH')) exit;

// কাস্টম ক্যাটাগরি রেজিস্টার করুন
function mypatternplugin_register_pattern_category() {
    register_block_pattern_category(
        'mypatternplugin',
        array('label' => __('আমার প্যাটার্ন', 'mypatternplugin'))
    );
}
add_action('init', 'mypatternplugin_register_pattern_category', 9);

// "About Us" প্যাটার্ন রেজিস্টার করুন
function mypatternplugin_register_aboutus_pattern() {
    $pattern_file = plugin_dir_path(__DIR__) . 'patterns/aboutus.html';
    
    // ফাইল আছে কিনা চেক করুন
    if (file_exists($pattern_file)) {
        register_block_pattern(
            'mypatternplugin/aboutus',
            array(
                'title'       => __('আমাদের সম্পর্কে', 'mypatternplugin'),
                'description' => __('একটি সুন্দর "আমাদের সম্পর্কে" সেকশন।', 'mypatternplugin'),
                'categories'  => array('mypatternplugin'),
                'content'     => file_get_contents($pattern_file)
            )
        );
    }
}
add_action('init', 'mypatternplugin_register_aboutus_pattern');

// স্টাইল এনকিউ করুন
function mypatternplugin_enqueue_styles() {
    $css_file = plugin_dir_path(__DIR__) . 'dist/tailwind.min.css';
    
    // ফাইল আছে কিনা চেক করুন
    if (file_exists($css_file)) {
        wp_enqueue_style(
            'mypatternplugin-styles',
            plugins_url('dist/tailwind.min.css', __DIR__),
            array(),
            filemtime($css_file)
        );
    }
}

// ফ্রন্টএন্ডে স্টাইল লোড করুন
add_action('wp_enqueue_scripts', 'mypatternplugin_enqueue_styles');

// অ্যাডমিন এরিয়াতে স্টাইল লোড করুন
add_action('admin_enqueue_scripts', 'mypatternplugin_enqueue_styles');

// ব্লক এডিটরে স্টাইল লোড করুন
add_action('enqueue_block_editor_assets', 'mypatternplugin_enqueue_styles');

// ব্লক এডিটরে ইনলাইন স্টাইল যোগ করুন
function mypatternplugin_add_editor_inline_styles() {
    $css_file = plugin_dir_path(__DIR__) . 'dist/tailwind.min.css';
    
    // ফাইল আছে কিনা চেক করুন
    if (file_exists($css_file)) {
        wp_add_inline_style('wp-edit-blocks', file_get_contents($css_file));
    }
}
add_action('enqueue_block_editor_assets', 'mypatternplugin_add_editor_inline_styles');

// সরাসরি অ্যাক্সেস প্রতিরোধ করুন
if (!defined('ABSPATH')) exit;

// কাস্টম CSS ও JS এনকিউ করার ফাংশন
function mypatternplugin_enqueue_assets() {
    // Tailwind CSS ফাইল পাথ
    $tailwind_css = plugin_dir_path(__DIR__) . 'dist/tailwind.min.css';
    
    // Custom CSS ফাইল পাথ
    $custom_css = plugin_dir_path(__DIR__) . 'dist/custom-style.css';

    // Custom JS ফাইল পাথ
    $custom_js = plugin_dir_path(__DIR__) . 'dist/custom-script.js';

    // Tailwind CSS লোড করুন (যদি ফাইল থাকে)
    if (file_exists($tailwind_css)) {
        wp_enqueue_style(
            'mypatternplugin-tailwind', // হ্যান্ডেল নাম
            plugins_url('dist/tailwind.min.css', __DIR__), // ফাইল URL
            array(), // নির্ভরশীলতা নেই
            filemtime($tailwind_css) // ফাইল আপডেট হলে ক্যাশ রিফ্রেশ হবে
        );
    }

    // Custom CSS লোড করুন (যদি ফাইল থাকে)
    if (file_exists($custom_css)) {
        wp_enqueue_style(
            'mypatternplugin-custom-style', // হ্যান্ডেল নাম
            plugins_url('dist/custom-style.css', __DIR__), // ফাইল URL
            array(), // নির্ভরশীলতা নেই
            filemtime($custom_css) // ফাইল আপডেট হলে ক্যাশ রিফ্রেশ হবে
        );
    }

    // Custom JS লোড করুন (যদি ফাইল থাকে)
    if (file_exists($custom_js)) {
        wp_enqueue_script(
            'mypatternplugin-custom-script', // হ্যান্ডেল নাম
            plugins_url('dist/custom-script.js', __DIR__), // ফাইল URL
            array('jquery'), // নির্ভরশীলতা (jQuery দরকার হলে)
            filemtime($custom_js), // ফাইল আপডেট হলে ক্যাশ রিফ্রেশ হবে
            true // স্ক্রিপ্টটি ফুটারে লোড হবে
        );
    }
}

// ফ্রন্টএন্ড, অ্যাডমিন, এবং ব্লক এডিটরে লোড করুন
add_action('wp_enqueue_scripts', 'mypatternplugin_enqueue_assets');
add_action('admin_enqueue_scripts', 'mypatternplugin_enqueue_assets');
add_action('enqueue_block_editor_assets', 'mypatternplugin_enqueue_assets');

touch patterns/aboutus.html

<!-- wp:group {"className":"bg-gray-100 py-16"} -->
<div class="wp-block-group bg-gray-100 py-16">
    <!-- wp:group {"className":"container mx-auto px-4"} -->
    <div class="wp-block-group container mx-auto px-4">
        <!-- wp:heading {"textAlign":"center","className":"text-3xl font-bold mb-8 text-gray-800"} -->
        <h2 class="wp-block-heading has-text-align-center text-3xl font-bold mb-8 text-gray-800">আমাদের সম্পর্কে</h2>
        <!-- /wp:heading -->

        <!-- wp:columns {"className":"md:flex md:flex-wrap"} -->
        <div class="wp-block-columns md:flex md:flex-wrap">
            <!-- wp:column {"className":"md:w-1/2 lg:w-1/3 p-4"} -->
            <div class="wp-block-column md:w-1/2 lg:w-1/3 p-4">
                <!-- wp:group {"className":"bg-white rounded-lg shadow-md p-6 h-full"} -->
                <div class="wp-block-group bg-white rounded-lg shadow-md p-6 h-full">
                    <!-- wp:image {"align":"center","width":64,"height":64,"className":"mb-4"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized mb-4"><img src="https://via.placeholder.com/64" alt="মিশন আইকন" width="64" height="64"/></figure>
                    <!-- /wp:image -->

                    <!-- wp:heading {"textAlign":"center","level":3,"className":"text-xl font-semibold mb-3 text-gray-800"} -->
                    <h3 class="wp-block-heading has-text-align-center text-xl font-semibold mb-3 text-gray-800">আমাদের মিশন</h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","className":"text-gray-600"} -->
                    <p class="has-text-align-center text-gray-600">আমাদের মিশন হল উচ্চমানের পণ্য এবং সেবা প্রদান করা যা আমাদের গ্রাহকদের জীবনকে সহজ এবং আরও উন্নত করে।</p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column {"className":"md:w-1/2 lg:w-1/3 p-4"} -->
            <div class="wp-block-column md:w-1/2 lg:w-1/3 p-4">
                <!-- wp:group {"className":"bg-white rounded-lg shadow-md p-6 h-full"} -->
                <div class="wp-block-group bg-white rounded-lg shadow-md p-6 h-full">
                    <!-- wp:image {"align":"center","width":64,"height":64,"className":"mb-4"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized mb-4"><img src="https://via.placeholder.com/64" alt="ভিশন আইকন" width="64" height="64"/></figure>
                    <!-- /wp:image -->

                    <!-- wp:heading {"textAlign":"center","level":3,"className":"text-xl font-semibold mb-3 text-gray-800"} -->
                    <h3 class="wp-block-heading has-text-align-center text-xl font-semibold mb-3 text-gray-800">আমাদের ভিশন</h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","className":"text-gray-600"} -->
                    <p class="has-text-align-center text-gray-600">আমাদের ভিশন হল আমাদের ক্ষেত্রে একটি অগ্রণী প্রতিষ্ঠান হওয়া এবং নতুন উদ্ভাবনের মাধ্যমে শিল্পকে এগিয়ে নিয়ে যাওয়া।</p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column {"className":"md:w-1/2 lg:w-1/3 p-4"} -->
            <div class="wp-block-column md:w-1/2 lg:w-1/3 p-4">
                <!-- wp:group {"className":"bg-white rounded-lg shadow-md p-6 h-full"} -->
                <div class="wp-block-group bg-white rounded-lg shadow-md p-6 h-full">
                    <!-- wp:image {"align":"center","width":64,"height":64,"className":"mb-4"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized mb-4"><img src="https://via.placeholder.com/64" alt="মূল্যবোধ আইকন" width="64" height="64"/></figure>
                    <!-- /wp:image -->

                    <!-- wp:heading {"textAlign":"center","level":3,"className":"text-xl font-semibold mb-3 text-gray-800"} -->
                    <h3 class="wp-block-heading has-text-align-center text-xl font-semibold mb-3 text-gray-800">আমাদের মূল্যবোধ</h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","className":"text-gray-600"} -->
                    <p class="has-text-align-center text-gray-600">আমরা সততা, স্বচ্ছতা এবং গ্রাহক সন্তুষ্টিকে সর্বোচ্চ অগ্রাধিকার দেই। আমাদের সমস্ত কার্যকলাপে এই মূল্যবোধগুলি প্রতিফলিত হয়।</p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:column -->
        </div>
        <!-- /wp:columns -->

        <!-- wp:group {"className":"mt-12 text-center"} -->
        <div class="wp-block-group mt-12 text-center">
            <!-- wp:paragraph {"className":"text-gray-700 max-w-3xl mx-auto"} -->
            <p class="text-gray-700 max-w-3xl mx-auto">আমাদের কোম্পানি ২০১০ সালে প্রতিষ্ঠিত হয়েছিল এবং তখন থেকে আমরা হাজার হাজার সন্তুষ্ট গ্রাহককে সেবা দিয়ে আসছি। আমাদের দক্ষ টিম সর্বদা আপনাকে সর্বোত্তম সেবা প্রদানের জন্য প্রস্তুত।</p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":"mt-6"} -->
            <div class="wp-block-buttons mt-6">
                <!-- wp:button {"className":"bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300"} -->
                <div class="wp-block-button bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300"><a class="wp-block-button__link wp-element-button">আরও জানুন</a></div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:group -->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->

touch src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* কাস্টম স্টাইল এখানে যোগ করুন */

npm init -y

{
  "name": "mypatternplugin",
  "version": "1.0.0",
  "description": "WordPress Block Pattern Plugin with Tailwind CSS",
  "scripts": {
    "dev": "postcss src/tailwind.css -o dist/tailwind.min.css --watch",
    "build": "cross-env NODE_ENV=production postcss src/tailwind.css -o dist/tailwind.min.css"
  },
  "keywords": [
    "wordpress",
    "plugin",
    "block-pattern",
    "tailwindcss"
  ],
  "author": "আপনার নাম",
  "license": "GPL-2.0"
}

npm install --save-dev tailwindcss@3.4.1 postcss autoprefixer cssnano postcss-cli cross-env

npx tailwindcss init

module.exports = {
  content: [
    './patterns/**/*.html',
    './includes/**/*.php',
    './*.php'
  ],
  theme: {
    extend: {
      // কাস্টম থিম এক্সটেনশন এখানে যোগ করুন
      colors: {
        'primary': '#3490dc',
        'secondary': '#ffed4a',
        'danger': '#e3342f',
      },
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false, // ওয়ার্ডপ্রেস থিমের সাথে কনফ্লিক্ট এড়াতে
  },
  important: true, // ওয়ার্ডপ্রেস অ্যাডমিন স্টাইলকে ওভাররাইড করবে
}

touch postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

npm run build

cross-env NODE_ENV=production postcss src/tailwind.css -o dist/tailwind.min.css

npm run dev

postcss src/tailwind.css -o dist/tailwind.min.css --watch

ls -la dist/

chmod 644 dist/tailwind.min.css

ls -la patterns/

npm uninstall tailwindcss
npm install --save-dev tailwindcss@3.4.1

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

rm -rf node_modules
npm install

npm install --save-dev cross-env

mypatternplugin/
├── mypatternplugin.php
├── includes/
│   └── functions.php
├── patterns/
│   └── aboutus.html
├── src/
│   └── tailwind.css
├── dist/
│   └── tailwind.min.css
├── package.json
├── package-lock.json
├── tailwind.config.js
└── postcss.config.js