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

מדריך גוטנברג למתחילים


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

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

גוטנברג משתמש בטכנולוגיות כמו API של WordPress REST, JavaScript ו- React. לפיכך, דרישות חדשות לתוספים ונושאים היו נחוצות כדי לעבוד עם גוטנברג.

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

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

1. הגדר את סביבת הפיתוח של גוטנברג שלך

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

באפשרותך להתקין את הגרסה האחרונה של NodeJS היציבה ב- Windows או MacOS באמצעות מתקינים באתר הרשמי. אם יש לך שרת לינוקס, אתה יכול להרכיב את קוד המקור או להשתמש במנהל החבילות המתאים (כמו apt ו- yum). לדוגמה, אם אתה משתמש באובונטו, הפעל את הפקודות הבאות בטרמינל.

עדכון
sudo apt להתקין nodejs npm

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

nodejs – גרסאות

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

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

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

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

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

2. תצורה ראשונית

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

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

החלקים הבאים מתארים את התהליך מתחילתו ועד סופו.

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

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

  • index.php – קובץ זה מכיל מטא נתונים אודות גוש גוטנברג החדש.
  • block.js – קובץ JavaScript זה רושם את חסימת גוטנברג המותאמת אישית.
  • editor.css – קובץ זה מכיל סגנונות עבור העורך.
  • style.css – קובץ זה מכיל את הסגנונות בקצה החסימה.

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

3. רישום החסימה

בשלב זה של רישום בלוק לגוטנברג, אנו נסקור באופן נרחב שני דברים:

  • רישום מטא נתונים של התוסף באמצעות מנוע ה- PHP של וורדפרס,
  • רישום החסימה במסגרת React שעליו פועל גוטנברג.

קובץ ה- index.php מכיל את נכסי המאמץ של החסימה והעורך.

  • ראשית, רשום את הפונקציות המותאמות אישית באמצעות add_action.
  • לאחר מכן, הגדר את הפונקציות המפורטות במורד הנתיב של קבצי JavaScript ו- CSS עבור החסימה והעורך באמצעות הפונקציות wp_enqueue_style ו- wp_enqueue_script..

נסכם זאת באמצעות קוד PHP להלן:

add_action (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

פונקציה gb_block_01_basic_editor_assets () {
// תסריטים.
wp_enqueue_script (
‘gb-block-01-basic’,
plugins_url (‘block.js’, __FILE__),
מערך (‘wp-blocks’, ‘wp-i18n’, ‘wp-element’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// סגנונות.
wp_enqueue_style (
‘gb-block-01-basic-editor’,
plugins_url (‘עורך.css’, __FILE__),
מערך (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘עורך.css’)
);
}

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

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

  • כותרת – כותרת החסימה
  • icon – סמל להצגה עבור החסימה; אתה יכול לבחור כל סמל מתוך אוסף הדישיקונים הזה
  • קטגוריה – הקבוצה שאליה ישתייך החסימה. דוגמאות לקבוצות של בלוקים הן "נפוץ," "עיצוב," "להטביע."
  • עריכה – פונקציית JavaScript שמחזירה אלמנט DOM. אנו משתמשים בפונקציה wp.element.createElement כדי ליצור אלמנט DOM לפסקאות מותאם אישית, p, עם הטקסט המותאם אישית כתוב בו. גוטנברג קורא לנכס זה כאשר משתמש לוחץ על החסימה מהעורך.

(פונקציה () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
כותרת: __ (‘GB בסיסי’, ‘GB’),
אייקון: ‘shield-alt’,
קטגוריה: ‘נפוץ’,

עריכה: פונקציה (אבזרים) {
להחזיר wp.element.createElement (
‘p’,
{className: props.className},
‘שלום עולם! – מהעורך (בלוק בסיסי 01). ‘
);
},

});
}) ();

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

בקוד לעיל הגדרנו את className של רכיב ה- p באמצעות props.className, אשר תיצור שם מחלקה המתחיל ב- wp-block, ואחריו שם החסימה. בחלק הבא במדריך גוטנברג זה אנו מגדירים את הסגנונות של הכיתה הזו.

4. התאמה אישית של החסימה

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

.wp-block-gb-basic-01 {
צבע: # 000;
רקע: mistyrose;
גבול: 0.2rem אדום מוצק;
}

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

תוצאות ההדרכה הראשונה שלך על גוטנברג

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

בלוק גוטנברג החדש

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

חסום בפעולה

סיכום

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

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

אני מקווה שהמדריך של גוטנברג עזר לך ביצירת התוסף Gutenberg הראשון שלך!

אם יש לך שאלות, הסר את ההערות שלהלן.

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 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