הפיכת בלוקים מותאמים אישית של Gutenberg לניתנים לתרגום

למדו כיצד להגדיר אילו בלוקים מותאמים אישית של Gutenberg שפיתחתם יהיו ניתנים לתרגום. תוכלו לעשות זאת על ידי הגדרת הקובץ wpml-config.xml בעזרת תוסף הבדיקה Multilingual Tools.

מדריך זה מיועד למפתחים שיוצרים בלוקים מותאמים אישית משלהם עבור Gutenberg. אם אינך מפתח תוספים, ראה כיצד לתרגם תוכן שנוצר באמצעות עורך Gutenberg.

תחילת העבודה

כדי להתחיל, התקן והפעל את המרכיבים הבאים:

1. תוסף הליבה של WPML
2. WPML תרגום מחרוזות
3. Multilingual Tools

אין להשתמש בתוסף Multilingual Tools באתרים חיים או באתרים פעילים. השתמש בו רק לצורכי בדיקה.

יצירה ובדיקה של קוד XML לרישום בלוקים של Gutenberg לתרגום

1. צרו פוסט או עמוד חדש והוסיפו את הבלוקים של Gutenberg שברצונכם לרשום. הקפידו להוסיף תוכן בדיקה בכל שדה שברצונכם להפוך לניתן לתרגום, ולאחר מכן פרסמו.

גלול למטה אל האזור WPML: Gutenberg Blocks והעתק את קוד ה־XML שנוצר.

2. עבור אל WPML → הגדרות והדבק את ה־XML שנוצר תחת הכרטיסייה הגדרות XML מותאמות אישית.

הקפד לסקור ביסודיות את הקוד שנוצר אוטומטית. ייתכן שתצטרך להסיר כמה שדות שאינם מיועדים לתרגום, כגון שדות תצורה עם ערכים ספציפיים.

לחץ על שמירה כשתהיה מוכן.

3. חזרו לעמוד שפרסמתם ובצעו עדכונים קטנים, כמו עריכת טקסט של כפתור או כותרת.

לחץ על סמל הפלוס תחת האזור שפה כדי לפתוח את עורך התרגום המתקדם. השדות מהבלוקים של Gutenberg מופיעים בעורך וזמינים לתרגום.

לאחר שרשמת את הבלוקים של Gutenberg שברצונך להפוך לניתנים לתרגום, תוכל ליצור את קובץ תצורת השפה שלך. אם כבר יש לך אחד, פשוט ערוך אותו כדי להוסיף את קוד ה־XML הסופי שלך.

דוגמאות לרישום בלוקים של Gutenberg כניתנים לתרגום

תרגום תמונות

נניח שיש לך תמונה שמוצגת באמצעות הקוד הבא:

<!-- wp:image {"id":3} -->
<figure class="wp-block-image"><img src="http://example.com/wp-content/uploads/2018/07/figure-2.png" alt="Image alt text" class="wp-image-3"/><figcaption>Image Caption</figcaption></figure>
<!-- /wp:image -->

ברצונך לתרגם את ערכי התכונות figcaption ו־alt של תמונה זו.

כדי להשיג זאת, עליך להכניס את הקוד הבא אל wpml-config.xml:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/image" translate="1">
        <xpath>//figure/figcaption</xpath>
        <xpath>//figure/img/@alt</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

שים לב שהסוג (type) הוא core/image ולא wp:image מכיוון שזהו הערך שמוחזר על ידי ה־API של הבלוק.

תרגום קישורים

באפשרותך לציין אילו שדות של בלוק Gutenberg הם קישורים. לאחר מכן, WPML יחליף כל קישור בתרגום שלו אם הוא זמין.

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/some-block" translate="1">
        <xpath type="link">//a/@href</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

תרגום תכונות הבלוק

