לומדים וורדפרס למתקדמים – שיעור 27: פיתוח גוטנברג (Gutenberg) ובלוקים מותאמים אישית

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

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

• הבנת בלוקים: בלוק מורכב משני קבצים: קובץ index.js (שבו מוגדר הבלוק באמצעות React) וקובץ editor.scss (שמעצב את הבלוק).
• הכלים: פיתוח בלוקים דורש שימוש בכלים מתקדמים כמו Node.js ו-React.
• שימוש ב-WP-CLI: הדרך הקלה ביותר להתחיל היא באמצעות פקודה בשורת הפקודה: wp scaffold block <block-name>. זה ייצור עבורכם את כל הקבצים הדרושים להתחלה.

מדוע לפתח בלוקים מותאמים אישית?

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

הבסיס הטכני: JavaScript, React ו-Webpack

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

תהליך פיתוח בלוק פשוט: דוגמה

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

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

wp scaffold block my-first-block

פקודה זו תיצור תיקייה חדשה בשם my-first-block בתוך תיקיית התוספים שלכם. התיקייה תכלול את כל הקבצים הבסיסיים הדרושים לבלוק:

• block.json: קובץ שמתאר את הבלוק: השם שלו, אייקון, קטגוריה ועוד.
• index.php: הקובץ שאחראי על רישום הבלוק בוורדפרס. הוא כולל את הקוד שמופיע באתר הסופי.
• index.js: הקובץ החשוב ביותר. כאן מוגדרת פונקציונליות הבלוק בעורך של גוטנברג (מה רואים ואיך עורכים). הוא נכתב באמצעות React.

דוגמה פשוטה של קוד index.js:

JavaScript

`import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'my-first-block/my-first-block', { // Basic block information title: 'My First Block', icon: 'smiley', category: 'text',

// The edit() function controls the block in the editor
edit: ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();
    return (
        <div { ...blockProps }>
            Hello, this is my first custom block!
        </div>
    );
},

// The save() function controls the final output on the front end
save: ( { attributes } ) => {
    const blockProps = useBlockProps.save();
    return (
        <div { ...blockProps }>
            Hello, this is my first custom block!
        </div>
    );
}

} );`

הקוד הזה יוצר בלוק פשוט שמציג את הטקסט "Hello, this is my first custom block!". הפונקציה edit אחראית על מה שמוצג למשתמש בעורך, והפונקציה save אחראית על מה שייראה גולש רגיל באתר.

המשך התהליך:

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