ওয়ার্ডপ্রেস থিমগুলির জন্য আমরা যেভাবে CSS লিখি তা ব্যাপক পরিবর্তনের মধ্যে রয়েছে। আমি সম্প্রতি একটি কৌশল শেয়ার করেছি ওয়ার্ডপ্রেসে ফ্লুইড টাইপ সাপোর্ট যোগ করা হচ্ছে উপায় দ্বারা theme.json, একটি নতুন ফাইল যে ওয়ার্ডপ্রেস কঠিন ঠেলাঠেলি হয়েছে ওয়ার্ডপ্রেস থিমের শৈলী সংজ্ঞায়িত করার জন্য সত্যের একটি কেন্দ্রীয় উৎস হয়ে উঠতে যা ফুল-সাইট এডিটিং (FSE) বৈশিষ্ট্য সমর্থন করে।

অপেক্ষা করুন, না style.css ফাইল? আমরা এখনও যে আছে. আসলে, style.css is এখনও একটি প্রয়োজনীয় ফাইল ব্লক থিমগুলিতে, যদিও থিম নিবন্ধনের জন্য ব্যবহৃত মেটা তথ্যে এর ভূমিকা ব্যাপকভাবে হ্রাস পেয়েছে। যে বলেছেন, ঘটনা হল যে theme.json এখনও সক্রিয় বিকাশে রয়েছে, মানে আমরা একটি ক্রান্তিকালীন সময়ে আছি যেখানে আপনি সেখানে সংজ্ঞায়িত শৈলীগুলি খুঁজে পেতে পারেন, styles.css বা এমনকি ব্লক স্তরে।

সুতরাং, এই ওয়ার্ডপ্রেস FSE দিনগুলিতে স্টাইলিং আসলে কেমন দেখায়? যে আমি এই নিবন্ধে কভার করতে চান কি. স্টাইলিং ব্লক থিম জন্য ডকুমেন্টেশন অভাব আছে ওয়ার্ডপ্রেস থিম ডেভেলপার হ্যান্ডবুক, তাই আমরা এখানে যা কিছু কভার করছি তা হল আমি যা সংগ্রহ করেছি সেগুলি সম্পর্কে বর্তমানে কোথায় রয়েছে সেইসাথে ওয়ার্ডপ্রেস থিমিংয়ের ভবিষ্যত সম্পর্কে আলোচনা।

ওয়ার্ডপ্রেস শৈলীর বিবর্তন

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

এর বিবর্তনের দিকে তাকিয়ে আমরা কোথায় আছি তা অনুভব করতে পারি আরেকটি উপায় ডিফল্ট ওয়ার্ডপ্রেস থিম. আজ অবধি, তিনটি ডিফল্ট থিম রয়েছে যা পূর্ণ-সাইট সম্পাদনা সমর্থন করে:

কিন্তু সিএসএস ট্রেডিং শুরু করবেন না style.css JSON সম্পত্তি-মান জোড়ার জন্য theme.json এখনও. এখনও CSS স্টাইলিং নিয়ম আছে যেগুলিকে সমর্থন করা দরকার৷ theme.json আমরা সেটা করার কথা ভাবার আগে। অবশিষ্ট উল্লেখযোগ্য সমস্যাগুলি বর্তমানে সমস্ত CSS শৈলী নিয়মগুলিকে সম্পূর্ণরূপে সরানোর লক্ষ্যে আলোচনা করা হচ্ছে৷ theme.json এবং বিভিন্ন উত্স একত্রীকরণ theme.json একটি মধ্যে বিশ্বব্যাপী শৈলী সেট করার জন্য UI সরাসরি ওয়ার্ডপ্রেস সাইট এডিটর.

এটি একটি অপেক্ষাকৃত কঠিন জায়গায় আমাদের ছেড়ে. শুধু নেই থিম শৈলী ওভাররাইড করার জন্য কোন পরিষ্কার পথ নেই, কিন্তু এই শৈলীগুলির উৎস কোথা থেকে এসেছে তা স্পষ্ট নয় — এটি কি এর বিভিন্ন স্তর থেকে theme.json নথি পত্র, style.css, গুটেনবার্গ প্লাগইন, নাকি অন্য কোথাও?

কেন theme.json পরিবর্তে style.css?

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

এটা বেনের পোস্ট পড়ার মূল্য, কিন্তু মাংস এই উদ্ধৃতি আছে:

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

থিম লেখকদের ব্যবহার করতে উৎসাহিত করে theme.json API যেখানে সম্ভব, "বেস> থিম> ব্যবহারকারী" সংজ্ঞায়িত শৈলীগুলির শ্রেণিবিন্যাস সঠিকভাবে সমাধান করা যেতে পারে।

JSON-এ CSS সরানোর একটি প্রধান সুবিধা হল JSON হল একটি মেশিন-পঠনযোগ্য বিন্যাস, যার অর্থ হল এটি একটি API এনে ওয়ার্ডপ্রেস সাইট এডিটর UI-তে প্রকাশ করা যেতে পারে, এইভাবে ব্যবহারকারীদের ডিফল্ট মান পরিবর্তন করতে এবং সাইটের চেহারা কাস্টমাইজ করার অনুমতি দেয় যেকোন সিএসএস লেখা। এটি ধারাবাহিকভাবে স্টাইল ব্লক করার একটি উপায়ও প্রদান করে, যখন এমন একটি কাঠামো প্রদান করে যা নির্দিষ্টতার স্তর তৈরি করে যাতে ব্যবহারকারী সেটিংসে সংজ্ঞায়িতগুলির চেয়ে সর্বোচ্চ অগ্রাধিকার নেয় theme.json. মধ্যে থিম-স্তরের শৈলী মধ্যে যে ইন্টারপ্লে theme.json এবং গ্লোবাল স্টাইল UI-তে ব্যবহারকারী-সংজ্ঞায়িত শৈলীগুলিই JSON পদ্ধতিকে আকর্ষণীয় করে তোলে।

বিকাশকারীরা JSON-এ ধারাবাহিকতা বজায় রাখে এবং ব্যবহারকারীরা কোড-হীন কাস্টমাইজেশনের সাথে নমনীয়তা অর্জন করে। এটা একটা জয়-জয়।

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

JSON উপাদানের সাথে শৈলী সংজ্ঞায়িত করা

কোন থিমের কোন অংশে আমরা ইতিমধ্যেই অনেক অগ্রগতি দেখেছি theme.json স্টাইলিং করতে সক্ষম। ওয়ার্ডপ্রেস 6.1 এর আগে, আমরা যা করতে পারতাম তা হল স্টাইল শিরোনাম এবং লিঙ্ক। এখন, ওয়ার্ডপ্রেস 6.1 সহ, আমরা বোতাম, ক্যাপশন, উদ্ধৃতি এবং শিরোনাম যোগ করতে পারি মিশ্রণে

এবং আমরা যে সংজ্ঞায়িত করে JSON উপাদান. ওয়ার্ডপ্রেস ব্লকে বসবাসকারী উপাদানগুলিকে পৃথক উপাদান হিসাবে ভাবুন। বলুন আমাদের একটি ব্লক রয়েছে যাতে একটি শিরোনাম, একটি অনুচ্ছেদ এবং একটি বোতাম রয়েছে। যারা পৃথক টুকরা উপাদান, এবং একটি আছে elements বস্তু theme.json যেখানে আমরা তাদের শৈলী সংজ্ঞায়িত করি:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

JSON উপাদানগুলি বর্ণনা করার একটি ভাল উপায় হল থিম এবং ব্লকগুলির জন্য নিম্ন-স্তরের উপাদান যা ব্লকগুলির জটিলতার প্রয়োজন নেই৷ তারা HTML আদিম প্রতিনিধিত্ব যেগুলি একটি ব্লকে সংজ্ঞায়িত নয় কিন্তু ব্লক জুড়ে ব্যবহার করা যেতে পারে। কিভাবে তারা ওয়ার্ডপ্রেসে (এবং গুটেনবার্গ প্লাগইন) সমর্থিত হয় তা বর্ণনা করা হয়েছে ব্লক সম্পাদক হ্যান্ডবুক এবং এই সম্পূর্ণ সাইট সম্পাদনা টিউটোরিয়াল ক্যারোলিনা নাইমার্ক দ্বারা।

