ওয়ার্ডপ্রেস ব্লক থিমে নতুন সীমাবদ্ধ লেআউট ব্যবহার করা

ওয়ার্ডপ্রেস সাইট এডিটরের প্রধান লক্ষ্যগুলির মধ্যে একটি (এবং, হ্যাঁ, এটি এখন "প্রাতিষ্ঠানিক নাম) মৌলিক ব্লক স্টাইলিং সরানো হয় থেকে কাঠামোবদ্ধ JSON-এ CSS. JSON ফাইলগুলি মেশিন-পাঠযোগ্য, যা সরাসরি WordPress-এ একটি থিমের গ্লোবাল স্টাইল কনফিগার করার জন্য জাভাস্ক্রিপ্ট-ভিত্তিক সাইট এডিটর দ্বারা ব্যবহারযোগ্য করে তোলে।

এটা এখনও সেখানে সব উপায় না! আমরা যদি টোয়েন্টি টুয়েন্টি-টু (TT2) ডিফল্ট থিম দেখি, সেখানে দুটি প্রধান অমীমাংসিত সমস্যা ছিল: স্টাইলিং মিথস্ক্রিয়া (যেমন :hover, :active, :focus), এবং মার্জিন এবং লেআউট পাত্রে প্যাডিং. আপনি দেখতে পাচ্ছেন কিভাবে সেগুলি সাময়িকভাবে TT2 এ ঠিক করা হয়েছে style.css ফাইলে এটি তৈরি করার পরিবর্তে theme.json ফাইল.

ওয়ার্ডপ্রেস 6.1 এই সমস্যাগুলি স্থির করেছি এবং আমি যা করতে চাই তা হল পরেরটির দিকে বিশেষভাবে তাকান। এখন যেহেতু লেআউট কন্টেইনারগুলির মার্জিন এবং প্যাডিংয়ের জন্য আমাদের কাছে JSON-কৃত শৈলী রয়েছে, যা আমাদেরকে উন্মুক্ত করে আমাদের থিম লেআউটে ব্যবধান সংজ্ঞায়িত করার আরও নমনীয় এবং শক্তিশালী উপায়.

আমরা কি ধরনের ব্যবধান সম্পর্কে কথা বলছি?

প্রথম বন্ধ, আমরা ইতিমধ্যে আছে রুট-স্তরের প্যাডিং যা প্যাডিং বর্ণনা করার একটি অভিনব উপায় উপাদান এটি চমৎকার কারণ এটি একটি উপাদানে সামঞ্জস্যপূর্ণ ব্যবধান নিশ্চিত করে যা সমস্ত পৃষ্ঠা এবং পোস্টে ভাগ করা হয়।

কিন্তু এটির আরও অনেক কিছু আছে কারণ এখন আমাদের কাছে ব্লকগুলির জন্য সেই প্যাডিং বাইপাস করার এবং নিজেদেরকে পূর্ণ-প্রস্থ সারিবদ্ধ করার একটি উপায় রয়েছে। যে ধন্যবাদ প্যাডিং-সচেতন প্রান্তিককরণ যা একটি নতুন অপ্ট-ইন বৈশিষ্ট্য theme.json. সুতরাং, আপনার রুট-স্তরের প্যাডিং থাকলেও, আপনি এখনও একটি ছবি (বা অন্য কোনো ব্লক) ভাঙতে এবং পূর্ণ-প্রস্থে যাওয়ার অনুমতি দিতে পারেন।

এটি আমাদের অন্য জিনিসে নিয়ে যায় যা আমরা পাই: সীমাবদ্ধ বিন্যাস. এখানে ধারণাটি হল যে লেআউটে থাকা যেকোনো ব্লক লেআউটের বিষয়বস্তুর প্রস্থকে সম্মান করে — যা একটি বিশ্বব্যাপী সেটিং — এবং এর বাইরে প্রবাহিত হয় না। আমরা সারিবদ্ধকরণের সাথে ব্লক-বাই-ব্লক ভিত্তিতে সেই আচরণটিকে ওভাররাইড করতে পারি, তবে আমরা এটিতে পৌঁছব।

চলো আমরা শুরু করি…

রুট-স্তরের প্যাডিং

আবার, এটা নতুন নয়। আমরা প্যাডিং সেট করার ক্ষমতা ছিল করেছি উপাদান মধ্যে theme.json পরীক্ষামূলক থেকে গুটেনবার্গ প্লাগইন 11.7 সংস্করণে এটি চালু করা হয়েছে। আমরা এটা সেট styles.spacing বস্তু, যেখানে আমরা আছে margin এবং padding শরীরের উপরে, ডান, নীচে এবং বাম ব্যবধান সংজ্ঞায়িত করার জন্য বস্তু:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

এটি একটি বিশ্বব্যাপী সেটিং। সুতরাং, যদি আমরা DevTools খুলতে এবং পরিদর্শন করি উপাদান, আমরা এই CSS শৈলী দেখতে পাব:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

কুল। কিন্তু এখানেই এই সমস্যাটি রয়েছে যে বিশ্বে আমরা কীভাবে কিছু ব্লককে সেই ব্যবধান থেকে পূর্ণ স্ক্রীন, প্রান্ত-থেকে-এজ পূরণ করতে অনুমতি দিতে পারি। যে কারণে ব্যবধান আছে, তাই না? এটি ঘটতে বাধা দিতে সাহায্য করে!

কিন্তু প্রকৃতপক্ষে প্রচুর কেস আছে যেখানে আপনি ব্লক এডিটরে কাজ করার সময় এক-একবার সেই ব্যবধান থেকে বেরিয়ে আসতে চাইতে পারেন। বলুন আমরা একটি পৃষ্ঠায় একটি চিত্র ব্লক প্লপ করি এবং আমরা এটিকে পূর্ণ-প্রস্থে যেতে চাই যখন বাকি বিষয়বস্তু রুট-স্তরের প্যাডিংকে সম্মান করে?

প্রবেশ করুন ...

প্যাডিং-সচেতন প্রান্তিককরণ

প্রথম ডিফল্ট ওয়ার্ডপ্রেস থিম তৈরি করার চেষ্টা করার সময় যা তে সমস্ত শৈলী সংজ্ঞায়িত করে theme.json ফাইল, লিড ডিজাইনার কেজেল রেগস্ট্যাড এতে রুট-লেভেল প্যাডিং ভেঙে যাওয়ার চ্যালেঞ্জিং দিকগুলিকে চিত্রিত করেছেন GitHub সমস্যা.

ওয়ার্ডপ্রেস 6.1-এ নতুন বৈশিষ্ট্যগুলি এই সমস্যাটি সমাধান করার জন্য তৈরি করা হয়েছিল। এর পরবর্তী যারা মধ্যে খনন করা যাক.

useRootPaddingAwareAlignments

একটি নতুন useRootPaddingAwareAlignments সমস্যা সমাধানের জন্য সম্পত্তি তৈরি করা হয়েছিল। এটি আসলে প্রথম গুটেনবার্গ প্লাগইন v13.8 এ প্রবর্তিত হয়েছিল। দ্য মূল টান অনুরোধ এটা কিভাবে কাজ করে একটি চমৎকার প্রাইমার.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

ব্যাট থেকে ডানদিকে, লক্ষ্য করুন যে এটি এমন একটি বৈশিষ্ট্য যা আমাদের বেছে নিতে হবে। সম্পত্তি সেট করা হয় false ডিফল্টরূপে এবং আমাদের স্পষ্টভাবে এটি সেট করতে হবে true এটি সক্ষম করার জন্য। এছাড়াও আমরা আছে যে লক্ষ্য করুন appearanceTools সেট true যেমন. এটি আমাদের UI কন্ট্রোলে বেছে নেয় স্টাইলিং বর্ডার, লিঙ্কের রঙ, টাইপোগ্রাফি এবং হ্যাঁ, ব্যবধান যার মধ্যে মার্জিন এবং প্যাডিং অন্তর্ভুক্ত রয়েছে।

বিন্যাস appearanceTools সেট true স্বয়ংক্রিয়ভাবে মার্জিন এবং প্যাডিং-এ ব্লক নির্বাচন করে হয় সেট না করে settings.spacing.padding or setting.spacing.margin থেকে true.

আমরা যখন সক্রিয় না useRootPaddingAwareAlignments, আমরা রুট প্যাডিং মান সহ কাস্টম বৈশিষ্ট্য প্রদান করা হয় যা সেট করা হয় সামনের প্রান্তে উপাদান। মজার বিষয় হল, এটি প্যাডিং এর ক্ষেত্রেও প্রযোজ্য .editor-styles-wrapper ক্লাস যাতে ব্যাক-এন্ড ব্লক এডিটরে কাজ করার সময় ব্যবধানটি প্রদর্শিত হয়। বেশ দারুন!

আমি প্রায় খনন করার সময় DevTools-এ সেই CSS কাস্টম বৈশিষ্ট্যগুলি নিশ্চিত করতে সক্ষম হয়েছি।

সক্ষম করা হলে তা useRootPaddingAwareAlignments উপরের গ্লোবাল স্টাইল ইমেজে "বিষয়বস্তু" প্রস্থ এবং "প্রশস্ত" প্রস্থ মান সমর্থন করে এমন যেকোনো ব্লকে বাম এবং ডান প্যাডিং প্রযোজ্য। আমরা সেই মানগুলিকেও সংজ্ঞায়িত করতে পারি theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

গ্লোবাল স্টাইল সেটিংস যদি সংজ্ঞায়িত করা হয়েছে তার থেকে ভিন্ন হয় theme.json, তারপর গ্লোবাল স্টাইল অগ্রাধিকার নিতে. আপনি ব্লক থিম শৈলী পরিচালনা সম্পর্কে সব শিখতে পারেন আমার শেষ নিবন্ধে.

• contentSize ব্লকের জন্য ডিফল্ট প্রস্থ।
• wideSize একটি "বিস্তৃত" লেআউট বিকল্প প্রদান করে এবং ব্লকগুলি প্রসারিত করার জন্য একটি বিস্তৃত কলাম স্থাপন করে।

সুতরাং, সেই শেষ কোড উদাহরণটি আমাদের নিম্নলিখিত CSS দেবে:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] ওয়ার্ডপ্রেস দ্বারা স্বয়ংক্রিয়ভাবে উত্পন্ন একটি অনন্য সংখ্যা নির্দেশ করে।

কিন্তু আমরা আর কি পেতে অনুমান? পাশাপাশি সম্পূর্ণ প্রান্তিককরণ!

.wp-container-[id] .alignfull {
  max-width: none;
}

ওটা দেখ? সক্ষম করে useRootPaddingAwareAlignments এবং সংজ্ঞায়িত contentSize এবং wideSize, আমরা পৃষ্ঠা এবং পোস্টগুলিতে যোগ করা ব্লকগুলির প্রস্থ নিয়ন্ত্রণের জন্য মোট তিনটি কন্টেইনার কনফিগারেশনের জন্য একটি সম্পূর্ণ প্রান্তিককরণ CSS ক্লাস পাই।

এটি নিম্নলিখিত লেআউট-নির্দিষ্ট ব্লকগুলিতে প্রযোজ্য: কলাম, গোষ্ঠী, পোস্ট সামগ্রী, এবং ক্যোয়ারী লুপ।

লেআউট নিয়ন্ত্রণ ব্লক করুন

ধরা যাক আমরা একটি পৃষ্ঠায় পূর্বোক্ত লেআউট-নির্দিষ্ট ব্লকগুলির যেকোনো একটি যোগ করি। যখন আমরা ব্লক নির্বাচন করি, তখন ব্লক সেটিংস UI আমাদের উপর ভিত্তি করে নতুন লেআউট সেটিংস অফার করে settings.layout আমরা সংজ্ঞায়িত মান theme.json (বা গ্লোবাল স্টাইল UI)।

