إدخال Blocks 3.0

هذه هي الأخبار المثيرة التي كنت تنتظرها: Kadence Blocks 3.0 هنا!

نحن فخورون بالإعلان عن إصدار Kadence Blocks 3.0 ، وهو أحدث إصدار من المكون الإضافي الشهير الخاص ببناء صفحات WordPress. إذا كنت تتابع طوال فترة التطوير وعملية الإصدار التجريبي ، فمن المحتمل أنك تدرك أن هذا التحديث الأخير يجلب عددًا من التغييرات الأساسية على Kadence Blocks ، وكلها تؤدي إلى تجربة بناء موقع أفضل. بالإضافة إلى ذلك ، فإن إعادة الكتابة التأسيسية هذه تخلق هياكل جديدة تسمح لفريق التطوير لدينا بإضافة ميزات جديدة بشكل أفضل ، بما في ذلك الكتل الجديدة. هناك طريق مثير أمام الجميع لبناء مواقع سريعة وفعالة باستخدام Kadence.

ما هو الجديد؟

إعادة كتابة التعليمات البرمجية وتحديثها وتنقيتها وتحسينها.

تم إنشاء Kadence Blocks في الأيام الأولى لمحرر قوالب WordPress. في الواقع ، تم إصداره في البداية على مدى ثلاثة أشهر قبل أن يكون محرر الكتلة جزءًا من نواة WordPress. من نواح كثيرة ، كنا جميعًا مشتركين في محرر الكتلة منذ البداية ، ولكن هذا يعني أيضًا أنه كان علينا القيام بالكثير من إعادة البناء كقاعدة التعليمات البرمجية الأساسية وتغير محرر الكتلة نفسه بشكل كبير على مدار سنين. بقدر ما قمنا بإعادة البناء في الأماكن ، وصلنا إلى لحظة كان من الواضح فيها أننا بحاجة إلى إعادة هيكلة معظم المكون الإضافي لجعله أكثر توافقًا مع المسار الحالي لنواة WordPress وفتح الفرص المستقبلية للابتكار في محرر الكتلة. وهنا عدد قليل من الضوء:

• تم تحديث بنية البناء بالكامل والآن استخدم مكتبات المكونات
• تم تحديث بنية رد الفعل للكتل لتكون وظيفية وتستخدم API v2
• إعادة بناء كيفية تجميع وإخراج CSS للواجهة الأمامية لتخصيصات الكتلة
• إعادة بناء طريقة حفظنا وإخراج رموز SVG لمنع تجريد wp_kses
• أعد بناء Javascript للواجهة الأمامية بحيث لا تستخدم أي منزلقات jQuery

واجهة مستخدم جديدة لإعدادات الحظر

تقدم Kadence Blocks 3.0 تحسينات جديدة لواجهة المستخدم لإعدادات الكتلة. تم إجراء هذه التغييرات لتحسين مدى سرعة وسهولة إنشاء الكتل وإدارتها على صفحتك.

نظمت من قبل علامات التبويب

يتم تنظيم إعدادات الحظر بشكل بديهي في أقسام: عام ، ونمط ، ومتقدم. سيؤدي ذلك إلى جعل العثور على الإعداد الصحيح لتعديل التخطيط والتصميم أسرع وأسهل. لا مزيد من التمرير عبر الكثير من الإعدادات!

ضوابط الإعدادات الجديدة والمحدثة

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

لقد أنشأنا عددًا غير قليل من عناصر التحكم الخاصة بنا لمكتبة المكونات الخاصة بنا. تعتمد بعض عناصر التحكم هذه على نواة WordPress ويغادر البعض الآخر بعدة طرق صغيرة حيث شعرنا أنه يمكننا توفير توجيه أفضل باستخدام عناصر تحكم Kadence المخصصة. كل هذه لديها تصميم سريع الاستجابة في الاعتبار وتضفي المزيد من الاتساق على عناصر التحكم في الكتلة. فيما يلي بعض الصور لبعض عناصر التحكم الجديدة هذه.

الحشو والهامش المرئي

تمنحك Kadence Blocks دائمًا القدرة على تعيين الحشو العلوي والسفلي بشكل مرئي في كتلة تخطيط الصف. تعمل Kadence Blocks 3.0 على تحسين هذه التجربة في مخطط الصف وفي العديد من الكتل الأخرى. مع المناطق المميزة التي تظهر عندما تحوم فوق إعدادات المساحة المتروكة والهامش ، أصبح الآن من السهل جدًا رؤية كيف تؤثر إعداداتك على تخطيط الصفحة.

التغييرات مع كتلة تخطيط الصف

