তুমি যে HTML ফাইল দিয়েছো তা বেশ ভালোভাবে ডিজাইন করা হয়েছে এবং এটি একটি কমপ্লিট ডিজাইন সেকশন সহ একটি ওয়েবসাইট। তুমি এখন এটা WordPress থিমে রূপান্তর করতে চাচ্ছো যাতে:
- ✅ হেডার এবং ফুটার WordPress Editor (Full Site Editing – FSE) দিয়ে বানানো যায়।
- ✅ কাস্টম গ্রিড ব্লক তৈরি করা যায় যেখানে তুমি কয়টা গ্রিড হবে তা নির্ধারণ করতে পারো।
- ✅ ওই গ্রিডের ভিতর কাস্টম ব্লক/প্যাটার্ন ব্যবহার করে ডিজাইন করতে পারো।
- ✅ পুরো ওয়েবসাইট ব্লক এডিটর থেকেই বানানো ও এডিট করা যায়।
✅ টিউটোরিয়াল প্ল্যান: HTML থেকে Full Site Editing WordPress থিম বানানো (Block-Based)
🔰 ধাপ ১: প্রজেক্ট রেডি করো
1. থিম ফোল্ডার বানাও
wp-content/themes/crypto-bureau
2. দরকারি ফাইল তৈরি করো:
crypto-bureau/
│
├─ style.css
├─ functions.php
├─ theme.json
├─ index.php
├─ templates/
│ └─ home.html
├─ parts/
│ ├─ header.html
│ └─ footer.html
├─ patterns/
│ ├─ custom-grid.php
│ └─ hero-banner.php
🧾 ধাপ ২: style.css
/*
Theme Name: Crypto Bureau
Author: Your Name
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Description: Full Site Editing theme for crypto website.
*/
🔌 ধাপ ৩: functions.php
<?php
// crypto-bureau/functions.php
/**
* থিমের অ্যাসেট (স্টাইল এবং স্ক্রিপ্ট) এনকিউ করুন।
* এই ফাংশনটি আপনার থিমের CSS এবং JavaScript ফাইলগুলিকে ওয়ার্ডপ্রেসে লোড করে।
*/
function crypto_bureau_enqueue_assets() {
$theme_version = wp_get_theme()->get('Version'); // থিমের বর্তমান সংস্করণ পান
$assets_dir_uri = get_template_directory_uri() . '/assets/'; // 'assets' ফোল্ডারের URL
// Google Fonts: DM Sans ফন্ট লোড করুন
// আপনার থিমের টেক্সট স্টাইলিংয়ের জন্য এটি প্রয়োজন।
wp_enqueue_style(
'google-fonts-dm-sans',
'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap',
[], // কোনো ডিপেন্ডেন্সি নেই
null // সংস্করণ নির্দিষ্ট করা হয়নি, Google CDN এটি পরিচালনা করে
);
// Font Awesome CDN লোড করুন (আইকনগুলির জন্য)
// আপনার HTML এ ব্যবহৃত আইকনগুলির জন্য এটি প্রয়োজন।
wp_enqueue_style(
'font-awesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css',
[],
'6.0.0-beta3'
);
// Tailwind CSS CDN লোড করুন
// এটি আপনার থিমের সমস্ত Tailwind CSS ইউটিলিটি ক্লাস সরবরাহ করবে।
wp_enqueue_style(
'tailwind-cdn',
'https://cdn.tailwindcss.com',
[],
null // CDN সংস্করণ, তাই null
);
// থিমের মূল জাভাস্ক্রিপ্ট লোড করুন
// এটি আপনার থিমের ইন্টারেক্টিভ কার্যকারিতা (যেমন ক্যারোসেল, থিম টগল) পরিচালনা করবে।
wp_enqueue_script(
'crypto-bureau-script', // স্ক্রিপ্টের হ্যান্ডেল
$assets_dir_uri . 'js/theme-scripts.js', // স্ক্রিপ্টের URL
[], // কোনো ডিপেন্ডেন্সি নেই
filemtime(get_template_directory() . '/assets/js/theme-scripts.js'), // ক্যাশে ব্রেকিংয়ের জন্য ফাইলের শেষ পরিবর্তনের সময় ব্যবহার করুন
true // স্ক্রিপ্টটি HTML এর ফুটার অংশে লোড করুন, যাতে DOM লোড হওয়ার পরে এটি চলে।
);
}
add_action('wp_enqueue_scripts', 'crypto_bureau_enqueue_assets'); // ফ্রন্টএন্ডে অ্যাসেট লোড করার জন্য হুক
add_action('admin_enqueue_scripts', 'crypto_bureau_enqueue_assets'); // ওয়ার্ডপ্রেস এডিটরেও স্টাইল/স্ক্রিপ্ট লোড করুন, যাতে এডিটরেও থিমের স্টাইল দেখা যায়।
/**
* থিম সমর্থন যোগ করুন।
* এই ফাংশনটি থিমের বিভিন্ন বৈশিষ্ট্য সক্ষম করে, যা ফুল সাইট এডিটিংয়ের জন্য গুরুত্বপূর্ণ।
*/
function crypto_bureau_theme_setup() {
add_theme_support('wp-block-styles'); // ডিফল্ট ব্লক স্টাইল যোগ করুন, যাতে ওয়ার্ডপ্রেসের বিল্ট-ইন ব্লকগুলি সঠিকভাবে স্টাইল হয়।
add_theme_support('responsive-embeds'); // রেসপনসিভ এম্বেড সমর্থন সক্ষম করুন, যাতে এম্বেড করা কন্টেন্ট (যেমন YouTube ভিডিও) রেসপনসিভ হয়।
add_theme_support('editor-styles'); // গুটেনবার্গ এডিটরে থিম স্টাইল লোড করুন, যাতে এডিটরে আপনার থিমের স্টাইল দেখা যায়।
add_editor_style('https://cdn.tailwindcss.com'); // এডিটরে Tailwind CSS CDN লোড করুন।
// কাস্টম লোগো সমর্থন যোগ করুন
// এটি ব্যবহারকারীদের ওয়ার্ডপ্রেস কাস্টমাইজার থেকে একটি লোগো আপলোড করার অনুমতি দেয়।
add_theme_support('custom-logo', array(
'height' => 100, // লোগোর সর্বোচ্চ উচ্চতা
'width' => 100, // লোগোর সর্বোচ্চ প্রস্থ
'flex-height' => true, // উচ্চতা ফ্লেক্সিবল করুন
'flex-width' => true, // প্রস্থ ফ্লেক্সিবল করুন
));
// নেভিগেশন মেনু সমর্থন নিবন্ধন করুন
// এটি ওয়ার্ডপ্রেস মেনু সিস্টেমকে সক্ষম করে, যা হেডার এবং ফুটারে ব্যবহার করা হবে।
register_nav_menus(array(
'primary' => esc_html__('Primary Menu', 'crypto-bureau'), // প্রধান মেনু
'footer' => esc_html__('Footer Menu', 'crypto-bureau'), // ফুটার মেনু
));
}
add_action('after_setup_theme', 'crypto_bureau_theme_setup'); // থিম সেটআপ করার পরে এই ফাংশনটি চালান।
/**
* কাস্টম ব্লক প্যাটার্ন ক্যাটাগরি নিবন্ধন করুন।
* এই ফাংশনটি আপনার কাস্টম ব্লক প্যাটার্নগুলির জন্য একটি নতুন ক্যাটাগরি তৈরি করে, যা গুটেনবার্গ এডিটরে প্রদর্শিত হবে।
*/
function crypto_bureau_register_block_pattern_categories() {
register_block_pattern_category(
'crypto-bureau', // ক্যাটাগরি স্ল্যাগ (ইউনিক আইডি)
array( 'label' => esc_html__( 'ক্রিপ্টো ব্যুরো প্যাটার্নস', 'crypto-bureau' ) ) // এডিটরে প্রদর্শিত লেবেল
);
}
add_action( 'init', 'crypto_bureau_register_block_pattern_categories' ); // 'init' হুকে ক্যাটাগরি নিবন্ধন করুন।
/**
* কাস্টম ব্লক প্যাটার্ন নিবন্ধন করুন।
* এই ফাংশনটি আপনার তৈরি করা প্রতিটি ব্লক প্যাটার্ন ফাইলকে অন্তর্ভুক্ত করে, যাতে ওয়ার্ডপ্রেস সেগুলিকে চিনতে পারে।
*/
function crypto_bureau_register_block_patterns() {
require_once get_template_directory() . '/patterns/custom-grid.php';
require_once get_template_directory() . '/patterns/hero-banner.php';
// এখানে আপনার অন্যান্য প্যাটার্ন ফাইলগুলি যোগ করুন
}
add_action( 'init', 'crypto_bureau_register_block_patterns' ); // 'init' হুকে প্যাটার্ন নিবন্ধন করুন।
/**
* কাস্টম গুটেনবার্গ ব্লক নিবন্ধন করুন।
* এই ফাংশনটি আপনার থিমের মধ্যে কাস্টম ব্লকগুলিকে নিবন্ধন করে।
*/
function crypto_bureau_register_custom_blocks() {
// 'blocks' ফোল্ডারের পাথ
$block_dir = get_template_directory() . '/blocks/';
// প্রতিটি কাস্টম ব্লকের জন্য
register_block_type( $block_dir . 'my-simple-block' );
}
add_action( 'init', 'crypto_bureau_register_custom_blocks' );
🎛️ ধাপ ৪: theme.json (FSE থিমের মূল শক্তি)
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"customGradient": false,
"customDuotone": false,
"defaultPalette": false,
"defaultGradients": false,
"defaultDuotones": false,
"palette": [
{
"slug": "bg-primary",
"color": "#090808",
"name": "Background Primary"
},
{
"slug": "bg-secondary",
"color": "#001810",
"name": "Background Secondary"
},
{
"slug": "text-primary",
"color": "#ffffff",
"name": "Text Primary"
},
{
"slug": "text-secondary",
"color": "rgba(255, 255, 255, 0.8)",
"name": "Text Secondary"
},
{
"slug": "accent-primary",
"color": "#4ecda3",
"name": "Accent Primary"
},
{
"slug": "accent-secondary",
"color": "#b77f0e",
"name": "Accent Secondary"
}
]
},
"typography": {
"customFontSize": false,
"fluid": true,
"fontFamilies": [
{
"fontFamily": "'DM Sans', sans-serif",
"name": "DM Sans",
"slug": "dm-sans"
}
]
},
"spacing": {
"units": ["px", "%", "em", "rem", "vw", "vh"],
"customSpacing": true,
"blockGap": true
},
"layout": {
"contentSize": "1200px",
"wideSize": "1440px"
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--bg-primary)",
"text": "var(--wp--preset--color--text-primary)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--dm-sans)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-primary)"
}
}
}
},
"customTemplates": [
{
"name": "home",
"title": "Homepage",
"postTypes": ["page"]
}
],
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}
🧱 ধাপ ৫: index.php,
<?php
// crypto-bureau/index.php
// এই ফাইলটি ইচ্ছাকৃতভাবে খালি রাখা হয়েছে।
// ওয়ার্ডপ্রেস 'templates' ফোল্ডারে সংজ্ঞায়িত ব্লক টেমপ্লেটগুলি ব্যবহার করবে।
templates/home.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
<!-- এখানে আপনার hero section, grid section block/pattern হিসেবে আসবে -->
<!-- wp:pattern {"slug":"crypto-bureau/hero-banner"} /-->
<!-- wp:pattern {"slug":"crypto-bureau/custom-grid"} /-->
<!-- wp:block {"name":"crypto-bureau/my-simple-block"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
parts/header.html
<!-- wp:group {"tagName":"nav","align":"full","className":"navbar"} -->
<nav class="navbar alignfull">
<!-- wp:group {"className":"nav-container"} -->
<div class="nav-container">
<!-- wp:group {"className":"nav-logo"} -->
<div class="nav-logo">
<!-- wp:site-logo {"width":76,"className":"w-[clamp(50px,8vw,76px)] h-[clamp(38px,6vw,59px)] object-contain"} /-->
<!-- wp:site-title {"className":"font-semibold text-gradient text-[clamp(16px,3vw,24px)]"} /-->
</div>
<!-- /wp:group -->
<!-- wp:navigation {"overlayMenu":"always","className":"nav-menu","layout":{"type":"flex","orientation":"horizontal","justifyContent":"center","flexWrap":"wrap"}} /-->
<!-- wp:group {"className":"nav-actions"} -->
<div class="nav-actions">
<!-- wp:html -->
<div class="theme-toggle">
<div class="toggle-switch">
<i class="fas fa-moon"></i>
</div>
</div>
<!-- /wp:html -->
<!-- wp:button {"className":"cta-button"} -->
<div class="wp-block-button cta-button"><a class="wp-block-button__link">Join the waiting list</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:group -->
<!-- wp:html -->
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
</nav>
<!-- /wp:group -->
parts/footer.html
<!-- wp:group {"tagName":"footer","align":"full","className":"footer"} -->
<footer class="footer alignfull">
<!-- wp:group {"className":"container"} -->
<div class="container">
<!-- wp:group {"className":"footer-content"} -->
<div class="footer-content">
<!-- wp:group {"className":"footer-main"} -->
<div class="footer-main">
<!-- wp:image {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/footer-logo.png","alt":"Crypto Bureau Footer Logo","width":76,"height":59,"className":"w-[clamp(50px,8vw,76px)] h-[clamp(38px,6vw,59px)] object-contain"} /-->
<!-- wp:site-title {"className":"font-semibold text-gradient text-[clamp(18px,3vw,24px)]"} /-->
<!-- wp:paragraph {"className":"text-tertiary text-[clamp(14px,2vw,16px)] leading-relaxed max-w-[600px]"} -->
<p class="text-tertiary text-[clamp(14px,2vw,16px)] leading-relaxed max-w-[600px]">The content provided by Crypto Bureau—including videos, articles, comments, and forecasts—is for informational and educational purposes only and not financial or professional advice. Cryptocurrency trading involves substantial risk, including significant potential financial losses.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"footer-contact"} -->
<div class="footer-contact">
<!-- wp:group {"className":"contact-item"} -->
<div class="contact-item">
<!-- wp:html -->
<i class="fas fa-map-marker-alt"></i>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"text-tertiary text-[clamp(14px,2vw,16px)]"} -->
<p class="text-tertiary text-[clamp(14px,2vw,16px)]">Company, 234 East, 19th Street, St. London 10001</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"contact-row"} -->
<div class="contact-row">
<!-- wp:group {"className":"contact-item"} -->
<div class="contact-item">
<!-- wp:html -->
<i class="fas fa-phone"></i>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"text-tertiary text-[clamp(14px,2vw,16px)]"} -->
<p class="text-tertiary text-[clamp(14px,2vw,16px)]">0000000000000</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"contact-item"} -->
<div class="contact-item">
<!-- wp:html -->
<i class="fas fa-print"></i>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"text-tertiary text-[clamp(14px,2vw,16px)]"} -->
<p class="text-tertiary text-[clamp(14px,2vw,16px)]">(123) 456-7890</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"social-media"} -->
<div class="social-media">
<!-- wp:paragraph {"className":"text-tertiary text-[clamp(16px,2_5vw,18px)]"} -->
<p class="text-tertiary text-[clamp(16px,2_5vw,18px)]">Social Media</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"social-icons","layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="social-icons">
<!-- wp:html -->
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"footer-bottom"} -->
<div class="footer-bottom">
<!-- wp:navigation {"overlayMenu":"never","className":"footer-links","layout":{"type":"flex","orientation":"horizontal","justifyContent":"center","flexWrap":"wrap"}} /-->
<!-- wp:paragraph {"className":"footer-copyright"} -->
<p class="footer-copyright">Copyright © 2025</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</footer>
<!-- /wp:group -->
patterns/custom-grid.php
<?php
/**
* Title: Custom Grid Layout
* Slug: crypto-bureau/custom-grid
* Categories: crypto-bureau
* Keywords: grid, columns, layout, custom
* Viewport Width: 1200
*/
?>
<!-- wp:group {"className":"container mx-auto px-4 py-12"} -->
<div class="container mx-auto px-4 py-12">
<!-- wp:columns {"className":"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"} -->
<div class="wp-block-columns grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- wp:column {"className":"bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"} -->
<div class="wp-block-column bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<!-- wp:heading {"level":3} -->
<h3>গ্রিড কলাম ১</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>এখানে আপনার কন্টেন্ট যোগ করুন।</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"className":"bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"} -->
<div class="wp-block-column bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<!-- wp:heading {"level":3} -->
<h3>গ্রিড কলাম ২</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>এখানে আপনার কন্টেন্ট যোগ করুন।</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"className":"bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"} -->
<div class="wp-block-column bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<!-- wp:heading {"level":3} -->
<h3>গ্রিড কলাম ৩</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>এখানে আপনার কন্টেন্ট যোগ করুন।</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
patterns/hero-banner.php
<?php
/**
* Title: Hero Section
* Slug: crypto-bureau/hero-banner
* Categories: crypto-bureau
* Keywords: hero, intro, banner, crypto, bureau
* Viewport Width: 1440
*/
?>
<!-- wp:group {"tagName":"section","align":"full","className":"hero relative min-h-screen flex items-center pt-[clamp(100px,15vh,120px)] pb-[clamp(60px,10vh,80px)] overflow-hidden"} -->
<section class="hero alignfull relative min-h-screen flex items-center pt-[clamp(100px,15vh,120px)] pb-[clamp(60px,10vh,80px)] overflow-hidden">
<!-- wp:group {"className":"hero-background absolute inset-0 -z-10"} -->
<div class="hero-background absolute inset-0 -z-10">
<!-- wp:html -->
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"container mx-auto px-[clamp(15px,3vw,60px)]"} -->
<div class="container mx-auto px-[clamp(15px,3vw,60px)]">
<!-- wp:group {"className":"hero-content text-center max-w-[1200px] mx-auto relative z-10"} -->
<div class="hero-content text-center max-w-[1200px] mx-auto relative z-10">
<!-- wp:heading {"level":1,"className":"hero-title text-[clamp(2rem,6vw,4rem)] font-semibold bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent mb-[clamp(16px,3vh,24px)] leading-tight","placeholder":"আপনার হিরো শিরোনাম লিখুন"} -->
<h1 class="hero-title text-[clamp(2rem,6vw,4rem)] font-semibold bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent mb-[clamp(16px,3vh,24px)] leading-tight">ক্রিপ্টো ব্যুরো: আপনার ডিজিটাল সম্পদ সুরক্ষিত করুন</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hero-description text-[clamp(16px,2.5vw,20px)] text-gray-300 mb-[clamp(32px,6vh,48px)] max-w-[800px] mx-auto leading-relaxed","placeholder":"আপনার হিরো বর্ণনা লিখুন"} -->
<p class="hero-description text-[clamp(16px,2.5vw,20px)] text-gray-300 mb-[clamp(32px,6vh,48px)] max-w-[800px] mx-auto leading-relaxed">
ক্রিপ্টো ব্যুরো আপনাকে ডিজিটাল সম্পদ ব্যবস্থাপনার জটিল বিশ্বে নেভিগেট করতে সাহায্য করে। আমরা আপনার ক্রিপ্টো বিনিয়োগের জন্য নিরাপত্তা, স্বচ্ছতা এবং নির্ভরযোগ্যতা নিশ্চিত করি।
<a href="#" class="learn-more text-accent-primary underline ml-2 transition-colors duration-300 hover:text-white">আরও জানুন</a>
</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"hero-stats grid grid-cols-1 md:grid-cols-2 gap-[clamp(16px,3vw,24px)] mb-[clamp(32px,6vh,48px)]"} -->
<div class="hero-stats grid grid-cols-1 md:grid-cols-2 gap-[clamp(16px,3vw,24px)] mb-[clamp(32px,6vh,48px)]">
<!-- wp:group {"className":"stat-card bg-white/5 backdrop-blur-xl rounded-[clamp(16px,3vw,24px)] p-[clamp(20px,4vw,30px)] border border-white/10 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-8px] hover:scale-[1.02] hover:shadow-xl hover:border-accent-primary"} -->
<div class="stat-card bg-white/5 backdrop-blur-xl rounded-[clamp(16px,3vw,24px)] p-[clamp(20px,4vw,30px)] border border-white/10 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-8px] hover:scale-[1.02] hover:shadow-xl hover:border-accent-primary">
<!-- wp:html -->
<div class="stat-card::before"></div>
<!-- /wp:html -->
<!-- wp:heading {"level":3,"className":"text-[clamp(20px,3vw,28px)] font-medium mb-[clamp(20px,4vw,32px)] text-white relative z-10"} -->
<h3 class="text-[clamp(20px,3vw,28px)] font-medium mb-[clamp(20px,4vw,32px)] text-white relative z-10">বাজারের পারফরম্যান্স</h3>
<!-- /wp:heading -->
<!-- wp:group {"className":"stat-comparison flex justify-between mb-[clamp(20px,4vw,32px)] relative z-10"} -->
<div class="stat-comparison flex justify-between mb-[clamp(20px,4vw,32px)] relative z-10">
<!-- wp:group {"className":"stat-item text-left"} -->
<div class="stat-item text-left">
<!-- wp:html -->
<span class="stat-indicator msci"></span>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"stat-label text-[clamp(12px,1.5vw,14px)] text-white block mb-2"} -->
<p class="stat-label text-[clamp(12px,1.5vw,14px)] text-white block mb-2">MSCI World</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"stat-value text-[clamp(20px,3vw,26px)] font-medium text-white"} -->
<p class="stat-value text-[clamp(20px,3vw,26px)] font-medium text-white">approx. 12.5%</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"stat-item text-left"} -->
<div class="stat-item text-left">
<!-- wp:html -->
<span class="stat-indicator bitcoin"></span>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"stat-label text-[clamp(12px,1.5vw,14px)] text-white block mb-2"} -->
<p class="stat-label text-[clamp(12px,1.5vw,14px)] text-white block mb-2">Bitcoin</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"stat-value text-[clamp(20px,3vw,26px)] font-medium text-white"} -->
<p class="stat-value text-[clamp(20px,3vw,26px)] font-medium text-white">approx. 25.3%</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:image {"url":"/placeholder.svg?height=200&width=400","alt":"Chart showing market performance","className":"chart-container h-[clamp(150px,25vh,200px)] relative"} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"stat-card bg-white/5 backdrop-blur-xl rounded-[clamp(16px,3vw,24px)] p-[clamp(20px,4vw,30px)] border border-white/10 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-8px] hover:scale-[1.02] hover:shadow-xl hover:border-accent-primary"} -->
<div class="stat-card bg-white/5 backdrop-blur-xl rounded-[clamp(16px,3vw,24px)] p-[clamp(20px,4vw,30px)] border border-white/10 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-8px] hover:scale-[1.02] hover:shadow-xl hover:border-accent-primary">
<!-- wp:html -->
<div class="stat-card::before"></div>
<!-- /wp:html -->
<!-- wp:heading {"level":3,"className":"text-[clamp(20px,3vw,28px)] font-medium mb-[clamp(20px,4vw,32px)] text-white relative z-10"} -->
<h3 class="text-[clamp(20px,3vw,28px)] font-medium mb-[clamp(20px,4vw,32px)] text-white relative z-10">ব্যবহারকারীর বৃদ্ধি</h3>
<!-- /wp:heading -->
<!-- wp:group {"className":"user-stats flex flex-col gap-[clamp(20px,4vw,32px)] relative z-10"} -->
<div class="user-stats flex flex-col gap-[clamp(20px,4vw,32px)] relative z-10">
<!-- wp:group {"className":"user-stat flex flex-col gap-2"} -->
<div class="user-stat flex flex-col gap-2">
<!-- wp:paragraph {"className":"year text-[clamp(12px,1.5vw,14px)] text-white font-medium"} -->
<p class="year text-[clamp(12px,1.5vw,14px)] text-white font-medium">2023</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"progress-bar w-full h-[14px] bg-white/5 rounded-md overflow-hidden relative"} -->
<div class="progress-bar w-full h-[14px] bg-white/5 rounded-md overflow-hidden relative">
<!-- wp:html -->
<div class="progress" style="width: 85%;"></div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
<!-- wp:paragraph {"className":"value text-[clamp(16px,2.5vw,20px)] text-white font-medium"} -->
<p class="value text-[clamp(16px,2.5vw,20px)] text-white font-medium">85%</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"user-stat flex flex-col gap-2"} -->
<div class="user-stat flex flex-col gap-2">
<!-- wp:paragraph {"className":"year text-[clamp(12px,1.5vw,14px)] text-white font-medium"} -->
<p class="year text-[clamp(12px,1.5vw,14px)] text-white font-medium">2024</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"progress-bar w-full h-[14px] bg-white/5 rounded-md overflow-hidden relative"} -->
<div class="progress-bar w-full h-[14px] bg-white/5 rounded-md overflow-hidden relative">
<!-- wp:html -->
<div class="progress" style="width: 92%;"></div>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
<!-- wp:paragraph {"className":"value text-[clamp(16px,2.5vw,20px)] text-white font-medium"} -->
<p class="value text-[clamp(16px,2.5vw,20px)] text-white font-medium">92%</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"hero-cta text-center"} -->
<div class="hero-cta text-center">
<!-- wp:paragraph {"className":"text-white text-[clamp(16px,2vw,18px)] font-medium mb-[clamp(16px,3vh,24px)]"} -->
<p class="text-white text-[clamp(16px,2vw,18px)] font-medium mb-[clamp(16px,3vh,24px)]">
আজই আপনার ক্রিপ্টো যাত্রা শুরু করুন এবং আমাদের বিশেষজ্ঞ দলের সাথে আপনার সম্পদ সুরক্ষিত করুন।
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"primary-button bg-gradient-to-b from-accent-secondary to-[#553400] text-white border-none py-[clamp(14px,3vh,18px)] px-[clamp(24px,4vw,32px)] rounded-lg text-[clamp(16px,2.5vw,20px)] font-semibold cursor-pointer inline-flex items-center gap-3 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-3px] hover:scale-[1.05] hover:shadow-xl"} -->
<div class="wp-block-button primary-button bg-gradient-to-b from-accent-secondary to-[#553400] text-white border-none py-[clamp(14px,3vh,18px)] px-[clamp(24px,4vw,32px)] rounded-lg text-[clamp(16px,2.5vw,20px)] font-semibold cursor-pointer inline-flex items-center gap-3 transition-all duration-400 ease-in-out relative overflow-hidden hover:translate-y-[-3px] hover:scale-[1.05] hover:shadow-xl">
<a class="wp-block-button__link">
শুরু করুন <i class="fas fa-arrow-right"></i>
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</section>
<!-- /wp:group -->
assets/js/theme-scripts.js
// crypto-bureau-theme/assets/js/theme-scripts.js
// DOM Elements
const hamburger = document.getElementById('hamburger');
const navMenu = document.querySelector('.nav-menu'); // Changed to querySelector for consistency
const navbar = document.querySelector('.navbar');
const faqItems = document.querySelectorAll('.faq-item');
const themeToggle = document.querySelector('.theme-toggle');
const toggleSwitch = document.querySelector('.toggle-switch');
const body = document.body;
// Theme Management
let currentTheme = localStorage.getItem('theme') || 'dark';
function setTheme(theme) {
if (theme === 'light') {
body.setAttribute('data-theme', 'light');
toggleSwitch.classList.add('light-mode');
toggleSwitch.querySelector('i').className = 'fas fa-sun'; // Font Awesome icon for sun
} else {
body.removeAttribute('data-theme');
toggleSwitch.classList.remove('light-mode');
toggleSwitch.querySelector('i').className = 'fas fa-moon'; // Font Awesome icon for moon
}
localStorage.setItem('theme', theme);
currentTheme = theme;
}
// Initialize theme
setTheme(currentTheme);
// Theme toggle functionality
if (themeToggle) {
themeToggle.addEventListener('click', (event) => {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
// Add ripple effect
createRipple(themeToggle, event);
});
}
// Mobile Navigation Toggle
// Note: The navMenu element needs an ID or a more specific class if it's not directly 'nav-menu'
// For this example, assuming .nav-menu is the target for mobile toggle
if (hamburger && navMenu) {
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
document.body.style.overflow = navMenu.classList.contains('active') ? 'hidden' : '';
});
}
// Close mobile menu when clicking on nav links
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
if (hamburger && navMenu) {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.body.style.overflow = '';
}
});
});
// Enhanced Navbar scroll effect
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (navbar) {
if (scrollTop > 100) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
// Hide/show navbar on scroll
if (scrollTop > lastScrollTop && scrollTop > 200) {
navbar.style.transform = 'translateY(-100%)';
} else {
navbar.style.transform = 'translateY(0)';
}
}
lastScrollTop = scrollTop;
});
// FAQ Accordion with enhanced animations
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
const isActive = item.classList.contains('active');
// Close all FAQ items with stagger effect
faqItems.forEach((faqItem, index) => {
setTimeout(() => {
faqItem.classList.remove('active');
}, index * 50);
});
// Open clicked item if it wasn't active
if (!isActive) {
setTimeout(() => {
item.classList.add('active');
}, 100);
}
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offsetTop = target.offsetTop - 100;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
// Premium Parallax Effects
function initParallaxEffects() {
const parallaxElements = document.querySelectorAll('.gradient-orb, .parallax-element');
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
parallaxElements.forEach((element, index) => {
const speed = 0.3 + (index * 0.1);
const yPos = -(scrolled * speed);
const rotate = scrolled * 0.05;
if (element.classList.contains('gradient-orb')) {
element.style.transform = `translate3d(0, ${yPos}px, 0) rotate(${rotate}deg)`;
} else {
element.style.transform = `translate3d(0, ${yPos}px, 0)`;
}
});
});
}
// Enhanced Chart Animation (Simplified for now, full implementation might need a library)
function createChartBars() {
const chartBars = document.querySelector('.chart-bars');
if (!chartBars) return;
const barCount = 80;
const heights = [16, 16, 22, 22, 32, 32, 17, 17, 10, 10, 13, 13, 24, 24, 14, 14, 8, 8, 16, 16, 22, 22, 32, 32, 17, 17, 10, 10, 14, 14, 8, 8, 32, 32, 17, 17, 10, 10, 14, 14, 8, 8, 32, 32, 17, 17, 10, 10, 24, 24, 14, 14, 8, 8, 16, 16, 22, 22, 32, 32, 17, 17, 10, 10];
chartBars.innerHTML = '';
for (let i = 0; i < barCount; i++) {
const bar = document.createElement('div');
bar.style.width = '8px';
bar.style.height = `${heights[i % heights.length]}px`;
bar.style.background = 'linear-gradient(180deg, rgba(78,205,163,1) 30%, rgba(197,134,6,0.5) 100%)';
bar.style.borderRadius = '1px';
bar.style.animation = `barGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${i * 0.02}s both`;
bar.style.transformOrigin = 'bottom';
chartBars.appendChild(bar);
}
}
// Progress bar animation with intersection observer
function initializeProgressBars() {
const progressBars = document.querySelectorAll('.progress');
const progressObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const progress = entry.target;
const targetWidth = progress.getAttribute('data-width') || progress.style.width;
progress.style.width = '0'; // Reset width for animation
setTimeout(() => {
progress.style.width = targetWidth;
}, 200);
progressObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
progressBars.forEach(bar => {
bar.setAttribute('data-width', bar.style.width); // Store original width
progressObserver.observe(bar);
});
}
// Enhanced mini chart animations (Simplified for now)
function initializeMiniCharts() {
const miniCharts = document.querySelectorAll('.mini-chart');
miniCharts.forEach((canvas, index) => {
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
canvas.style.width = rect.width + 'px';
canvas.style.height = rect.height + 'px';
// Generate realistic crypto chart data
const points = [];
const pointCount = 30;
let currentPrice = 100;
for (let i = 0; i < pointCount; i++) {
const volatility = 0.05;
const change = (Math.random() - 0.5) * volatility;
currentPrice *= (1 + change);
points.push({
x: (rect.width / (pointCount - 1)) * i,
y: rect.height - ((currentPrice - 80) / 40) * rect.height * 0.8 - rect.height * 0.1
});
}
let animationProgress = 0;
function animate() {
ctx.clearRect(0, 0, rect.width, rect.height);
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 0, rect.height);
gradient.addColorStop(0, 'rgba(78, 205, 163, 0.3)');
gradient.addColorStop(1, 'rgba(78, 205, 163, 0.05)');
// Draw filled area
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(0, rect.height);
const currentPointCount = Math.floor(animationProgress * pointCount);
for (let i = 0; i <= currentPointCount && i < points.length; i++) {
if (i === 0) {
ctx.lineTo(points[i].x, points[i].y);
} else {
// Smooth curve using quadratic bezier
const prevPoint = points[i - 1];
const currentPoint = points[i];
const cpx = (prevPoint.x + currentPoint.x) / 2;
const cpy = (prevPoint.y + currentPoint.y) / 2;
ctx.quadraticCurveTo(prevPoint.x, prevPoint.y, cpx, cpy);
}
}
ctx.lineTo(points[Math.min(currentPointCount, points.length - 1)].x, rect.height);
ctx.closePath();
ctx.fill();
// Draw line
ctx.strokeStyle = '#04a36e';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
for (let i = 0; i <= currentPointCount && i < points.length; i++) {
if (i === 0) {
ctx.moveTo(points[i].x, points[i].y);
} else {
const prevPoint = points[i - 1];
const currentPoint = points[i];
const cpx = (prevPoint.x + currentPoint.x) / 2;
const cpy = (prevPoint.y + currentPoint.y) / 2;
ctx.quadraticCurveTo(prevPoint.x, prevPoint.y, cpx, cpy);
}
}
ctx.stroke();
// Draw glow effect
ctx.shadowColor = '#04a36e';
ctx.shadowBlur = 10;
ctx.stroke();
ctx.shadowBlur = 0;
if (animationProgress < 1) {
animationProgress += 0.015;
requestAnimationFrame(animate);
}
}
// Start animation when chart comes into view
const chartObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => animate(), index * 200);
chartObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
chartObserver.observe(canvas);
});
}
// Enhanced newsletter form handling (Simplified for now)
const newsletterForm = document.querySelector('.newsletter-form');
if (newsletterForm) {
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = newsletterForm.querySelector('input[type="email"]').value;
if (email && isValidEmail(email)) {
const button = newsletterForm.querySelector('.subscribe-btn');
const originalText = button.textContent;
// Loading state
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Subscribing...';
button.disabled = true;
setTimeout(() => {
button.innerHTML = '<i class="fas fa-check"></i> Subscribed!';
button.style.background = '#04a36e';
setTimeout(() => {
button.textContent = originalText;
button.disabled = false;
button.style.background = '';
newsletterForm.querySelector('input[type="email"]').value = '';
// Show success message
showNotification('Successfully subscribed to newsletter!', 'success');
}, 2000);
}, 1500);
} else {
showNotification('Please enter a valid email address', 'error');
}
});
}
// Email validation
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// Notification system
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.innerHTML = `
<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
<span>${message}</span>
<button class="notification-close"><i class="fas fa-times"></i></button>
`;
document.body.appendChild(notification);
// Show notification
setTimeout(() => notification.classList.add('show'), 100);
// Auto remove
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, 5000);
// Manual close
notification.querySelector('.notification-close').addEventListener('click', () => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
});
}
// Enhanced button click effects with ripple
function createRipple(element, event) {
const ripple = document.createElement('span');
const rect = element.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = event.clientX - rect.left - size / 2;
const y = event.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
element.style.position = 'relative';
element.style.overflow = 'hidden';
element.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
}
// Add ripple effect to buttons
document.querySelectorAll('button, .cta-button, .primary-button').forEach(button => {
button.addEventListener('click', function(e) {
createRipple(this, e);
});
});
// Enhanced hover effects for cards
document.querySelectorAll('.problem-card, .solution-card, .feature-card, .membership-card, .result-card, .testimonial-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-10px) scale(1.02)';
card.style.zIndex = '10';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0) scale(1)';
card.style.zIndex = '1';
});
});
// Scroll-triggered counter animation
function animateCounters() {
const counters = document.querySelectorAll('.rating-score, .stat-value');
counters.forEach(counter => {
const target = parseFloat(counter.textContent.replace(/[^\d.]/g, ''));
if (isNaN(target)) return;
const increment = target / 100;
let current = 0;
const updateCounter = () => {
if (current < target) {
current += increment;
if (counter.classList.contains('rating-score')) {
counter.textContent = current.toFixed(2);
} else {
counter.textContent = `approx. ${current.toFixed(2)}%`;
}
requestAnimationFrame(updateCounter);
} else {
// Reset to original text
if (counter.classList.contains('rating-score')) {
counter.textContent = target.toFixed(2);
} else {
counter.textContent = `approx. ${target.toFixed(2)}%`;
}
}
};
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
updateCounter();
counterObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
counterObserver.observe(counter);
});
}
// Lazy loading for images with fade-in effect
const images = document.querySelectorAll('img');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.style.opacity = '0';
img.style.transition = 'opacity 0.5s ease';
if (img.dataset.src) {
img.src = img.dataset.src;
}
img.onload = () => {
img.style.opacity = '1';
};
imageObserver.unobserve(img);
}
});
});
images.forEach(img => {
imageObserver.observe(img);
});
// Performance optimization: Debounce scroll events
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Smooth scroll performance optimization
const debouncedScrollHandler = debounce(() => {
// Additional scroll-based animations can be added here
}, 16); // ~60fps
// Initialize everything when page loads
window.addEventListener('load', () => {
initParallaxEffects();
createChartBars();
initializeProgressBars();
initializeMiniCharts();
animateCounters();
console.log('🚀 Crypto Bureau website loaded with enhanced features!');
console.log('✨ Features: Dark/Light mode, Premium animations, Responsive design');
});
// Handle resize events
window.addEventListener('resize', debounce(() => {
// Reinitialize charts on resize
initializeMiniCharts();
}, 250));
// Keyboard navigation support
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
// Close mobile menu
if (hamburger && navMenu) {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.body.style.overflow = '';
}
// Close all FAQ items
faqItems.forEach(item => {
item.classList.remove('active');
});
}
});
// Focus management for accessibility
document.addEventListener('focusin', (e) => {
if (e.target.matches('button, a, input, [tabindex]')) {
e.target.style.outline = '2px solid var(--accent-primary)';
e.target.style.outlineOffset = '2px';
}
});
document.addEventListener('focusout', (e) => {
if (e.target.matches('button, a, input, [tabindex]')) {
e.target.style.outline = '';
e.target.style.outlineOffset = '';
}
});
// Preload critical images
function preloadImages() {
const criticalImages = [
// Add paths to critical images if needed, e.g., from your assets folder
// '<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/carousel-1.png',
];
criticalImages.forEach(src => {
const img = new Image();
img.src = src;
});
}
preloadImages();
blocks/my-simple-block/block.json
{
"apiVersion": 2,
"name": "crypto-bureau/my-simple-block",
"title": "আমার সাধারণ ব্লক",
"category": "crypto-bureau",
"icon": "star-filled",
"description": "ক্রিপ্টো ব্যুরো থিমের জন্য একটি সাধারণ কাস্টম ব্লক।",
"textdomain": "crypto-bureau",
"editorScript": "file:../../assets/js/my-simple-block.js",
"style": "file:../../assets/css/my-simple-block.css",
"attributes": {
"message": {
"type": "string",
"default": "এইটা আমার প্রথম কাস্টম ব্লক!"
},
"textColor": {
"type": "string",
"default": "#ffffff"
},
"backgroundColor": {
"type": "string",
"default": "#001810"
}
}
}
blocks/my-simple-block/index.js
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls, ColorPalette } = wp.blockEditor;
const { PanelBody } = wp.components;
registerBlockType('crypto-bureau/my-simple-block', {
title: 'আমার সাধারণ ব্লক',
icon: 'star-filled',
category: 'crypto-bureau',
attributes: {
message: {
type: 'string',
default: 'এইটা আমার প্রথম কাস্টম ব্লক!'
},
textColor: {
type: 'string',
default: '#ffffff'
},
backgroundColor: {
type: 'string',
default": "#001810"
}
},
edit: ({ attributes, setAttributes }) => {
const { message, textColor, backgroundColor } = attributes;
const onMessageChange = (newMessage) => {
setAttributes({ message: newMessage });
};
const onTextColorChange = (newColor) => {
setAttributes({ textColor: newColor });
};
const onBackgroundColorChange = (newColor) => {
setAttributes({ backgroundColor: newColor });
};
return (
<>
<InspectorControls>
<PanelBody title="ব্লক সেটিংস">
<p>টেক্সট কালার:</p>
<ColorPalette
value={textColor}
onChange={onTextColorChange}
colors={[
{ name: 'Primary Text', slug: 'text-primary', color: 'var(--wp--preset--color--text-primary)' },
{ name: 'Secondary Text', slug: 'text-secondary', color: 'var(--wp--preset--color--text-secondary)' },
{ name: 'Accent Primary', slug: 'accent-primary', color: 'var(--wp--preset--color--accent-primary)' }
]}
/>
<p>ব্যাকগ্রাউন্ড কালার:</p>
<ColorPalette
value={backgroundColor}
onChange={onBackgroundColorChange}
colors={[
{ name: 'Background Primary', slug: 'bg-primary', color: 'var(--wp--preset--color--bg-primary)' },
{ name: 'Background Secondary', slug: 'bg-secondary', color: 'var(--wp--preset--color--bg-secondary)' },
{ name: 'Accent Secondary', slug: 'accent-secondary', color: 'var(--wp--preset--color--accent-secondary)' }
]}
/>
</PanelBody>
</InspectorControls>
<div style={{ color: textColor, backgroundColor: backgroundColor }} className="p-4 rounded shadow-md">
<RichText
tagName="p"
value={message}
onChange={onMessageChange}
placeholder="আপনার বার্তা লিখুন..."
/>
</div>
</>
);
},
save: ({ attributes }) => {
const { message, textColor, backgroundColor } = attributes;
return (
<div style={{ color: textColor, backgroundColor: backgroundColor }} className="p-4 rounded shadow-md">
<RichText.Content tagName="p" value={message} />
</div>
);
}
});