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

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

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

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

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

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

ACF 5.8 ובלוקים של גוטנברג

במהלך העבודה של החברה מ ACF ליצירת תאימות בין Meta Boxes לגוטנברג, עלה בראשם הרעיון (הדי מתבקש) לאפשר למפתחים דרך פשוטה יותר ליצור בלוקים חדשים עבור גוטנברג.  בלוקים שעושים שימוש ב ACF & PHP ומאפשרים ליצור תוכן דינמי בקלות רבה יותר.

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

כיצד ליצור בלוקים עבור גוטנברג בעזרת ACF

יצירת בלוקים משלכם דורשת הרבה עבודת Javascript. שימוש ACF Blocks לעומת זאת עושה את רוב העבודה בשבילכם. הנה הצעדים שיש לבצע כל מנת ליצור בלוק חדש באמצעות ACF:

1. רישום בלוק – Register a Block

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

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

שימו לב שעליכם להוסיף שם לפונקציה  render_callback עליה נסביר מעט בסעיף 3.

function my_acf_init() {

    // check function exists
    if( function_exists('acf_register_block') ) {

        // register a testimonial block
        acf_register_block(array(
            'name'				=> 'testimonial',
            'title'				=> __('המלצה'),
            'description'		=> __('בלוק מותאם עבור המלצות.'),
            'render_callback'	=> 'my_acf_block_render_callback',
            'category'			=> 'formatting',
            'icon'				=> 'admin-comments',
            'keywords'			=> array( 'testimonial', 'quote' ),
        ));
    }
}
add_action('acf/init', 'my_acf_init');

2. יצירת קבוצת השדות ב ACF

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

בהגדרות המיקום (location) יש לבחור את האפשרות ״בלוק״ בכדי לבחור את הבלוק החדש שיצרתם כבתמונה הבאה:

3. רינדור הבלוק

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

זוכרים את ההגדרה render_callback שהזכרנו קודם לכן? זוהי פונקציית ה PHP שמרנדרת את ה HTML של הבלוק והמקום בו אתם יכולים לכתוב קוד משלכם. ההמלצה היא לקחת את הגישה המודולרית וזאת באמצעות שימוש callback function גנרית שתקרא ל template part כלשהו עבור הבלוק.

זה אפשרי על ידי שימוש בפרמפטר $block:

<?php
/**
 * Block Name: Testimonial
 *
 * This is the template that displays the testimonial block.
 */

// get image field (array)
$avatar = get_field('avatar');

// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];

// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';

?>
<div id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
    <div class="my-avatar">
        <img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
    </div>
    <div class="my-testimonial-text"><?php the_field('testimonial'); ?></div>
    <cite>
        <span><?php the_field('author'); ?></span>
    </cite>
</div>
<style type="text/css">
    #<?php echo $id; ?> {
        background: <?php the_field('background_color'); ?>;
        color: <?php the_field('text_color'); ?>;
    }
</style>

4. הוספת ה CSS הנחוץ עבור הבלוק

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

function sv_load_style() {
    wp_enqueue_style( 'custom-admin-style', get_template_directory_uri().'/testimonials-block-style.css' );
}
add_action('admin_enqueue_scripts', 'sv_load_style');
add_action('wp_enqueue_scripts', 'sv_load_style');

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

ACF Blocks Scope

אולי אתם תוהים האם ACF Blocks הם תחליף ל ACF Metaboxes (אותi שדות ACF) התשובה היא לא. Metaboxes הם עדיין חלק בלתי נפרד וחשוב בתהליך הפיתוח ו ACF מתייחסים לאלו ככלי המרכזי לשמירת מידע. ההבדל העיקרי בין בלוקים ל Metboxes הוא ״המרחב״ בו הם חיים (Scope).

ההבדל בין Metaboxes לבלוקים בגוטנברג

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

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

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

פיטצ׳רים נוספים ששווה להזכיר

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

תצוגה מקדימה – Previews

בכדי לשמור על סינכרון עם גוטנברג, בלוקים של ACF מספקים מעין תצוגה מקדימה עבור הבלוק שיצרתם. פשוט לחצו על כפתור ה "Switch to preview" בהגדרות הבלוק בכדי לעבור למצב תצוגה.

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

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

יישור – Alignment

ACF Blocks אף תומכים ב Alignment Toolbar. באפשרותכם להשתמש בזאת בכדי ליישר את הבלוקים לפי הצורך.

בנוסף, באפשרותכם להשתמש באפציות wide & full width בכדי למתוח את הבלוקים שלכם מחוץ לקופסה.

לסיכום

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

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

ACF Blocks יכללו גם עבור הגירסה החינמית וגם עבור גירסת ה Pro של ACF 5.8 ואתם יכולים לצפות שגירסה זו תצא ממש בקרוב.

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