استخدام نظام تصميم مع WordPress Block Editor Pt. 1: theme.json

في منشور المدونة السابق ، أوضحنا كيف يمكنك استيراد نظام التصميم الخاص بك من Figma إلى theme.json لموضوع WordPress. من خلال القيام بذلك ، يمكنك ضمان الاتساق المستمر عبر ممتلكاتك الرقمية.

تعتمد سلسلتنا الجديدة المكونة من جزأين على هذا الأساس من خلال إظهار كيفية استخدام الرموز المميزة للتصميم المستوردة من theme.json في محرر الكتلة. سيسمح لك ذلك بتنظيم موقع WordPress الخاص بك بشكل أفضل ليعكس نظام التصميم الخاص بك. هناك هدفان رئيسيان:

• فهم أجزاء theme.json ذات الصلة بأنظمة التصميم
• قم بتعديل وتمديد theme.json للاستفادة من نظام التصميم المستورد

فهم theme.json

theme.json هو ملف تكوين يسمح لك بتهيئة محرر الكتلة وتصميمه ، وتغيير إعدادات الكتلة ، وبناء الأسس لتطوير سمة كتلة كاملة.

من المفترض أن يسمح لك بالتحكم في الإعدادات والأنماط العامة لموقع WordPress الخاص بك. يأتي كل موقع جديد من مواقع WordPress VIP افتراضيًا مع موضوع Twenty-Three ، وهو موضوع كتلة. يعد هذا المظهر نقطة انطلاق رائعة لتجربة سمة كتلة خفيفة الوزن وفهم بعض عناصر التحكم القوية المتوفرة في theme.json.

تعديل theme.json

لنبدأ مع theme.json المستخدم في منشور المدونة السابق. لاحظ القسم المخصص ، حيث يمكن لأداة الجسر الخاصة بنا إدخال وتحديث نظام تصميم من Figma. هذا هو القسم الأساسي حيث تشير إلى المكونات المختلفة لنظام التصميم الخاص بك (رموز التصميم) لاستخدام theme.json فعليًا بشكل فعال.

نراجع أدناه النصائح والاستراتيجيات حتى تتمكن من الاستفادة من كل ما يقدمه theme.json.

تخزين رموز التصميم

بينما يمكن تخصيص موقع الرموز المميزة للتصميم الخاص بك باستخدام أداة الجسر ، يجب دائمًا الاحتفاظ بها في القسم المخصص من الإعدادات. هذا هو الموقع الافتراضي لأداة الجسر ، ويجب عدم تغييره. هذا يبقيهم منظمين بشكل صحيح في مكان واحد وقد يساعد في تجنب التعارض مع أقسام السمات المخصصة الحالية.

استخدام رموز التصميم

دعونا نرى مثالاً على استخدام القسم المخصص في 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>)

الميزة هي أنه يمكنك الرجوع إلى جميع رموز التصميم الخاصة بك باستخدام هذه المفاتيح مع وجود موقع مركزي واحد حيث تتم إدارة القيمة الفعلية.

أفضل الممارسات

• استخدم متغيرات الرمز المميز للتصميم التي تم إنشاؤها في WordPress (على سبيل المثال ، var(--wp--custom--text--primary) ) للإشارة إلى الرموز المميزة في كل مكان. لاحظ المقتطف المقدم أعلاه ، حيث نشير إلى اللون الأساسي ولون الخلفية المخصص ، بدلاً من استخدام القيمة الفعلية نفسها. يضمن ذلك أنه عندما تريد تحديث خصائص مثل لون النص ، يجب عليك تغيير موقع واحد فقط ، لأن المواقع الأخرى هي مجرد مراجع.
• يمكن الوصول إلى رموز التصميم المُدرجة في theme.json باستخدام CSS خارج theme.json أيضًا ، باستخدام نفس المرجع الرئيسي الموضح أعلاه. هذا ينطبق على كتلة التطوير والمكونات الأخرى المستخدمة في السمة. إنها ليست مخصصة للاستخدام داخل theme.json فقط ويجب إعادة استخدامها في أي CSS مخصص.

نوصي باتباع كل من أفضل الممارسات هذه للحفاظ على theme.json كمصدر واحد للحقيقة. سيسمح لك بتحديث الرموز المميزة للتصميم بسهولة ، خاصةً عند استخدام أدوات آلية مثل أداة جسر WordPress 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)" } } } }

يؤدي هذا إلى تكوين كل كتلة رأس بحيث يكون لها لون نص أخضر أساسي ويضيف خيار محرر كتلة ثانيًا لتغيير اللون إلى اللون الأحمر الثانوي. ملاحظة: هذا يتطلب بعض التكرار. يحدد النمط اللون الأساسي الافتراضي ، وتجمع اللوحة بين نفس اللون مع لون ثانوي لتوفير كلا الخيارين في محرر الكتلة.

تحذير التصميم

استخدم فقط أقسام الأنماط والأنماط. لا تستخدم نمط 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" } ] } } } }

يوضح هذا المثال تكوين الإعدادات العامة عبر الإعدادات والإعدادات الخاصة بالحظر عبر قسم الكتل ضمن الإعدادات. ينطبق هذا أيضًا على التصميم العام (متاح ضمن خاصية أنماط الجذر) ، والتصميم الخاص بالكتلة (ضمن الأنماط.

قالب بسيط معد مسبقًا

هناك طريقة جيدة لبدء إنشاء نظام التصميم وهي تأمين إعدادات محرر الكتلة بشكل عام. بعد ذلك ، يمكنك بشكل تدريجي تمكين الإعدادات للكتل الفردية والتحكم في شكل نظام التصميم الخاص بك ويشعر به دون أن تغمره خيارات التخصيص. وعناصر التحكم في الطباعة والتباعد بشكل افتراضي في المحرر:

 { "$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 لإدارة أنواع وأنماط الكتل المضمنة في نظام التصميم.

روابط مفيدة

• ما هو Theme.json؟
• الإعدادات والأنماط العامة (theme.json)

المؤلفون

أليك جياتش ، مطور برامج أول في شركة Automattic

مطور ووردبريس Enterprise WordPress وعشاق أنظمة التصميم الذين يعيشون في تايبيه ، تايوان.

جوبال كريشنان ، مطور برامج أول في شركة Automattic

يعمل Gopal على عرض WordPress المنفصل لـ WordPress VIP ، مع الاهتمام بأنظمة التصميم و Gutenberg. يقيم في سيدني بأستراليا وانتقل مؤخرًا من كندا.