ওয়ার্ডপ্রেস ব্লক এবং এলিমেন্টে বক্স শ্যাডো যোগ করা

আমি জুড়ে stumbled Ana Segota থেকে এই টুইট একটি CSS যোগ করার একটি উপায় খুঁজছেন box-shadow ওয়ার্ডপ্রেসে একটি বোতামের হোভার অবস্থায় theme.json ফাইল.

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

আমি বলি "ঘনিষ্ঠ এবং কাছাকাছি" কারণ এখনও প্রচুর CSS বৈশিষ্ট্য এবং নির্বাচক রয়েছে যা অসমর্থিত theme.json. উদাহরণস্বরূপ, যদি আপনি লাইক দিয়ে কিছু স্টাইল করার আশা করছেন perspective-origin in theme.json, এটা ঠিক ঘটবে না — অন্তত আজ আমি এই লিখছি হিসাবে.

অনা তাকিয়ে আছে box-shadow এবং, ভাগ্যক্রমে তার জন্য, যে CSS সম্পত্তি দ্বারা সমর্থিত হয় theme.json ওয়ার্ডপ্রেস 6.1 হিসাবে। তার টুইটটি নভেম্বর 1 তারিখের, ঠিক একই দিনে 6.1 মুক্তি পায়. এটি এমন নয় যে সম্পত্তির জন্য সমর্থন রিলিজে একটি শিরোনাম বৈশিষ্ট্য ছিল। বড় শিরোনামগুলি ব্লক এবং ব্লক থিমের জন্য স্পেসিং এবং লেআউট কৌশলগুলির সাথে আরও বেশি সম্পর্কিত ছিল।

এখানে আমরা কিভাবে একটি আবেদন করতে পারেন box-shadow একটি নির্দিষ্ট ব্লকে — ফিচারড ইমেজ ব্লক বলুন — ইন theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "blocks" :{
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

ভাবছি যদি নতুন রঙের সিনট্যাক্স কাজ করে? আমিও! কিন্তু যখন আমি চেষ্টা করেছি - rgb(0 0 0 / 0.66) - আমি কিছুই. সম্ভবত এটি ইতিমধ্যেই কাজ করছে বা একটি টান অনুরোধ ব্যবহার করতে পারে।

সহজ, তাই না? অবশ্যই, এটি ভ্যানিলা CSS লেখার চেয়ে ভিন্ন style.css এবং কিছু অভ্যস্ত করা লাগে. কিন্তু সাম্প্রতিকতম ওয়ার্ডপ্রেস রিলিজ হিসাবে এটি সত্যিই সম্ভব।

এবং, আরে, আমরা একটি বোতামের মতো পৃথক "উপাদান" এর সাথে একই জিনিস করতে পারি। একটি বোতাম নিজেই একটি ব্লক, তবে এটি অন্য ব্লকের মধ্যে একটি নেস্টেড ব্লকও হতে পারে। সুতরাং, একটি আবেদন করতে box-shadow বিশ্বব্যাপী সব বোতামে, আমরা এরকম কিছু করতে চাই theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

কিন্তু আনা বোতামের সাথে ছায়া যোগ করতে চায় :hover অবস্থা. ধন্যবাদ, ইন্টারেক্টিভ স্টেট স্টাইল করার জন্য সমর্থন কিছু উপাদানের জন্য, যেমন বোতাম এবং লিঙ্ক, সিউডো-ক্লাস ব্যবহার করে — সহ :hover, :focus, :active, এবং :visited —ও লাভ করেছে theme.json ওয়ার্ডপ্রেস 6.1 এ সমর্থন।

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

আপনি যদি একটি অভিভাবক থিম ব্যবহার করেন তবে আপনি অবশ্যই একটি শিশু থিমে একটি থিমের শৈলীগুলিকে ওভাররাইড করতে পারেন৷ এখানে, আমি TT3 এর বোতাম শৈলী সম্পূর্ণরূপে ওভাররাইড করছি।

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":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)"
          }
        }
      }
    }
  }
}

এটি কীভাবে রেন্ডার করে তা এখানে:

এটি করার আরেকটি উপায়: কাস্টম শৈলী

সম্প্রতি মুক্তি Pixl ব্লক থিম বাস্তব-বিশ্ব ব্যবহারের আরেকটি উদাহরণ প্রদান করে box-shadow মধ্যে সম্পত্তি theme.json একটি বিকল্প পদ্ধতি ব্যবহার করে যে কাস্টম মান সংজ্ঞায়িত করে। থিমে, একটি প্রথা box-shadow সম্পত্তি হিসাবে সংজ্ঞায়িত করা হয় .settings.custom.shadow:

{
  "version": 2,
  "settings": {
    // etc. 
    "custom": {
      // etc.
      "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
    },
    // etc.
  }
}

তারপর, পরে ফাইল, কাস্টম shadow সম্পত্তি একটি বোতাম উপাদান বলা হয়:

{
  "version": 2,
  "settings": {
    // etc.
  },
  "styles": {
    "elements": {
      "button": {
        // etc.
        "shadow": "var(--wp--custom--shadow) !important",
        // etc.
        ":active": {
          // etc.
          "shadow": "2px 2px var(--wp--preset--color--primary) !important"
        }
      },
    // etc.
  }
}

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

আপডেট: দেখা যাচ্ছে এ নিয়ে পুরো আলোচনা হয়েছে অনুরোধ #34689 টানুন, যা নোট করে যে এটি ওয়ার্ডপ্রেস 5.9 এ সম্বোধন করা হয়েছিল।

এবং আরও আছে ...

ছায়া ছাড়াও, CSS outline সম্পত্তিও লাভ করেছে theme.json ওয়ার্ডপ্রেস 6.1-এ সমর্থন এবং বোতাম এবং তাদের ইন্টারেক্টিভ স্টেটে প্রয়োগ করা যেতে পারে। এই গিটহাব পিআর একটি ভাল উদাহরণ দেখায়।

"elements": {
  "button": {
    "outline": {
      "offset": "3px",
      "width": "3px",
      "style": "dashed",
      "color": "red"
    },
    ":hover": {
      "outline": {
        "offset": "3px",
        "width": "3px",
        "style": "solid",
        "color": "blue"
      }
    }
  }
}

আপনি কিভাবে বাস্তব উদাহরণ খুঁজে পেতে পারেন outline সম্পত্তি অন্যান্য থিমে কাজ করে, সহ loudness, ব্লক ক্যানভাস, এবং ব্লকবেস.

মোড়ক উম্মচন

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

আপনি ওয়ার্ডপ্রেস এবং এটি সম্পর্কে আরও বিস্তারিত গভীর আলোচনা পেতে পারেন box-shadow এর বাস্তবায়ন গিটহাব পিআর। এখানে আরো একটা GitHub প্রস্তাব ব্লকগুলিতে ছায়া মান সেট করতে সরাসরি ওয়ার্ডপ্রেসে UI যোগ করার জন্য - আপনি করতে পারেন সরাসরি একটি অ্যানিমেটেড জিআইএফ-এ যান এটি কিভাবে কাজ করবে তা দেখাচ্ছে।

যার কথা বলছি, জাস্টিন ট্যাডলক সম্প্রতি একটি ব্লক তৈরি করেছে যা একটি অগ্রগতি বার রেন্ডার করে এবং এতে একত্রিত বক্স শ্যাডো নিয়ন্ত্রণ করে। তিনি এই ভিডিওতে এটি দেখান:

অধিক তথ্য

আপনি যদি আরও গভীরে খনন করতে চান box-shadow এবং অন্যান্য CSS বৈশিষ্ট্য যা দ্বারা সমর্থিত theme.json একটি ব্লক থিমে ফাইল, এখানে কয়েকটি সংস্থান রয়েছে যা আপনি ব্যবহার করতে পারেন: