غوتنبرغ كل ما تحتاج لمعرفته حول وورد آخر محرر
غوتنبرغ هو محرر جديد لووردبريس سوف تماما استبدال المحرر الحالي الذي يعمل بنظام TinyMCE. إنه مشروع طموح سيؤدي إلى تغيير WordPress بعدة طرق وسيؤثر على المستخدمين النهائيين والمطورين العاديين ، وخاصة أولئك الذين يعتمدون على شاشة المحرر للعمل على WordPress. هنا هو كيف يبدو.
يقدم غوتنبرغ أيضًا نموذجًا جديدًا في WordPress يسمى “منع”.
“منع” هو مصطلح مجردة يستخدم لوصف وحدات العلامات التي تتكون من محتوى أو تخطيط صفحة ويب. تجمع هذه الفكرة بين مفاهيم ما نجده في WordPress اليوم الرموز المختصرة ، HTML المخصص ، واكتشاف التضمين في واجهة برمجة تطبيقات واحدة متسقة وتجربة المستخدم.
إعداد المشروع
معرفة حقيقة أن غوتنبرغ مبنية على قمة React ، يشعر بعض المطورين بالقلق من أن حاجز مرتفع للغاية بالنسبة للمطورين المبتدئين لتطوير غوتنبرغ.
قد يكون إعداد React.js مضيعة للوقت ومربكًا تمامًا إذا كنت قد بدأت به للتو. ستحتاج على الأقل ، محول JSX ، Babel ، اعتمادًا على الكود الخاص بك ، قد تحتاج إلى بعض إضافات Babel ، و Bundler مثل Webpack أو Rollup أو Parcel.
لحسن الحظ, تصاعد بعض الأشخاص داخل مجتمع WordPress ويحاولون جعل تطوير Gutenberg سهلاً قدر الإمكان ليتبعه الجميع. اليوم ، لدينا أداة من شأنها أن تولد الغليان غوتنبرغ بذلك يمكننا أن نبدأ كتابة التعليمات البرمجية على الفور بدلا من العبث بالأدوات والتكوينات.
إنشاء كتلة غوتن
ال إنشاء guten كتلة هو مشروع المبادرة التي كتبها أحمد عويس. انه مجموعة أدوات التكوين صفر (# 0CJS) سوف يسمح لك بتطوير كتلة Gutenberg مع بعض الكدسات المعينة مسبقًا بما في ذلك React و Webpack و ESNext و Babel و ESLint و Sass. اتبع التعليمات للبدء في إنشاء كتلة Guten.
باستخدام ES5 (ECMAScript 5)
استخدام كل هذه الأدوات لإنشاء بسيط “مرحبا بالعالم” كتلة قد يبدو مجرد الكثير. إذا كنت ترغب في الحفاظ على تكدس مداخنك ، فيمكنك بالفعل تطوير كتلة Gutenberg باستخدام أداة ECMAScript 5 جيدة النوعية التي قد تكون لديك معرفة بها بالفعل. اذا كنت تمتلك WP-CLI 1.5.0 مثبت على الكمبيوتر الخاص بك, يمكنك ببساطة تشغيل ...
كتلة سقالة wp[= --title ] [--dashicon =<dashicon>] [- الفئة =<category>] [- الموضوع] [- بلوجن =<plugin>] [--فرض]</pre> <p>… إلى <strong>توليد كتلة كتلة غوتنبرغ إلى البرنامج المساعد الخاص بك أو موضوع</strong>. هذا النهج أكثر عقلانية ، خاصة بالنسبة للإضافات والموضوعات الموجودة التي طورتها قبل عصر غوتنبرغ.</p> <p>بدلاً من إنشاء مكون إضافي جديد لاستيعاب كتل Gutenberg ، قد ترغب في دمج الكتل في الإضافات أو السمات. ولجعل هذا البرنامج التعليمي سهل المتابعة للجميع, <strong>سنستخدم ECMAScript 5 مع WP-CLI</strong>.</p> <h4>تسجيل كتلة جديدة</h4> <p>تم تطوير Gutenberg حاليًا كمكون إضافي وسيتم دمجه في WordPress 5.0 كلما شعر الفريق أنه جاهز. لذلك ، في الوقت الحالي ، سوف تحتاج إلى تثبيته من <strong>الإضافات الصفحة في <code>الفسفور الابيض بين المشرف</code></strong>. بمجرد تثبيته وتنشيطه ، قم بتشغيل الأمر التالي في الجهاز الطرفي أو موجه الأوامر إذا كنت تستخدم جهازًا يعمل بنظام Windows.</p> <pre name="code"> سلسلة كتلة سقالة wp - العنوان = "سلسلة HTML5" - الموضوع</pre> <p>سيقوم هذا الأمر بإنشاء كتلة للموضوع النشط حاليًا. سوف كتلة لدينا تتكون من الملفات التالية:</p> <pre name="code"> . ا¢Â  ؟؟ ؟؟ â  ؟؟ ؟؟ â  ؟؟ ؟؟ سلسلة أ¢Â ؟؟ Â'Ã' Ã' â  ؟؟ ؟؟ â  ؟؟ ؟؟ â  ؟؟ ؟؟ block.js â ؟؟ Â'Ã' Ã' â  ؟؟ ؟؟ â  ؟؟ ؟؟ â  ؟؟ ؟؟ editor.css أ¢Â ؟؟ Â'Ã' Ã' â  ؟؟ ؟؟ â  ؟؟ ؟؟ â  ؟؟ ؟؟ style.css أ¢Â  ؟؟ ؟؟ â  ؟؟ ؟؟ â  ؟؟ ؟؟ series.php </pre> <p>دعونا تحميل الملف الرئيسي للكتل لدينا في <code>functions.php</code> من موضوعنا:</p> <pre name="code"> if (function_exists ('register_block_type')) يتطلب get_template_directory (). "/blocks/series.php '؛ </pre> <p>لاحظ أننا نرفق تحميل الملف بشروط. وهذا يضمن <strong>التوافق مع إصدار WordPress السابق الذي يتم تحميل كتلته فقط عند وجود Gutenberg</strong>. يجب أن يكون برنامج Block الخاص بنا متاحًا في واجهة Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>هذا كيف يبدو عندما ندرج الكتلة.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>واجهات برمجة التطبيقات غوتنبرغ</h3> <p>يقدم غوتنبرغ مجموعتين من واجهات برمجة التطبيقات لتسجيل كتلة جديدة. إذا نظرنا إلى <code>series.php</code>, سوف نجد الكود التالي الذي يسجل كتلة جديدة لدينا. هذا ايضا <strong>يقوم بتحميل ورقة الأنماط و JavaScripts على الواجهة الأمامية والمحرر</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series'، array ('editor_script' => 'series-block-editor'، 'editor_style' => 'series-block-editor'، 'style' => 'series-block'،))؛</pre> <p>كما نرى أعلاه ، لدينا كتلة اسمه <code>twentyseventeen / سلسلة</code>, يجب أن يكون اسم Block فريدًا ومزودًا بأسماء لتفادي التصادم مع الكتل الأخرى التي تأتي بها الإضافات الأخرى.</p> <p>علاوة على ذلك, <strong>يوفر Gutenberg مجموعة من واجهات برمجة التطبيقات JavaScript الجديدة للتفاعل مع “منع” جهة تعامل</strong> في المحرر. نظرًا لأن واجهة برمجة التطبيقات (API) وفيرة تمامًا ، سنركز على بعض التفاصيل التي أعتقد أنك يجب أن تعرفها للحصول على كتلة Gutenberg بسيطة ولكنها فعالة.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>أولا ، سوف ننظر إلى <code>wp.blocks.registerBlockType</code>. هذه الوظيفة تستخدم ل <strong>تسجيل جديد “منع” إلى محرر غوتنبرغ</strong>. يتطلب حجتين. الوسيطة الأولى هي اسم الكتلة الذي يجب أن يتبع الاسم المسجل في <code>register_block_type</code> وظيفة في الجانب PHP. الحجة الثانية هي <strong>كائن تعريف خصائص الكتلة</strong> مثل العنوان والفئة واثنين من الوظائف لتقديم واجهة بلوك.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType؛ registerBlockType ('twentyseventeen / series' ، title: __ ('HTML5 Series') ، الفئة: 'widgets' ، الكلمات الرئيسية: ['html'] ، edit: function (props) ، حفظ: function (props) ) ؛ </pre> <h4><code>wp.element.createElement</code></h4> <p>هذه الوظيفة تسمح لك بإنشاء العنصر داخل “منع” في محرر النشر. ال <code>wp.element.createElement</code> وظيفة هي في الأساس مجردة من رد الفعل <code>createElement ()</code> وظيفة وبالتالي فإنه يقبل نفس مجموعة من الحجج. تأخذ الوسيطة الأولى نوع العنصر على سبيل المثال فقرة ، <code>امتداد</code>, أو <code>شعبة</code> كما هو مبين أدناه:</p> <pre name="code">wp.element.createElement ( 'شعبة')؛</pre> <p>في وسعنا <strong>الاسم المستعار الوظيفة إلى متغير</strong> لذلك هو أقصر في الكتابة. فمثلا:</p> <pre name="code"> var el = wp.element.createElement؛ ايل ( 'شعبة')؛</pre> <p>اذا أنت <strong>يفضل استخدام بناء جملة ES6 الجديد</strong>, يمكنك أيضًا القيام بذلك بهذه الطريقة:</p> <pre name="code"> const createElement: el = wp.element؛ ايل ( 'شعبة')؛</pre> <p>يمكننا أيضا <strong>إضافة سمات العنصر</strong> مثل ال <code>صف دراسي</code> اسم أو <code>هوية شخصية</code> على المعلمة الثانية كما يلي:</p> <pre name="code"> var el = wp.element.createElement؛ el ('div'، 'class': 'series-html5'، 'id': 'series-html-post-id-001')؛</pre> <p>ال <code>شعبة</code> التي أنشأناها لن يكون له معنى دون المحتوى. في وسعنا <strong>إضافة المحتوى على وسيطة المعلمة الثالثة</strong>:</p> <pre name="code"> var el = wp.element.createElement؛ el ('p'، 'class': 'series-html5'، 'id': 'series-html-post-id-001'، 'هذه المقالة جزء من "HTML5 / CSS3 سلسلة دروس" - مخصصة للمساعدة في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة ') ؛</pre> <h4><code>wp.components</code></h4> <p>ال <code>wp.components</code> يحتوي على مجموعة من مكونات غوتنبرغ ، كما يوحي الاسم. هذه المكونات من الناحية الفنية هي مكونات React المخصصة التي تشمل الزر و Popover و Spinner و Tooltip ومجموعة من المكونات الأخرى. في وسعنا <strong>إعادة استخدام هذه المكونات في كتلة الخاصة بنا</strong>. في المثال التالي ، نضيف عنصر زر.</p> <pre name="code"> var Button = wp.components.Button؛ el (Button، 'class': 'download-button'،، 'Download')؛</pre> <h4>سمات</h4> <p>السمات هي الطريقة لتخزين البيانات في الحظر الخاص بنا ، وقد تكون هذه البيانات مثل المحتوى والألوان والمحاذاة وعنوان URL وما إلى ذلك. يمكننا الحصول على السمات من الخصائص التي تم تمريرها على <code>تصحيح()</code> وظيفة ، على النحو التالي:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent؛ return el ('div'، 'class': 'series-html5'، 'id': 'series-html-post-id-001'، content)؛ </pre> <p>لتحديث السمات ، نستخدم <code>setAttributes ()</code> وظيفة. عادةً ما نقوم بتغيير المحتوى في إجراء معين ، مثل عند النقر فوق زر ما ، أو تعبئة أحد المدخلات ، أو تحديد أحد الخيارات ، إلخ. في المثال التالي ، نستخدمه لإضافة <strong>تراجع</strong> محتوى كتلة لدينا في حالة حدث شيء غير متوقع لدينا <code>seriesContent</code> صفة، عزا.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! هنا هو المحتوى الاحتياطي.' ) var content = props.attributes.seriesContent؛ return [el ('div'، 'class': 'series-html5'، 'id': 'series-html-post-id-001'، content)،]؛ </pre> <h4>إنقاذ الكتلة</h4> <p>ال <code>حفظ()</code> تعمل وظيفة مماثلة ل <code>تصحيح()</code>, إلا أنه يحدد محتوى كتلة لدينا لحفظ في قاعدة بيانات النشر. يعد حفظ محتوى الحظر واضحًا تمامًا ، كما نرى أدناه:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return؛ فار المحتوى = props.attributes.seriesContent؛ return [el ('div'، 'class': 'series-html5'، 'id': 'series-html-post-id-001'، content)،]؛ </pre> <h3>ماذا بعد?</h3> <p>سوف غوتنبرغ تغيير النظام البيئي وورد للأفضل (أو ربما الأسوأ). انها تمكن المطورين ل <strong>اعتماد طريقة جديدة لتطوير الإضافات والموضوعات WordPress</strong>. غوتنبرغ هو مجرد بداية. قريبا “منع” سيتم توسيع النموذج إلى مناطق أخرى من WordPress مثل إعدادات APIs والحاجيات.</p> <p>تعلم جافا سكريبت بعمق. إنها الطريقة الوحيدة للوصول إلى غوتنبرغ والبقاء على صلة بالمستقبل في صناعة WordPress. إذا كنت معتادًا بالفعل على أساسيات JavaScript ، والمراوغات ، والوظائف ، والأدوات ، والسلع ، والأخطاء السيئة ، فأنا متأكد من أنك ستستمتع بسرعة مع Gutenberg.</p> <p>كما ذكرنا ، يكشف Gutenberg عن وفرة من واجهات برمجة التطبيقات ، وهو ما يكفي للقيام بأي شيء تقريبًا للكتلة الخاصة بك. يمكنك اختيار ما إذا كان ل <strong>قم بتشفير Block الخاص بك باستخدام JavaScript قديم أو JavaScript مع بناء جملة ES6 أو React أو حتى Vue</strong>.</p> <h4>الأفكار والإلهام</h4> <p>لقد أنشأت كتلة Gutenberg Block (جدًا جدًا) التي يمكنك العثور عليها في مستودع حساب Github الخاص بنا. علاوة على ذلك ، قمت أيضًا بتجميع عدد من المستودعات التي يمكنك من خلالها إلهام بناء كتلة أكثر تعقيدًا.</p> <ul><li>Gutenblocks - مجموعة من القطع من Mathieu Viet مكتوبة بلغة جافا سكريبت مع ES5 Syntax</li> <li>مشروع Jetpack Gutenblocks - مجموعة من القطع المجمعة في Jetpack</li> <li>قائمة أمثلة لتنفيذ غوتنبرغ بما في ذلك مع Vue.js</li> </ul><h3>مرجع آخر</h3> <ul><li>مستودع غوتنبرغ الرسمي</li> <li>دليل غوتنبرغ</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">الإختراق من IKEA Lack Table في حامل مكون</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">هاك بصرف النظر عن لوحة المفاتيح القديمة لإنشاء واجهة التحكم المخصصة</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">توجه إلى إدارة مهام Windows 10 - الجزء الثاني</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">المادة التالية</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">هاك مصباح 10 دولار في واحد قسط مشرق للغاية</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">المقال السابق</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">دليل لإدارة مهام Windows 10 - الجزء الثالث</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> معلومات مفيدة ونصائح تطوير الشبكة. البرمجة ، تصميم المواقع ، CSS ، HTML ، JAVASCRIPT. تكوين وإعادة تثبيت WINDOWS. إنشاء المواقع والتطبيقات من الصفر. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>