כיצד להפוך את התוסף שלך לתואם עם גוטנברג: חלק 2 (API של סרגל הצד)

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


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

רק כדי לוודא שאנחנו באותו דף, הסבר מהיר:

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

הפוך את התוסף שלך לתואם עם גוטנברג - ממשק API של סרגל הצד

לדוגמה, ממשק API של Gutenberg Sidebar בשימוש כפי שהודגם על ידי יוסט SEO

ממשק API של גוטנברג

היכן תוכלו להשתמש בממשק API של סרגל הצד?

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

כך שילבנו סקירת מוצר WP בעורך גוטנברג:סקירת מוצר WP גוטנברג

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

סקירת מוצר WP היא אחת הדוגמאות בהן ממשק API של סרגל הצד יכול להיות שימושי. דוגמא נהדרת נוספת היא זרוק את זה plugin, המאפשר למשתמשים להוסיף תמונות מלאי מ- Unsplash ו- Giphy באמצעות סרגל הצד.

בפוסט זה אני אדריך אותך בתהליך של יישום של משהו דומה והפיכת התוסף שלך ל Gutenberg באמצעות API של סרגל הצד..

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

נתחיל בתיבות מטא. ניקח תוסף שמשתמש בתיבת מטא פשוטה בכדי לספק פונקציונליות מסוימת למשתמש במסך העורך.

זה יכול להיראות כמו הבא בעורך הקלאסי:

מטא קופסא בעורך קלאסי

אתה יכול להשתמש בקוד הבא כדי ליצור מטה תיבה כזו – היא זמינה גם ב- שלום גוטנברג מאגר:

/ **
* הרשמו שלום גוטנברט מטה קופסא
* /
פונקציה hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘פוסט’);
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
שלום הלוטנברג
* /
פונקציה hello_gutenberg_metabox_callback ($ פוסט) {
$ value = get_post_meta ($ הודעה->תעודת זהות, ‘_hello_gutenberg_field’, נכון);
?>
<?php _e (‘מה שמך?’, ‘שלום גוטנברג’) ?>

<?php
}

/ **
שמור הלו גוטנברג מטאבוקס
* /
פונקציה hello_gutenberg_save_postdata ($ post_id) {
אם (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}
}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

אז השאלה שצריך לשאול כאן היא:

האם עלינו להפוך את התואם של גוטנברג מלכתחילה?

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

עם זאת, כאשר אנו מדברים על תאימות של גוטנברג, איננו מדברים רק על התוסף העובד בסביבת גוטנברג, אלא התוסף עובד * כמו גוטנברג *.

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

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

לבסוף, נלכלך את ידינו עם קוד כלשהו!

תחילת העבודה עם ממשק API של סרגל הצד

נתחיל לקודד את סרגל הצד שלנו בגוטנברג כך שיכלול את שדה המטה שלנו. אתה יכול להמשיך להשתמש ב- Boilerplate של גוטנברג מאגר כנקודת מוצא.

הכנת המטא-תיבה שלך לגוטנברג

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

/ **
* הרשמו שלום גוטנברג מטאבוקס
* /
פונקציה hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hello Gutenberg Meta Box’, ‘hello-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘פוסט’, מערך (
‘__back_compat_meta_box’ => שקר,
));
}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

בספר ידני של גוטנברג פרטים נוספים על האופן בו תוכלו להתמודד עם העברת תיבות מטא PHP לגוטנברג (כאן).

זה יוודא שתיבות המטא הישנות של PHP שלנו כבר לא מופיעות בגוטנברג. כעת עלינו גם להפוך את שדה המטא שלנו למוכן לגוטנברג על ידי הוספתו ל- API של REST של WordPress. אתה יכול להוסיף את הקוד הבא כדי לרשום את שדה המטה באמצעות REST API:

/ **
* הרשם שדה Meta שלום גוטנברג למנוחת API
* /
פונקציה hello_gutenberg_register_meta () {
register_meta (
‘פוסט’, ‘_hello_gutenberg_field’, מערך (
‘type’ => ‘מחרוזת’,
‘רווק’ => נכון,
‘show_in_rest’ => נכון,
)
);
}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

זה יוסיף את _hello_gutenberg_field לשדה מטא אובייקט ב- REST API.

פונקציה זו תעשה רק את המשימה של הצגת הערך שלנו בממשק ה- API של REST. כעת עלינו להוסיף שיטה לעדכון שדה המטה שלנו באמצעות REST API.

הקוד הבא יוסיף את המסלול המותאם אישית שלנו לממשק API של WordPress REST, שיהיה / שלום גוטנברג / v1 / update-meta /:

