محرر Gutenberg في ووردبريس: شرح Block Editor والبلوكات 2026

محرر Gutenberg في ووردبريس هو محرر المكونات أو Block Editor الذي يبني محتوى الصفحة من وحدات مستقلة تسمى Blocks: فقرة، عنوان، صورة، أزرار، أعمدة، جدول، فيديو وغيرها. بدل تحرير المقال كمساحة نصية واحدة، تستطيع تحديد كل مكوّن وتحريكه وتنسيقه وإعادة استخدامه بصورة مستقلة.

إذا كنت جديدًا على Gutenberg: ابدأ بفهم 5 أشياء فقط — Block Inserter، شريط أدوات البلوك، Settings Sidebar، Document Overview، وPatterns. بعد ذلك يصبح التعامل مع بقية المحرر أسهل بكثير.

الخلاصة العملية

ما هو Gutenberg وما الفرق بينه وبين Block Editor؟

اسم Gutenberg ما زال شائعًا بين مستخدمي ووردبريس، بينما التوثيق الرسمي يستخدم غالبًا اسم WordPress Block Editor. فكرة المحرر أن كل عنصر محتوى يمثل Block له إعداداته الخاصة، ويمكن دمج البلوكات داخل Containers مثل Group وColumns وبناء تصميمات كاملة بدون كتابة HTML لكل جزء.

للمرجع الرسمي الحالي يمكنك مراجعة WordPress Block Editor Documentation.

أجزاء واجهة محرر Gutenberg الأساسية

1. Block Inserter

زر + يفتح Block Inserter لإضافة Blocks أو Patterns أو Media. يمكنك البحث باسم البلوك بدل تصفح كل الأقسام، أو كتابة / داخل سطر فارغ للوصول بسرعة إلى البلوك المطلوب.

2. شريط أدوات البلوك

عند تحديد Block يظهر Toolbar خاص به. الخيارات تختلف حسب النوع: محاذاة، رابط، تنسيق النص، تغيير نوع البلوك، التحريك، السحب، المزيد من الخيارات وغيرها.

3. Settings Sidebar

الشريط الجانبي يعرض إعدادات الصفحة/المقال وإعدادات البلوك المحدد. من هنا تضبط خصائص مثل Typography وColors وDimensions وBorder عندما يدعمها القالب والبلوك.

4. Document Overview

Document Overview يجمع أدوات تساعدك على فهم بنية المحتوى بدل البحث بصريًا داخل صفحة طويلة. أهم تبويبين هما List View وOutline.

5. زر الحفظ أو النشر

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

ما هي Blocks في ووردبريس؟

Blocks هي مكونات المحتوى. WordPress يوفر فئات متعددة تشمل Text وMedia وDesign وWidgets وTheme وEmbeds، ويمكن للقوالب والإضافات تسجيل Blocks إضافية. ليس الهدف استخدام أكبر عدد من البلوكات، بل اختيار أبسط بنية تحقق التصميم والمحتوى المطلوب.

• Paragraph لكتابة النصوص.
• Heading لبناء H2 وH3 وبقية هيكل العناوين.
• Image وGallery للوسائط.
• List للقوائم المرتبة وغير المرتبة.
• Quote للاقتباسات.
• Buttons للدعوات إلى الإجراء.
• Group لتجميع عدة Blocks داخل Container واحد.
• Columns لبناء تخطيط متعدد الأعمدة عندما يكون مناسبًا.
• Table لعرض البيانات الجدولية.
• Embed لإدراج محتوى من خدمات مدعومة.

القائمة الرسمية للـCore Blocks تتغير مع تطور ووردبريس، لذلك استخدم Blocks List الرسمية كمرجع عند البحث عن Block محدد.

إضافة Block جديد

• ضع المؤشر في المكان المطلوب.
• اضغط زر + أو اكتب / في سطر فارغ.
• ابحث باسم البلوك مثل Heading أو Image.
• اختر البلوك وأدخل المحتوى.
• راجع إعداداته في الشريط الجانبي عند الحاجة.

استخدام Slash Command أسرع في المقالات الطويلة؛ مثل كتابة /heading أو /image ثم اختيار النتيجة المناسبة.

كيفية تحريك وترتيب البلوكات