আমরা এখানে খুব নির্দিষ্ট ব্লক নিয়ে কাজ করছি — যেগুলির ভিতরে অন্য ব্লক থাকতে পারে। সুতরাং, এই লেআউট সেটিংস সত্যিই সেই নেস্টেড ব্লকগুলির প্রস্থ এবং প্রান্তিককরণ নিয়ন্ত্রণ করার বিষয়ে। "অভ্যন্তরীণ ব্লকগুলি সামগ্রীর প্রস্থ ব্যবহার করে" সেটিংটি ডিফল্টরূপে সক্রিয় থাকে৷ যদি আমরা এটি বন্ধ টগল করি, তাহলে আমাদের নেই max-width পাত্রে এবং এর ভিতরের ব্লকগুলি প্রান্ত থেকে প্রান্তে যায়।

যদি আমরা টগলটি চালু রাখি, তাহলে নেস্টেড ব্লক যেকোন একটিকে মেনে চলবে contentWidth or wideWidth মান (একটু পরে আরো)। অথবা আমরা কাস্টম সংজ্ঞায়িত করতে সংখ্যাসূচক ইনপুট ব্যবহার করতে পারি contentWidth এবং wideWidth এই এক-বন্ধ উদাহরণে মান. যে মহান নমনীয়তা!

প্রশস্ত ব্লক

আমরা যে সেটিংস দেখেছি তা প্যারেন্ট ব্লকে সেট করা আছে। একবার আমরা ভিতরে একটি ব্লক নেস্ট করেছি এবং এটি নির্বাচন করেছি, আমাদের কাছে সেই ব্লকটি ব্যবহার করার জন্য অতিরিক্ত বিকল্প রয়েছে contentWidth, wideWidth, অথবা পূর্ণ-প্রস্থে যান।

লক্ষ্য করুন কিভাবে ওয়ার্ডপ্রেস রুট-লেভেল প্যাডিং CSS কাস্টম বৈশিষ্ট্য দ্বারা গুণ করে -1 "সম্পূর্ণ প্রস্থ" বিকল্পটি নির্বাচন করার সময় নেতিবাচক মার্জিন তৈরি করতে।

একটি সীমাবদ্ধ লেআউট ব্যবহার করে

আমরা ওয়ার্ডপ্রেস 6.1 এর সাথে পাওয়া নতুন ব্যবধান এবং সারিবদ্ধকরণগুলিকে কভার করেছি। এগুলি ব্লকের জন্য নির্দিষ্ট এবং ব্লকের মধ্যে থাকা যেকোনো ব্লকের জন্য। কিন্তু WordPress 6.1 একটি থিমের টেমপ্লেটগুলিতে আরও বেশি নমনীয়তা এবং ধারাবাহিকতার জন্য নতুন লেআউট বৈশিষ্ট্যগুলিও প্রবর্তন করে৷

কেস ইন পয়েন্ট: ওয়ার্ডপ্রেস সম্পূর্ণরূপে তার ফ্লেক্স এবং ফ্লো লেআউট প্রকারগুলিকে পুনর্গঠন করেছে এবং আমাদের একটি দিয়েছে৷ সীমাবদ্ধ বিন্যাস টাইপ যা সাইট এডিটরের গ্লোবাল স্টাইল UI-তে বিষয়বস্তু প্রস্থ সেটিংস ব্যবহার করে থিমগুলিতে ব্লক লেআউটগুলিকে সারিবদ্ধ করা সহজ করে তোলে।

ফ্লেক্স, ফ্লো এবং সীমাবদ্ধ লেআউট

এই তিনটি লেআউট প্রকারের মধ্যে পার্থক্য হল শৈলী যা তারা আউটপুট করে। ইসাবেল ব্রিসনের একটি চমৎকার লেখা আছে এটি সুন্দরভাবে পার্থক্যগুলিকে রূপরেখা দেয়, তবে আসুন রেফারেন্সের জন্য তাদের এখানে ব্যাখ্যা করি:

• প্রবাহ বিন্যাস: তে নেস্টেড ব্লকের মধ্যে উল্লম্ব ব্যবধান যোগ করে margin-block অভিমুখ. সেই নেস্টেড ব্লকগুলিও বাম, ডান বা কেন্দ্রে সারিবদ্ধ করা যেতে পারে।
• সীমাবদ্ধ বিন্যাস: একটি ফ্লো লেআউট হিসাবে একই সঠিক চুক্তি, কিন্তু নেস্টেড ব্লকগুলির উপর ভিত্তি করে প্রস্থ সীমাবদ্ধতার সাথে contentWidth এবং wideWidth সেটিংস (হয় theme.json বা গ্লোবাল স্টাইল)।
• ফ্লেক্স লেআউট: এটি ওয়ার্ডপ্রেস 6.1 এ অপরিবর্তিত ছিল। এটি ব্যবহার করে সিএসএস ফ্লেক্সবক্স একটি লেআউট তৈরি করতে যা ডিফল্টরূপে অনুভূমিকভাবে (এক সারিতে) প্রবাহিত হয়, কিন্তু উল্লম্বভাবেও প্রবাহিত হতে পারে তাই ব্লকগুলি একটির উপরে আরেকটি স্ট্যাক করে। CSS ব্যবহার করে ব্যবধান প্রয়োগ করা হয় gap সম্পত্তি।