הנה דוגמה אחת לפורמט עבור הגדרת בלוק עורך:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <xpath label="My Block">//p</xpath>
        <key name="title" />
        <key name="foo">
            <key name="bar1" />
            <key name="bar2" />
        </key>
        <key name="/^[^_]\S+$/" search-method="regex" />
        <key name="something" search-method="wildcards" />
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

באפשרותך להשתמש ברכיב key באותו אופן שבו משתמשים בו בהגדרת טקסטים של ממשק הניהול / wp_options. המשמעות היא שאתה יכול גם לשלב רכיבי key בתוך רכיבי key הוריים.

באפשרותך להשתמש בתכונה label כדי להוסיף תוויות מותאמות אישית אופציונליות שיוצגו בעורך התרגום המתקדם לצד רכיבי הבלוק. כאשר התכונה label היא חלק מהתגית gutenberg-block, היא תשמש כתווית חלופית (fallback) לרכיבים של הבלוק שאין להם תווית ספציפית מוגדרת.

<wpml-config>
    <gutenberg-blocks>
        <gutenberg-block type="my-plugin/mybutton" translate="1" label="My fallback block label">
            <xpath>//span</xpath>
            <xpath>//a@href</xpath>
        </gutenberg-block>
    </gutenberg-blocks>
</wpml-config>

התכונה search-method יכולה להכיל אחד משני ערכים:

• wildcards (ברירת מחדל)
• regex.

באפשרותך להשתמש בתווים כלליים (wildcards) באותו אופן כמו עבור טקסטים של ממשק הניהול. המשמעות היא שניתן להשתמש בכוכבית (*) בתכונה name. הנה דוגמה לבלוק אחד:

<!-- wp:my-plugin/my-block
    {
        "myp": {
            "mypTitle":"The title",
            "mypContent":"The Content",
            "_mypSystem:"Meta attribute to not translate"
        }
    }
/-->

באפשרותך להגדיר את הגדרת הבלוק באמצעות תו כללי (wildcard):

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
      <key name="myp">
          <key name="myp*" />
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

פעולה זו תאפשר לך לתרגם את "The title" ואת "The content" מכיוון שאלו הן התכונות היחידות שמתחילות ב־myp.

אפשרות ה־regex מאפשרת לך להשתמש בביטוי רגולרי בתכונה name. זה יכול להיות שימושי מאוד עבור תצורות מורכבות. הנה דוגמה לבלוק אחד:

<!-- wp:my-plugin/my-block
    {
        "data": {
            "title":"The title",
            "_title":"e980759463943209f6f1ae09a239e353",
            "content":"The Content",
            "_content":"1502a7b825dfe7b789c63830609f1701"
        }
    }
/-->

באפשרותך להגדיר את הגדרת הבלוק עם ביטוי רגולרי:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

פעולה זו תאפשר לך לתרגם את "The title" ואת "The content" מכיוון שאלו הן התכונות היחידות שאינן מתחילות בקו תחתון (_).

כמה תוספי בלוקים שומרים נתונים במחרוזת JSON מקודדת URL בתוך תכונה של בלוק. התכונה encoding מאפשרת לך לפענח את המחרוזת ולרשום את מפתחות המשנה שלה לתרגום.

לדוגמה, התוסף LazyBlocks מאחסן תוכן של שדה חוזר (repeater) במחרוזת JSON מקודדת:

<!-- wp:lazyblock/testwpml {"name":"%5B%7B%22firstname%22:%22Shekhare%22,%22lastname%22:%22Bhandari%22%7D,%7B%22firstname%22:%22Compatibility%22,%22lastname%22:%22Escalation%22%7D%5D","blockId":"Z169b0O","blockUniqueClass":"lazyblock-testwpml-Z169b0O"} /-->

באפשרותך לרשום את מפתחות המשנה firstname ו־lastname באמצעות תצורת ה־XML הבאה:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="lazyblock/team" translate="1">
      <key name="name" encoding="json">
        <key name="*">
          <key name="firstname" />
          <key name="lastname" />
        </key>
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

תרגום קישורים של תכונות בלוק

