กูเทนเบิร์กจัดการการแปลใน React อย่างไร

11

ฉันกำลังอ่านซอร์สโค้ดของ Gutenberg เช่นนี้และไม่เข้าใจว่าพวกเขาจัดการการแปล ...

พวกเขาจะนำเข้านี้และจากนั้นในรหัสที่มาที่พวกเขาใช้นี้import { __ } from '@wordpress/i18n'speak( __( 'Block settings closed' ) );

ใครช่วยบอกฉันได้ว่าพวกเขาจัดการการแปลเหล่านี้ภายใน ReactJS เพื่อรวบรวมเป็นไฟล์. po ปกติได้อย่างไร

ฉันคิดว่าพวกเขามีกระบวนการสร้างที่ผ่านไฟล์ทั้งหมดรวมถึง JS และรวบรวมพวกเขา แต่ไม่แน่ใจ

block-editor

— Bologer
แหล่งที่มา

6

ในที่เก็บ GitHub ของ Gutenbergคุณสามารถดูที่มาของแพ็คเกจ i18n ที่ใช้ ในแหล่งนี้คุณจะเห็นการนำเข้าJed (สาย 4 ของกูเทนแบร์ก / แพ็คเกจ / i18n / src / index.js)จากนั้นจะถูกใช้สำหรับงานการแปลส่วนใหญ่ภายใต้ประทุน

Jedแนะนำ "Gettext Style i18n สำหรับแอพ JavaScript สมัยใหม่" (หรืออย่างน้อยก็บอกไว้บนเว็บไซต์)

คำถามของคุณสำหรับไฟล์. po Jed อธิบายบนเว็บไซต์ของพวกเขา:

มีตัวแปลง. po ให้. json ค่อนข้างน้อย ไฟล์ Gettext .po เป็นผลผลิตมาตรฐานจาก บริษัท แปลที่ดีที่สุดเนื่องจากเป็นมาตรฐานเก่า

ฉันใช้อยู่ตอนนี้: po2json

อย่างไรก็ตามฉันต้องการเพิ่มฟังก์ชันการทำงานนี้ลงในโมดูล Jed ที่แยกต่างหากในรุ่นอนาคต

อย่างไรก็ตามสิ่งนี้ดูเหมือนจะไม่ใช้ที่นี่

การขุดออกไปอีกsetLocaleData( data: Object, domain: string )จะใช้ในการผ่านการแปลในลักษณะเช่นนี้ :

$locale_data = gutenberg_get_jed_locale_data( 'gutenberg' );
wp_add_inline_script(
    'wp-i18n',
    'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ' );'
);

( gutenberg_get_jed_locale_data( $domain )เป็นเสื้อคลุมมากกว่าหรือน้อยกว่าget_translations_for_domain( $domain ))

ดังนั้นดูเหมือนว่า WordPress จะดึงข้อมูลการแปลผ่าน PHP แล้วส่งต่อไปยัง Jed ดูเหมือนว่า Jed จะไม่โหลดไฟล์แปลใด ๆ

แพคเกจreadmeของแพคเกจยังอธิบายถึงวิธีการสร้างไฟล์. potที่มีสตริงที่แปลเป็นภาษาท้องถิ่นอย่างเหมาะสม

แพคเกจนี้ยังรวมถึงpot-to-phpสคริปต์ที่ใช้ในการสร้างไฟล์ php ที่มีข้อความอยู่ในไฟล์. pot สิ่งนี้มีประโยชน์ในการหลอกลวงการค้นพบสตริงการแปลของ WordPress.org ตั้งแต่ตอนนี้ WordPress.org ไม่สามารถแยกวิเคราะห์สตริงได้โดยตรงจากไฟล์ JavaScript
npx pot-to-php languages/myplugin.pot languages/myplugin-translations.php text-domain

— เคโระ
แหล่งที่มา

หมายความว่า Gutenberg เก็บการแปลในwindowคุณสมบัติบางอย่างเมื่อ JSON โหลดwp_add_inline_scriptโดย PHP แล้วดึงข้อมูลนั้นทาง React และส่งต่อไปยัง Jed? ... และเจดทำเวทย์มนตร์เพิ่มเติมหรือไม่

— Bologer

@Bologer ไม่จำเป็นต้องเป็นwindowทรัพย์สิน แต่ใช่ PHP ดึงค่าและส่งไปยัง JS ผ่านทางwp_add_inline_script

— kero

2

คุณควรขยายคำตอบของคุณด้วยข้อมูลที่คุณเพิ่มเข้าไปในความคิดเห็นของฉัน ความคิดเห็นนั้นจริง ๆ แล้วสอดคล้องกับสิ่งที่ OP มองหา

— Mark Kaplun

2

อย่างน้อยในตอนนี้ตราบใดที่ไม่มีกระบวนการอัตโนมัติที่ดีกว่านี้ฉันขอแนะนำไม่ให้สร้างไฟล์. pot จาก JS เลย

ในขณะที่ @kero อธิบายในคำตอบของเขาในขณะนี้การแปล GB จะถูกส่งผ่านเป็นอาร์เรย์ของ blob จากไฟล์. mo เป็น JS เวิร์กโฟลว์นี้จะทำลายปลั๊กอินการแก้ไขการแปลที่ต้องใช้การกรองผลลัพธ์__และการเชื่อมโยงทั้งหมด เวิร์กโฟลว์ที่ดีกว่าคือการสร้างอาร์เรย์ Blob ที่ชัดเจนจากสตริงที่แปลด้วยการ__โทรคล้ายกับวิธีที่คุณจะทำการแปล JS ในบริบทที่ไม่ใช่ GB วิธีนี้จะช่วยแก้ปัญหาการสร้างไฟล์. pot

สิ่งที่ขาดหายไปที่นี่คือกระบวนการอัตโนมัติที่จะเรียกใช้ไฟล์ JS และสร้างโค้ด PHP ที่เกี่ยวข้องซึ่งสามารถวิเคราะห์ได้โดยเครื่องมือเช่น poedit

— มาร์ค Kaplun
แหล่งที่มา

เกี่ยวกับย่อหน้าสุดท้ายของคุณ: " รวมถึงpot-to-phpสคริปต์ที่ใช้ในการสร้างไฟล์ php ที่มีข้อความที่แสดงอยู่ในไฟล์.

— pot

1

จุดเริ่มต้นที่ดีส่วนที่เหลือเพียงอย่างเดียวคือการสร้างการเรียกไปยัง wp_add_inline_script โดยอัตโนมัติในขณะนี้มันอาจสร้าง php เพียงเพื่อประโยชน์ของการสร้างหม้อ แต่ไม่ได้ใช้จริง (เดาฉัน)

— Mark Kaplun