/ **
* הירשם Metabox שלום גוטנברג ל- API API
* /
פונקציה hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘שלום גוטנברג / v1’, ‘/ update-meta’, מערך (
‘שיטות’ => ‘הודעה’,
‘התקשרות’ => ‘hello_gutenberg_update_callback’,
‘args’ => מערך (
‘id’ => מערך (
‘sanitize_callback’ => ‘אבסינת’,
),
),
)
);
}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
שלום שלום גוטנברג REST API התקשרות חוזרת עבור גוטנברג
* /
פונקציה hello_gutenberg_update_callback ($ נתונים) {
להחזיר update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}

נתיב REST API זה ישמש לשינוי שדה המטה שלנו מסרגל הצד גוטנברג. אתה יכול ללמוד עוד על וורדפרס REST API וכיצד רישום מסלולים מותאמים אישית מכאן.

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

הוספת חסימת צד לצד לגוטנברג

נתחיל עם קוד סרגל הצד מ- Boilerplate של גוטנברג:

/ **
* ספריות חסימות פנימיות
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

const {
סרגל התוספים,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const רכיב = ​​() => (

{__ (‘לוח הדוד של גוטנברג’)}

{ __( ‘שלום עולם!’ ) }

);

registerPlugin (‘לוח הדוד גוטנברג’, {
סמל: ‘מנהל האתר’,
render: רכיב,
});

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

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

רכיבים בשימוש

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

/ **
* ספריות חסימות פנימיות
* /

const {__} = wp.i18n;

const {
סרגל התוספים,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.com רכיבים;

const {
רכיב,
רסיס
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

בואו ללמוד במהירות על כל הרכיבים שייבאנו.

  1. כפי שנדון במאמר הקודם, __ רכיב משמש כדי להפוך את הטקסט שלנו לתרגם.
  2. ה סרגל התוספים רכיב משמש להוספת סרגל הצד שלנו לגוטנברג.
  3. PluginSidebarMoreMenuItem משמש להוסיף כפתור לתפריט גוטנברג, שמחלף את הנראות של סרגל הצד.
  4. ה PanelBody רכיב משמש להוספת חלונית לסרגל הצד שלנו.
  5. TextControl משמש לשדה הקלט שלנו.
  6. לאחר מכן ייבאנו את ה- רכיב ו רסיס רכיבים. שניהם הם רכיבי React שאנו משתמשים בסרגל הצד שלנו.
    • רכיב השבר משמש לקבוצת רשימת ילדים מבלי להוסיף צמתים נוספים ל- DOM. עלינו להשתמש ברכיב השבר בקוד שלנו מכיוון ש- JSX אינו מאפשר לנו יותר מצומת אב אחד..
  7. עם בחר הוא רכיב בסדר גודל גבוה יותר. כדי ללמוד מהם רכיבים בסדר גודל גבוה יותר, אני ממליץ לך לקרוא תיעוד זה.
  8. ולבסוף, אנו מייבאים registerPlugin, הדומה ל- registerBlockType בו השתמשנו במאמר הקודם. במקום לרשום חסום, registerPlugin רושם את התוסף שלך.

הוספת בקרות

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

class Hello_Gutenberg מרחיב את הרכיב {
render () {
להחזיר (

{__ (‘שלום גוטנברג’)}

{ __( ‘שלום עולם!’ ) }

)
}
}

registerPlugin (‘שלום גוטנברג’, {
סמל: ‘מנהל האתר’,
render: Hello_Gutenberg,
});

זה אמור לגרום לסרגל הצד שלך לעבוד עם טקסט רגיל.

כעת נוסיף את השדה שלנו לסרגל הצד. זה אמור לגרום לרכיב שלנו להיראות כך:

class Hello_Gutenberg מרחיב את הרכיב {
render () {
להחזיר (

{__ (‘שלום גוטנברג’)}

)
}
}

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

אנו מעבירים את מזהה הפוסט הנוכחי שלנו עם המשתנה $ {this.props.postId}. נחזור לנקודה זו בהמשך.

לאחר איסוף הנתונים, אנו מעדכנים את מצבנו בערך מממשק ה- REST שלנו.

עכשיו, נחזור למשתנה שלאחר ההודעה. נכון לעכשיו אנו לא יודעים את המזהה של הפוסט הנוכחי שלנו, ולכן אנו משתמשים ברכיב withSelect בסדר גבוה יותר, כמו זה:

const HOC = withSelect ((בחר) => {
const {getCurrentPostId} = בחר (‘ליבת / עורך’);
חזור {
הודעה ID: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘שלום גוטנברג’, {
סמל: ‘מנהל האתר’,
render: HOC,
});

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

עדכן את ערך המטה

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

בכל פעם שערך המדינה שלנו ישתנה, אנו נעדכן אותו באמצעות API של REST. לשם כך עלינו להוסיף אירוע onChange ל- TextControl שלנו, כך:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map