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

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

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

    זה ברור כי הוא בהשראת ממשק משתמש עורך בינוני.

    גוטנברג גם מציג פרדיגמה חדשה ב- WordPress “לחסום”.

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

    הגדרת הפרויקט

    לדעת את העובדה כי גוטנברג בנוי על גבי React, מפתחי כמה מודאגים כי המכשול גבוה מדי עבור מפתחי הכניסה ברמת פיתוח Gutenberg.

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

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

    צור בלוק גוטן

    ה ליצור גוטן בלוק הוא פרויקט יזום של אחמד עוואיס. זה ערכת כלי אפס תצורה (# 0CJS) שיאפשר לך לפתח בלוק גוטנברג עם כמה ערימות מודרניות מראש כולל React, Webpack, ESNext, בבל, ESLint, ו Sass. בצע את ההוראות כדי להתחיל עם יצירת גוטן בלוק.

    שימוש ב- ES5 (ECMAScript 5)

    באמצעות כל הכלים האלה כדי ליצור פשוט “שלום עולם” בלוק אולי נראה יותר מדי. אם אתה רוצה לשמור על ערימות שלך רזה, אתה יכול למעשה לפתח בלוק גוטנברג באמצעות רגיל E "טוב ECMAScript 5 כי ייתכן שכבר יש היכרות עם. אם יש לך WP-CLI 1.5.0 מותקן במחשב שלך, אתה יכול פשוט לרוץ ...

     wp פיגום בלוק  [- כותרת =] [- dashicon =<dashicon>] [- קטגוריה =<category>] [- -] [- פלוגין =<plugin>] [- כוח]</pre> <p>… ל <strong>ליצור את גלוטנברג לחסום boilerplate לתוסף או נושא</strong>. גישה זו היא הגיונית יותר, במיוחד עבור תוספים קיימים ונושאים שפיתחתם לפני עידן גוטנברג.</p> <p>במקום ליצור תוסף חדש כדי להתאים את גוטנברג בלוקים, ייתכן שתרצה לשלב את אבני כדי plugins שלך או את הנושאים. וכדי להפוך את זה מורה קל לעקוב אחר כולם, <strong>אנו נשתמש ב- ECMAScript 5 עם WP-CLI</strong>.</p> <h4>רישום בלוק חדש</h4> <p>גוטנברג מפותחת כיום כתוסף ותמוזג ל - WordPress 5.0 בכל פעם שהצוות ירגיש שהוא מוכן. אז, לעת עתה, יהיה עליך להתקין את זה <strong>דף תוספים <code>wp-admin</code></strong>. לאחר התקנתו והפעלתו, הפעל את הפקודה הבאה במסוף או בשורת הפקודה אם אתה משתמש במחשב Windows.</p> <pre name="code"> wp פיגום בלוק סדרה - כותרת = "HTML5 סדרה" - theme</pre> <p>פקודה זו תיצור בלוק לנושא הפעיל כעת. הבלוק שלנו יכלול את הקבצים הבאים:</p> <pre name="code"> . ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? סדרה ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? block.js ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? editor.css ד¢Â ?? Â'Ã' Ã' ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? style.css ד¢Â ?? ?? ד¢Â ?? ?? ד¢?? ?? series.php </pre> <p>בואו לטעון את הקובץ הראשי של בלוקים שלנו <code>פונקציות</code> של הנושא שלנו:</p> <pre name="code"> אם (function_exists ('register_block_type')) דרוש get_template_directory (). '/blocks/series.php';  </pre> <p>שים לב שאנו מצרפים את טעינת הקובץ עם תנאי. זה מבטיח <strong>תאימות עם גירסת וורדפרס הקודמת כי הבלוק שלנו נטען רק כאשר גוטנברג נמצא</strong>. הבלוק שלנו אמור להיות זמין כעת בממשק גוטנברג.</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>Gutenberg APIs</h3> <p>גוטנברג מציג שתי קבוצות של ממשקי API לרישום בלוק חדש. אם נסתכל על <code>series.php</code>, אנו מוצאים את הקוד הבא רושם הבלוק החדש שלנו. זה גם <strong>טוען את גליון הסגנונות ואת JavaScript על החזית ואת העורך</strong>.</p> <pre name="code">register_block_type ('עשרים ושתיים / סדרה', מערך ('editor_script' = '' סדרת בלוק-עורך ',' editor_style '=' 'בלוק-עורך', 'style' => 'series-block',));</pre> <p>כפי שאנו יכולים לראות לעיל, הבלוק שלנו נקרא <code>עשרים ושמונה / סדרה</code>, שם הבלוק חייב להיות ייחודי וממוקם על מנת למנוע התנגשות עם בלוקים אחרים שהובאו על ידי תוספים אחרים.</p> <p>יתר על כן, <strong>Gutenberg מספק קבוצה של ממשקי API חדשים של JavaScript כדי לקיים אינטראקציה עם “לחסום” ממשק</strong> בעורך. מאז API הוא די בשפע, נתמקד כמה פרטים שאני חושב שאתה צריך לדעת כדי לקבל פשוט גוטנברג בלוק מתפקד עדיין.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>ראשית, אנחנו נסתכל לתוך <code>wp.blocks.registerBlockType</code>. פונקציה זו משמשת <strong>לרשום חדש “לחסום” לעורך גוטנברג</strong>. זה דורש שני טיעונים. הארגומנט הראשון הוא שם הבלוק שאמור לעקוב אחר השם הרשום <code>register_block_type</code> פונקציה בצד PHP. הטיעון השני הוא <strong>אובייקט המגדיר את מאפייני הבלוק</strong> כמו כותרת, קטגוריה, וכמה פונקציות כדי לעבד את ממשק בלוק.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; (): "[/ html '], ערוך: פונקציה (props) , שמור: function (props)  ); </pre> <h4><code>wp.element.createElement</code></h4> <p>פונקציה זו מאפשרת לך ליצור את האלמנט בתוך “לחסום” בעורך הדואר. ה <code>wp.element.createElement</code> הפונקציה היא בעצם הפשטה של ​​התגובה <code>createElement ()</code> ולכן הוא מקבל אותה מערכת של טיעונים. הארגומנט הראשון לוקח את סוג האלמנט לדוגמה פסקה, a <code>span</code>, או <code>div</code> כפי שמוצג מטה:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>אנחנו יכולים <strong>כינוי הפונקציה למשתנה</strong> אז זה קצר יותר לכתוב. לדוגמה:</p> <pre name="code"> var el = wp.element.createElement; אל ('div');</pre> <p>אם אתה <strong>מעדיפים להשתמש בתחביר ES6 החדש</strong>, אתה יכול גם לעשות את זה ככה:</p> <pre name="code"> const createElement: el = wp.element; אל ('div');</pre> <p>אנחנו יכולים גם <strong>הוסף את תכונות האלמנט</strong> כמו ה <code>מעמד</code> שם או <code>id</code> על הפרמטר השני כדלקמן:</p> <pre name="code"> var el = wp.element.createElement; אל ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>ה <code>div</code> כי יצרנו לא היה הגיוני ללא התוכן. אנחנו יכולים <strong>הוסף את התוכן בארגומנט של הפרמטר השלישי</strong>You</p> <pre name="code"> var el = wp.element.createElement; אל '(p', '' class ':' series-html5 ',' id ':' series-html-post-id-001 ',' מאמר זה הוא חלק מסדרת הדרכות HTML5 / CSS3 שלנו ' כדי לעזור לך להיות מעצב טוב יותר ו / או מפתח.לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה ');</pre> <h4><code>wp.components</code></h4> <p>ה <code>wp.components</code> מכילים אוסף של, כפי שהשם מרמז, מרכיבי גוטנברג. רכיבים אלה מבחינה טכנית הם רכיבים מותאמים אישית React הכוללים את לחצן, Popover, Spinner, Tooltip, וכן חבורה של אחרים. אנחנו יכולים <strong>לעשות שימוש חוזר במרכיבים אלו בבלוק שלנו</strong>. בדוגמה הבאה, אנו מוסיפים רכיב כפתור.</p> <pre name="code"> var Button = wp.components.Button; el (לחצן, 'class': 'download-button',, 'הורדה');</pre> <h4>תכונות</h4> <p>המאפיינים הם הדרך לאחסן את הנתונים בבלוק שלנו, נתונים אלה יכולים להיות כמו התוכן, הצבעים, יישור, כתובת האתר, וכו 'אנחנו יכולים לקבל את המאפיינים מן הנכסים עברו על <code>ערוך ()</code> , כדלקמן:</p> <pre name="code"> עריכה: פונקציה (פרופס) var content = props.attributes.seriesContent; חזרה אל ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', תוכן); </pre> <p>כדי לעדכן את התכונות, אנו משתמשים <code>setAttributes ()</code> פונקציה. בדרך כלל נשנה את התוכן בפעולה מסוימת, כגון בעת ​​לחיצה על לחצן, קלט מלא, אפשרות נבחרת וכו '. בדוגמה הבאה, אנו משתמשים בה כדי להוסיף <strong>fallback</strong> תוכן של הבלוק שלנו למקרה שמשהו בלתי צפוי קרה לנו <code>סדרת</code> תכונה.</p> <pre name="code"> עריכה: פונקציה (props) if (typeof props.attributes.seriesContent === 'undefined' || props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! הנה תוכן החזרה.' ) תוכן var = props.attributes.seriesContent; [אל '(' div ', ' class ':' series-html5 ',' id ':' series-html-post-id-001 ', תוכן),];  </pre> <h4>שמירת הבלוק</h4> <p>ה <code>לשמור()</code> פונקציה דומה <code>ערוך ()</code>, למעט זה מגדיר את התוכן של הבלוק שלנו כדי לשמור על מסד הנתונים לכתוב. שמירת תוכן הבלוק היא פשוטה למדי, כפי שניתן לראות להלן:</p> <pre name="code"> שמור: פונקציה (props) אם (! props ||! props.attributes.seriesContent) return;  var content = props.attributes.seriesContent; [אל '(' div ', ' class ':' series-html5 ',' id ':' series-html-post-id-001 ', תוכן),];  </pre> <h3>מה הלאה?</h3> <p>גוטנברג ישנה את המערכת האקולוגית של וורדפרס לטובה (או אולי אף גרוע יותר). זה מאפשר למפתחים <strong>לאמץ דרך חדשה של פיתוח וורדפרס plugins וערכות נושא</strong>. גוטנברג הוא רק התחלה. בקרוב “לחסום” פרדיגמה יורחב לתחומים אחרים של וורדפרס כגון APIs הגדרות ו יישומונים.</p> <p>למד JavaScript עמוק; זוהי הדרך היחידה להיכנס גוטנברג ולהישאר רלוונטיים לעתיד בתעשיית וורדפרס. אם אתה כבר מכיר את יסודות JavaScript, את quirks, את הפונקציות, את הכלים, את הסחורה ואת רע, אני בטוח שאתה תקבל עד מהירות עם גוטנברג.</p> <p>כאמור, גוטנברג חושף שפע של ממשקי API, מספיק כדי לעשות כמעט כל דבר לבלוק שלך. אתה יכול לבחור אם <strong>קוד הבלוק שלך עם JavaScript רגיל הישן, JavaScript עם תחביר ES6, תגובה, או אפילו Vue</strong>.</p> <h4>רעיונות והשראות</h4> <p>יצרתי בלוק גוטנברג מאוד (מאוד) פשוט שניתן למצוא במאגר של חשבון Github שלנו. יתר על כן, אני גם להרכיב מספר מאגרים מאיפה אתה יכול להניע השראה על בניית בלוק מורכב יותר.</p> <ul><li>Gutenblocks - אוסף של בלוקים על ידי Mathieu וייט נכתב ב- JavaScript עם תחביר ES5</li> <li>Jetpack Gutenblocks פרויקט - אוסף של בלוקים ארוזות Jetpack</li> <li>רשימה של דוגמאות של יישום Gutenberg כולל עם Vue.js</li> </ul><h3>הפניה נוספת</h3> <ul><li>מאגר רשמי של גוטנברג</li> <li>גוטנברג</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">לפרוץ שולחן איקאה חסר לתוך ארון תקשורת רכיב</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 מנהל המשימות - חלק II</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 מנהל המשימות - חלק III</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>