يمكنك تحريك Block من شريط الأدوات أو استخدام Drag & Drop. لكن في الصفحات المعقدة يكون List View أكثر دقة، خصوصًا عندما توجد Groups وColumns متداخلة يصعب تحديدها بالماوس.

استخدام List View في الصفحات المعقدة

List View يعرض شجرة البلوكات الموجودة في الصفحة، ويساعدك على تحديد العنصر الصحيح ومعرفة العلاقات بين Parent وChild Blocks. التوثيق الحالي يوضح أن Document Overview يضم List View وOutline، وأن List View يعرض أيضًا حالات خاصة مثل Synced Patterns وTemplate Parts بصورة مميزة.

راجع دليل List View الرسمي إذا كنت تبني صفحات تحتوي Nested Blocks كثيرة.

ما فائدة Outline؟

Outline يعطي نظرة على بنية المستند، بما في ذلك العناوين وترتيبها، إلى جانب معلومات مثل عدد الكلمات ووقت القراءة بحسب الواجهة الحالية. بالنسبة للمحتوى الطويل، استخدمه لاكتشاف قفزات غير منطقية في Heading Structure مثل الانتقال من H2 إلى H4 بدون سبب.

Patterns بدل Reusable Blocks القديمة

منذ WordPress 6.3 تغيرت تسمية Reusable Blocks إلى Patterns. وإذا أردت فهم النقلة التي حولت هذه الفكرة إلى بنية موقع كاملة، راجع Twenty Twenty-Two كأول Default Block Theme ومرجع Site Editor. يوجد فرق مهم بين Pattern عادية وSynced Pattern: الـPattern العادية تمنحك تصميمًا جاهزًا ثم تستطيع تعديل النسخة المدرجة بصورة مستقلة، بينما تعديل Synced Pattern ينعكس على أماكن استخدامها الأخرى ما لم تفصلها Detach.

متى تستخدم Pattern عادية؟

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

متى تستخدم Synced Pattern؟

• رسالة موحدة تريد تحديثها في كل الصفحات من مكان واحد.
• بيانات تواصل متكررة يجب أن تبقى متطابقة.
• CTA ثابت على عدة مقالات تريد تغييره مركزيًا.

راجع Block Patterns وSynced Patterns في التوثيق الرسمي.

الفرق بين Group وColumns وPattern

Group Container يجمع Blocks موجودة في نفس الصفحة. Columns يستخدم لتقسيم جزء من المحتوى إلى أعمدة. أما Pattern فهي بنية جاهزة من Block واحدة أو أكثر يمكن إدراجها وإعادة استخدامها. هذه المفاهيم ليست بدائل لبعضها؛ قد تحتوي Pattern نفسها على Group وColumns وBlocks أخرى.

إضافة الصور والفيديو بدون إبطاء الصفحة

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

لمعالجة الصور تحديدًا راجع تحسين سرعة الموقع بالصور وWebP وLazy Load.

روابط وأزرار Gutenberg: لا تخلط بين الشكل والدلالة

استخدم Link داخل النص عندما يكون الانتقال جزءًا طبيعيًا من السياق، واستخدم Buttons عندما يوجد CTA واضح. لا تجعل كل رابط داخلي زرًا، ولا تجعل زرًا بصريًا بدون نص واضح للمستخدم. Anchor Text الوصفي يساعد القارئ ومحركات البحث على فهم الوجهة.

تحويل المحتوى القديم إلى Blocks

إذا فتحت محتوى قديمًا قادمًا من Classic Editor فقد تظهر بنية مختلفة عن المقالات الجديدة. لا تحول صفحة كبيرة على Production دفعة واحدة إذا كانت تحتوي Shortcodes أو HTML مخصص أو Page Builder قديم. خذ Revision أو Backup واختبر التحويل أولًا، لأن بعض HTML القديم قد يحتاج مراجعة يدوية بعد التحويل.

Gutenberg وSEO: ما الذي يهم فعلًا؟

