গুটেনবার্গ ব্লক এডিটর (Gutenberg Block Editor) কী? কোডিং ছাড়াই আধুনিক কনটেন্ট ডিজাইনের সহজ উপায়

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

একসময় ওয়ার্ডপ্রেসে একটি সাধারণ আর্টিকেল লিখতে গিয়েও ব্যবহারকারীদের বেশ বেগ পেতে হতো। সেই পুরোনো দিনের কথা মনে আছে? যেখানে একটি সাধারণ মাইক্রোসফট ওয়ার্ডের মতো সাদা ক্যানভাস ছিল, যাকে বলা হতো ‘ক্লাসিক এডিটর’ (Classic Editor)। সেখানে যদি আপনি পাশে একটি ছবি দিয়ে ডানে দুটি টেক্সট কলাম বানাতে চাইতেন, তবে জটিল শর্টকোড (Shortcode) অথবা কাস্টম সিএসএস (CSS) কোড লেখা ছাড়া আর কোনো বিকল্প ছিল না। সাধারণ ব্যবহারকারীদের জন্য যা ছিল রীতিমতো দুঃস্বপ্ন।

সেই দীর্ঘদিনের জটিলতার অবসান ঘটিয়ে ওয়ার্ডপ্রেস ৫.০ সংস্করণের মাধ্যমে নিয়ে আসে তাদের ইতিহাসের সবচেয়ে বড় বৈপ্লবিক পরিবর্তন—গুটেনবার্গ ব্লক এডিটর (Gutenberg Block Editor)। জার্মান উদ্ভাবক জোহানেস গুটেনবার্গ যেভাবে পঞ্চদশ শতাব্দীতে ছাপাখানার মাধ্যমে জ্ঞান ছড়িয়ে দেওয়ার বিপ্লব ঘটিয়েছিলেন, ঠিক তেমনিভাবে ওয়ার্ডপ্রেসের এই গুটেনবার্গ এডিটর ওয়েব ডিজাইনের জটিলতাকে সাধারণ মানুষের হাতের মুঠোয় এনে দিয়েছে। আজ কোনো প্রকার কোডিং জ্ঞান ছাড়াই যে কেউ ড্র্যাগ অ্যান্ড ড্রপ করে বিশ্বমানের পেশাদার ওয়েব পেজ ও ব্লগ পোস্ট তৈরি করতে পারেন। আজকের এই পূর্ণাঙ্গ নির্দেশিকায় আমরা গুটেনবার্গের প্রতিটি ব্লক, এর জাদুকরী কার্যক্ষমতা এবং কীভাবে এটি আপনার সাইটকে সুপারফাস্ট রাখবে, তা সহজ ও সাবলীল বাংলায় শিখব।

গুটেনবার্গ ব্লক এডিটর কী? মূল কনসেপ্ট ও দর্শন

একদম সহজ কথায়, গুটেনবার্গ হলো একটি মডুলার এবং ব্লক-ভিত্তিক কনটেন্ট এডিটর। এখানে প্রতিটি উপাদান—তা একটি সাধারণ প্যারাগ্রাফ হোক, একটি হেডিং, একটি ছবি, ভিডিও, বাটন কিংবা অডিও প্লেয়ার হোক—সবকিছুই একেকটি স্বতন্ত্র ‘ব্লক’ (Block) হিসেবে কাজ করে।

আপনি নিশ্চয়ই লেগো (Lego) ব্লকের খেলনা দেখেছেন? ছোট ছোট রঙিন প্লাস্টিকের ব্লক একটার ওপর আরেকটা বা পাশে জোড়া লাগিয়ে যেমন গাড়ি, বাড়ি বা প্রাসাদ তৈরি করা যায়, গুটেনবার্গেও বিষয়টি ঠিক তেমনই! আপনি আপনার ক্যানভাসে বিভিন্ন ব্লক এনে পাশাপাশি বা উপর-নিচে সাজিয়ে পুরো একটি অনন্য ওয়েব পেজ বানিয়ে ফেলতে পারেন।

গুটেনবার্গের মূল দর্শন হলো “What You See Is What You Get” (WYSIWYG)। অর্থাৎ এডিটরে আপনি যা দেখছেন, আপনার ওয়েবসাইটের ভিজিটররাও হুবহু সেই রূপেই কনটেন্টটি দেখতে পাবেন। কোনো প্রকার অনুমান বা বারবার প্রিভিউ দেখার প্রয়োজন এখানে অনেকটাই কমে এসেছে।