כדי לאפשר ל־WPML לתרגם אוטומטית כתובות URL, באפשרותך להכריז על תכונות בלוק של Gutenberg כקישורים.

הנה דוגמה לבלוק מותאם אישית של Gutenberg עם קישור לחיץ:

<!-- wp:foo/link {"label":"Click here!","url":"https://example.com/some-page/"} /-->

כדי להפוך את התכונות label ו־url לניתנות לתרגום, הוסף את הקוד הבא לקובץ ה־wpml-config.xml שלך:

<gutenberg-block type="foo/link" translate="1">
	<key name="label" />
	<key name="url" type="link" />
</gutenberg-block>

בתצורה זו, ציון type="link" עבור התכונה url מאפשר ל־WPML לתרגם אוטומטית את כתובת ה־URL.

מרחב שמות (Namespace) של בלוק

באפשרותך להגדיר תצורה גלובלית עבור מרחב השמות של הבלוק.

שם הבלוק אינו עוד חלק חובה מההגדרה.

אם תצורת הבלוק זהה עבור כל הבלוקים במרחב שמות, תוכל לכתוב אותה כך:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

המרה אוטומטית של מזהים (IDs) בבלוקים

המרת המזהים היא רב־תכליתית ומנסה להסתגל לרוב הפורמטים האפשריים של מזהים (מזהה בודד, רשימת מזהים, מערך בסיריאליזציה, מערך מקודד ב־JSON).

קח לדוגמה את הבלוק הבא:

<!-- wp:foo/form {"ids":[27,28]} -->
<div class="wp-block-foo-form-wrap">
  <form class="foo-form" action="" method="post">
    <input type="hidden" name="foo_form_post_ids" value="27,28" />
    <input type="submit" />
  </form>
</div>
<!-- /wp:foo/form -->

באפשרותך להכריז, כמזהי פוסטים, על מזהי תכונות הבלוק ועל ערך תכונת תג ה־HTML foo_form_post_ids כפי שמוצג להלן:

<gutenberg-block type="foo/form" translate="0">
  <key name="ids">
      <key name="*" type="post-ids" sub-type="post" />
  </key>
  <xpath type="post-ids" sub-type="post">//*[@name="foo_form_post_ids"]/@value</xpath>
</gutenberg-block>

הבלוק יומר בעדיפות הגבוהה ביותר בפילטר render_block_data כפי שמוצג להלן:

<!-- wp:foo/form {"ids":[42,43]} -->
<div class="wp-block-foo-form-wrap">
    <form class="foo-form" action="" method="post">
        <input type="hidden" name="foo_form_post_ids" value="42,43" />
        <input type="submit" />
    </form>
</div>
<!-- /wp:foo/form -→

באפשרותך להשתמש בתכונות התצורה הבאות:

• type – יכול להיות post-ids או taxonomy-ids
• sub-type (אופציונלי): יכול להיות הישות הספציפית של ה־type אם היא כבר ידועה. לדוגמה, product עבור סוג התוכן המותאם אישית Product. אם לא הוגדר, הישות הספציפית תנוחש.

משאבים נוספים

כדי ללמוד עוד על הקובץ wpml-config.xml, בקר במדריך קובצי תצורת שפה.

להתאמה אישית של רכיבים אחרים באמצעות הקובץ wpml-config.xml, בקר במדריכים הנוספים שלנו:

• תרגום שורטקודים מותאמים אישית עם WPML
• רישום תוכן של תוסף בניית עמודים לתרגום
• רישום וידג'טים מותאמים אישית של תוסף בניית עמודים לתרגום
• הגדרת אפשרויות תרגום עבור שדות מותאמים אישית באמצעות קובץ התצורה של WPML
• רישום מונחים, סוגים וטקסונומיות מותאמים אישית כניתנים לתרגום
• תרגום טקסטים שערכות עיצוב ותוספים שומרים ב־wp_options
• התאמה אישית של בורר השפות של WPML באמצעות קובץ התצורה של WPML