استفاده از یک سیستم طراحی با ویرایشگر بلاک وردپرس Pt. 1: theme.json

در پست قبلی وبلاگ خود، نشان دادیم که چگونه می توانید سیستم طراحی خود را از Figma به theme.json یک پوسته وردپرس وارد کنید. با انجام این کار، می توانید از ثبات مداوم در خواص دیجیتال خود اطمینان حاصل کنید.

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

• بخش های theme.json مربوط به سیستم های طراحی را درک کنید
• به منظور استفاده از سیستم طراحی وارداتی، theme.json را اصلاح و گسترش دهید

درک theme.json

theme.json یک فایل پیکربندی است که به شما امکان می‌دهد ویرایشگر بلوک را پیکربندی و قالب بندی کنید، تنظیمات بلوک را تغییر دهید، و پایه‌هایی را برای ایجاد یک تم بلوک کامل بسازید.

این به شما امکان می دهد تنظیمات و سبک های جهانی سایت وردپرس خود را کنترل کنید. هر سایت VIP وردپرس جدید به طور پیش فرض با موضوع بیست و بیست و سه، یک تم بلوکی ارائه می شود. این تم یک نقطه شروع عالی برای آزمایش با یک تم بلوک سبک و درک برخی از کنترل‌های قدرتمند موجود در theme.json است.

در حال تغییر theme.json

بیایید با theme.json استفاده شده در پست قبلی وبلاگ خود شروع کنیم. به بخش سفارشی توجه کنید، جایی که ابزار bridge ما می تواند یک سیستم طراحی را از Figma درج و به روز کند. این بخش کلیدی است که در آن به اجزای مختلف سیستم طراحی خود (توکن‌های طراحی) اشاره می‌کنید تا واقعاً از theme.json به طور مؤثر استفاده کنید.

در زیر به نکات و استراتژی‌هایی می‌پردازیم تا بتوانید از همه چیزهایی که theme.json ارائه می‌کند استفاده کنید.

ذخیره توکن های طراحی

در حالی که مکان توکن های طراحی شما را می توان با استفاده از ابزار پل سفارشی کرد، آنها همیشه باید در بخش سفارشی تنظیمات نگهداری شوند. این مکان پیش فرض ابزار Bridge است و نباید تغییر کند. این کار آنها را به درستی در یک مکان سازماندهی می کند و ممکن است به جلوگیری از درگیری با بخش های طرح زمینه سفارشی موجود کمک کند.

استفاده از توکن های طراحی

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

"settings": {
	"custom": {
		"text": {
			"primary": "#00FF00",
			“background”: “000000”
			}
		}
	}
}

این به ما اجازه می دهد تا به این دو رنگ در هر جایی از theme.json با استفاده از:

var(--wp--custom--text--primary) and var(--wp--custom--text--background)

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

"styles": {
	"color": {
		"text": "var(--wp--custom--text--primary)",
		“background”: “var(--wp--custom--text--background)”
	}
}

طرح کلی برای هر کلیدی که می خواهید از تنظیمات سفارشی خود به آن ارجاع دهید این است:

var(--wp--custom–<location to the value with -- as a separator between each key>)

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

بهترین شیوه ها

• از متغیرهای رمز طراحی ایجاد شده توسط وردپرس استفاده کنید (به عنوان مثال، var(--wp--custom--text--primary)) به نشانه های مرجع در همه جا. به قطعه ارائه شده در بالا توجه کنید، جایی که ما به جای استفاده از خود مقدار واقعی، به رنگ سفارشی اصلی و پس‌زمینه اشاره می‌کنیم. این تضمین می‌کند که وقتی می‌خواهید ویژگی‌هایی مانند رنگ متن را به‌روزرسانی کنید، باید فقط یک مکان را تغییر دهید، زیرا مکان‌های دیگر فقط مرجع هستند.
• توکن های طراحی درج شده در theme.json با CSS خارج از theme.json نیز قابل دسترسی هستند، با استفاده از همان ارجاع کلیدی که در بالا نشان داده شده است. این امر در مورد توسعه بلوک و سایر اجزای مورد استفاده در یک موضوع صدق می کند. آنها فقط برای استفاده در theme.json در نظر گرفته نشده‌اند و باید در هر CSS سفارشی دوباره استفاده شوند.

توصیه می‌کنیم هر دوی این بهترین شیوه‌ها را دنبال کنید تا theme.json را به‌عنوان منبعی واحد از حقیقت حفظ کنید. این به شما این امکان را می دهد که توکن های طراحی را به راحتی به روز کنید، به خصوص زمانی که از ابزارهای خودکار مانند ابزار پل وردپرس VIP استفاده می کنید که به Figma متصل می شود.

ویرایشگر و سبک های بلوک را تغییر دهید

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

دو مکان کلیدی در theme.json وجود دارد:

• Settings and settings.blocks—به سفارشی سازی تنظیماتی که عموماً در ویرایشگر بلوک در دسترس هستند و تنظیمات مناسب برای انواع بلوک های جداگانه اجازه می دهد.
• Styles and styles.blocks— امکان تعریف استایل از پیش تعیین شده برای کل ویرایشگر بلوک و سفارشی سازی هر بلوک را فراهم می کند.

به عنوان مثال، در اینجا نحوه اطمینان از اینکه همه سرفصل ها دارای یک رنگ سبز (اصلی) پیش فرض و یک گزینه رنگ ثانویه هستند، آمده است:

"settings": {
	"custom": {
		"text": {
			"primary": "#00FF00",
			“secondary”: “#FF0000”
		}
	},
	“blocks”: {
		“core/heading”: {
			“color”: {
				“text”: true,
				“palette”: [
					{
						"slug": "primary",
						"color": "var(--wp--custom--text--primary)",
						"name": "Primary"
					},
					{
						"slug": "secondary",
						"color": "var(--wp--custom--text--secondary)",
						"name": "Secondary"
					}
				]
			}
		}
	}
},

"styles": {
	"blocks": {
		“core/heading”: {
			“color”: {
				"text": "var(--wp--custom--text--primary)"
			}
		}
	}
}

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

هشدار استایل

تا جایی که ممکن است، فقط از بخش‌های theme.json و styles.blocks برای استایل دادن به بلوک‌های خود استفاده کنید. از استایل‌سازی CSS برای نادیده گرفتن سبک‌های بلوک اصلی استفاده نکنید، مگر اینکه کاملاً لازم باشد. لغو CSS برای سبک‌های بلوک معمولاً پایدار نیست – به‌روزرسانی‌های ویرایشگر بلوک می‌تواند استایل و ساختار را تغییر دهد و باعث شکسته شدن آن سبک‌ها شود.

سفارشی سازی در هر بلوک

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

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

"settings": {
	"custom": {
		"text": {
			"primary": "#00FF00",
			“secondary”: “#FF0000”
		}
	},
	“color”: {
		“text”: false
	},
	“blocks”: {
		“core/heading”: {
			“color”: {
				“text”: true, 
				“palette”: [
					{
   						"slug": "primary",
   						"color": "var(--wp--custom--text--primary)",
   						"name": "Primary"
					},
   					{
   						"slug": "secondary",
   						"color": "var(--wp--custom--text--secondary)",
   						"name": "Secondary"
   					}
				]
			}
		}
	}
}

این مثال پیکربندی تنظیمات کلی از طریق تنظیمات و تنظیمات مربوط به بلوک را از طریق بخش بلوک ها در زیر تنظیمات نشان می دهد. این همچنین در مورد یک استایل سراسری (موجود در ویژگی root styles) و یک استایل خاص بلاک (در زیر styles.blocks) صدق می کند.

الگوی از پیش تعیین شده ساده

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

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
   	 "appearanceTools": true,
   	 "border": {
   		 "color": false,
   		 "radius": false,
   		 "style": false,
   		 "width": false
   	 },
   	 "color": {
   		 "text": false,
   		 "background": false,
   		 "link": false,
   		 "custom": false,
   		 "defaultPalette": false,
   		 "defaultGradients": false,
   		 "defaultDuotone": false,
   		 "customGradient": false,
   		 "customDuotone": false,
   		 "palette": [
   			 // Design system palette colors...
   		 ],
   		 "gradients": [
   			 // Design system gradients...
   		 ]
   	 },
   	 "spacing": {
   		 "margin": false,
   		 "padding": false,
   		 "units": ["rem", "%"]
   	 },
   	 "typography": {
   		 "customFontSize": false,
   		 "fontStyle": false,
   		 "fontWeight": false,
   		 "letterSpacing": false,
   		 "lineHeight": false,
   		 "textDecoration": false,
   		 "textTransform": false,
   		 "dropCap": false,
   		 "fontFamilies": [],
   		 "fontSizes": []
   	 }
    }
}

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

در نتیجه

Theme.json یک ابزار قدرتمند برای سازماندهی توکن های طراحی جهانی، تنظیم سبک های تم جهانی و سفارشی سازی بلوک های فردی است. استفاده از تمام ویژگی‌هایی که ویرایشگر بلوک برای سفارشی‌سازی نشان می‌دهد، اجرای سیستم طراحی را متمرکز و سازگار با ویرایشگر بلوک داخلی می‌کند.

در قسمت 2 مجموعه خود، نکات پیشرفته تری را خارج از theme.json برای مدیریت انواع بلوک های داخلی و سبک ها در یک سیستم طراحی پوشش خواهیم داد.

لینک های مفید

Alec Geatches، توسعه دهنده ارشد نرم افزار در Automattic

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

Gopal Krishnan، توسعه دهنده ارشد نرم افزار در Automattic

Gopal بر روی پیشنهاد وردپرس جدا شده وردپرس VIP با علاقه به سیستم های طراحی و گوتنبرگ کار می کند. او خارج از سیدنی استرالیا است و اخیراً از کانادا نقل مکان کرده است.