উদাহরণস্বরূপ, লিঙ্ক স্টাইল করা হয় elements বস্তু কিন্তু তাদের নিজের অধিকার একটি ব্লক না. কিন্তু একটি লিঙ্ক একটি ব্লকে ব্যবহার করা যেতে পারে এবং এটিতে সংজ্ঞায়িত শৈলী উত্তরাধিকারসূত্রে পাওয়া যাবে elements.link বস্তু theme.json. এটি একটি উপাদানের সংজ্ঞাকে সম্পূর্ণরূপে ধারণ করে না, যদিও, কিছু উপাদান ব্লক হিসাবে নিবন্ধিত হয়, যেমন শিরোনাম এবং বোতাম ব্লক - তবে সেই ব্লকগুলি এখনও অন্যান্য ব্লকের মধ্যে ব্যবহার করা যেতে পারে।

এখানে স্টাইল করার জন্য বর্তমানে উপলব্ধ উপাদানগুলির একটি সারণী রয়েছে৷ theme.json, ক্যারোলিনার সৌজন্যে:

আপনি দেখতে পাচ্ছেন, এটি এখনও প্রাথমিক দিন এবং প্রচুর এখনও গুটেনবার্গ প্লাগইন থেকে ওয়ার্ডপ্রেস কোরে সরানো দরকার। কিন্তু আপনি দেখতে পাচ্ছেন যে CSS ফাইল বা DevTools-এ নির্বাচকদের সন্ধান না করে বিশ্বব্যাপী একটি থিমের সমস্ত শিরোনামের স্টাইল করার মতো কিছু করা কত দ্রুত হবে।

আরও, আপনি কিভাবে গঠন দেখতে শুরু করতে পারেন theme.json বৈশ্বিক উপাদানগুলি থেকে (যেমন headings) পৃথক উপাদানে (যেমন h1), এবং ব্লক-স্তরের শৈলী (যেমন h1 একটি ব্লকে রয়েছে)।

JSON উপাদানের অতিরিক্ত তথ্য পাওয়া যায় এই ওয়ার্ডপ্রেস প্রস্তাব করুন এবং এই খোলা টিকেট গুটেনবার্গ প্লাগইনের গিটহাব রেপোতে।

JSON এবং CSS নির্দিষ্টতা

এর CSS নির্দিষ্টতা সম্পর্কে কথা রাখা যাক. আমি আগে উল্লেখ করেছি যে স্টাইলিংয়ের JSON পদ্ধতি একটি শ্রেণিবিন্যাস স্থাপন করে। এবং এটা সত্য. শৈলী যা JSON উপাদানগুলিতে সংজ্ঞায়িত করা হয়েছে৷ theme.json ডিফল্ট থিম শৈলী হিসাবে বিবেচিত হয়। এবং গ্লোবাল স্টাইল UI-তে ব্যবহারকারীর দ্বারা সেট করা যেকোনো কিছু ডিফল্ট ওভাররাইড করবে।

অন্য কথায়: ব্যবহারকারী শৈলী ডিফল্ট থিম শৈলী তুলনায় আরো নির্দিষ্টতা বহন করে. এটি কীভাবে কাজ করে তার জন্য একটি অনুভূতি পেতে বোতাম ব্লকটি একবার দেখে নেওয়া যাক।

আমি ব্যাবহার করছি খালি থিম, কোন CSS স্টাইলিং সহ একটি ফাঁকা ওয়ার্ডপ্রেস থিম। আমি একটি নতুন পৃষ্ঠায় একটি বোতাম ব্লক যোগ করতে যাচ্ছি।

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

