افزودن سایه های جعبه به بلوک ها و عناصر وردپرس

من در هم شکسته ام این توییت از آنا سگتا به دنبال راهی برای اضافه کردن یک 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 منتشر شد. اینطور نیست که پشتیبانی از دارایی یک ویژگی سرفصل در انتشار باشد. سرفصل های بزرگتر بیشتر به تکنیک های فاصله گذاری و طرح بندی بلوک ها و مضامین بلوک مربوط می شد.

در اینجا نحوه اعمال a 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)"
          }
        }
      }
    }
  }
}

در اینجا نحوه ارائه آن آمده است:

راه دیگری برای انجام آن: سبک های سفارشی

اخیرا منتشر شده است پیکسل طرح زمینه بلوک نمونه دیگری از استفاده در دنیای واقعی را ارائه می دهد 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 در این زمینه. تصور من این است که این تلاشی است برای جلوگیری از نادیده گرفتن آن سبک ها با استفاده از رابط کاربری جهانی سبک ها در ویرایشگر سایت، که ویژگی بالایی نسبت به سبک های تعریف شده در آن دارد. theme.json. در اینجا یک پیوند ثابت برای اطلاعات بیشتر وجود دارد از مقاله قبلی من در مورد مدیریت سبک های تم بلوک.

به روز رسانی: معلوم شد که یک بحث کامل در مورد این در وجود داشته است درخواست کشش شماره 34689، که اشاره می کند که در وردپرس 5.9 به آن پرداخته شده است.

و بیشتر ...

علاوه بر سایه ها، CSS outline اموال نیز به دست آورد theme.json پشتیبانی در وردپرس 6.1 و می تواند برای دکمه ها و حالت های تعاملی آنها اعمال شود. این GitHub PR مثال خوبی را نشان می دهد.

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

شما همچنین می توانید نمونه های واقعی از چگونگی پیدا کردن outline دارایی در موضوعات دیگر از جمله بلندی صدا, بلوک بومو پایگاه بلوک.

پسگفتار

چه کسی می دانست که در مورد مسدود کردن قالب در وردپرس 6.1 باید در مورد یک ویژگی CSS صحبت کرد؟ ما روش های رسمی پشتیبانی شده برای تنظیم a را دیدیم box-shadow در بلوک ها و عناصر منفرد، از جمله حالت های تعاملی یک عنصر دکمه. ما همچنین بررسی کردیم که چگونه می‌توانیم سایه‌ها را در یک موضوع کودک لغو کنیم. و در نهایت، ما یک مثال واقعی را باز کردیم که سایه‌ها را در یک ویژگی سفارشی تعریف و تنظیم می‌کند.

می توانید بحث های عمیق تری در مورد وردپرس و آن پیدا کنید box-shadow پیاده سازی در این GitHub PR. نیز وجود دارد پیشنهاد GitHub برای افزودن UI به طور مستقیم در وردپرس برای تنظیم مقادیر سایه روی بلوک ها - می توانید مستقیماً به یک GIF متحرک بروید نشان می دهد که چگونه کار می کند.

صحبت از آن ، جاستین تدلاک تازه بلوکی را ایجاد کرد که نوار پیشرفت را ارائه می دهد و کنترل های سایه جعبه در آن یکپارچه شده است. او آن را در این ویدئو نشان می دهد:

اطلاعات بیشتر

اگر می خواهید عمیق تر در آن کاوش کنید box-shadow و سایر ویژگی های CSS که توسط theme.json فایل در یک تم بلوک، در اینجا چند منبع وجود دارد که می توانید استفاده کنید: