إنشاء كتل Gutenberg المخصصة لـ WordPress

لا يجب أن يكون إنشاء كتل Gutenberg المخصصة لـ WordPress أمرًا صعبًا. في الواقع ، باستخدام القليل من التعليمات البرمجية ، يمكنك إنشاء كتل مخصصة خاصة بك دون الحاجة إلى استخدام مكون إضافي. Gutenberg هو محرر جديد لبرنامج WordPress يسمح لك بإنشاء كتل مخصصة لمحتواك. الكتل هي اللبنات الأساسية للمحتوى الخاص بك في Gutenberg. يمكن استخدامها لإضافة نصوص وصور ومقاطع فيديو والمزيد. لإنشاء كتلة مخصصة ، ستحتاج إلى استخدام محرر نصوص مثل WordPress Code Editor أو مكون إضافي مثل Block Lab. بمجرد أن يكون لديك محرر نصوص ، يمكنك إنشاء ملف جديد في السمة أو دليل البرنامج المساعد. أول شيء عليك القيام به هو إنشاء نوع كتلة. نوع الكتلة هو مجموعة من الإعدادات التي تحدد سلوك الكتلة الخاصة بك. للقيام بذلك ، ستحتاج إلى استخدام وظيفة register_block_type. بمجرد حصولك على نوع الكتلة ، يمكنك تسجيله في WordPress. ستأخذ هذه الوظيفة وسيطين: اسم نوع الكتلة وكائن يحتوي على إعدادات الكتلة الخاصة بك. بعد تسجيل نوع الحظر ، يمكنك البدء في إضافة الحقول إليه. الحقول هي الإعدادات التي تتحكم في شكل وسلوك الكتلة الخاصة بك. لإضافة حقل إلى نوع الحظر الخاص بك ، ستحتاج إلى استخدام الوظيفة add_field. بمجرد إضافة جميع الحقول التي تريدها إلى نوع الحظر الخاص بك ، يمكنك تسجيله في WordPress. وهذا كل شيء! لقد قمت الآن بإنشاء كتلة Gutenberg مخصصة لـ WordPress.

كان محرر كتلة Gutenberg أحد التحسينات التي تم إدخالها على WordPress 5.0. يقسم محرر Gutenberg المحتوى إلى كتل يمكن إعادة ترتيبها بسهولة. لن يتمكن معظم المطورين من إنشاء كتل مصممة محليًا لأنهم يفتقرون إلى مهارات React. استجاب مجتمع مطوري WordPress من خلال تطوير أدوات يمكنها تلبية متطلبات React / JavaScript. يتم إنشاء الكتل في Block Lab على ثلاث مراحل: إضافتها داخل المسؤول ، ونسخها ولصقها ، ثم تصديرها. يمكن أيضًا استخدام واجهة برمجة التطبيقات لإنشاء عناصر تحكم مخصصة لحظرك. قد لا يكون هذا كثيرًا للنظر إليه ، ولكنه سيعطيك فكرة عما يمكنك القيام به باستخدام كتلة Gutenberg المخصصة.

لإنشاء كتلة ، سنحتاج إلى إنشاء ملف جديد باسم block-الإعلام-bar.php ، والذي يحتوي على عنوان (شريط التنبيهات) وثلاثة حقول. رداً على هذا الملف ، ستظهر رسالة إعلام تطلب منا وضع قالب الحظر المخصص الخاص بنا في موضوعنا. قبل تحميل الملف ، تأكد من حفظه وتحميله على خادم الويب الخاص بك. تم الآن إنشاء قالب مخصص لنا. كل ما يهم هو أن تحقق هذا الهدف. لدينا الكثير من الخيارات إذا أردنا التوسع في ما أنشأناه بالفعل. الرموز والأزرار والقدرة على الارتباط بمنشور أو صفحة أخرى ليست سوى عدد قليل من الميزات التي يمكن إضافتها. يمكن تحقيق كل هذه القدرات من خلال Block Lab ، بالإضافة إلى المكونات الإضافية الأخرى المذكورة أعلاه.

WordPress Custom Blocks Plugin

هناك العديد من الإضافات الرائعة للكتل المخصصة المتاحة لـ WordPress. يقدم كل مكون إضافي مجموعة مختلفة من الميزات والخيارات. تسمح لك بعض المكونات الإضافية للكتل المخصصة بإنشاء قوالب مخصصة لمنشوراتك وصفحاتك ، بينما يوفر البعض الآخر مجموعة من الكتل المصممة مسبقًا والتي يمكنك استخدامها.

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

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

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

إنشاء تفاعل كتلة جوتنبرج

توجد عدة طرق لإنشاء كتلة Gutenberg في React. الطريقة الأولى هي استخدام أداة create-guten-block CLI. سيؤدي هذا إلى سقالة كتلة جوتنبرج جديدة لك. لاستخدام هذه الطريقة ، ستحتاج إلى تثبيت Node.js و npm على جهازك. بمجرد تثبيت هذه التبعيات ، يمكنك إنشاء كتلة Gutenberg جديدة عن طريق تشغيل الأمر التالي: create-guten-block my-block سيؤدي هذا إلى إنشاء دليل جديد يسمى my-block مع جميع الملفات الضرورية لكتلة Gutenberg. الطريقة الثانية لإنشاء كتلة Gutenberg في React هي استخدام الحزمة @ wordpress / block-editor. تتضمن هذه الحزمة وظيفة مساعدة تسمى createBlock يمكن استخدامها لإنشاء كتل Gutenberg. لاستخدام هذه الطريقة ، ستحتاج إلى تثبيت حزمة @ wordpress / block-editor في مشروعك. بمجرد تثبيت الحزمة ، يمكنك إنشاء كتلة Gutenberg جديدة عن طريق تشغيل الكود التالي: import {createBlock} from '@ wordpress / block-editor'؛ createBlock ('my-block / my-block'، {title: 'My Block'، category: 'common'،})؛ سيؤدي هذا إلى إنشاء كتلة جديدة تسمى my-block في الفئة المشتركة. الطريقة الثالثة لإنشاء كتلة Gutenberg في React هي استخدام الدالة wp.blocks.createBlock . هذه الوظيفة جزء من WordPress JavaScript API ويمكن استخدامها لإنشاء كتل Gutenberg. لاستخدام هذه الطريقة ، ستحتاج إلى تضمين حزمة طلب wp-api-request في مشروعك. بمجرد تثبيت الحزمة ، يمكنك إنشاء كتلة Gutenberg جديدة عن طريق تشغيل الكود التالي: import {wp} من 'wp'؛ wp.blocks.createBlock ('my-block / my-block'، {title: 'My Block'، category: 'common'،})؛ سيؤدي هذا إلى إنشاء كتلة جديدة تسمى my-block في الفئة المشتركة.

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

React سهل الاستخدام في السمات المخصصة

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

Gutenberg إنشاء كتلة زر مخصصة

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

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء أول كتلة بسيطة لك في التطبيق الشهير. تطبيق WordPress @ create-block هو أداة رسمية تتيح لنا إنشاء كود Javascript / PHP / CSS بسرعة. في الوضع التفاعلي ، يمكنك تكوين الكتلة الخاصة بك في سلسلة من الخطوات. عندما تتعلم فقط عن Gutenberg ، يمكن أن يكون هذا مفيدًا للغاية. إذا كنت قد قمت بالفعل بتثبيت الكتلة ، فيمكنك الآن الوصول إلى الدليل الذي تم إنشاؤه حديثًا عبر محرر التعليمات البرمجية. يتبع هيكل المكون الإضافي الكتلة هذا كما هو حاليًا (في وقت كتابة هذا البرنامج التعليمي). سنستعرض تفاصيل كل ملف واستخدامه في هذه الوحدة.

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

تطوير البرنامج المساعد جوتنبرج وورد

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

ربما تكون قد سمعت عن Gutenberg (محرر قوالب WordPress) ، ولكن كيف تبدأ في إنشاء المكون الإضافي الخاص بك؟ يتم إنشاء الكتل باستخدام برنامج WordPress بسيط. عادةً ما يكون نوع المكون الإضافي WordPress الذي تم إنشاؤه هنا عبارة عن كتلة ، ولكنه يوفر نقطة انطلاق جيدة للآخرين في هذه العملية. يمكن استخدام Create Block Script كقالب لإنشاء المكون الإضافي الخاص بك. يمكنك بسهولة رؤية الكتلة في الواجهة الأمامية لـ WordPress ، ولكن لها مظهر مختلف لمساعدتك على التعود عليها في النهاية الخلفية. يجب إنشاء هذا الملف في وضع التطوير فقط بعد تجميع الأصول. / node_modules - هذا هو المجلد الذي يتم من خلاله تخزين جميع المعلمات المعتمدة على JavaScript في المكون الإضافي الخاص بك.