গুটেনবার্গের সবচেয়ে জনপ্রিয় ও প্রয়োজনীয় ব্লকসমূহের পরিচিতি

গুটেনবার্গে শত শত ব্লক রয়েছে, তবে নিয়মিত কাজের জন্য কিছু মৌলিক ব্লক আপনাকে সবচেয়ে বেশি সাহায্য করবে। নিচে তাদের একটি সংক্ষিপ্ত পরিচিতি তুলে ধরা হলো:

১. টেক্সট ব্লক (Text Blocks)

• Paragraph (প্যারাগ্রাফ): সাধারণ লেখার জন্য এটি সবচেয়ে বেশি ব্যবহৃত ডিফল্ট ব্লক।
• Heading (হেডিং): আর্টিকেলের বিভিন্ন পরিচ্ছেদ ভাগ করার জন্য H1 থেকে H6 পর্যন্ত হেডিং ট্যাগ তৈরির ব্লক।
• List (লিস্ট): বুলেট পয়েন্ট বা নম্বরযুক্ত তালিকা তৈরির জন্য ব্যবহৃত হয়।
• Quote (উক্তি): কোনো বিশিষ্ট ব্যক্তির উক্তি বা লেখার বিশেষ অংশকে চমৎকারভাবে হাইলাইট করতে এটি ব্যবহৃত হয়।
• Table (টেবিল): কোনো প্রকার প্লাগইন ছাড়া সুন্দর ডাটা টেবিল ও চার্ট উপস্থাপন করার সুযোগ দেয়।

২. মিডিয়া ব্লক (Media Blocks)

• Image (ইমেজ): ছবি যুক্ত করা, সাইজ রিসাইজ করা এবং ক্যাপশন লেখার জন্য এটি ব্যবহৃত হয়।
• Gallery (গ্যালারি): একসাথে একাধিক ছবি গ্রিড বা কলাম আকারে সাজিয়ে প্রদর্শনের চমৎকার ব্লক।
• Cover (কভার ব্লক): যেকোনো লেখার ব্যাকগ্রাউন্ডে ছবি বা ভিডিও দিয়ে তার ওপর টেক্সট ও বাটন বসানোর সেরা উপায়। এটি হিরো সেকশন তৈরির জন্য অসাধারণ।
• Media & Text (মিডিয়া ও টেক্সট): একপাশে ছবি বা ভিডিও এবং ঠিক তার পাশের কলামে বিস্তারিত বিবরণ প্রদর্শনের সবচেয়ে সুন্দর ব্লক।

৩. লেআউট ও ডিজাইন ব্লক (Design Blocks)

• Columns (কলাম): আপনার পেজকে ২, ৩, ৪ বা ততোধিক সমান বা অসমান কলামে ভাগ করার সুযোগ দেয়।
• Group (গ্রুপ): একাধিক ব্লককে একসাথে একটি প্যারেন্ট কন্টেইনারে আবদ্ধ করে ব্যাকগ্রাউন্ড কালার, প্যাডিং বা মার্জিন দেওয়ার জন্য ব্যবহৃত হয়।
• Buttons (বাটন): চমৎকার কল-টু-অ্যাকশন (Call-to-Action) বাটন তৈরি করার ব্লক।
• Spacer & Separator: দুটি সেকশনের মাঝে ফাঁকা জায়গা রাখা বা হরিজন্টাল ডিভাইডার লাইন দেওয়ার জন্য ব্যবহৃত হয়।

গুটেনবার্গের দুটি গোপন শক্তি: সিন্কড প্যাটার্ন ও ব্লক প্যাটার্ন

গুটেনবার্গের কার্যক্ষমতাকে শতগুণ বাড়িয়ে দেয় এর দুটি অনন্য ফিচার—’ব্লক প্যাটার্ন’ এবং ‘সিন্কড প্যাটার্ন’ (পূর্বে যার নাম ছিল Reusable Block)।

১. ব্লক প্যাটার্ন (Block Patterns)

