نحوه نوشتن CSS برای تم های وردپرس در میان تغییرات گسترده است. من اخیراً یک تکنیک برای اضافه کردن پشتیبانی از نوع مایع در وردپرس از طریق theme.json، یک فایل جدید که وردپرس سخت تلاش کرده است تبدیل شدن به منبع اصلی حقیقت برای تعریف سبک ها در قالب های وردپرس که از ویژگی های ویرایش کامل سایت (FSE) پشتیبانی می کنند.

صبر کن، نه style.css فایل؟ ما هنوز آن را داریم. در حقیقت، style.css is هنوز یک فایل مورد نیاز در تم های بلوک، اگرچه نقش آن تا حد زیادی به اطلاعات متا مورد استفاده برای ثبت موضوع کاهش می یابد. گفته شد، واقعیت این است که theme.json هنوز در حال توسعه فعال است، به این معنی که ما در یک دوره انتقالی هستیم که ممکن است سبک های تعریف شده را در آنجا پیدا کنید styles.css یا حتی در سطح بلوک.

بنابراین، در این روزهای وردپرس FSE واقعاً استایل کردن چگونه است؟ این چیزی است که من می خواهم در این مقاله به آن بپردازم. مستندات کافی برای طرح‌بندی مضامین بلوک وجود ندارد راهنمای برنامه نویس قالب وردپرس، بنابراین همه چیزهایی که در اینجا پوشش می دهیم همان چیزی است که من در مورد مکان فعلی و همچنین بحث در مورد آینده قالب وردپرس گردآوری کرده ام.

سیر تکاملی سبک های وردپرس

ویژگی های توسعه جدیدی که در آن گنجانده شده است وردپرس 6.1 ما را به سیستمی از سبک‌ها نزدیک‌تر کنید که کاملاً در آن تعریف شده‌اند theme.json، اما هنوز کارهای زیادی برای انجام دادن وجود دارد تا بتوانیم به طور کامل روی آن تکیه کنیم. یکی از راه‌هایی که می‌توانیم درباره آنچه در نسخه‌های بعدی عرضه می‌شود به دست آوریم، استفاده از آن است پلاگین گوتنبرگ. اینجاست که ویژگی‌های آزمایشی اغلب به صورت خشک ارائه می‌شوند.

راه دیگری که می‌توانیم موقعیت خود را درک کنیم، نگاه کردن به تکامل است تم های پیش فرض وردپرس. تا به امروز، سه موضوع پیش‌فرض وجود دارد که از ویرایش کامل سایت پشتیبانی می‌کنند:

اما تجارت CSS را شروع نکنید 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، خواه سبک‌های طرح‌بندی، از پیش تعیین‌شده یا بلوک، مانعی بر سر راه یکپارچگی و قابلیت همکاری ایجاد می‌کند: حفظ برابری بصری بین ظاهر و ویرایشگر دشوارتر می‌شود، ارتقاء برای مسدود کردن داخلی‌ها ممکن است با لغو تعارض داشته باشد. علاوه بر این، CSS سفارشی در سایر مضامین بلوک کمتر قابل حمل است.

با تشویق نویسندگان تم به استفاده از theme.json API در صورت امکان، سلسله مراتب سبک های تعریف شده "base > theme > user" را می توان به درستی حل کرد.

یکی از مزایای اصلی انتقال CSS به JSON این است که JSON یک فرمت قابل خواندن توسط ماشین است، به این معنی که می توان آن را در رابط کاربری ویرایشگر سایت وردپرس با واکشی API در معرض دید قرار داد، بنابراین به کاربران اجازه می دهد مقادیر پیش فرض را تغییر دهند و ظاهر سایت را بدون نیاز به سفارشی سازی کنند. اصلاً هر CSS را بنویسید. همچنین راهی برای استایل دادن به بلوک‌ها به طور مداوم فراهم می‌کند، در حالی که ساختاری را ارائه می‌دهد که لایه‌هایی از ویژگی ایجاد می‌کند به طوری که تنظیمات کاربر بالاترین اولویت را نسبت به موارد تعریف شده در theme.json. این تعامل بین سبک های سطح موضوع در theme.json و سبک های تعریف شده توسط کاربر در رابط کاربری جهانی سبک ها چیزی است که رویکرد JSON را بسیار جذاب می کند.

