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

الأهداف

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

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

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

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

كيفية تجربته

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

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


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

ما الذي تغيّر

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

عام

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

Markdown

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

الجوال

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

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

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

أخرى

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

الملاحظات

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

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

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

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

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

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

التصميم :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 إعجابات

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

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

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

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

3 إعجابات

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

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

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

12 إعجابًا

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

7 إعجابات

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

7 إعجابات

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

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

5 إعجابات

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

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