ব্লক প্যাটার্ন হলো পেশাদার ডিজাইনারদের দ্বারা তৈরি পূর্ব-নির্ধারিত কিছু ব্লকের সুসজ্জিত গ্রুপ। যেমন: একটি আকর্ষণীয় কল-টু-অ্যাকশন সেকশন, টেস্টমোনিয়াল গ্রিড, কিংবা প্রাইসিং টেবিল। আপনাকে শূন্য থেকে এগুলো ডিজাইন করতে হবে না; প্যাটার্ন লাইব্রেরি থেকে এক ক্লিকেই তা ইনসার্ট করে শুধু লেখা ও ছবি বদলে নিলেই তৈরি হয়ে যাবে দারুণ ডিজাইন।

২. সিন্কড প্যাটার্ন বা রিইউজেবল ব্লক (Synced Patterns)

ধরুন, আপনার প্রতিটি ব্লগের শেষে একটি নির্দিষ্ট লেখক পরিচিতি বা ইমেইল নিউজলেটার সাইনআপ বক্স থাকে। আপনি যদি ৫০টি ব্লগে এই বক্সটি আলাদা আলাদা কপি করে পেস্ট করেন, তবে ভবিষ্যতে তথ্য বদলাতে হলে ৫০টি পোস্টেই গিয়ে এডিট করতে হবে।

কিন্তু গুটেনবার্গের সিন্কড প্যাটার্ন ব্যবহার করলে আপনি একটি মাত্র ব্লক ডিজাইন করে তা ‘Synced Pattern’ হিসেবে সেভ করে রাখতে পারেন। এরপর যেকোনো পোস্টে তা ব্যবহার করুন। ভবিষ্যতে যদি কোনো তথ্য পরিবর্তন করেন, তবে যেকোনো এক জায়গা থেকে এডিট করলেই স্বয়ংক্রিয়ভাবে সব পোস্টে তা আপডেট হয়ে যাবে!

পেজ বিল্ডার (Elementor/Divi) বনাম গুটেনবার্গ: কেন গুটেনবার্গ বিজয়ী?

ওয়ার্ডপ্রেস কমিউনিটিতে দীর্ঘদিন ধরে একটি বড় বিতর্ক চলছে: পেজ বিল্ডার (যেমন এলিমেন্টর) ভালো নাকি গুটেনবার্গ? বর্তমান বাস্তবতায় কেন ডেভেলপার ও ব্লগাররা গুটেনবার্গকে বেছে নিচ্ছেন, তা নিচের তুলনামূলক টেবিলটি দেখলেই স্পষ্ট হবে:

বৈশিষ্ট্য	গুটেনবার্গ (Gutenberg)	পেজ বিল্ডার (Elementor / Divi)
সাইট স্পিড ও পারফরম্যান্স	অত্যন্ত দ্রুতগামী, কারণ কোনো অপ্রয়োজনীয় স্ক্রিপ্ট লোড হয় না	অতিরিক্ত কোড (DOM bloat) ও স্ক্রিপ্টের কারণে সাইট ভারী হয়ে যায়
কোর ইন্টিগ্রেশন	ওয়ার্ডপ্রেসের নিজস্ব কোর ফিচার, কোনো থার্ড-পার্টি প্লাগইন লাগে না	ভারী থার্ড-পার্টি প্লাগইন ইনস্টল ও আপডেট করতে হয়
খরচ	১০০% বিনামূল্যে ওয়ার্ডপ্রেসের সাথে অন্তর্ভুক্ত	উন্নত ফিচারের জন্য মোটা অংকের বার্ষিক ফি দিতে হয়
সিকিউরিটি ঝুঁকি	ওয়ার্ডপ্রেস কোরের সাথে যুক্ত থাকায় ঝুঁকি অত্যন্ত নগণ্য	প্লাগইনের দুর্বলতায় সাইট হ্যাক হওয়ার ঝুঁকি তুলনামূলক বেশি থাকে
ডাটাবেজ ক্লিনলিনেস	এইচটিএমএল কমেন্ট আকারে থাকে, থিম বদলালেও কনটেন্ট নষ্ট হয় না	প্লাগইন ডিঅ্যাক্টিভ করলে শর্টকোডের ধ্বংসাবশেষ থেকে যায়

ফুল সাইট এডিটিং (Full Site Editing – FSE): গুটেনবার্গের পরবর্তী ধাপ

গুটেনবার্গ কেবল পোস্ট বা পেজ লেখার মধ্যেই সীমাবদ্ধ নেই। ওয়ার্ডপ্রেসের সাম্প্রতিক সংস্করণগুলোতে এসেছে Full Site Editing (FSE)। FSE-এর সাহায্যে এখন আর কোনো কোডিং বা থিম ফাইল হাত না দিয়ে সম্পূর্ণ ওয়েবসাইটের হেডার (Header), ফুটার (Footer), সাইডবার এবং এমনকি ৪০৪ পেজ বা সার্চ পেজের টেমপ্লেটও গুটেনবার্গ ব্লকের সাহায্যে ডিজাইন করা যায়!

ব্লক থিম (যেমন Twenty Twenty-Four) ব্যবহার করলে আপনি পুরো সাইটকে একটি ক্যানভাস মনে করে নিজের মনের মতো সাজিয়ে নিতে পারেন।

ধাপে ধাপে গুটেনবার্গে একটি আকর্ষণীয় পোস্ট সাজানোর নিয়ম

চলুন দেখে নেওয়া যাক গুটেনবার্গ এডিটরে কীভাবে একটি পেশাদার কনটেন্ট সাজাবেন:

১. ক্যানভাসে ব্লক নেওয়া

এডিটরের যেকোনো জায়গায় / (স্ল্যাশ) টাইপ করলেই মুহূর্তের মধ্যে ব্লকের একটি তালিকা পপআপ হবে। যেমন: /heading লিখলে হেডিং ব্লক বা /image লিখলে ইমেজ ব্লক চলে আসে। মাউস না ছুঁয়েই কীবোর্ডের সাহায্যে কয়েক সেকেন্ডে দ্রুত ব্লক যুক্ত করার এটি সবচেয়ে সেরা পদ্ধতি।

২. ব্লকের পজিশন ও অ্যালাইনমেন্ট

যেকোনো ব্লকের ওপর ক্লিক করলেই একটি ফ্লোটিং টুলবার দৃশ্যমান হয়। বাম পাশের ৬টি ডট বা তীর চিহ্নের সাহায্যে ব্লককে ড্র্যাগ করে বা ওপর-নিচে সরিয়ে যেকোনো পজিশনে নেওয়া যায়। এছাড়া অ্যালাইনমেন্ট দিয়ে টেক্সট সেন্টারে রাখা বা ইমেজকে ফুল-উইডথ (Full Width) করা সম্ভব।

৩. ডানপাশের সাইডবার থেকে স্টাইলিং

ডানপাশের ‘Block’ সেকশনে প্রতিটি ব্লকের জন্য আলাদা আলাদা স্টাইলিং সেটিংস পাওয়া যায়। সেখান থেকে আপনি টেক্সট সাইজ, ফন্ট কালার, ব্যাকগ্রাউন্ড কালার, প্যাডিং এবং ড্রপক্যাপ (Drop cap) অন করতে পারেন।

গুটেনবার্গ ব্যবহারের ১০টি প্রো কীবোর্ড শর্টকাট

আপনার লেখার গতি কয়েকগুণ বাড়িয়ে দেওয়ার জন্য কিছু কীবোর্ড শর্টকাট জানা অত্যন্ত কার্যকর:

• / (স্ল্যাশ): যেকোনো ব্লক সার্চ ও দ্রুত যুক্ত করার জন্য।
• Enter: স্বয়ংক্রিয়ভাবে একটি নতুন প্যারাগ্রাফ ব্লক তৈরি করার জন্য।
• Ctrl + Shift + D (বা Cmd + Shift + D): নির্বাচিত ব্লককে সাথে সাথে ডুপ্লিকেট (Duplicate) করার জন্য।
• Alt + Shift + Z (বা Option + Control + Z): নির্বাচিত ব্লককে মুহূর্তেই রিমুভ বা ডিলিট করার জন্য।
• Ctrl + Alt + T: নির্বাচিত ব্লকের ঠিক উপরে একটি নতুন ব্লক যুক্ত করার জন্য।
• Ctrl + Alt + Y: নির্বাচিত ব্লকের ঠিক নিচে একটি নতুন ব্লক যুক্ত করার জন্য।