লেআউট ধরনের এই নতুন স্লেট প্রতিটি লেআউটের জন্য শব্দার্থিক শ্রেণীর নাম তৈরি করে:

শব্দার্থিক লেআউট ক্লাস	লেআউট টাইপ	সমর্থিত ব্লক
.is-layout-flow	প্রবাহ বিন্যাস	কলাম, গ্রুপ, পোস্ট কন্টেন্ট, এবং ক্যোয়ারী লুপ।
.is-layout-constrained	সীমাবদ্ধ বিন্যাস	কলাম, গ্রুপ, পোস্ট কন্টেন্ট, এবং ক্যোয়ারী লুপ।
.is-layout-flex	ফ্লেক্স লেআউট	কলাম, বোতাম, সামাজিক আইকন

জাস্টিন ট্যাডলকের একটি বিস্তৃত লেখা রয়েছে বিভিন্ন লেআউট প্রকার এবং শব্দার্থিক ক্লাস, ব্যবহারের ক্ষেত্রে এবং উদাহরণ সহ।

সীমাবদ্ধ লেআউট সমর্থন করার জন্য আপনার থিম আপডেট করা হচ্ছে

আপনি যদি ইতিমধ্যে আপনার নিজের তৈরির একটি ব্লক থিম ব্যবহার করছেন, তাহলে আপনি এটি করতে চান৷ সীমাবদ্ধ লেআউট সমর্থন করার জন্য এটি আপডেট করুন. এটি যা লাগে তা হল কয়েকটি জিনিস অদলবদল করা theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

এগুলি সম্প্রতি প্রকাশিত ব্লক থিম যা এর সাথে স্পেসিং সেটিংস সক্ষম করেছে৷ useRootPaddingAwareAlignments এবং একটি আপডেট আছে theme.json ফাইল যা একটি সীমাবদ্ধ বিন্যাস সংজ্ঞায়িত করে:

বিন্যাস শৈলী অক্ষম করা হচ্ছে

বেস লেআউট শৈলী হল ডিফল্ট বৈশিষ্ট্য যা ওয়ার্ডপ্রেস 6.1 কোরে পাঠানো হয়। অন্য কথায়, তারা বাক্সের বাইরেই সক্রিয়। কিন্তু এই সামান্য স্নিপেট দিয়ে প্রয়োজন হলে আমরা সেগুলিকে নিষ্ক্রিয় করতে পারি functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

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

মোড়ক উম্মচন

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

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

সাইট এডিটর ডেভেলপমেন্টের পুনরাবৃত্তির কারণে, আমাদের সবসময় একটি কঠিন পথের প্রত্যাশা করা উচিত। যাইহোক, একজন আশাবাদী হিসাবে, আমি ওয়ার্ডপ্রেস 6.2 এর আসন্ন সংস্করণে কী ঘটবে তা দেখতে আগ্রহী। কিছু জিনিস, আমি যে জিনিসের উপর ঘনিষ্ঠ নজর রাখছি বৈশিষ্ট্য বিবেচনা করা হচ্ছে অন্তর্ভুক্তির জন্য, সমর্থনের জন্য স্টিকি পজিশনিং, নতুন লেআউট শ্রেণীর নাম অভ্যন্তরীণ ব্লক মোড়কের জন্য, আপডেট করা ফুটার প্রান্তিককরণ বিকল্প, এবং কভার ব্লকে সীমাবদ্ধ এবং ফ্লো লেআউট বিকল্প যোগ করা হচ্ছে.

এই GitHub সমস্যা #44720 লেআউট সম্পর্কিত আলোচনা তালিকাভুক্ত করে ওয়ার্ডপ্রেস 6.2 এর জন্য নির্ধারিত.

অতিরিক্ত সম্পদ

আমি এই সব খনন করার সময় অনেক উত্সের সাথে পরামর্শ করেছি এবং উল্লেখ করেছি। এখানে একটি বড় তালিকা রয়েছে যা আমি সহায়ক বলে মনে করি এবং মনে করি আপনিও উপভোগ করতে পারেন।

টিউটোরিয়াল

ওয়ার্ডপ্রেস পোস্ট

GitHub টান অনুরোধ এবং সমস্যা