גוטנברג | Gutenberg – העורך החדש של וורדפרס

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

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

מה זה גוטנברג (Gutenberg)?

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

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

העורך הנוכחי (הקלאסי) של וורדפרס

העורך הקלאסי של וורדפרס

גוטנברג – העורך החדש של וורדפרס

גוטנברג – העורך החדש של וורדפרס

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

• ראשי התיבות WYSIWYG הינם What You See Is What You Get… 🙂
• העורך גוטנברג נקרא על שם Johannes Gutenberg – ממציא הדפוס באמצעות חלקים נעים לפני יותר מ 500 שנה.
• גוטנברג נבנה באמצעות React אך לא תאלצו ללמוד React כדי לפתח בלוקים (אם אתם מפתחי וורדפרס).

גוטנברג הוא הרבה יותר מסתם עורך

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

• שלב 1 – עורך בלוקים: הושק עם וורדפרס 5.0 (דצמבר 2018). זהו עורך הפוסטים והעמודים המכוסה במדריך זה.
• שלב 2 – עריכת אתר מלאה: הוצג בוורדפרס 5.9 והבשיל בוורדפרס 6.3. עריכת אתר מלאה (Full Site Editing – FSE) מאפשרת להתאים את כל האתר – כותרות עליונות, תחתונות, ניווט, תבניות – הכל באמצעות בלוקים.
• שלב 3 – שיתוף פעולה: כרגע בפיתוח. שלב זה מתמקד בעריכה שיתופית בזמן אמת, תהליכי פרסום ויצירת תוכן חלקה יותר בצוות.
• שלב 4 – רב-לשוניות: מתוכנן לעתיד, במטרה להביא תמיכה רב-לשונית ישירות לליבת וורדפרס.

נכון ל-2026, וורדפרס נמצאת בגירסה 7.0 עם שלוש מהדורות גדולות מתוכננות לשנה. שלבים 1 ו-2 הושלמו, ושלב 3 נמצא בפיתוח פעיל.

כיצד גוטנברג מטפל בתוכן ישן

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

לפני המרה לבלוקים – Gutenberg

בחלק הבא נסביר בהרחבה מהם אותם בלוקים, אז התאזרו בסובלנות…

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

כדי לעשות זאת עליכם ללחוץ על האפשרות "Convert to blocks" המופיעה בדיוק מתחת ל "Edit as HTML״ וזו תמיר את כל התוכן לבלוקים בצורה אוטומטית, כך שתוכלו להתחיל לעבוד עם העורך החדש כפי שיועד לעשות. אך שימו לב כי סביר להניח ותראו שינוי בנראות התוכן לאחר ביצוע פעולה זו, במיוחד אם ישנם אלמטים שאינם סטנדרטים או פונקציונליות מיוחדת בתוכן העמוד.

לאחר המרה לבלוקים – Gutenberg

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

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

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

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

מהו בעצם בלוק?

בלוק בעצם  יכול להיות כמעט כל דבר. לדוגמה, יכול להיות לכם בלוק עבור:

• טקסט רגיל
• תמונות
• וידאו
• כפתורים
• ווידג׳טים (כן, אלו בהם השתמשתם בסרגל הצידי)
• טבלאות
• וכדומה…

כל בלוק הוא יישות בפני עצמה אותה תוכלו לשנות בצורה אינדיבידואלית. לצורך הדוגמה ראו בלוק שהוא Paragraph – תוכלו לשנות לו את הרקע, את צבע הטקטס ולהפוך את האות הראשונה לגדולה (Drop Cap).

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

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

אז גוטנברג הוא בעצם סוג של Page Builder?

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

עם זאת, Page Builders ייעודיים כמו Elementor, Divi ו-Beaver Builder עדיין מציעים שליטה מדויקת יותר על עימודים מורכבים, במיוחד עבור עמודי נחיתה ועיצובים שיווקיים. הפער הצטמצם משמעותית, ומשתמשים רבים מגלים שגוטנברג – בשילוב עם block patterns וספריות בלוקים צד שלישי – מכסה את הצרכים שלהם ללא Page Builder נוסף.

כיצד להשתמש בגוטנברג – העורך החדש של וורדפרס

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

סקירה מהירה על הממשק

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

גוטנברג – ממשק וכפתורים (Gutenberg)

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

הוספת בלוקים

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

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

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

קטגוריות אלו כוללות בלוקים מסוגים שונים – Formatting, Layout Elements, Widgets וכדומה. אלו כוללות טבלאות, ציטוטים, כפתורים, ווידג׳טים, שורטקודים, ואפשרויות הטמעה ממקורות חיצוניים כגון פייסבוק, טוויטר ועוד… לא נרחיב על כל אחת מהקטגוריות (מאמין כי בעתיד) אך עברו עליהן וראו את האפשרויות העומדות בפניכם.

עורך ה HTML בגוטנברג – Code Editor

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

בלוקים כפי שהם נשמרים במסד הנתונים – Gutenberg

מהן אותן הערות אתם שואלים? אלו בעצם הבלוקים שהוספתם אחד לאחד. בתמונה מעלה, תוכלו לשים לב כי ישנם מספר שמות של בלוקים. לדוגמה wp:paragraph שמלווה אליו קוד JSON הוא בלוק מסוג Paragraph.

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

<!-- wp:paragraph {"align":"center","customBackgroundColor":"#f6d068"} -->
<p style="background-color:#f6d068;text-align:center" class="has-background">The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.</p>
<!-- /wp:paragraph -->

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

אם תתנו מבט ב Developer Tools של כרום על אלמנט עם הגדרות מסויימות, תגלו כי אלו נוספו כ Inline CSS ב Frontend.

קיצורי מקלדת בעורך החדש

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

עריכת אתר מלאה (Full Site Editing)

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

FSE הוצגה בוורדפרס 5.9 והבשילה לאורך המהדורות שלאחר מכן. כדי להשתמש בה, נדרשת תבנית בלוקים (block theme) כגון Twenty Twenty-Four או Twenty Twenty-Five. תבניות בלוקים מחליפות קבצי תבנית PHP מסורתיים בתבניות HTML הבנויות מבלוקים.

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

תכונות FSE מרכזיות כוללות:

• עורך האתר (Site Editor): ממשק ייעודי לעריכת מבנה האתר, נגיש מתפריט עיצוב > עורך.
• תבניות בלוקים (Block Patterns): עימודי בלוקים מעוצבים מראש שניתן להכניס ולהתאים אישית. תוכלו גם ליצור ולרשום תבניות משלכם.
• סגנונות גלובליים (Global Styles): פאנל מרכזי לשליטה בטיפוגרפיה, צבעים, ריווח ועימוד ברחבי כל האתר.
• חלקי תבנית (Template Parts): סקציות לשימוש חוזר כמו כותרות עליונות ותחתונות שניתן לשתף בין תבניות מרובות.

שאלות נפוצות

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

סיכום

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

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