আপনি ঠিক দেখতে পারেন যেখান থেকে নতুন শৈলী আসছে TT3 এর মধ্যে theme.json ফাইল এটি আমাদের বলে যে JSON উপাদান শৈলীগুলি ওয়ার্ডপ্রেস কোর শৈলীগুলির চেয়ে অগ্রাধিকার নেয়৷

এখন আমি এটিকে a দিয়ে ওভাররাইড করে TT3 পরিবর্তন করতে যাচ্ছি theme.json একটি চাইল্ড থিমে ফাইল, যেখানে বোতাম ব্লকের ডিফল্ট ব্যাকগ্রাউন্ড রঙ লাল সেট করা আছে।

কিন্তু সেই শেষ স্ক্রিনশটে সার্চ বোতামটি লক্ষ্য করুন। এটাও লাল হওয়া উচিত, তাই না? এর মানে অবশ্যই এটি অন্য স্তরে স্টাইল করা হয়েছে যদি আমি যে পরিবর্তনটি করেছি তা বৈশ্বিক স্তরে হয়। আমরা যদি পরিবর্তন করতে চাই উভয় বোতাম, আমরা সাইট সম্পাদকের গ্লোবাল স্টাইল UI ব্যবহার করে ব্যবহারকারী স্তরে এটি করতে পারি।

আমরা উভয় বোতামের পটভূমির রঙ পরিবর্তন করে নীল করেছি এবং টেক্সট পরিবর্তন করেছি পাশাপাশি গ্লোবাল স্টাইল UI ব্যবহার করে। লক্ষ্য করুন যে সেখান থেকে নীল থিম শৈলীর উপর প্রাধান্য পেয়েছে!

স্টাইল ইঞ্জিন

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

যারা শৈলী ইনলাইন? তারা কি আলাদা স্টাইলশীটে আছে? হয়তো তারা একটি পৃষ্ঠায় ইনজেকশনের করছি ?

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

আমরা শুধুমাত্র স্টাইল ইঞ্জিনে প্রথম নজর দিচ্ছি। আসলে, এখন পর্যন্ত যা সম্পন্ন হয়েছে তা এখানে, টিকিট অনুযায়ী:

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

মূলত, এটি একটি একক API প্রতিষ্ঠার ভিত্তি যা একটি থিমের জন্য সমস্ত CSS শৈলী নিয়ম ধারণ করে, যেখান থেকে আসে। এটি ওয়ার্ডপ্রেস যেভাবে 6.1-এর আগে ইনলাইন শৈলী ইনজেক্ট করবে তা পরিষ্কার করে এবং শব্দার্থিক শ্রেণীর নামের জন্য একটি সিস্টেম স্থাপন করে।

স্টাইল ইঞ্জিনের দীর্ঘমেয়াদী এবং স্বল্পমেয়াদী লক্ষ্যগুলির আরও বিশদ বিবরণ এতে পাওয়া যাবে ওয়ার্ডপ্রেস কোর আলোচনা করুন. এছাড়াও আপনি অনুসরণ করতে পারেন ট্র্যাকিং সমস্যা এবং প্রকল্প বোর্ড আরও আপডেটের জন্য।

JSON উপাদানগুলির সাথে কাজ করা

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

JSON উপাদানগুলির সাধারণত দুটি প্রসঙ্গ থাকে: বিশ্বস্তর এবং ব্লক স্তর. গ্লোবাল লেভেলের শৈলীগুলি ব্লক স্তরের তুলনায় কম নির্দিষ্টতার সাথে সংজ্ঞায়িত করা হয়েছে যাতে ব্লক-নির্দিষ্ট শৈলীগুলি যেখানেই ব্লক ব্যবহার করা হয় সেখানে ধারাবাহিকতার জন্য অগ্রাধিকার পায়।

JSON উপাদানগুলির জন্য বিশ্বব্যাপী শৈলী

আসুন নতুন ডিফল্ট TT3 থিমটি দেখি এবং এর বোতামগুলি কীভাবে স্টাইল করা হয়েছে তা পরীক্ষা করি। নীচে TT3 এর একটি সংক্ষিপ্ত কপি-পেস্ট theme.json ফাইল (এখানে পুরো কোড) বিশ্বব্যাপী শৈলী বিভাগ দেখাচ্ছে, কিন্তু আপনি এখানে মূল কোড খুঁজে পেতে পারেন।

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

সমস্ত বোতাম বিশ্বস্তরে স্টাইল করা হয় (styles.elements.button).

আমরা DevTools-এও এটি নিশ্চিত করতে পারি। লক্ষ্য করুন যে একটি ক্লাস কল .wp-element-button নির্বাচক হয়। একই ক্লাস ইন্টারেক্টিভ স্টেট স্টাইল করতেও ব্যবহৃত হয়।

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

একটি সরাইয়া হিসাবে, WordPress 6.1 যোগ করা হয়েছে ইন্টারেক্টিভ স্টেট স্টাইল করার জন্য সমর্থন নির্দিষ্ট কিছু উপাদানের জন্য, যেমন বোতাম এবং লিঙ্ক, সিউডো-ক্লাস ইন ব্যবহার করে theme.json - সহ :hover, :focus, এবং :active — অথবা গ্লোবাল স্টাইল UI। স্বয়ংক্রিয় প্রকৌশলী ডেভ স্মিথ প্রমান এই বৈশিষ্ট্য একটি YouTube ভিডিওতে।

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

কিন্তু তারপর বোতাম একবারে সব পরিবর্তন হবে. বোতামটি একটি নির্দিষ্ট ব্লকের অংশ হলে আমরা যদি পটভূমির রঙকে ওভাররাইড করতে চাই? সেখানেই ব্লক-স্তরের শৈলীগুলি কার্যকর হয়।

উপাদানগুলির জন্য ব্লক-স্তরের শৈলী

আমরা কীভাবে ব্লক স্তরে শৈলীগুলি ব্যবহার এবং কাস্টমাইজ করতে পারি তা বোঝার জন্য, অনুসন্ধান ব্লকে থাকা বোতামটির পটভূমির রঙ পরিবর্তন করা যাক। মনে রাখবেন, একটি বোতাম ব্লক আছে, কিন্তু আমরা যা করছি তা হল সার্চ ব্লকের ব্লক লেভেলে ব্যাকগ্রাউন্ডের রঙ ওভাররাইড করা। এইভাবে, সমস্ত বোতামে বিশ্বব্যাপী প্রয়োগ করার বিপরীতে আমরা সেখানে শুধুমাত্র নতুন রঙ প্রয়োগ করছি।

এটা করতে, আমরা শৈলী সংজ্ঞায়িত styles.blocks বস্তু theme.json. এটা ঠিক, যদি আমরা সমস্ত বোতামের জন্য বিশ্বব্যাপী শৈলী সংজ্ঞায়িত করি styles.elements, আমরা বোতাম উপাদানগুলির জন্য ব্লক-নির্দিষ্ট শৈলী সংজ্ঞায়িত করতে পারি styles.block, যা একটি অনুরূপ কাঠামো অনুসরণ করে:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

ওটা দেখ? আমি সেট background এবং text বৈশিষ্ট্য চালু styles.blocks.core/search.elements.button ওয়ার্ডপ্রেসে প্রিসেট করা দুটি CSS ভেরিয়েবল সহ।

ফলাফল? অনুসন্ধান বোতামটি এখন লাল (--wp--preset--color--quaternary), এবং ডিফল্ট বোতাম ব্লক তার উজ্জ্বল সবুজ পটভূমি ধরে রাখে।

আমরা DevTools-এও পরিবর্তন দেখতে পাচ্ছি।

একই কথা সত্য যদি আমরা অন্যান্য ব্লকে অন্তর্ভুক্ত বোতাম স্টাইল করতে চাই। এবং বোতাম শুধুমাত্র একটি উদাহরণ, তাই আসুন অন্য একটি তাকান.

উদাহরণ: প্রতিটি স্তরে স্টাইলিং শিরোনাম

আসুন একটি উদাহরণ দিয়ে এই সমস্ত তথ্য বাড়িতে ড্রাইভ করা যাক. এই সময়, আমরা করব:

• বিশ্বব্যাপী সমস্ত শিরোনাম স্টাইল করুন
• সমস্ত শিরোনাম 2 উপাদান স্টাইল করুন
• ক্যোয়ারী লুপ ব্লকে স্টাইল শিরোনাম 2 উপাদান

প্রথমত, এর জন্য মৌলিক কাঠামো দিয়ে শুরু করা যাক theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

এটি আমাদের বিশ্বব্যাপী এবং ব্লক-স্তরের শৈলীগুলির জন্য রূপরেখা স্থাপন করে।

বিশ্বব্যাপী সমস্ত শিরোনাম স্টাইল করুন

এর যোগ করুন headings আমাদের বিশ্বব্যাপী শৈলীতে আপত্তি করুন এবং কিছু শৈলী প্রয়োগ করুন:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

এটি ওয়ার্ডপ্রেসের প্রিসেট বেস কালারে সমস্ত শিরোনামের রঙ সেট করে। চলুন গ্লোবাল লেভেলেও হেডিং 2 উপাদানের রঙ এবং ফন্টের আকার পরিবর্তন করি:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

এখন, সমস্ত শিরোনাম 2 উপাদানগুলি একটি সহ প্রাথমিক প্রিসেট রঙ হিসাবে সেট করা হয়েছে তরল ফন্টের আকার. কিন্তু হয়তো আমরা একটি ফিক্সড চাই fontSize হেডিং 2 উপাদানের জন্য যখন এটি ক্যোয়ারী লুক ব্লকে ব্যবহার করা হয়:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

এখন আমাদের কাছে হেডিং 2 উপাদানের জন্য তিনটি স্তরের শৈলী রয়েছে: সমস্ত শিরোনাম, সমস্ত শিরোনাম 2 উপাদান, এবং শিরোনাম 2 উপাদান যা ক্যোয়ারী লুপ ব্লকে ব্যবহৃত হয়।

বিদ্যমান থিম উদাহরণ

যদিও আমরা এই নিবন্ধে বোতাম এবং শিরোনামের জন্য স্টাইলিং উদাহরণগুলি দেখেছি, WordPress 6.1 অতিরিক্ত উপাদানগুলিকে স্টাইলিং সমর্থন করে৷ তাদের রূপরেখা একটি টেবিল আছে "JSON উপাদানগুলির সাথে শৈলী সংজ্ঞায়িত করা" অধ্যায়.

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

প্রতিটি দিতে ভুলবেন না theme.json একটি ভাল চেহারা ফাইল করুন কারণ এই থিমগুলিতে ব্লক-লেভেল স্টাইলিং এর চমৎকার উদাহরণ রয়েছে styles.blocks অবজেক্ট।

মোড়ক উম্মচন

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

সম্পর্কিত a GitHub প্রস্তাব একটি নতুন ব্রাউজার মোডে সাইট সম্পাদককে পুনরায় ডিজাইন করতে, সারা গুডিং একটি WP Tavern পোস্টে লিখেছেন:

আপনি টুলের ভিতরে দিনরাত কাজ না করলে সাইট এডিটরের কাছাকাছি যাওয়ার চেষ্টা করার সময় হারিয়ে যাওয়া সহজ। নেভিগেশন ঝাঁঝালো এবং বিভ্রান্তিকর, বিশেষ করে যখন টেমপ্লেট ব্রাউজিং থেকে টেমপ্লেট সম্পাদনা থেকে পৃথক ব্লকগুলি পরিবর্তন করা যায়।

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

তথ্যসূত্র

আমি এই নিবন্ধের জন্য তথ্য গবেষণা করার সময় ব্যবহার করা সমস্ত সংস্থান তালিকাভুক্ত করছি।

JSON উপাদান

গ্লোবাল স্টাইলস

স্টাইল ইঞ্জিন

পড়ার জন্য ধন্যবাদ! আমি ব্লক থিম ব্যবহার করে এবং আপনি কিভাবে আপনার CSS পরিচালনা করেন সে সম্পর্কে আপনার নিজের প্রতিফলন শুনতে চাই।