• استخدم Heading Blocks بهيكل منطقي بدل تكبير Paragraph لتبدو كعنوان.
• لا تضف H1 متكررًا داخل المحتوى إذا كان القالب يعرض عنوان الصفحة كـH1.
• اكتب Alt Text للصور المفيدة ولا تحشو الكلمات المفتاحية.
• استخدم الروابط الداخلية داخل سياق مفيد.
• حافظ على جداول وقوائم قابلة للقراءة على الموبايل.
• قلل Containers المتداخلة غير الضرورية عندما تزيد تعقيد الصفحة بدون فائدة.
• راجع DOM والأداء الفعلي؛ استخدام Block Editor وحده لا يضمن Core Web Vitals ممتازة.

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

Gutenberg وElementor: هل تحتاج الاثنين؟

Gutenberg مناسب جدًا للمقالات والمحتوى ولصفحات تعتمد على Blocks وPatterns. Elementor يقدم Page Builder أكثر تخصصًا لتصميمات تحتاج Widgets وتحكمًا بصريًا مختلفًا. لا يوجد سبب تقني لإعادة بناء كل مقالة في Elementor إذا كان Block Editor يلبي احتياج المحتوى؛ تقليل التعقيد يسهل الصيانة عادة.

لفهم Elementor نفسه راجع ما هو منشئ الصفحات Elementor؟.

أخطاء شائعة عند استخدام Gutenberg

• استخدام Spacer Blocks بكثرة لتعويض مشكلة CSS حقيقية.
• إنشاء عشرات Groups المتداخلة بلا حاجة.
• نسخ تنسيق يدوي لكل صفحة بدل إنشاء Pattern مناسب.
• تعديل Synced Pattern دون إدراك أن التغيير سيظهر في أماكن أخرى.
• استخدام Heading لمجرد تغيير حجم الخط.
• رفع صور كبيرة جدًا ثم تصغيرها بصريًا داخل المحرر.
• لصق HTML غير موثوق أو Shortcodes قديمة بدون اختبار.
• إضافة Block Plugins كثيرة لمجرد الحصول على عنصر واحد.

Checklist قبل نشر المقال من Block Editor

• العنوان وSlug مناسبان.
• H2/H3 مرتبة منطقيًا.
• لا يوجد Block فارغ أو Spacer غير ضروري.
• الصور لها أحجام مناسبة وAlt Text عند الحاجة.
• الروابط الداخلية تذهب مباشرة إلى URLs النهائية.
• الأزرار واضحة وتعمل.
• الجداول والقوائم متجاوبة.
• المحتوى يبدو صحيحًا في Preview على الموبايل.
• لا توجد Patterns متزامنة تم تعديلها بالخطأ.
• تم حفظ المسودة أو إنشاء Revision قبل تغييرات كبيرة.

أسئلة شائعة عن Gutenberg

هل Gutenberg إضافة أم جزء من ووردبريس؟

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

ما هي Reusable Blocks الآن؟

في الواجهة الحديثة أصبحت ضمن Patterns، والنسخة التي تبقى متزامنة في كل أماكن الاستخدام تسمى Synced Pattern.

هل Gutenberg أفضل من Classic Editor؟

يعتمد على Workflow، لكن Block Editor يوفر بنية Components وPatterns وأدوات تصميم وتنظيم لا يقدمها Classic Editor بنفس الصورة. عند إدارة محتوى حديث، تعلم Block Editor يقلل الاعتماد على HTML يدوي وإضافات تنسيق بسيطة.

هل Gutenberg مناسب لـWooCommerce؟

نعم، WooCommerce يستخدم Blocks في أجزاء متعددة من تجربة المتجر، لكن بناء صفحات المتجر لا يعتمد فقط على محرر المقالات. اختبر توافق القالب والإضافات وCheckout/Cart Blocks قبل أي تغيير كبير.

الخلاصة

لفهم محرر Gutenberg بسرعة، تعامل معه كنظام Components: أضف Blocks من Inserter، نظم الصفحة عبر List View، راقب Heading Structure في Outline، واستخدم Patterns لإعادة استخدام التصميم بدل تكرار العمل يدويًا. هذا يجعل المحتوى أسهل في الصيانة والتطوير من الاعتماد على Screenshots أو خطوات مرتبطة بواجهة قديمة.

تحديثات ووردبريس: راجع أيضًا WordPress 6.9 “Gene” والميزات الرسمية للإصدار لفهم تطورات Block Editor وCommand Palette وAbilities API.