يمكن العثور على ملفات محددة مسبقًا تحتوي على بيئات Visual Studio Code (VDC) المفيدة في هذا الملف. يجب عليك التأكد من أنك في مجلد البرنامج المساعد WordPress إذا كنت تريد إنشاء مكون إضافي. نتيجة لذلك ، ستتمكن من عرض مراحل تطوير وإنتاج المكون الإضافي. افتح /src/save.js في المحرر الخاص بك لاستبدال وظيفة الحفظ بما يلي: يمكن إخراج BlockText كسلسلة بهذه الطريقة. يجب إضافة الكود التالي إلى جذر المكون الإضافي لعرض كتلك في فئة كتلة مخصصة. ترجع الدالة registerBlockType.js قائمة بفئات الكتلة الخاصة بك ، والتي يمكن بعد ذلك إعادة تجميعها باستخدام وظيفة registerBlockType.js الخاصة بالملحق.

محرر محتوى جوتنبرج

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

محرر قوالب ووردبريس المخصص

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

سيرشدك هذا البرنامج التعليمي خلال عملية إنشاء نسخة محرر كتلة مخصصة تعمل بكامل طاقتها داخل WordPress. سيتم إنشاء هذا المحرر بالكامل داخل صفحة مسؤول WP مخصصة تسمى Block Editor (بالطريقة الأكثر إبداعًا). في WordPress Plug-A-Thon ، سننشئ محررًا. يجب علينا الآن إنشاء بعض HTML في صفحتنا المخصصة باستخدام مكون React الخاص بمحرر الكتلة. كوسيطة ثالثة ، نستخدم سطر تبعيات البرنامج النصي ($ script_asset ['التبعيات']). سيضمن عدم تضمين البرامج النصية المتعلقة بـ WordPress في الحزمة المدمجة. يجب علينا أيضًا تسجيل أنماط CSS المخصصة ومكتبة التنسيق الافتراضية لـ WordPress من أجل استخدامها.

يتيح لنا ذلك استخدام JavaScript لإنشاء محرر بلوك في HTML للصفحة. يحدث السحر عندما يسمى المكون الخاص بذلك BlockEditor. من الممكن عرض المحرر من PHP بدون إنشاء JS global. مخطط المحرر مبني على السقالات ، كما ترون هنا ، بالإضافة إلى عدد قليل من موفري السياق المتخصصين. Block EditorProvider هو العنصر الأكثر أهمية في حزمة محرر قوالب WordPress. كما أوضحنا سابقًا ، يوفر هذا سياقًا جديدًا لمحرر كتلة جديد تمامًا في سياق تحرير الكتلة. وهو يحقق ذلك من خلال الاشتراك في السجل المقدم (عبر مزود السجل HOC) ، والاستماع إلى أحداث تغيير الحظر ، وتحديد ما إذا كان تغيير الكتلة لا يزال مستمراً ، واستدعاء معالج إدخال onChange عند الضرورة.

العنصر الأكثر إثارة للاهتمام هو مكون BlockList ، والذي يضيف قائمة من الكتل إلى المحرر. من الجدير دراسة هذه المكونات بالتفصيل لأنها من أكثر المكونات تعقيدًا وانخراطًا. لمعرفة المزيد حول مكون EditorBlock المخصص لدينا ، يرجى الاطلاع على المقالة التالية. يتم تنفيذ الفتحة / الملء من خلال استخدام مكون Blockeditor (انظر أعلاه) لفضح Fill (Sidebar. InspectorFill) بداخله ، والذي نقوم باستيراده وتقديمه في التنفيذ بعد ذلك. نتيجةً لذلك ، تسمح لنا React بالاحتفاظ بمكوِّن فحص في DOM الخاص بها أثناء عرضها في الترميز في موقع منفصل (على سبيل المثال ، في الشريط الجانبي). يمكن أيضًا العثور على الكتل داخل LocalStorage تحت مفتاح getdavesbeBlocks.

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