توسعه‌دهندگان یکپارچگی در JSON را حفظ می‌کنند و کاربران با سفارشی‌سازی‌های بدون کد انعطاف‌پذیری پیدا می‌کنند. این یک برد-برد است.

مزایای دیگری نیز وجود دارد، مطمئنا، و Mike McAlister از WP Engine چندین مورد را در این تاپیک توییتر فهرست کرده است. شما می توانید مزایای بیشتری را در این مورد بیابید بحث عمیق در وبلاگ Make WordPress Core. و هنگامی که آن را مطالعه کردید، مزایای رویکرد 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. این به طور کامل تعریف یک عنصر را در بر نمی گیرد، اگرچه، زیرا برخی از عناصر نیز به عنوان بلوک ثبت می شوند، مانند بلوک های Heading و Button - اما آن بلوک ها همچنان می توانند در بلوک های دیگر استفاده شوند.

در اینجا جدولی از عناصری است که در حال حاضر برای استایل دادن در دسترس هستند theme.json, با حسن نیت از کارولینا:

همانطور که می بینید، هنوز روزهای اولیه است و هنوز تعداد زیادی باید از افزونه گوتنبرگ به هسته وردپرس منتقل شوند. اما می‌توانید ببینید که چقدر سریع می‌توان کاری مانند استایل دادن به همه عنوان‌ها در یک موضوع را بدون جستجوی انتخابگرها در فایل‌های CSS یا DevTools انجام داد.

علاوه بر این، شما همچنین می توانید شروع به دیدن چگونگی ساختار theme.json به نوعی لایه هایی از ویژگی را تشکیل می دهد که از عناصر جهانی (مثلاً headings) به عناصر منفرد (مثلا h1) و سبک های سطح بلوک (به عنوان مثال h1 موجود در یک بلوک).

اطلاعات اضافی در مورد عناصر JSON در دسترس است این پیشنهاد وردپرس را بسازید و این بلیط باز در مخزن GitHub افزونه گوتنبرگ.

ویژگی JSON و CSS

بیایید در مورد ویژگی CSS صحبت کنیم. قبلاً اشاره کردم که رویکرد JSON برای استایل‌سازی یک سلسله مراتب را ایجاد می‌کند. و این درست است. سبک هایی که در عناصر JSON تعریف شده اند theme.json سبک های تم پیش فرض در نظر گرفته می شوند. و هر چیزی که توسط کاربر در رابط کاربری جهانی سبک‌ها تنظیم شود، پیش‌فرض‌ها را لغو می‌کند.

به عبارت دیگر: سبک‌های کاربر ویژگی بیشتری نسبت به سبک‌های تم پیش‌فرض دارند. بیایید نگاهی به بلوک دکمه بیاندازیم تا نحوه عملکرد آن را درک کنیم.

من با استفاده از تم خالی، یک تم وردپرس خالی و بدون استایل CSS. من می خواهم یک بلوک دکمه را در یک صفحه جدید اضافه کنم.

خوب، ما می دانیم که Core وردپرس با یک ظاهر سبک عرضه می شود. اکنون، می‌خواهم به تم پیش‌فرض TT3 از وردپرس 6.1 سوئیچ کرده و آن را فعال کنم. اگر صفحه خود را با دکمه رفرش کنم، دکمه سبک تغییر می کند.

دقیقا می توانید ببینید آن سبک های جدید از کجا می آیند در TT3 theme.json فایل. این به ما می گوید که سبک های عنصر JSON بر سبک های هسته وردپرس اولویت دارند.

اکنون می‌خواهم TT3 را با حذف آن با a تغییر دهم theme.json فایل در یک تم فرزند، که در آن رنگ پس‌زمینه پیش‌فرض بلوک دکمه روی قرمز تنظیم شده است.

اما به دکمه جستجو در آخرین اسکرین شات توجه کنید. باید قرمز هم باشه درسته؟ این باید به این معنی باشد که اگر تغییری که من ایجاد کردم در سطح جهانی باشد، در سطح دیگری استایل داده شده است. اگر بخواهیم تغییر کنیم هر دو دکمه ها، ما می توانیم این کار را در سطح کاربر با استفاده از رابط کاربری جهانی سبک در ویرایشگر سایت انجام دهیم.

