לפני קורונה בניתי הרצאה על גוטנברג ומעבר חלק לוורדפרס 5. הרצאה לא יצאה לפועל לכן מפרסם כאן את תוכן ההרצאה בצורת סדרת מאמרים על מעבר לגוטנברג.
מבוא
במשך הרבה שנים וורדרפס השתמשו בעורך הויזואלי WYSIWYG בשם TinyMCE. עורך אפשר ליצור תכנים שונים מבוססי HTML ע אפשרות לשלב שורטקודים שונם.
בעשור פלוס שעבדתי עם העורך הוא עבר הרבה שדרוגים ושיפורים. משורה של כמה אייקונים לעורך שרובנו מכירים ועובדים איתו.
כמו רוב המפתחים חיפשתי פתרונות יצירתיים, בסוף הצלחתי להסתדר ובניתי לא מעט תוספות, הרחבות, שורטקודים ופלאגינים שמעשירים את העורך.
הרחבות רבות קיימות בספריית הפלאגינים של וורדרפס וגם תוספות שונות שנכתבו במיוחד לעורך TinyMCE שדי נפוץ במערכות השונות ולא רק בוורדרפס.
אבל העורך מאוד מוגבל ומורכב לעריכה של תכנים עשירים ושילוב של הרבה מרכיבים ביחד. שימוש בעורך הויזואלי לצד עורך טקסט אפשר לשלב HTML נקי בקוד וזה יצר לא מעט בעיות במעבר במיוחד בשפה העברית.
לא מעט פעמים זה שיבש את כל הקוד ואת השורטקודים שלי, לכן לרוב עבדתי בעורך טקסט עם HTML בשילוב שורטקודים.
מה הוא גוטנברג?
ב 2017 מעט (המייסד של וורדרפס) פרסם מאמר על עורך חדש שהולך להפוך את כל הדרך לניהול תכנים בוורדרפס. פלאגין נקרא על יוהאן גוטנברג אביה של מהפכת הדפוס באירופה שהמציא את מכונת דפוס.
בשנת 2018 תוסף נכנס לשלבי פיֿתוח מתקדמים מאוד ובסוף שנה הוא כבר היה חלק בלתי נפרד מתוך ליבת וורדרפס 5.0.
בשונה מעורך הקלאסי, התפיסה שעומדת מאחוריו היא חלוקת תוכן לבלוקים: פסקאות, כותרות, תמונה, ציטוט וכו. בתוך העורך עצמו. אין צורך בידע תכנותי או כל ניסיון אחר בעבודה עם HTML, CSS או דברים נוספים. במוסף, אם משתבש משהו אפשר בקלות למחוק אזור מסוים ולכתוב אותו מחדש.
שיטת הבלוקים הוכיחה את עצמה בוורדרפס ע״י תוספים השונים ביניהם גם Elementor.
גוטנברג כתחליף לבילדר?
גוטנברג הגיע משום מקום כשאר לרוב משתמשי וורדרפס היו פתרונות מגובנים לעריכת תוכן. החלוץ היה Visual Composer שדי כיכב הרבה זמן, יחד איתו צמחו תוספים אחרים, בינהם Elementor שהוא כרגע הנפוץ ביותר.
רוב האנשים ששמעו בפעם הראשונה על גוטנברג שואלים, האם גוטנברג יכול להחליף את Elementor או את Visual Composer או כל בילדר אחר שקיים על וורדרפס?
כרגע התשובה היא חד משמעית ״לא״. גוטנברג משתמש באותה התפיסה של בלוקים כמו כל התוספים, אבל משפר את חווית עריכה של תוכן המרכזי. לעומת זאת בילדרים מאפשרים עריכה ברמת עמודים המלאים. אלמנטור מאפשר שליטה ברמת הטמפלייט ולהפוך כל דף לדף עצמאי.
בלוקים של בילדרים מאפשרים גרירה בכל אזור או חלק של הדף מין מערכת ליצירת דפים או עמודים שלמים ברמת FrontEnd, גוטנברג מאפשר גרירה אך ורק בתוך אזור עריכה בלבד ברמת BackEnd.
אפשר לשלב ביחד, עיצוב של הדף מבוסס תוספים השונים ועיצוב של התוכן המרכזי מבוסס גוטנברג.
תהליך עבודה קודם
רוב האתרים שבניתי היו על בסיס עורך רגיל של וורדרפס עם הרבה שורטקודים ושימוש בשדות מיוחדים.
בשנת 2011 גיליתי תוסף ACF שהיה שיפור משמעותי עבורי. בהמשך קניתי כמה תוספים שונים עד שחרור גרסת PRO.
מאז החיים שלי הם שילוב מנצח בין WordPress ל ACF עם תוספת של ACF Flexible Content.
בניתי לעצמי תהליך פיתוח מאוד מסודר שהתבסס על: תבנית underscores או sage תלוי במורכבות הפרויקט, תוסף ACF ושילוב של מרכיבים מיוחדים מבוססי MetaBox או שורטקודים השונים שיצרתי עם הזמן.
✅ ייתרונות – תהליך אפשר לבנות עיצוב מותאם אישית לפי צרכי הלקוח ללא מגבלות עיצוב תוך כדי שמירה על הקוד נקי.
❌ חסרונות – תצוגה מקדימה לא היתה אפשרות וגם תוספות או הרחבות על מודולים קיימים הצריך פיתוח.
על ההבדלים בין גוטנברג מול בילדרים מומלץ לקרוא כאן.
מעבר לגוטנברג
אחרי שחרור גרסה חמישית תגובות על גוטנברג לא היו משהו. בעיקר באגים וחוסר יציבות בעיני הקהילה. המשכתי לבנות את רוב האתרים על גרסה 4.9 או פשוט לנטרל את העורך בעזרת פלאגין או שורת קוד.
בנוסף לזה כרגיל גרסה מז'ורית הבאה (5.1) הייתה אמורה לפתור באגים ולשפר את גוטנברג.
אני לא ממהר לשדרג אלה מחכה לראות על תדירות העדכונים לגרסאות מינוריות. במקרה הזה חיכיתי לשחרור גרסה מז'ורית הבאה (5.1) גרסה זו הביאה לוורדרס את בריאות האתר.
תבניות רבות התחילו לשדרג את העצמם ולתמוך בגוטנברג. אחד התבניות הייתה Publisher, תבנית שבה בנוי אחד מאתרי חדשות שאני מתחזק. בפעם הראשונה התמודדתי עם מעבר לגוטנברג של אתר כלשהו. מעבר היה מ Visual Composer לגוטנברג. תהליך היה יחסית פשוט ועבר די בהצלחה. מה שכן, כל מה שנבנה עבור תוסף VC היה צורך לשכתב לגוטנברג
כצפוי, לא הכול היה חלק, וכרגיל בקוד פתוח צפו לבעיות ובאגים. למזלי אחרי לא מעט שעות של חפירות ודוקומנטציה בסוף מניבים פרי ואתר חדשות עובר על גוטנברג בצורה מלאה כולל בלוק אחד שלי נבנה מאפס. עד היום פידבקים מאוד חיוביים ואתר עובד חלק.
גוטנברג וACF
כאמור הפלאגין הזה חלק בלתי נפרד מפיתוח של אתרים אצל רוב המתפחים. באפריל 2019 משחררים גרסת 5.8 RC ומשפר את חיים של חסידי גוטנברג.
רוב המפתחים החליטו לנסות את השילוב המנצח והתחיל סבב חדש בתחום פיתוח אתרי וורדרפס המשלב את שתי התפיסות Gutenberg + ACF = ❤️.
מצד אחד יכולת ניהול מאוד נוחה ומאוד קלילה למשתמש, מצד שני קוד נקי ללא יכולת לגרום נזק לאתר מצד המשתמש.
בלוקים מותאמים אישית
לכאורה גוטנברג וACF זה מעל ומעבר לפיתוח מתקדם של אתרי וורדרפס, אבל אין גבול לסקרנות ואפשר לפתח בלוקים מאפס בצורה יותר נוחה. כמו כל דבר בוורדרפס גם גוטנברג בא עם דוקומנטציה מדהימה ומונגשת לבעלי ידע והבנה בקוד.
מה שכן, כתיבת בלוקים מצריכה ידע והבנה בJavascript וReactJS עם הבנה בAPI של וורדרפס.
באינטרנט קיימים הרבה מאוד מדריכים שמנגישים עוד יותר את דוקומנטציה של וורדפרס ואפשר להשתמש בקוד מוכן ליצירת בלוקים חדש.
סיכום ביניים
חלק ראשון של הרצאה שלי בעיקר מתרכז בתיאוריה של מה זה גוטנברג ומה התועלת שהוא מביא לנו כמפתחים ומשתמשי אתר וורדרפס.
כל הפוסט הזה נכתב בעזרת גוטנברג עם מרכיבים השונים שלו.
