שדרוג תבנית Full Site Editor

מבוא

אני עם וורדפרס מ-2007 בערך, ומאז המערכת התפתחה משמעותית והפכה למערכת הכי נפוצה בשוק. בתקופה של 2017 עברנו מתבניות Classic עד תבנית 2024 שעברה בצורה מלאה ל-Full Site Editor. אחרי התייצבות של תפיסת ה-FSE קפצתי על הרעיון והחלטתי לשכתב את התבנית שלי ל-FSE.

בשנים שאני עובד עם וורדפרס עברתי את כל אפשרויות הפיתוח, החל מהשורטקודים ותבניות פשוטות מהמאגר, דרך פיתוח תבנית מאפס על בסיס underscores ו-sage. על הדרך ניסיתי גם לא מעט בילדרים שונים. תמיד בסוף חזרתי ל-underscores בשילוב עם ACF (משתמש בו עוד לפני גרסת Pro).

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

לפני הכול

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

קובץ הגדרות theme.json מנהל את כל התבנית, מפרט את כל הנושא של נראות האתר בכל הרמות, החל מעיצוב CSS עצמו ועד הגדרת תבניות מיוחדות. בצורה הנכונה צריך להגדיר בקובץ את ההגדרות בתוכנה שנקראת settings, כך שההגדרות בטעינה יהפכו ל-CSS custom variables ניתנים לשימוש. אפשר להגדיר בתוכנה שנקראת styles עבור כל רכיב או אזור באתר.
בדוגמה ניתן לראות איך outer מקבל משתנה מsmall.

 "settings": {
	"appearanceTools": true,
	"custom": {
		"spacing": {
			"small": "max(1.25rem, 5vw)",
			"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
			"large": "clamp(4rem, 10vw, 8rem)",
			"outer": "var(--wp--custom--spacing--small, 1.25rem)"
		}
	}
}, 

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

 "customTemplates": [
	{
		"name": "blank",
		"title": "Blank",
		"postTypes": [
			"page",
			"post"
		]
	}
], 

גם תחליף לפונקציה הכי שמישה get_template_part מופיע בקובץ והוא מכיל הפניה לקובץ HTML בתוך התיקיה.

 "templateParts": [
	{
		"name": "header",
		"title": "Header",
		"area": "header"
	},
	{
		"name": "footer",
		"title": "Footer",
		"area": "footer"
	}
] 

התפקיד של הקובץ מעבר להגדרות התבנית הוא גם מתן אפשרות ל-Editor החדש שבו אפשר לבנות את הדפים מאפס בדומה לבילדרים השונים.

מבנה התבנית

התבנית מורכבת ממספר קבצים ותיקיות שהם חובה:

• קובץ JSON שכבר רשמתי עליו.
• קבצים functions.php וקובץ index.php בגרסאות קודמות היה חובה.
• ספריית templates המכילה את התבניות מוגדרות מראש עבור הדפים השונים באתר. כל הקבצים שהיו חלק ראשי בתבניות: index, archive, single, page וכו’.
• ספריית parts מרכזת את כל התכנים שממנה נשלפים כל הרכיבים לאתר, תחליף ל-template-parts.
• ספריית patterns מורכבת מקוד PHP שלא ניתן לטעון ישירות בתבנית HTML, לדוגמה תרגומים.
• כל שאר הספריות הן התוספות שלי שאני סוחב הרבה שנים עם התבנית של הבלוג.

מעבר תפיסתי ל-FSE

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

מעבר ל-FSE מצריך שינוי תפיסתי והרגלים של עבודה עם HTML ב”שפה” של גוטנברג. לרוב, כרגע זה מסרס את האפשרויות הבסיסיות ברמת השליטה בתבנית וורדפרס. זה בא לידי ביטוי בפונקציות בסיסיות כמו שימוש ב-ID של פוסט בעזרת PHP.

במהלך המעבר הפריעה לי השימוש ב-template-part שאינו מאפשר שני דברים בסיסיים: העברת משתנים לשימוש פנימי והגדרת תכונות ID לחלק מהמקרים ב-class.

דבר נוסף שהפריע לי, template-part לא עובד בצורה תקינה ב-loop כמו שזה עובד בתבניות PHP. מצד שני גם לזה לקח זמן.

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

אז מה הפתרון? מה שיכולתי השתמשתי בתבנית עצמה, מה שלא יכולתי יצרתי pattern על בסיס הקוד הקיים וכמו עצלן אמיתי רשמתי בתחילת הקוד “todo rewrite this to Gutenberg”.

בעיית נראות

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

 	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	] 

סיכום

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

בנוסף לכך, היא מתאימה למפתחי Component-based שמאוד נפוצה אצל מפתחי React.

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

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

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

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

אתר שמוקדש לfull site editing, אפשר ליצור תמפלייט בסיסי

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