Gutenberg Όλα όσα πρέπει να ξέρετε για τον τελευταίο επεξεργαστή του WordPress
Gutenberg είναι ένα νέο πρόγραμμα επεξεργασίας για WordPress που θα είναι εντελώς αντικαταστήστε τον τρέχοντα επεξεργαστή με TinyMCE. Πρόκειται για ένα φιλόδοξο έργο που θα αλλάξει αδιαμφισβήτητα το WordPress με πολλούς τρόπους και θα επηρεάσει τόσο τους τακτικούς τελικούς χρήστες όσο και τους προγραμματιστές, και συγκεκριμένα εκείνους που εξαρτώνται από την οθόνη editor για την εργασία στο WordPress. Εδώ είναι πώς φαίνεται.
Ο Gutenberg εισάγει επίσης ένα νέο πρότυπο στο WordPress που ονομάζεται “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ”.
“ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” είναι ο αφηρημένος όρος που χρησιμοποιείται για να περιγράψει μονάδες σήμανσης που αποτελούνται από το περιεχόμενο ή τη διάταξη μιας ιστοσελίδας. Η ιδέα συνδυάζει τις έννοιες του τι σήμερα επιτυγχάνεται με το WordPress shortcodes, custom HTML και ενσωματώστε την ανακάλυψη σε ένα ενιαίο συνεπές API και εμπειρία χρήστη.
Ρύθμιση του Έργου
Γνωρίζοντας το γεγονός ότι το Gutenberg είναι χτισμένο πάνω από το React, ορισμένοι προγραμματιστές ανησυχούν ότι το το φραγμό είναι πολύ υψηλό για αρχάριους για την ανάπτυξη του Gutenberg.
Η εγκατάσταση του React.js θα μπορούσε να είναι αρκετά χρονοβόρα και σύγχυση αν έχετε μόλις ξεκινήσει με αυτό. Θα χρειαστείτε τουλάχιστον μετασχηματιστή JSX, Babel, ανάλογα με τον κωδικό σας μπορεί να χρειαστείτε κάποια πρόσθετα Babel και ένα Bundler όπως το Webpack, το Rollup ή το Parcel.
Ευτυχώς, μερικοί άνθρωποι μέσα στην κοινότητα του WordPress επιταχύνθηκαν και προσπαθούν να κάνουν την ανάπτυξη του Gutenberg όσο το δυνατόν πιο εύκολη για όλους να ακολουθήσουν. Σήμερα, διαθέτουμε ένα εργαλείο που θα δημιουργήσει μια πλάκα Gutenberg έτσι μπορούμε να αρχίσουμε να γράφουμε κώδικα αμέσως αντί να βρεθείτε με τα εργαλεία και τις διαμορφώσεις.
Δημιουργία μπλοκ Guten
ο δημιουργία-block-guten είναι ένα έργο που ξεκίνησε από τον Ahmad Awais. Είναι ένα εργαλείο μηδενικής διαμόρφωσης (# 0CJS) που θα σας επιτρέψουν να αναπτύξετε το μπλοκ Gutenberg με μερικές σύγχρονες στοίβες, όπως React, Webpack, ESNext, Babel, ESLint και Sass. Ακολουθήστε τις οδηγίες για να ξεκινήσετε με το Create Guten Block.
Χρησιμοποιώντας το ES5 (ECMAScript 5)
Χρησιμοποιώντας όλα αυτά τα εργαλεία για να δημιουργήσετε ένα απλό “Γειά σου Κόσμε” μπλοκ μπορεί να φαίνεται πάρα πολύ. Εάν θέλετε να διατηρήσετε άθλιες τις στοίβες σας, μπορείτε πραγματικά να αναπτύξετε ένα μπλοκ Gutenberg χρησιμοποιώντας ένα απλό καλό ECMAScript 5 που ίσως έχετε ήδη εξοικειωθεί με. Εάν έχετε WP-CLI 1.5.0 εγκατεστημένο στον υπολογιστή σας, μπορείτε απλά να τρέξετε ...
wp σκαλωσιά[--title = ] [--dashicon =<dashicon>] [--κατηγορία =<category>] [-θέμα] [--plugin =<plugin>] [--force]</pre> <p>… προς το <strong>δημιουργήστε το boilerplate του μπλοκ Gutenberg στο plugin ή το θέμα σας</strong>. Αυτή η προσέγγιση είναι πιο λογική, ιδιαίτερα, για τα υπάρχοντα πρόσθετα και τα θέματα που αναπτύξατε πριν από την εποχή Gutenberg.</p> <p>Αντί να δημιουργήσετε ένα νέο plugin για να φιλοξενήσετε τα μπλοκ Gutenberg, ίσως θελήσετε να ενσωματώσετε τα μπλοκ στα plugins ή τα θέματα σας. Και για να είναι εύκολο να ακολουθήσετε αυτό το σεμινάριο για όλους, <strong>θα χρησιμοποιήσουμε το ECMAScript 5 με το WP-CLI</strong>.</p> <h4>Καταχώριση νέου μπλοκ</h4> <p>Το Gutenberg αναπτύσσεται επί του παρόντος ως plugin και θα συγχωνευθεί με το WordPress 5.0 όποτε η ομάδα αισθάνεται ότι είναι έτοιμη. Έτσι, προς το παρόν, θα χρειαστεί να το εγκαταστήσετε από το <strong>Η σελίδα "Πρόσθετα" στη σελίδα <code>wp-admin</code></strong>. Μόλις το έχετε εγκαταστήσει και ενεργοποιήσει, εκτελέστε την ακόλουθη εντολή στο Terminal ή στη γραμμή εντολών, αν βρίσκεστε σε ένα μηχάνημα των Windows.</p> <pre name="code"> wp σειρά σκαλωσιού σειρά - title = "Σειρά HTML5" - θεματολογία</pre> <p>Αυτή η εντολή θα δημιουργήσει ένα μπλοκ στο τρέχον ενεργό θέμα. Το Block μας θα αποτελείται από τα ακόλουθα αρχεία:</p> <pre name="code"> . ΕΝΑ¢Â ??  ?? â ??  ?? â ?? ?? σειρά Ã¢Â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ?? ?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ?? ?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ?? ?? style.css â ??  ?? â ??  ?? â ?? ?? series.php </pre> <p>Ας φορτώσουμε το κύριο αρχείο των μπλοκ μας στο <code>functions.php</code> του θέματος μας:</p> <pre name="code"> αν (function_exists ('register_block_type')) απαιτούν get_template_directory (). '/blocks/series.php'; </pre> <p>Παρατηρήστε ότι επισυνάπτουμε τη φόρτωση του αρχείου με όρους. Αυτό εξασφαλίζει <strong>συμβατότητα με την προηγούμενη έκδοση του WordPress ότι το μπλοκ μας φορτώνεται μόνο όταν υπάρχει Gutenberg</strong>. Το μπλοκ μας θα πρέπει τώρα να είναι διαθέσιμο στη διεπαφή Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Αυτό φαίνεται με την εισαγωγή του μπλοκ.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Gutenberg</h3> <p>Ο Gutenberg εισάγει δύο σύνολα API για να δηλώσει ένα νέο Block. Αν κοιτάξουμε το <code>series.php</code>, θα βρούμε τον ακόλουθο κώδικα που καταχωρεί το νέο μας Block. Επίσης <strong>φορτώνει το φύλλο στυλ και τα JavaScript στο front-end και τον επεξεργαστή</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'block-editor';</pre> <p>Όπως μπορούμε να δούμε παραπάνω, το Block μας ονομάζεται <code>είκοσι δεκαεπτά / σειρά</code>, το όνομα του μπλοκ πρέπει να είναι μοναδικό και να ονομάζεται για να αποφευχθεί η σύγκρουση με τα άλλα μπλοκ που φέρνουν τα άλλα πρόσθετα.</p> <p>Επί πλέον, <strong>Το Gutenberg παρέχει ένα σύνολο νέων API JavaScript για να αλληλεπιδράσει με το “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” διεπαφή</strong> στον επεξεργαστή. Δεδομένου ότι το API είναι αρκετά άφθονο, θα επικεντρωθούμε σε κάποιες λεπτομέρειες που νομίζω ότι θα πρέπει να γνωρίζετε για να έχετε ένα απλό αλλά λειτουργικό Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Πρώτον, θα εξετάσουμε <code>wp.blocks.registerBlockType</code>. Αυτή η λειτουργία χρησιμοποιείται για <strong>εγγραφείτε νέο “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” στον συντάκτη Gutenberg</strong>. Απαιτεί δύο επιχειρήματα. Το πρώτο επιχείρημα είναι το όνομα του μπλοκ το οποίο πρέπει να ακολουθεί το όνομα που έχει καταχωρηθεί στο <code>register_block_type</code> λειτουργία στην πλευρά της PHP. Το δεύτερο επιχείρημα είναι ένα <strong>Αντικείμενο που ορίζει τις ιδιότητες Block</strong> όπως τον τίτλο, την κατηγορία και μερικές λειτουργίες για την απόδοση της διεπαφής Block.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; (), title: __ ('Σειρά HTML5'), κατηγορία: 'widgets', λέξεις-κλειδιά: ['html'], ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Αυτή η λειτουργία σας επιτρέπει να δημιουργήσετε το στοιχείο μέσα στο “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” στο μεταγλωττιστή. ο <code>wp.element.createElement</code> λειτουργία είναι βασικά μια αφαίρεση του React <code>createElement ()</code> συνεπώς, δέχεται την ίδια σειρά επιχειρημάτων. Το πρώτο επιχείρημα παίρνει τον τύπο του στοιχείου για παράδειγμα μία παράγραφο, α <code>σπιθαμή</code>, ή α <code>div</code> όπως φαίνεται παρακάτω:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Μπορούμε <strong>alias τη συνάρτηση σε μια μεταβλητή</strong> οπότε είναι μικρότερο να γράφετε. Για παράδειγμα:</p> <pre name="code"> el el = wp.element.createElement; el ('div').</pre> <p>Αν εσύ <strong>προτιμούν να χρησιμοποιούν τη νέα σύνταξη ES6</strong>, μπορείτε επίσης να το κάνετε αυτό:</p> <pre name="code"> const createElement: el = wp.element; el ('div').</pre> <p>Μπορούμε επίσης <strong>προσθέστε τα χαρακτηριστικά στοιχείων</strong> Όπως <code>τάξη</code> όνομα ή <code>ταυτότητα</code> στη δεύτερη παράμετρο ως εξής:</p> <pre name="code"> el el = wp.element.createElement; el ('div', 'class': 'σειρά-html5', 'id': 'σειρά-html-post-id-001');</pre> <p>ο <code>div</code> που δημιουργήσαμε δεν θα είχε νόημα χωρίς το περιεχόμενο. Μπορούμε <strong>προσθέστε το περιεχόμενο στο όρισμα της τρίτης παραμέτρου</strong>:</p> <pre name="code"> el el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Το άρθρο αυτό αποτελεί μέρος της σειράς "HTML5 / CSS3 Tutorials" για να σας βοηθήσει να φτιάξετε έναν καλύτερο σχεδιαστή ή / και προγραμματιστή. Κάντε κλικ εδώ για να δείτε περισσότερα άρθρα από την ίδια σειρά ').</pre> <h4><code>wp.components</code></h4> <p>ο <code>wp.components</code> περιέχουν μια συλλογή από, όπως υποδηλώνει το όνομα, τα συστατικά του Gutenberg. Αυτές οι συνιστώσες είναι τεχνικά React custom components που περιλαμβάνουν το Button, Popover, Spinner, Tooltip και μια δέσμη άλλων. Μπορούμε <strong>επαναχρησιμοποιήστε αυτά τα εξαρτήματα στο δικό μας Block</strong>. Στο ακόλουθο παράδειγμα, προσθέτουμε ένα στοιχείο κουμπιού.</p> <pre name="code"> var Κουμπί = wp.components.Button; el (Κουμπί, 'class': 'κουμπί λήψης',, 'Λήψη');</pre> <h4>Γνωρίσματα</h4> <p>Τα χαρακτηριστικά είναι ο τρόπος αποθήκευσης των δεδομένων στο Block μας, τα δεδομένα αυτά θα μπορούσαν να είναι όπως το περιεχόμενο, τα χρώματα, οι ευθυγραμμίσεις, η διεύθυνση URL κλπ. Μπορούμε να πάρουμε τα χαρακτηριστικά από τα Properties που πέρασαν <code>επεξεργασία()</code> ως εξής:</p> <pre name="code"> επεξεργασία: λειτουργία (υποστηρίγματα) var content = props.attributes.seriesContent; επιστροφή el ('div', 'class': 'σειρά-html5', 'id': 'series-html-post-id-001', περιεχόμενο); </pre> <p>Για να ενημερώσουμε τα Χαρακτηριστικά, χρησιμοποιούμε το <code>setAttributes ()</code> λειτουργία. Συνήθως θα αλλάζαμε το περιεχόμενο σε συγκεκριμένες ενέργειες όπως όταν κάναμε κλικ σε ένα κουμπί, συμπληρώσαμε μια είσοδο, επιλέξαμε μια επιλογή κλπ. Στο ακόλουθο παράδειγμα, το χρησιμοποιούμε για να προσθέσουμε ένα <strong>εφεδρικό</strong> περιεχόμενο του Block μας σε περίπτωση που κάτι αναπάντεχο συνέβη με μας <code>seriesContent</code> Χαρακτηριστικό.</p> <pre name="code"> edit: λειτουργία (υποστηρίξεις) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute contentContent: 'Hello World! ) var content = props.attributes.seriesContent; επιστροφή [el ('div', 'class': 'σειρά-html5', 'id': 'series-html-post-id-001', περιεχόμενο),]; </pre> <h4>Αποθήκευση του μπλοκ</h4> <p>ο <code>αποθηκεύσετε()</code> λειτουργία λειτουργεί παρόμοια με το <code>επεξεργασία()</code>, εκτός από τον ορισμό του περιεχομένου του μπλοκ για αποθήκευση στη βάση δεδομένων μετά. Η αποθήκευση του περιεχομένου Block είναι αρκετά απλή, όπως βλέπουμε παρακάτω:</p> <pre name="code"> save: συνάρτηση (υποστηρίξεις) if (! props ||! props.attributes.seriesContent) επιστροφή; var content = props.attributes.seriesContent; επιστροφή [el ('div', 'class': 'σειρά-html5', 'id': 'series-html-post-id-001', περιεχόμενο),]; </pre> <h3>Τι έπεται?</h3> <p>Ο Gutenberg θα αλλάξει το οικοσύστημα WordPress προς το καλύτερο (ή ίσως το χειρότερο). Επιτρέπει στους προγραμματιστές να <strong>να υιοθετήσουν έναν νέο τρόπο ανάπτυξης των plugins και των θεμάτων του WordPress</strong>. Το Gutenberg είναι μόνο μια αρχή. Σύντομα “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” το παράδειγμα θα επεκταθεί σε άλλες περιοχές του WordPress όπως τα API Ρυθμίσεων και τα Widgets.</p> <p>Μάθετε JavaScript βαθιά; είναι ο μόνος τρόπος για να μπει στο Gutenberg και να μείνει σχετικός με το μέλλον της βιομηχανίας WordPress. Αν είστε ήδη εξοικειωμένοι με τα βασικά του JavaScript, τις ιδιορρυθμίες, τις λειτουργίες, τα εργαλεία, τα αγαθά και τα μπαστούνια, είμαι πραγματικά σίγουρος ότι θα επιταχύνετε με το Gutenberg.</p> <p>Όπως αναφέρθηκε, ο Gutenberg εκθέτει μια πληθώρα API, αρκετή για να κάνει σχεδόν οτιδήποτε στο Block σας. Μπορείτε να επιλέξετε εάν <strong>κωδικοποιήστε το Block σας με ένα απλό παλιό JavaScript, JavaScript με σύνταξη ES6, React ή ακόμα και Vue</strong>.</p> <h4>Ιδέες και Εμπνεύσεις</h4> <p>Δημιούργησα ένα πολύ (πολύ) απλό μπλοκ Gutenberg που μπορείτε να βρείτε στον αποθετήριο του λογαριασμού μας Github. Επιπλέον, έχω επίσης συγκεντρώσει μια σειρά αποθετηρίων από όπου μπορείτε να οδηγήσετε την έμπνευση για την οικοδόμηση ενός πιο σύνθετου Block.</p> <ul><li>Gutenblocks - Μια συλλογή μπλοκ από τον Mathieu Viet γραμμένο σε JavaScript με τη σύνταξη ES5</li> <li>Πρόγραμμα Jetpack Gutenblocks - μια συλλογή από Blocks που παρέχεται στο Jetpack</li> <li>Μια λίστα παραδειγμάτων εφαρμογής του Gutenberg, συμπεριλαμβανομένου του Vue.js</li> </ul><h3>Περαιτέρω αναφορά</h3> <ul><li>Gutenberg Επίσημη αποθήκη</li> <li>Gutenberg Handbook</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Αντιμετωπίστε έναν Πίνακα ελλείψεων IKEA σε μια Rack Component</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Ξεκλειδώστε ένα παλιό πληκτρολόγιο για να δημιουργήσετε ένα προσαρμοσμένο περιβάλλον ελέγχου</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Οδηγός για το Windows 10 Task Manager - Μέρος ΙΙ</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Επόμενο άρθρο</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Χαράξτε ένα φακό $ 10 σε ένα Ultra-bright Premium</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Προηγούμενο άρθρο</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Οδηγός για το Windows 10 Task Manager - Μέρος ΙΙΙ</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Χρήσιμες πληροφορίες και συμβουλές ανάπτυξης ιστού. Προγραμματισμός, σχεδιασμός ιστοσελίδων, CSS, HTML, JAVASCRIPT. Διαμορφώστε και επανεγκαταστήστε τα παράθυρα WINDOWS. Δημιουργία ιστοσελίδων και εφαρμογών από την αρχή. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>