ساعدنا في اختبار إعادة تصميم Composer

الأهداف

لقد بدأنا بتطبيق تغييرات تحضيرية صغيرة مثل نقل مفتاح المعاينة، وتكامل اقتراحات الذكاء الاصطناعي، وإضافة صور GIF إلى شريط الأدوات، والآن نحن مستعدون لتجربة التغيير الأكبر الذي يتوفر كمسودة تجريبية قادمة.

أهدافنا الرئيسية هي:

  1. تحديث محرر الكتابة (Composer) بما يتماشى مع تغييراتنا العامة لتحديث مظهرنا وإحساسنا البصري

  2. تحسين تجربة الكتابة على الجوال

نحب مساعدتكم في اختباره قبل أن يتقدم أكثر في مراحل التطوير.

كيفية تجربته

  1. انتقل إلى الإدارةالتغييرات القادمة في /admin/config/upcoming-changes
  2. ابحث عن إعادة تصميم محرر الكتابة وفعّله
  3. افتح محرر الكتابة (رد، موضوع جديد، أو رسالة جديدة) وجربه على كل من سطح المكتب والجوال

يمكنك تعطيله مرة أخرى في أي وقت من نفس المكان. هنا على Meta يمكنك الانضمام إلى مجموعة الاختبار الجديدة composer-testers. على Meta، تم تفعيله الآن للجميع.


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

ما الذي تغيّر

التخطيط والبنية

عام

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

Markdown

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

الجوال

عامل دافع كبير جدًا في هذا المشروع هو محاولة تحسين تجربة الجوال. كانت هناك شكاوى مبررة كثيرة حول هذا الموضوع على Meta على مر السنين [1] [2] [3].

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

يزيد هذا من مساحة الكتابة المتاحة بأكثر من الضعف، من 103 بكسل إلى 212 بكسل (عند الاختبار على جهزي – قد تختلف النتائج الفعلية).

أخرى

  • تم إزالة مفتاح تبديل شريط الأدوات في التخطيط الجديد
  • اسحب للأسفل لإغلاق لوحة المفاتيح وطي المحرر مرة أخرى إلى الوضع العادي
  • الوسوم المختارة مرئية فقط عند فتح القائمة. يتم تلوين الأيقونة للإشارة إلى أنه تم إجراء اختيار.

الملاحظات

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

دعوة مؤلفي السمات والإضافات :wrench:

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

  • كتلة حقول محرر الكتابة الآن تُعرض كعنصر فرعي كامل العرض داخل حاوية المحرر، ولم تعد داخل عمود نص المحرر
  • المحتوى المُحقن في مخرج composer-fields يظهر الآن فوق العنوان (بين مجموعة التصنيف/الوسوم والعنوان)، كامل العرض
  • حقل العنوان يُعرض كصف مستقل، منفصل عن مجموعة التصنيف/الوسوم وتحتهم بدلاً من فوقهم

لم يتم إعادة تسمية أو إزالة أي مخارج (على الرغم من أنه قد يتم ذلك لاحقًا لضبطها دلاليًا بما يتناسب مع التغييرات) — ستظل وصلاتك (connectors) مرفقة. ما تغيّر هو أين وبأي عرض يُعرض محتواك.

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

التصميم :crayon:

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

أ) لماذا حقل العنوان كبير جدًا إلى هذا الحد؟

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

فكرة أخرى هي تصغير العناوين الموجودة قليلاً، لتحقيق نفس التأثير.

تم التراجع عنه في تكرار قادم.

ب) هل الوسوم المخفية مشكلة…

…كبيرة بما يكفي لتجعل المفاضلة على الجوال (مساحة أكبر للتصنيف) غير مستحقة؟

إذا كانت كذلك، لماذا؟

ج) كيف يعمل تحريك المحرر المتمدد على جهازك؟

هل هو متعرج؟ جيد بما فيه الكفاية؟ تحسين؟ أفكار بديلة أو تعديلات لجعله أفضل؟

د) ماذا عن زر اقتراح العنوان بالذكاء الاصطناعي؟

لست معجبًا بشكل خاص بكيفية عوامةه بمفرده هناك. كيف يشعر الآخرون (الذين يستخدمونه)؟ مفتوح جدًا لسماع أفكار التصميم.

تم نقله إلى مكان آخر، راجع انتقال اقتراحات العنوان بالذكاء الاصطناعي إلى مساعد محرر الكتابة


شكرًا لمساعدتنا في الحصول على هذا بشكل صحيح قبل نشره على نطاق أوسع. :folded_hands:


  1. New Topic Editor Too Small iOS 26.5 Safari Web - #4 by fearlessfrog ↩︎

  2. Creating/Editing a post on mobile: let's discuss the 2026 Discourse experience ↩︎

  3. Such a tiny window to edit here on a cell phone ↩︎

18 إعجابًا

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

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