رنگ پس‌زمینه هر دو دکمه را به آبی تغییر دادیم و متن را نیز با استفاده از رابط کاربری جهانی سبک‌ها تغییر دادیم. توجه داشته باشید که آبی از آنجا بر سبک های تم اولویت دارد!

موتور سبک

این یک ایده بسیار سریع، اما خوب، درباره نحوه مدیریت ویژگی های CSS در تم های بلوک وردپرس است. اما این تصویر کامل نیست زیرا هنوز نامشخص است جایی که آن سبک ها تولید می شوند. وردپرس سبک های پیش فرض خود را دارد که از جایی می آیند، داده ها را در آن مصرف می کنند theme.json برای قوانین سبک بیشتر، و قوانینی را که هر چیزی در «سبک‌های جهانی» تنظیم شده است، لغو می‌کند.

آیا آن سبک ها در خط هستند؟ آیا آنها در یک شیوه نامه جداگانه هستند؟ شاید آنها در صفحه در یک تزریق می شوند ?

این چیزی است که جدید است موتور سبک امیدوارم حل شود Style Engine یک API جدید در وردپرس 6.1 است که به منظور ایجاد ثبات در نحوه تولید سبک ها و مکان اعمال سبک ها است. به عبارت دیگر، تمام منابع ممکن برای یک ظاهر طراحی شده را می گیرد و به تنهایی مسئول ایجاد درست سبک های بلوک است. میدونم میدونم. یک انتزاع دیگر در بالای انتزاعات دیگر فقط برای نوشتن برخی سبک ها. اما داشتن یک API متمرکز برای سبک‌ها احتمالاً زیباترین راه‌حل است، با توجه به اینکه سبک‌ها می‌توانند از مکان‌های مختلفی ارائه شوند.

ما فقط اولین نگاهی به Style Engine داریم. در واقع، این چیزی است که تاکنون تکمیل شده است، با توجه به بلیط:

• ممیزی و ادغام جایی که کد CSS پشتیبانی بلوک را در انتهای پشتی ایجاد می کند، به طوری که آنها از یک مکان (بر خلاف مکان های متعدد) تحویل داده شوند. این قوانین CSS مانند حاشیه، padding، تایپوگرافی، رنگ‌ها و حاشیه‌ها را پوشش می‌دهد.
• سبک های تکراری مخصوص طرح بندی را حذف کنید و نام کلاس های معنایی ایجاد کنید.
• برای پشتیبانی از بلوک، طرح‌بندی و المان، تعداد تگ‌های سبک درون خطی را که در صفحه چاپ می‌کنیم، کاهش دهید.

اساساً، این پایه و اساس ایجاد یک API واحد است که شامل تمام قوانین سبک CSS برای یک موضوع، از هر کجا که آمده باشد. روشی را که وردپرس سبک های درون خطی قبل از 6.1 را تزریق می کند پاک می کند و سیستمی برای نام کلاس های معنایی ایجاد می کند.

جزئیات بیشتر در مورد اهداف بلند مدت و کوتاه مدت Style Engine را می توان در این مطلب یافت بحث اصلی وردپرس را ایجاد کنید. شما همچنین می توانید دنبال کنید مسئله ردیابی و هیئت مدیره پروژه برای به روزرسانی های بیشتر

کار با عناصر JSON

ما در مورد عناصر JSON کمی صحبت کردیم theme.json فایل و اینکه چگونه آنها اساساً ابتدایی های HTML برای تعریف سبک های پیش فرض برای مواردی مانند سرفصل ها، دکمه ها، و پیوندها و سایر موارد هستند. حالا، بیایید در واقع نگاه کنیم با استفاده از یک عنصر 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. هر زمان که از دکمه ای استفاده می کنیم، پس زمینه یکسانی خواهد داشت، زیرا آنها انتخابگر یکسانی را به اشتراک می گذارند و هیچ قانون سبک دیگری آن را نادیده نمی گیرد.

به عنوان یک کنار، وردپرس 6.1 اضافه شد پشتیبانی از حالت های تعاملی یک ظاهر طراحی شده برای عناصر خاص، مانند دکمه ها و پیوندها، با استفاده از کلاس های شبه در theme.json - شامل :hover, :focusو :active - یا رابط کاربری جهانی استایلز. مهندس اتوماتيك دیو اسمیت نشان می دهد این ویژگی در یک ویدیوی یوتیوب

