Αναστασία Αδαμούδη - Δημιουργία σύνθετου μενού πλοήγησης σε block θέματα

Δημιουργία σύνθετων μενού στο WordPress: custom block ή επεξεργασία και επέκταση των core blocks; Ποια επιλογή προσφέρει καλύτερη εμπειρία χρήσης, ευελιξία και απόδοση; Μέσα από παραδείγματα, θα ανακαλύψουμε ποια λύση ταιριάζει σε κάθε περίπτωση.

Transcript

1. Δημιουργία σύνθετου μενού πλοήγησης σε block θέματα
2. Γ εια σας! 👋 Αναστασία Αδαμούδη → WordPress Developer στην Αγγλία → Background: • εμπειρία σε MERN stack (MongoDB, Express, React, Node) • η εξοικείωσή μου με το React με οδήγησε στη δημιουργία custom Gutenberg blocks • self-taught frontend development • School of Code full-stack development bootcamp
3. QR Code με χρήσιμους συνδέσμους για δημιουργία block themes
4. Τί είναι ένα meganav; Ένα προηγμένο μενού πλοήγησης με υπο-μενού που συνήθως ανοίγουν σε μορφή συρταρωτού modal, περιέχοντας εικόνες, κείμενο, featured περιεχόμενο, πολύπλοκους υποσυνδέσμους κ.ά. QR Code με βίντεο-παραδείγματα
5. • Desktop: Πλούσια modals με διαφορετική εμφάνιση και λειτουργία σε κάθε σύνδεσμο με υποσυνδέσμους • Mobile: Απλά επεκτάσιμα υπο-μενού • Δυναμικό περιεχόμενο που δέχεται δεδομένα από custom post types Το πρόβλημα που πρέπει να λύσουμε
6. Τρεις προσεγγίσεις, μία λύση; 1 Επέκταση Core Blocks Χρησιμοποιούμε το υπάρχον core navigation block και προσθέτουμε custom λειτουργικότητα μέσω block extensions και block styles. 2 Custom Gutenberg Block Δημιουργούμε ένα εξ ολοκλήρου νέο block με δική του λογική και ρυθμίσεις για το μενού. 3 Υβριδική Λύση Custom block με επιλογή custom μενού όπως στη δεύτερη περίπτωση ή μενού που έχει δημιουργηθεί στον block editor με επέκταση core blocks και χρήση block styles όπως στην πρώτη περίπτωση. 💡 Οι τρεις μέθοδοι οδηγούν στο ίδιο αποτέλεσμα για τον τελικό χρήστη, αλλά με διαφορετική εμπειρία για τον developer που θα αναπτύξει το μενού πλοήγησης.
7. #1 - Επέκταση Core Blocks Πλεονεκτήματα • Άμεση πρόσβαση στα υπάρχοντα WordPress menus • Εύκολη επαναχρησιμοποίηση σε header, footer κ.ά. • Οικεία εμπειρία χρήσης για τον χρήστη του block editor • Χρήση PHP και JS Μειονεκτήματα • Τα core sublinks δεν υποστηρίζουν εικόνες/επιπλέον κείμενο • Χρειάζεται επέκταση με custom PHP & JS • “Learning curve” για ανάπτυξη θεμάτων block • Ανάγκη για styling overrides
8. Πώς δουλεύει η επέκταση core blocks; Block Editor Extensions Προσθήκη custom styles: Course Modal, Resource Modal, Description Modal Server-Side Rendering PHP ελέγχει modal styles, δημιουργεί HTML με featured content, εικόνες, accessibility features Frontend JavaScript Χειρισμός hover/click, modal display, focus trapping, mobile adaptation Αρχεία: navigation-extend.js, navigation-submenu-extend.js, navigation-link-extend.js, navigation-block-styles.js, search-block-styles.js, navigation.js, mobile-navigation.js, search-modal.js, navigation.php, html-builders.php, shared-modal-helpers.php, header.scss, sublink-modal.scss, search-modal.scss
9. Απολογισμός 15 αρχεία PHP, JS & SCSS 3.848 σειρές κώδικα
10. #2: Custom Gutenberg Block Πλεονεκτήματα • Καθαρό styling χωρίς core overrides • Ανάπτυξη λειτουργικότητας του editor με βάση το React • Όλος ο κώδικας συγκεντρωμένος στο φάκελο του block • Ιδανικό για χρήση πλοήγησης μόνο σε ένα σημείο Μειονεκτήματα • Χρειάζεται custom inspector controls από μηδενική βάση • Δεν επαναχρησιμοποιεί μενού που έχουν δημιουργηθεί στον editor • Ο χρήστης χτίζει μενού μόνο για αυτό το block • Πλήρης έλεγχος από την αρχή • • To block χτίζεται κυρίως με React • Δυνατότητα χρήσης του ίδιου React κώδικα και στο frontend
11. Πώς δουλεύει το custom block; Block Editor Script Προσθήκη inspector controls στον block editor για το συγκεκριμένο block Server-Side Rendering PHP προβάλλει στο frontend τα χαρακτηριστικά (attributes) που δέχεται από τον editor και τις προετοιμάζει για το frontend Frontend JavaScript Χειρισμός hover/click, modal display, focus trapping, mobile adaptation - μόνο frontend λειτουργικότητα ή και πλήρης προβολή της frontend δομής Αρχεία: block.json, index.js, edit.js, render,php, view.js, editor.scss, style.scss, editor-components.js, editor-helper-functions.js, frontend-partials.php, helper-functions.php
12. Απολογισμός 11 αρχεία PHP, JS & SCSS 1.504 σειρές κώδικα
13. #3: Υβριδική Λύση Custom Block Βάση Ξεκινάμε με custom Gutenberg block που έχει δικό του menu builder Ενσωμάτωση WordPress Menu Προσθέτουμε SelectControl για επιλογή wp_navigation posts από το Site Editor Υπό όρους εμφάνιση Αν επιλεγεί WP menu, εμφάνισε core/navigation block - αλλιώς custom navigation Σημείωση: Όταν χρησιμοποιείται WordPress menu, το view.js του custom block αγνοείται και ισχύει η λογική του core navigation block.
14. Απολογισμός 25 αρχεία PHP, JS & SCSS 5.298 σειρές κώδικα
15. Σύγκριση: Τί ταιριάζει πού; Επέκταση Core Blocks Καλύτερο για: • Επαναχρησιμοποίηση μενού • Σχετικά γρήγορη υλοποίηση • Οικεία UX για editors • Developers που προτιμούν PHP Custom Block Καλύτερο για: • Πλήρης έλεγχος styling • Χρήση πλοήγησης σε ένα μέρος • Developers με εμπειρία στο React • Συγκεντρωμένος κώδικας Υβριδική Λύση Καλύτερο για: • Best of both worlds • Χρήση διαφορετικών ειδών μενού • Μέγιστη αξιοποίηση των δυνατοτήτων του WordPress Όλες οι προσεγγίσεις παράγουν το ίδιο frontend αποτέλεσμα - η επιλογή εξαρτάται από τις απαιτήσεις κάθε έργου, την εξοικείωση του χρήστη με το WordPress admin και τον block editor, και τις προτιμήσεις της ομάδας/του ατόμου που αναπτύσσει το έργο.
16. Βασικά συμπεράσματα 1 Δεν υπάρχει "σωστή" λύση Κάθε έργο έχει διαφορετικές ανάγκες - η τελική απόφαση είναι του developer/της ομάδας 2 Το ίδιο αποτέλεσμα, διαφορετική διαδρομή Όλες οι μέθοδοι οδηγούν στην ίδια frontend εμπειρία με διαφορετικούς συμβιβασμούς 3 Σκεφτείτε μακροπρόθεσμα Λάβετε υπόψη προσβασιμότητα, οργάνωση, συντήρηση & επεκτασιμότητα του έργου, εμπειρία developer Σημείωση: Αν η πλοήγηση διαφέρει ουσιαστικά μεταξύ των διαφορετικών μεγεθών οθόνης (π.χ. διαφορετική διάταξη ή διαφορετικά εμφανιζόμενα στοιχεία σε desktop, tablet, mobile), χρειάζεται να επανεξετάσουμε τη στρατηγική μας.
18. Ξεχωριστές δομές πλοήγησης μπορεί να προκαλέσουν: • Ασυνεπή σειρά tab ή μη προβλέψιμη συμπεριφορά εστίασης • Διπλότυπους συνδέσμους που μπορεί να προκαλέσουν σύγχυση στις συσκευές ανάγνωσης οθόνης • Δυσκολία στη διατήρηση συνεπούς σήμανσης ARIA ρόλων Πιο πρακτική προσέγγιση σε αυτή την περίπτωση: Ένα custom Gutenberg block με ελεγχόμενη ορατότητα των συνδέσμων ανά breakpoint.
19. Ερωτήσεις; Θα χαρώ να ακούσω τις εμπειρίες σας - έχετε δημιουργήσει meganav με διαφορετικούς τρόπους; Ευχαριστώ πολύ για την προσοχή σας! 🙏