أنا بالتأكيد من المعجبين بهذا. يبدو التصميم رائعًا (حدود أقل!) وأنا متحمس لأن تجربة الهاتف المحمول أصبحت أخيرًا قابلة للاستخدام، حتى لو كنتُ لا أزال أستخدم الكمبيوتر المكتبي بشكل أساسي.

5 إعجابات

مرحباً :waving_hand:

هذا عمل رائع حقاً! أحببته. :heart_eyes: يبدو وكأنه أسلوب أكثر حداثة وأناقة للتأليف. كما حاولتُ في الماضي نقل شريط الأدوات إلى الأسفل، وأعتقد أن هذا الأسلوب أكثر راحة.

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

6 إعجابات

هل كان هذا مستوحى من العمل على مُركب الرسائل الذكي المثبت؟ يذكرني بذلك.

يبدو أن هذا متاح فقط على “Meta Branded”؟

أعجبني أن الأيقونات أصغر (أعتقد؟) وتصميمها أكثر بساطة.

لكن أعتقد أن الأمر هو أنني الآن مضطر للنظر إلى أعلى لرؤية ما أكتبه، لأن الشريط يعترض الطريق. ماذا لو كان شريط الأدوات في الأعلى؟ هل يمكن أن يعمل ذلك؟ (أستخدم هاتفي الآن لذا لا يمكنني تحريكه لأرى النتيجة)

3 إعجابات

ليس حقاً :slight_smile:

لا، يجب أن يكون مستقلاً عن السمة. ألا تراه على السمات الأخرى؟ :eyes:

إعجابَين (2)

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

كما أجد أيقونات الفئات عديمة الألوان غريبة بعض الشيء. هل هذا مقصود؟

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

كان يحدث ذلك لفترة قصيرة في البداية. يبدو أنه يعمل الآن.

بشكل عام، ليس سيئًا للغاية على الهاتف المحمول حتى الآن!

إعجابَين (2)

هل يمكنك توضيح ذلك أكثر؟ كيف تقوم بإغلاق لوحة المفاتيح؟ يجب أن يكون الاتجاه الآخر تلقائيًا: تصغير المحرر → إغلاق لوحة المفاتيح تلقائيًا، لذا يتطلب ذلك إجراءً واحدًا فقط.

إعجابَين (2)

أوه! هل تقصد السحب للأسفل لإغلاق مُكوّن المحتوى و لوحة المفاتيح؟ ههه…

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

إعجابَين (2)

فهمت ذلك، أعتقد أنه سيكون من الآمن توصيل الأسلاك.

خطأ غير مقصود، شكرًا! سيتم إصلاحه قريبًا

4 إعجابات

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

إعجاب واحد (1)

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

أم أنك تقصد شيئًا آخر؟

لقد أخطأت قليلاً. في الواقع، المكوّن الحالي (Composer) مفتوح، لكنه يبقى إلى حد ما في الخلفية، بينما المكوّن الجديد “يحجب الرؤية”.

لكنني اكتشفت الآن أنه يمكن تحريك هذا المكوّن :slight_smile:


إعجابَين (2)

أعجبني، لكنني نشرت من سطح المكتب فقط حتى الآن.

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

يمكن إخفاء العناوين الكبيرة جزئيًا:

chrome_SvkGo3rsgf

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

هذا يميل إلى جعلني أخطئ في زر سحب الشريط الجانبي.

لست متأكدًا من كيفية تحسين ذلك. يبدو أن جعل شريط الأدوات أعلى ليس أفضل حل.

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

5 إعجابات

ما هو سبب نقل الأزرار إلى الأسفل؟

يبدو أن هذا سيُشكّل مشكلة كبيرة للذاكرة العضلية، ولكن لأية غاية؟

إضافةً إلى ذلك، فهي قريبة من زري «تجاهل» و«رد» على الأجهزة المحمولة، مما سيؤدي إلى منشورات غير مقصودة.

ببساطة، لا أرى أي فائدة تُبرّر حجم المشكلات التي سيُسببها هذا التغيير.

4 إعجابات

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

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

كملاحظة جانبية، كنتُ أحد الأشخاص الذين لم يريدوا شاشة لمس في هاتفي الخلوي :joy:

12 إعجابًا

مثير للاهتمام. كنت في الواقع أستخدم TC لوضع القائمة في الأسفل. تغيير رائع.

7 إعجابات

بالنسبة لي، أحد الأسباب الرئيسية لنقل شريط الأدوات إلى الأسفل.

7 إعجابات

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

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

5 إعجابات

المظهر والشعور به ليسا سيئين على الهاتف المحمول. ومع ذلك، يمكن ربما تكبير أيقونة العلامة عند إنشاء موضوع قليلاً، إذ إنها تبدو صغيرة بعض الشيء على الأقل في هاتفي Google Pixel 9 XL.

إعجاب واحد (1)