ما می‌توانیم رنگ پس‌زمینه دکمه را در هر دو قسمت لغو کنیم 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 استایل دهید
• عناصر Style Heading 2 در بلوک Query Loop

ابتدا اجازه دهید با ساختار اصلی برای شروع کنیم 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": { }
  }
}

که رنگ همه سرفصل ها را به رنگ پایه از پیش تعیین شده در وردپرس تنظیم می کند. بیایید رنگ و اندازه قلم عناصر Heading 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 برای عنصر Heading 2 زمانی که در بلوک Query Look استفاده می شود:

{
  "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
            }
          }
        }
      }
    }
  }
}

اکنون سه سطح سبک برای عناصر Heading 2 داریم: همه سرفصل ها، همه عناصر Heading 2 و Heading 2 که در بلوک Query Loop استفاده می شوند.

نمونه های موضوع موجود

در حالی که ما در این مقاله فقط به نمونه‌های سبک برای دکمه‌ها و سرفصل‌ها نگاه کردیم، وردپرس 6.1 از عناصر اضافی استایل‌سازی پشتیبانی می‌کند. جدولی وجود دارد که آنها را در جدول نشان می دهد "تعریف سبک با عناصر JSON" بخش.

احتمالاً از خود می‌پرسید که کدام عناصر JSON از کدام ویژگی‌های CSS پشتیبانی می‌کنند، نه اینکه بگوییم چگونه می‌توانید آن‌ها را اعلام کنید. در حالی که ما منتظر مستندات رسمی هستیم، بهترین منابعی که در اختیار داریم این خواهد بود theme.json فایل ها برای تم های موجود من می‌خواهم پیوندهایی به تم‌ها بر اساس عناصری که آنها سفارشی می‌کنند ارائه کنم و به ویژگی‌هایی که سفارشی‌سازی شده‌اند اشاره کنم.

هر کدوم رو حتما بدید theme.json فایل را خوب نگاه کنید زیرا این تم ها شامل نمونه های عالی از یک ظاهر طراحی در سطح بلوک هستند styles.blocks هدف - شی.

پسگفتار

تغییرات مکرر در ویرایشگر تمام سایت در حال تبدیل شدن به یک منبع اصلی تحریک برای بسیاری از مردم است، از جمله کاربران گوتنبرگ با فناوری. حتی قوانین بسیار ساده CSS، که با تم های کلاسیک به خوبی کار می کنند، به نظر نمی رسد برای تم های بلوک به دلیل لایه های جدید ویژگی قبلا پوشش دادیم

با توجه به پیشنهاد GitHub برای طراحی مجدد ویرایشگر سایت در حالت مرورگر جدید، سارا گودینگ در پست WP Tavern می نویسد:

هنگام تلاش برای دور زدن ویرایشگر سایت، گم شدن آسان است، مگر اینکه شب و روز در داخل ابزار کار کنید. پیمایش جهنده و گیج کننده است، به خصوص زمانی که از مرور الگو به ویرایش قالب و تغییر بلوک های جداگانه می رویم.

حتی به‌عنوان یک سوارکار مشتاق در دنیای ویرایشگر بلوک گوتنبرگ و مضامین بلوک‌آی، من بسیاری از ناامیدی‌های خودم را دارم. با این حال، من خوشبین هستم و پیش‌بینی می‌کنم که ویرایشگر سایت، پس از تکمیل، ابزاری انقلابی برای کاربران و توسعه‌دهندگان تم با دانش فنی باشد. این توییت امیدوار کننده قبلاً آن را تأیید می کند. در این بین، به نظر می رسد باید برای تغییرات بیشتر و حتی شاید یک سواری پر دست انداز آماده شویم.

منابع

من تمام منابعی را که در حین تحقیق در مورد اطلاعات این مقاله استفاده کردم، فهرست می کنم.

عناصر JSON

سبک جهانی

موتور سبک

با تشکر برای خواندن! من دوست دارم نظرات خود را در مورد استفاده از تم های بلوک و نحوه مدیریت CSS خود بشنوم.