إتقان محرر غوتنبرغ في ووردبريس: دليل متكامل لإنشاء محتوى بصري مذهل

محرر Gutenberg في ووردبريس قطع شوطاً طويلاً منذ ظهوره في 2018. في إصدار 6.9 (ديسمبر 2025)، أصبح محرّر موقع كامل (Site Editor) قادراً على تنافس Webflow و Framer لمعظم المواقع. هذا الدرس يقدم 8 خطوات لإتقان Gutenberg: من الكتل الأساسية إلى Patterns، Block Variations، التحرير على مستوى الموقع، وSynced Patterns.

المتطلبات

• ووردبريس 6.7+ (6.9 موصى)
• قالب block (Block Theme) مثل Twenty Twenty-Five
• صلاحية تحرير المنشورات والصفحات
• الوقت المقدر: ساعتان

الخطوة 1 — فهم الكتل الأساسية

Gutenberg مبنّ على فكرة « الكتل » (blocks). كل عنصر في صفحتك = كتلة قابلة لإعادة الترتيب والتعديل المستقل. 90% من المحتوى يستخدم 10 كتل فقط.

للوصول السريع: اكتب « / » في المحرّر، تظهر قائمة كل الكتل. الضغط على Enter يدرج الكتلة المختارة. تعلّم هذا الاختصار يضاعف سرعة الكتابة. للنسخ السريع: Ctrl+Shift+D ينسخ الكتلة، Ctrl+Shift+Up/Down يحرّكها.

الخطوة 2 — Block Inspector والتنسيق

كل كتلة لها لوحة جانبية (Block Inspector) تتيح ضبط: الألوان، الخطوط، التباعد، الحدود، الظلال. هذه الإعدادات مرئية في الوقت الفعلي.

# خصائص الكتلة الأساسية:
- Color: Text, Background, Link
- Typography: Family, Size, Line height, Letter spacing
- Dimensions: Padding, Margin, Min height
- Border: Width, Color, Radius
- Shadow: 5 presets جاهزة

# في 6.9: Animation (للظهور عند التمرير)
- Fade-in, Slide-up, Scale-up

قاعدة ذهبية: التزم بإعدادات theme.json لقالبك بدلاً من تخصيص كل كتلة. theme.json يحدد لوحة الألوان، الخطوط، الفراغات الموحّدة. تخصيص كل كتلة على حدة يكسر الاتساق ويربك المحررين الجدد. فقط حالات استثنائية تستحق التخصيص اليدوي.

الخطوة 3 — Patterns الجاهزة

Patterns هي مجموعات كتل مُصمَّمة جاهزة للإدراج. مثل « بطل الصفحة » (hero)، « مزايا ثلاثية »، « FAQ ». WordPress يأتي بـ 50+ pattern مجاني، وتستطيع تنزيل المزيد.

# الوصول:
1. اضغط "+" في أعلى المحرر
2. تبويب Patterns
3. تصفّح حسب التصنيف (Hero, Features, Pricing...)
4. انقر للإدراج → خصص النص والصور

# مكتبة Patterns الرسمية:
https://wordpress.org/patterns/
# 5000+ pattern مجاني للاستخدام

Patterns توفر ساعات تصميم. مصمم محترف صنع الـ pattern، أنت تعدّل النص فقط. 80% من صفحاتك يمكن بناؤها بـ 10 patterns جاهزة + تخصيص بسيط. حتى الموقع الكامل يمكن بناؤه بدمج 20-30 pattern في 30 دقيقة.

الخطوة 4 — Synced Patterns (Reusable)

Synced Pattern (سابقاً Reusable Block) يربط نسخاً متعددة من نفس الكتلة. تعدّل النسخة الرئيسية، كل النسخ تتحدّث تلقائياً. مفيد جداً لـ CTA بانر، تذييل مخصص، شريط إعلان.

# إنشاء Synced Pattern:
1. اختر كتلة أو مجموعة كتل
2. ⋮ (ثلاث نقاط) → Create pattern
3. Name: "CTA-Newsletter"
4. ✓ Synced (لكي يكون مرتبطاً)
5. Save

# الاستخدام:
6. في صفحات أخرى: + Patterns → My Patterns → CTA-Newsletter
7. تعديل الـ Pattern الأصلي → كل النسخ تتحدّث

