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

"יש לי תוסף," אומר אתה, "איך אני עושה את זה מוכן ל גוטנברג?"


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

מי מושפע?

כמעט כל התוספים הקשורים לעורך ההודעות יושפעו על ידי גוטנברג. לדוגמה, אם התוסף שלך מוסיף כפתור ב- TinyMCE ואז הציב קודקוד בעורך, חדשות רעות; זה יהיה הסוף לזה.
התאם את התוסף שלך לגוטנברג: חלק 1 (חסום API)

"האם עלי להתאים את התוספים שלי לגוטנברג?"

אז אילו תוספים צריכים לעדכן עבור גוטנברג? כל תוספים שעובדים עם:

  • מטאבוקס מותאמים אישית
  • קודי קיצור
  • כפתורי TinyMCE
  • או כל תכונת עורך בכלל

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

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

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

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

(ב)עדכוני RSS של Feedzy - תוסף מוכן Gutenberg

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

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

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

כיצד להתאים את התוסף שלך לגוטנברג

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

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

כמו כן, אנו משתמשים בערימה מודרנית של כלי פיתוח JavaScript, כגון NodeJS, NPM, webpack ו- ESNext. אנו נספק לך קבצי דוגמה, כך שאתה לא צריך לדאוג להגדרת סביבת הפיתוח שלך.

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

תוכל למצוא את כל הדוגמאות שהוזכרו ב- מאגר GitHub זה.

סביבת פיתוח גוטנברג

פיתוח עבור גוטנברג מחייב התקנת כלים, כגון NPM, webpack, Babel ו- JSX. זה לוקח הרבה זמן ומאמץ, ולכן הכנו עבורכם את הסביבה.

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

Boilerplate של גוטנברג

אתה יכול מזלג או לשבט מאגר לוח הדודים של גוטנברג לשלך / wp-content / plugins / ולהשתמש בו כסביבת הפיתוח שלך.

לאחר מכן, עליך להתקין את NodeJS למחשב שלך כדי להתחיל. נווט אל תיקיית Boilerplate של גוטנברג והפעל את התקנת npm

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

  • npm התקנה – התקן תלות בפרוייקט כשאתה משבט את הפרויקט.
  • npm run dev – ערוך קוד במהלך תהליך הפיתוח. אתה צריך להריץ זאת פעם אחת, וזה ימשיך לשמור על השינויים.
  • npm run build – ערוך קוד לביצוע מיטוב לאחר סיום תהליך הפיתוח.

חסום API

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

התהליך מבוסס על תוסף קיים

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

לחץ לפריסת ציוץ

הקוד הקצר שלנו נראה כך:

ציוץ"טקסט שיוצג" tweetsent ="טקסט לציוץ" כפתור ="ציוץ" נושא ="לחץ לציוץ"]

לקצר הקצר שלנו יש ארבעה פרמטרים:

  • ציוץ: טקסט שמופיע באתר שלך.
  • tweetsent: טקסט שעובר לטוויטר.
  • כפתור: טקסט כפתור ציוץ.
  • ערכת נושא: לחץ או לחץ לציוץ או לחץ לציוץ alt כנושא התיבה.

התאמת תוספים לגוטנברג עם API API לחסימה

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

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

הוספת תסריטים / סגנונות לגוטנברג

ראשית, עלינו לרשום את התסריטים והסגנונות שלנו לעורך גוטנברג באמצעות enqueue_block_assets:

/ **
* המשך חזית ועורך JavaScript ו- CSS
* /
פונקציה hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// ציין את קובץ ה- JS החוסם המצורף
wp_enqueue_script (
“שלום גוטנברג-בלוק-ג’יי”,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-component’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// אנכי סגנונות חסימת חזית ועורך
wp_enqueue_style (
‘שלום-גוטנברג-בלוק-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// סקריפטים של הוק מתפקדים ללוק בעורך הבלוקים
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

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

wp-i18n היא הגרסה של גוטנברג לפונקציות הבינלאומיות, כגון __ (). wp-blocks משמש לפונקציה registerBlockType שרושמת את החסימה שלך. אנו משתמשים בתסריטים של עורך wp ורכיבים עבור רכיבים שונים בבלוק שלנו.

כעת, לאחר שגייסנו את הנכסים שלך, נוכל להתחיל לכתוב את החסימה שלנו /src/block.js קובץ.

ייבוא ​​תלות

אם אתה משתמש ב- Gutenberg Boilerplate אז שלך block.js הקובץ צריך להיות בעל מבנה חסימת בסיסי בו תוכלו להשתמש כדי לבנות תוספים עבור גוטנברג:

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

const {registerBlockType} = wp.blocks;

/ **
* לחסום רישום
* /
ייצוא ברירת המחדל של registerBlockType (‘גוטנברג-הדוד / חסימת’, {
// חסום כותרת
כותרת: __ (‘לוח הדוד של גוטנברג’),
// תיאור חסום
תיאור: __ (‘חסימת דוגמה.’),
// חסום קטגוריה
קטגוריה: ‘נפוץ’,
// אייקון חסום
סמל: ‘מנהל האתר’,
// חסימת מילות מפתח
מילות מפתח: [
__ (‘לוח הדוד’),
__( ‘שלום עולם’ ),
__( ‘דוגמא’ ),
],
תכונות: {
},
// הגדרת ממשק העריכה
עריכה: אבזרים => {
להחזיר (

{__ (‘שלום תומך’)}

);
},
// הגדרת ממשק חזית
שמור: אבזרים => {
להחזיר (

{__ (‘שלום פרונטנד’)}

);
},
});

אתה יכול להריץ npm run dev כדי להתחיל לקמפל את הקוד שלנו בזמן אמת.

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

/ **
* חסום תלות
* /

ייבא שמות כיתות מ’שמות כיתות ‘;

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

const {registerBlockType} = wp.blocks;

const {
טקסט עשיר,
פקחי בקרה,
בלוק-בקרות,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
דשיקון,
סרגל כלים,
כפתור,
הסבר כלים,
} = wp.com רכיבים;

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

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

הגדר תכונות

כעת נגדיר ארבע תכונות עבור בלוק גוטנברג שלנו, זהה לקוד הקיצור שלנו:

תכונות: {
ציוץ: {
סוג: ‘מחרוזת’,
},
tweetsent: {
סוג: ‘מחרוזת’,
},
כפתור: {
סוג: ‘מחרוזת’,
ברירת מחדל: __ (‘ציוץ’),
},
נושא: {
סוג: ‘בוליאני’,
ברירת מחדל: שקרית,
},
},

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

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

עריכת ממשק

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

כדי לקבל רעיון בסיסי, נוכל תחילה לקודד את החסימה שלנו ולבנות עליו על ידי החלפת האזור הבא בקוד שלנו:

// הגדרת ממשק העריכה
עריכה: אבזרים => {
להחזיר (

{__ (‘שלום תומך’)}

);
},

עם הקוד הבא:

// הגדרת ממשק העריכה
עריכה: אבזרים => {
חזור [

דלעות ופינגווינים

ציוץ

];
},

זה אמור לתת לך מושג לגבי התוצאה הסופית שלנו. זה ייראה כך:

תוספים לגוטנברג

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

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

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

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

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

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

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

// הגדרת ממשק העריכה
עריכה: אבזרים => {
const onChangeTweet = value => {
props.setAttribute ({tweet: value});
};
חזור [
…שאר הקוד

אנו מעבירים ערך של שדה RichText לפונקציה onChangeTweet המשתמשת props.setAttribute פונקציה לעדכון הערך של תכונת הציוץ.

אתה תראה את כוחו של גוטנברג עכשיו כשאתה משתמש בבלוק שלך.

ריצ'פילד בגוטנברג

האין זה מדהים?

מפקח הבלוקים

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

בדומה לרכיב RichText, רכיב InspectorControls מוסיף סרגל צד כשבוחרים את החסימה. משהו כזה:

בקרות מפקח גוטנברג

אנו נשתמש גם ב- TextareaControl וב- TextControl כדי להוסיף שדה קלט טקסט וטקסט לאזור המפקח שלנו..

נוסיף את הקוד הבא להצהרת ההחזרה שלך:

!! props.is נבחר && (

),

props.is בחר בבדיקות כדי לוודא שהמפקח מופיע רק כשבוחרים את החסימה.

לרכיבי TextareaControl ו- TextControl, בדומה ל- RichText, יש ערך ושיטת onChange.

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

אתה יכול להחליף את ההיפר-קישור בקוד הראשוני שלנו בזה:


{props.attribute.button}

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

גוטנברג לחץ לציוץ פקדי פיקוח

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

נוסיף לחסימה שלנו אפשרות אחת אחרונה לסיום החלק של JavaScript בחלק הבא.

חסום את סרגל הכלים

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

סרגל הכלים של בלוק גוטנברג

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

אנו נשתמש באזור סרגל הכלים כדי לארח את בקרת הסגנון האלטרנטיבי שלנו.

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

!! props.is נבחר && (

),

אנו משתמשים ב- BlockControls ורכיבי סרגל הכלים כדי להוסיף סרגל כלים לחסימה שלנו. בדומה למפקח הבלוקים, props.isSelected מוודא שסרגל הכלים שלנו מופיע רק כאשר אנו שמים דגש על הבלוק שלנו.

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

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

הפונקציה onChange שלה מחליפה את תכונת הנושא נכון / שקר. בסופו של דבר, רכיבי Dashicon משמשים להצגת אייקון לשליטתנו.

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

עם:

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

עכשיו החסימה שלך צריכה להיראות כך:

לחץ לציוץ סרגל הכלים

סיימנו את החלק בצד JavaScript של חסימת גוטנברג שלנו. אתה יכול למצוא את כל קוד המקור של הקובץ כאן.

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

עיבוד בצד השרת

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

ראשית, אנו נעשה את שיטת השמירה שלנו להחזרת בטל על ידי החלפתה בקוד הבא:

// הגדרת ממשק חזית
לשמור() {
// טיוח ב- PHP
להחזיר null;
},

אנו נשתמש בפונקציית PHP של register_block_type כדי לרשום את סוג החסימה שלנו ב- PHP:

אם (function_exists (‘register_block_type’)) {
// הענקת צד השרת להצגה של התקשרות חוזרת
register_block_type (
‘שלום גוטנברג / לחץ לציוץ’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘תכונות’ => מערך (
‘ציוץ’ => מערך (
‘type’ => ‘מחרוזת’,
),
‘tweetsent’ => מערך (
‘type’ => ‘מחרוזת’,
),
‘כפתור’ => מערך (
‘type’ => ‘מחרוזת’,
‘ברירת מחדל’ => ‘ציוץ’,
),
‘נושא’ => מערך (
‘type’ => ‘בוליאני’,
‘ברירת מחדל’ => שקר,
),
),
]
);
}

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

הטענה הראשונה היא פונקציית render_callback, הקוראת לפונקצית hello_gutenberg_block_callback שלנו לביצוע עיבוד בצד השרת..

לאחר התקשרות חוזרת של render, אנו מעבירים תכונות כמערך, בדומה לקובץ block.js, בו אנו משתמשים בפונקציית ה- callback שניתנו..

פונקציית ה- callback שניתנה שלנו נראית כך:

פונקציה hello_gutenberg_block_callback ($ attr) {
תמצית ($ attr);
אם (isset (ציוץ של $)) {
$ נושא = ($ נושא === נכון? ‘click-to-tweet-alt’: ‘לחץ-ל-ציוץ’);
$ shortcode_string = ‘[ציוץ ציוץ קליקוטוט ="% s" tweetsent ="% s" כפתור ="% s" נושא ="% s"] ‘;
שפריץ להחזיר ($ shortcode_string, $ tweet, $ tweetsent, $ כפתור, $ נושא);
}
}

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

תוכל למצוא את כל הקוד המשמש במאמר זה במאמר זה שלום גוטנברג מאגר.

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

אם יש לך שאלות כיצד להתאים את התוסף שלך לגוטנברג, אנא שאל אותם בתגובות!

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

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