كان أحد الركائز الأساسية للمكوِّن الإضافي Kadence Blocks هو Row Layout Block. كتلة تخطيط الصف عبارة عن حاوية تجمع الأقسام معًا وتجعل البناء باستخدام الكتل أسهل. ركزنا الكثير من الاهتمام على جعل هذه الكتلة التأسيسية أسهل في الاستخدام.

نقل الأقسام بسهولة داخل تخطيط الصف

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

الآن ، أصبح نقل كتل القسم داخل كتلة تخطيط الصف أسهل من أي وقت مضى. بنقرة على السهم ، يمكنك تحريك قسم سريعًا في أي مكان بالإضافة إلى سحبه من كتلة تخطيط صف إلى أخرى.

خيارات تخطيط شبكة الصف الجديدة

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

يستخدم تخطيط الصف Grid CSS والتحسينات الأخرى

لقد قمنا بتحسين كيفية إخراج Row Layout Block لـ CSS ونوع CSS الذي تستخدمه. يسمح التبديل من CSS Flexbox إلى CSS Grid لكتل ​​Kadence بتقليل حجم ملف CSS بشكل كبير (36 كيلوبايت -> 6 كيلوبايت). إلى جانب ذلك ، قمنا بتقليل عدد علامات HTML في الإخراج من ثلاثة إلى اثنتين ، مما يساعدك بشكل أكبر على تحسين حجم DOM (نموذج كائن المستند). يؤدي هذا التحسين إلى زيادة سرعة الصفحة بشكل كبير وتحسين تجربة المستخدم الإجمالية.

نص مكتوب في كتلة نصية متقدمة

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

لإضافة هذا إلى موقعك ، حدد بعض النص وانقر فوق السهم الموجود في شريط الأدوات في Advanced Text Block ، في القائمة المنسدلة انقر فوق النص المكتوب. بعد ذلك ، سيتم فتح لوحة بها جميع إعدادات نص الكتابة.

الترحيل إلى الكتل الداخلية

عندما تم إنشاء Kadence Blocks في الأصل ، كانت الضوابط حول الكتل الداخلية مفقودة للغاية. كان هذا يعني بالنسبة للعديد من الكتل لدينا إنشاء سمات مصفوفة مخصصة لإنشاء نوع من الكتلة الداخلية لم يكن في الواقع كتلة داخلية. كانت مجموعة الأزرار الخاصة بنا مثالًا جيدًا على ذلك. لقد خدم غرضًا قيمًا في منح المستخدمين القدرة على إضافة زرين بسهولة بجانب بعضهما البعض. نظرًا لأن WordPress الأساسي قد تقدم في تطويره ، فإن أدوات البناء باستخدام الكتل الداخلية أفضل بكثير. الآن أصبح من المنطقي أن يكون لديك كتلة حاوية بأزرار فردية ككتلة داخلية. يتيح لك ذلك النقر فوق الزر لتحريره وتبسيط لوحات الإعدادات بشكل كبير. في Kadence Blocks 3.0 ، قمنا بترحيل أربع كتل للاستفادة من الكتل الداخلية لتسهيل التطوير.

• كتلة زر متقدمة
• كتلة التزكية
• كتلة أيقونة
• كتلة قائمة الرموز

متغيرات الإعدادات

كان أحد الأهداف العديدة لـ Kadence Blocks 3.0 هو جعل قرارات التصميم أكثر سهولة. بالنسبة للعديد من المستخدمين ، فإن فهم الفرق بين وحدات البكسل أو وحدات EM أو REM والتي يجب استخدامها لإعدادات مختلفة مثل أحجام الخطوط أو الحشو أو الحضيض ليس في أعلى قوائم المهام الخاصة بهم.

باستخدام Kadence Blocks 3.0 ، قمنا بنقل العديد من إعدادات الحجم الافتراضية لدينا لاستخدام متغيرات مخصصة حتى تتمكن من تعيين أحجام صغيرة ومتوسطة وكبيرة لإعدادات حجم العنصر القياسية ودعنا نتعامل مع الباقي.

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

تصميم مستجيب من خلال CSS Clamp

لتوفير تجربة مشاهدة أفضل بغض النظر عن الجهاز الذي تستخدمه ، غيّر Kadence Blocks 3.0 بشكل أساسي كيفية تحميل التصميمات. إذا كنت مهتمًا بالتكنولوجيا الكامنة وراء CSS clamp ، فيمكنك قراءة المزيد عنها هنا. بشكل أساسي ، يحدد CSS Clamp حجم منفذ العرض المتطور (على سبيل المثال ، متصفح سطح المكتب) وحجم منفذ العرض المنخفض (على سبيل المثال ، الهاتف المحمول). وبغض النظر عن كيفية تحميل الموقع ، أو كيف يغير المستخدم حجم نافذة المتصفح ، فإن موقعك سيغير أحجام هذه العناصر بمرونة بناءً على حجم نافذة المتصفح المكتشفة.

بينما ستظل Kadence Blocks تسمح لك بتعيين مواصفات الحجم بناءً على سطح المكتب أو الجهاز اللوحي أو الهاتف المحمول ، فإن Kadence Blocks 3.0 يعفيك من مسؤولية الحاجة إلى تغيير حجم هذه العروض. الآن ، يمكنك الاعتماد على الإعدادات المتغيرة باستخدام Clamp والسماح لـ Kadence Blocks بالقيام بالعمل نيابة عنك.

تحديثات نسخ الأنماط ولصقها

كان خيار نسخ الأنماط ولصقها جزءًا من Kadence Blocks لفترة من الوقت ، لكننا قمنا بتجديده في Blocks 3.0 وقمنا بتضمينه مع جميع الكتل الخاصة بنا. تتطلب هذه الأداة بعض النية لجعلها جزءًا من سير عملك ، لكننا نعدك بأنها ستجعل تطويرك أسرع بكثير!

تحديثات حظر الافتراضيات

إذا وجدت نفسك دائمًا تضع شيئًا ما في Kadence Block ، يمكنك تحديد ما هو "الافتراضي" للكتلة. لأنه إذا قمت دائمًا بتعيين تخطيط الصف الخاص بك لاستخدام الحد الأقصى لعرض محتوى السمة ، فيمكنك جعل هذا الإعداد الافتراضي عندما تضيف كتلة تخطيط صف جديدة إلى صفحتك. يمكنك القيام بذلك مع أي إعداد على أي كتلة. بينما كنت قادرًا على القيام بذلك في معظم الكتل من قبل Kadence Blocks 3.0 ، فقد قمنا بتغيير طريقة عملها. الآن أصبح تعيين الإعدادات الافتراضية للكتلة أسهل من أي وقت مضى. من داخل كل كتلة ، يمكنك النقر فوق "متقدم" ثم النقر فوق "افتراضيات الحظر" وهذا سيسمح لك بمعرفة ما إذا تم تطبيق أي إعدادات افتراضية للكتلة. يمكنك حتى إزالة سمات معينة لا تريد أن تكون جزءًا من الإعدادات الافتراضية للكتلة. ما يجعل الأمر سهلاً هو أنه يمكنك استخدام الكتلة الحالية التي تعمل عليها لتحديد الإعداد الافتراضي الجديد بنقرة زر واحدة. يمكنك أيضًا تصدير الإعدادات الافتراضية للكتل واستيرادها إلى مواقع أخرى.

التوافق الكامل مع الإصدارات السابقة

مع إعادة كتابة كبيرة مثل هذه ، بطبيعة الحال ، فإن أحد أكبر المخاوف هو ضمان التوافق الكامل مع الإصدارات السابقة. لقد احتفظنا بهذا المطلب في أعيننا طوال عملية التطوير للتأكد من أن المواقع التي قمت بإنشائها باستخدام Kadence Blocks 2. * تنتقل بسهولة إلى المكون الإضافي 3.0 المحدث. خلال فترة تجريبية طويلة ، ساهم أكثر من 400 شخص في اختبار Kadence Blocks 3.0. بالإضافة إلى ذلك ، من خلال مكتبتنا الكبيرة من قوالب البداية التي تم إنشاؤها باستخدام Kadence Blocks ، تمكنا من استخدامها لإجراء الكثير من الاختبارات الداخلية. وفي حال كنت فضوليًا ، فنحن أنفسنا نستخدم Kadence Blocks 3.0 على موقعنا الإلكتروني.

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

كيف تعمل التحديثات في Block Editor

عند تحديث Kadence Blocks ، لن يتم تحديث محتوى منشوراتك وصفحاتك تلقائيًا. يتم حفظ معظم محتوى هذه الصفحات بتنسيق HTML ثابت ويتم عرضها على الواجهة الأمامية لموقع الويب الخاص بك بشكل مشابه جدًا للطريقة التي تم تقديمها من قبل. بينما قمنا بتحديث كيفية عرض بعض HTML ، وقمنا بتحديث ملفات CSS و Javascript الخارجية التي يتم إخراجها بها ، فإن البنية الأساسية للكتل الخاصة بك ستظل كما هي.