سيناريو نموذجي: شريط إعلان « خصم 20% على كل المنتجات » في 30 صفحة. بدون Synced، تحديثه يستغرق ساعة. مع Synced، 30 ثانية. للأمور التي تتغير دورياً، Synced Pattern إلزامي. للمحتوى الذي لا يتغير، استخدم Pattern عادي (unsynced).

الخطوة 5 — Site Editor للتحرير الكامل

منذ 6.6، Site Editor يتيح تحرير كامل القالب: Header، Footer، صفحة الأرشيف، 404، إلخ. لا حاجة لـ PHP أو CSS مخصص.

# Appearance → Editor (لقالب block):
├── Templates: index, single, archive, 404...
├── Patterns: مكتبة الأنماط الخاصة بك
├── Styles: ألوان، خطوط، إعدادات عامة
└── Navigation: قوائم الموقع

تغيير ترويسة الموقع كلياً يستغرق دقائق: Edit Site → Header template → استبدل بـ pattern آخر → Save. في WordPress 6.5، التغييرات تطبّق فوراً على الموقع. للسلامة، اعمل على Staging أولاً، خاصة للمواقع المنشورة بآلاف الزيارات اليومية.

الخطوة 6 — Block Variations والكتل المخصصة

إذا احتجت كتلة لا تأتي مع WordPress (مثلاً: كتلة « اقتباس عميل » بتنسيق محدد)، خياران: Block Variation (سهل، JS بسيط)، أو Custom Block (متقدم، React).

// Block Variation بسيط — في functions.php للقالب
function my_block_variations() {
  wp_enqueue_script("variations", get_template_directory_uri() . "/variations.js");
}
add_action("enqueue_block_editor_assets", "my_block_variations");

// variations.js
wp.blocks.registerBlockVariation("core/quote", {
  name: "testimonial",
  title: "Testimonial Quote",
  attributes: {
    citation: "اسم العميل",
    align: "center",
    style: { color: { background: "#f0f9ff" } }
  },
  scope: ["inserter"],
});

Block Variations تكفي لـ 80% من الاحتياجات المخصصة. للحالات المتقدمة (كتلة تجلب بيانات من API خارجي)، Custom Block بـ React مع الإضافة @wordpress/scripts. لمعظم المواقع، Block Variation + Patterns + theme.json يحلّ كل شيء بدون كتابة كتل مخصصة.

الخطوة 7 — اختصارات لزيادة الإنتاجية

إتقان الاختصارات يضاعف سرعتك في Gutenberg. هذه الـ 10 الأهم:

للوصول لقائمة الاختصارات الكاملة: ⋮ → Keyboard shortcuts (أو Shift+Alt+H). ضع نسخة مطبوعة بجانب شاشتك لأسبوع — حفظ 5-10 اختصارات يحوّل العمل من 30 دقيقة إلى 10 دقائق على نفس المهمة.

الخطوة 8 — أداء وتحسين

صفحة Gutenberg ثقيلة قد تكون بطيئة. أدوات وممارسات لإبقاء الأداء عالياً.

# قواعد أداء Gutenberg:
1. لا تتجاوز 100 كتلة في صفحة واحدة
   - الصفحة الطويلة → قسّمها
2. الصور: استخدم WebP/AVIF + lazy loading
3. Cover blocks: استبدل بـ Group + Image للأداء الأفضل
4. تجنب Embed مفرط (5+ YouTube embeds = صفحة بطيئة)
5. Render via SSG/SSR للمواقع الكبيرة (WP Engine، Strattic)

الإضافات الموصى للأداء: WP Rocket (caching)، Imagify (تحسين الصور)، Asset CleanUp (حذف JS/CSS غير المستخدم). صفحة Gutenberg بدون تحسين قد تزن 3 MB وتستغرق 5 ثوانٍ. مع التحسين: 800 KB في 1.5 ثانية. الفرق يصنع الـ SEO.

أخطاء شائعة

للمزيد

• Block Editor Handbook developer.wordpress.org
• Patterns Library wordpress.org/patterns
• Twenty Twenty-Five (قالب block افتراضي) wordpress.org
• Full Site Editing Course learn.wordpress.org

مقالات ذات صلة

• دليل شامل لإنشاء قوالب ووردبريس مخصصة من الصفر للمبتدئين والمحترفين
• الدليل النهائي لتحسين أداء مواقع ووردبريس: تقنيات متقدمة لتسريع موقعك بشكل مذهل