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

الأهداف

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

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

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

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

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

كيفية تجربته

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

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


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

ما الذي تغير

التخطيط والهيكلية

عام

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

Markdown

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

الجوال

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

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

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

أخرى

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

الملاحظات

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

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

إذا كنت تتصل بفتحات إضافات المحرر أو تنسق المحرر، يرجى الاختبار مع تمكين إعادة التصميم. تم نقل 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 ↩︎

5 إعجابات

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

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

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

إعجابَين (2)

مرحباً :waving_hand:

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

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

إعجابَين (2)

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

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

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

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

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

ليس حقاً :slight_smile:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كانت لدي بعض المعلومات الخاطئة. في الواقع، المُكوِّن الحالي مفتوح، لكنه يبقى في الخلفية إلى حد ما، بينما المُكوِّن الجديد “يحجب الرؤية”.

لكنني اكتشفت الآن أنه يمكن نقل هذا المُكوِّن :slight_smile:

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