على سبيل المثال ، يستخدم Row Layout Block في Kadence Blocks 2. * ثلاثة عناصر DIV لـ HMTL في مخرجاته ، بينما يستخدم Row Layout Block في Kadence Blocks 3+ اثنين من DIVs فقط. لن يسري هذا التغيير على موقع الويب الخاص بك على الفور. لن يتم إعادة إنشاء HTML المحفوظ إلى آخر تحديث إلا بعد فتح الصفحة أو النشر.

لقد حددنا عدد تغييرات HTML التي أجريناها واختبرناها للتأكد من أننا دعمنا كلا الإصدارين. تم إجراء هذه التغييرات لتحسين أداء موقعك.

نصائح حول التحديث واستكشاف الأخطاء وإصلاحها

فيما يلي اقتراحاتنا حول كيفية التحديث إلى Kadence Blocks 3.0 وبعض الأشياء التي يمكنك التحقق منها أولاً إذا واجهت أي مشكلات.

قبل التحديث

1. النسخ الاحتياطي لموقع الويب الخاص بك.
2. المكافأة: قم بإنشاء موقع مرحلي وقم بالتحديث هناك أولاً.

بعد التحديث

1. امسح ذاكرة التخزين المؤقت لموقعك (المتصفح ، ذاكرة التخزين المؤقت للصفحة ، ذاكرة التخزين المؤقت للكائن).
2. أعد إنشاء البرامج النصية المصغرة لكل من CSS و Javascript.
3. اعرض صفحات موقعك للتحقق من أن كل شيء يعمل بسلاسة.

استكشاف الأخطاء وإصلاحها

1. إذا لم تظهر الصفحة بشكل صحيح في الواجهة الأمامية ، فافتح الصفحة وحاول إعادة الحفظ . سيؤدي ذلك إلى إعادة إنشاء HTML الثابت في محتوى الصفحة وتحديث تنسيقات الحظر.
2. إذا لم تظهر الصفحة بشكل صحيح في الواجهة الأمامية ، فراجع أي CSS مخصص أضفته لمعرفة ما إذا كان CSS المخصص يحتاج إلى التحديث للعمل بشكل صحيح.

ماذا بعد؟

ربما لاحظت أن Kadence Blocks 3.0 لم تأتي مع أي كتل جديدة. انتهى الأمر بكونه قرارًا مقصودًا للحد من نطاق هذا التحديث للتركيز على البنية الأساسية والإعدادات وواجهة مستخدم المحرر. يوفر لنا تحديث Kadence Blocks 3.0 منصة إطلاق للكتل الجديدة التي يجب أن تهبط قريبًا ، بالإضافة إلى ميزات رائعة أخرى. يوجد أدناه خارطة طريق مبسطة لتعطيك فكرة عن أشياء لـ Kadence Blocks.

• Kadence Blocks 3.1 - أقل من شهر
  • كتلة النموذج المتقدمة
  • كتلة شريط التقدم
• مكتبة التصميم الجديدة - Q1 / Q2
• Kadence Blocks Pro 2.0 - Q1 / Q2
  • تحديثات الهيكل وواجهة المستخدم لمطابقة Blocks 3.0
  • تجديد الكتل الموجودة.
• كتلة الاستعلام المتقدمة - Q2
• الدعم الميداني للمكرر الديناميكي - Q2

كتلة النموذج المتقدمة

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

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

شكر خاص لك

إلى كل من ساهم بالوقت وتقارير الأخطاء والأفكار لفريق تطوير Kadence أثناء عملية الإصدار التجريبي من Kadence Blocks 3.0 ، نشكرك. كان هذا إصلاحًا شاملاً لكيفية عمل Kadence Blocks ، وبدون تقارير الأخطاء الخاصة بك ، لم نكن قادرين على ضمان أن Kadence Blocks تعمل بشكل جيد للجميع.

ما الذي ستنشئه باستخدام Kadence Blocks 3.0؟

نحن متحمسون لتقديم هذه الميزات والتحسينات الجديدة إليك ، ونأمل أن تستمتع باستخدام Kadence Blocks 3.0 بقدر ما استمتعنا بتطويره. ما أكثر شيء تحسن في رأيك؟ ما هي الأسئلة التي لديك حول التحديث الجديد؟ شارك بأفكارك وخبراتك في التعليقات أدناه. أيضًا ، خطط للانضمام إلى البث المباشر يوم الخميس 23 فبراير على YouTube للحصول على أبرز ما في هذا الإصدار ، وطرح أي أسئلة على فريق Kadence ، والاستماع إلى المزيد حول خارطة الطريق القادمة للبناء باستخدام Kadence Blocks.