সচরাচর সমস্যা ও তার সহজ প্রতিকার

গুটেনবার্গ ব্যবহারের সময় কিছু সাময়িক জটিলতা দেখা দিতে পারে:

• “This block has contains unexpected or invalid content”: এটি সাধারণত ঘটে যখন কোনো ব্লকের এইচটিএমএল কাঠামো পরিবর্তন হয়ে যায়। ডানপাশের তিনটি ডটে ক্লিক করে ‘Attempt Block Recovery’ তে ক্লিক করলে সমস্যাটি ৯৯% ক্ষেত্রে সাথে সাথে সমাধান হয়ে যায়।
• মোবাইলে কলাম ভেঙে যাওয়া: Columns ব্লক ব্যবহার করার সময় ডানপাশের সেটিংস থেকে ‘Stack on mobile’ অপশনটি চালু রাখুন, যাতে মোবাইলের ছোট স্ক্রিনে কলামগুলো চমৎকারভাবে একের নিচে অন্যটি প্রদর্শিত হয়।

ডেভেলপার টিপস: ব্লক থিমে theme.json এর জাদু

গুটেনবার্গ ইকোসিস্টেমে ডেভেলপারদের জন্য সবচেয়ে শক্তিশালী অস্ত্র হলো theme.json ফাইল। এই ফাইলের সাহায্যে আপনি কোনো প্রকার সিএসএস কোড না লিখে পুরো ওয়েবসাইটের গ্লোবাল কালার প্যালেট, ফন্ট সাইজ এবং স্পেসিং নিয়ন্ত্রণ করতে পারেন।

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary Blue",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Dark Charcoal",
          "slug": "dark",
          "color": "#1e1e1e"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "24px"
        }
      ]
    }
  }
}

এই কনফিগারেশন যোগ করলেই আপনার গুটেনবার্গ এডিটরের কালার ও টাইপোগ্রাফি প্যানেলে এই অপশনগুলো স্বয়ংক্রিয়ভাবে ক্লায়েন্টদের জন্য দৃশ্যমান হবে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলি (FAQ)

১. গুটেনবার্গ কি ওয়েবসাইটকে ধীরগতির করে?

না, একদমই নয়! বরং অন্যান্য পেজ বিল্ডারের তুলনায় গুটেনবার্গ অবিশ্বাস্য রকম হালকা এবং দ্রুতগামী। এটি কোনো অপ্রয়োজনীয় জাভাস্ক্রিপ্ট ফাইল লোড করে না, ফলে কোর ওয়েব ভাইটালস (Core Web Vitals) স্কোরে দুর্দান্ত ফলাফল পাওয়া যায়।

২. আমি কি এখনো ক্লাসিক এডিটর ব্যবহার করতে পারব?

হ্যাঁ, ওয়ার্ডপ্রেসের অফিশিয়াল ‘Classic Editor’ প্লাগইনটি ইনস্টল করলে আপনি পুরোনো ইন্টারফেসে ফিরে যেতে পারেন। তবে আধুনিক ওয়েব ডিজাইনের সুবিধা ও গতিশীলতা উপভোগ করতে গুটেনবার্গ শেখাটাই সর্বোত্তম ও দূরদর্শী সিদ্ধান্ত।

৩. গুটেনবার্গ কি মোবাইল ফ্রেন্ডলি?

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

৪. ব্লক প্যাটার্ন কোথা থেকে ফ্রিতে পাওয়া যায়?

ওয়ার্ডপ্রেসের নিজস্ব ডিরেক্টরি wordpress.org/patterns-এ হাজার হাজার নিখরচায় ব্যবহারযোগ্য ব্লক প্যাটার্ন রয়েছে। আপনি সেখান থেকে যেকোনো প্যাটার্ন কপি করে সরাসরি আপনার এডিটরে পেস্ট করতে পারেন।

৫. গুটেনবার্গে কি কাস্টম সিএসএস যোগ করা যায়?

হ্যাঁ, প্রতিটি ব্লকের সেটিংস প্যানেলের নিচে ‘Advanced’ অপশনে গিয়ে আপনি যেকোনো কাস্টম সিএসএস ক্লাস (Additional CSS Class) যুক্ত করতে পারেন এবং আপনার মতো করে স্টাইল দিতে পারেন।

উপসংহার

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