Pagrindinis » WordPress » Gutenbergo viskas, ką jums reikia žinoti apie „WordPress“ naujausią redaktorių

    Gutenbergo viskas, ką jums reikia žinoti apie „WordPress“ naujausią redaktorių

    Gutenbergas yra naujas „WordPress“ redaktorius pakeisti dabartinį „TinyMCE“ valdomą redaktorių. Tai plataus užmojo projektas, kuris, be abejo, pakeis „WordPress“ daugeliu būdų ir paveiks tiek reguliarius galutinius vartotojus, tiek kūrėjus, ypač tuos, kurie priklauso nuo redaktoriaus ekrano darbui „WordPress“. Štai kaip atrodo.

    Akivaizdu, kad jis įkvėptas vidutinio redaktoriaus vartotojo sąsajos.

    Gutenbergas taip pat įveda naują „WordPress“ paradigmą “Blokuoti”.

    “Blokuoti” yra abstraktus terminas, naudojamas apibūdinti žymėjimo vienetai sudarytos iš tinklalapio turinio ar išdėstymo. Idėja apjungia sąvokas, kurias „WordPress“ šiandien pasiekėme trumpieji kodai, pasirinktinis HTML ir įterpimas į vieną nuoseklų API ir naudotojų patirtį.

    Projekto parengimas

    Žinant faktą, kad Gutenbergas yra pastatytas ant React, kai kurie kūrėjai nerimauja, kad kliūtis yra per didelė pradinio lygio kūrėjams Gutenbergo vystymui.

    React.js nustatymas gali būti gana ilgas ir painus, jei tik pradėsite jį pradėti. Jums reikės bent jau „JSX“ transformatoriaus, „Babel“, priklausomai nuo jūsų kodo, jums gali prireikti kai kurių „Babel“ papildinių ir „Bundler“, pvz., „Webpack“, „Rollup“ arba „Parcel“.

    Laimei, kai kurie žmonės „WordPress“ bendruomenėje paspartino ir stengiasi, kad Gutenbergo vystymasis būtų kuo paprastesnis visiems. Šiandien turime įrankį, kuris generuos „Gutenbergo“ katilinę mes galime pradėti rašyti kodą iš karto vietoj to, kad dirbtumėte su įrankiais ir konfigūracijomis.

    Sukurkite „Guten Block“

    The sukurti-guten-block yra Ahmad Awais inicijuotas projektas. Tai yra nulinės konfigūracijos įrankių rinkinys (# 0CJS), kuri leis jums sukurti Gutenbergo bloką su keliais šiuolaikiniais stelažais, įskaitant React, Webpack, ESNext, Babel, ESLint ir Sass. Vadovaukitės instrukcijomis, kad pradėtumėte kurti „Guten Block“.

    Naudojant ES5 (ECMAScript 5)

    Naudojant visus šiuos įrankius sukurkite paprastą “Labas pasauli” blokas gali atrodyti per daug. Jei norite laikyti savo kaminus, galite iš tikrųjų sukurti „Gutenbergo“ bloką naudodami paprastą „gerą“ „ECMAScript 5“, kurį jau turėtumėte žinoti. Jei turite WP-CLI 1.5.0 įdiegtas jūsų kompiuteryje, galite tiesiog paleisti ...

     wp pastolių blokas  [- titras =] [- dashicon =<dashicon>] [- kategorija =<category>] [--theme] [- plugin =<plugin>] [- jėga]</pre> <p>… Į <strong>generuoti „Gutenbergo“ bloką į savo papildinį ar temą</strong>. Šis požiūris yra protingesnis, ypač esamiems papildiniams ir temoms, kurias sukūrėte prieš Gutenbergo erą.</p> <p>Vietoj to, kad būtų sukurtas naujas įskiepis, kad tilptų Gutenbergo blokai, galbūt norėsite integruoti blokus į savo įskiepius ar temas. Ir kad šią pamoką būtų lengva sekti visiems, <strong>naudosime ECMAScript 5 su WP-CLI</strong>.</p> <h4>Naujo bloko registravimas</h4> <p>„Gutenberg“ šiuo metu yra sukurtas kaip įskiepis ir bus sujungtas su „WordPress 5.0“, kai komanda jaučiasi pasiruošusi. Taigi, šiuo metu jums reikės ją įdiegti iš <strong>Įskiepių puslapis <code>wp-admin</code></strong>. Įdiegę ir suaktyvinę, paleiskite šią komandą terminale arba komandų eilutėje, jei naudojate „Windows“ įrenginį.</p> <pre name="code"> wp pastolių blokų serija - title = "HTML5 serija" - tema</pre> <p>Ši komanda generuoja bloką šiuo metu aktyviai temai. Mūsų bloką sudarys šie failai:</p> <pre name="code"> . âÂ?¢Â?¢Â? serija â        âÂ?¢Â?¢Â? block.js â        âÂ?¢Â?¢Â? editor.css â        âÂ?¢Â?¢Â? style.css âÂ?¢Â?¢Â? series.php </pre> <p>Įkelkime pagrindinį mūsų blokų failą <code>funkcijos.php</code> iš mūsų temos:</p> <pre name="code"> jei (function_exists ('register_block_type')) reikia get_template_directory (). „/blocks/series.php“;  </pre> <p>Atkreipkite dėmesį, kad pridėjome failo įkėlimą su sąlyga. Tai užtikrina <strong>suderinamumas su ankstesne „WordPress“ versija, kad mūsų blokas pakrautas tik tada, kai yra „Gutenberg“</strong>. Dabar mūsų blokas turėtų būti prieinamas „Gutenberg“ sąsajoje.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Tai, kaip atrodo, kai įterpiame bloką.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenbergo API</h3> <p>„Gutenberg“ pristato du API rinkinius naujam blokui registruoti. Jei pažvelgsime į <code>series.php</code>, mes surasime šį kodą, kuris registruoja mūsų naują bloką. Taip pat <strong>įkelia stilių lentelę ir „JavaScripts“ į priekį ir redaktorių</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', masyvas ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Kaip matome aukščiau, mūsų blokas yra pavadintas <code>dvidešimt septyni / serija</code>, Bloko pavadinimas turi būti unikalus ir pavadintas, kad būtų išvengta susidūrimo su kitais blokais, kuriuos pateikia kiti įskiepiai.</p> <p>Be to, <strong>„Gutenberg“ teikia naujų „JavaScript“ API sąsajų su „ “Blokuoti” sąsaja</strong> redaktoriuje. Kadangi API yra gana gausu, mes sutelksime dėmesį į kai kurias specifikas, kurios, manau, turėtumėte žinoti, kad gautumėte paprastą, tačiau veikiantį „Gutenberg“ bloką.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Pirma, mes ieškosime <code>wp.blocks.registerBlockType</code>. Ši funkcija naudojama <strong>užregistruokite naują “Blokuoti” Gutenbergo redaktoriui</strong>. Tam reikia dviejų argumentų. Pirmasis argumentas yra Blokų pavadinimas, kuris turėtų būti pažymėtas <code>register_block_type</code> funkcija PHP pusėje. Antrasis argumentas yra <strong>Objektas, apibrėžiantis Blokavimo ypatybes</strong> kaip antraštė, kategorija ir pora funkcijų, skirtų „Block“ sąsajai.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType („twentyseventeen / series“, pavadinimas: __ („HTML5 Series“), kategorija: „valdikliai“, raktiniai žodžiai: ['html'], redaguoti: funkcija (rekvizitai) , išsaugoti: funkcija (rekvizitai)  ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ši funkcija leidžia sukurti elementą “Blokuoti” pašto redaktoriuje. The <code>wp.element.createElement</code> funkcija iš esmės yra reakcijos ištrauka <code>createElement ()</code> todėl ji priima tuos pačius argumentus. Pirmasis argumentas apima elemento tipą, pavyzdžiui, pastraipą, a <code>span</code>, arba a <code>div</code> kaip parodyta žemiau:</p> <pre name="code">wp.element.createElement („div“);</pre> <p>Mes galime <strong>Pakeisti funkciją į kintamąjį</strong> todėl trumpesnis rašymas. Pavyzdžiui:</p> <pre name="code"> var el = wp.element.createElement; el („div“);</pre> <p>Jei tu <strong>pirmenybę teikia naujai ES6 sintaksei</strong>, taip pat galite tai padaryti:</p> <pre name="code"> const createElement: el = wp.element; el („div“);</pre> <p>Taip pat galime <strong>pridėti elemento atributus</strong> toks kaip <code>klasė</code> pavadinimas arba <code>ID</code> antrojo parametro:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'));</pre> <p>The <code>div</code> mes nesukūrome prasmės be turinio. Mes galime <strong>pridėti turinį trečiojo parametro argumentu</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001'), 'Šis straipsnis yra mūsų "HTML5 / CSS3 vadovų serijos" dalis - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Spauskite čia norėdami pamatyti daugiau tos pačios serijos straipsnių “);</pre> <h4><code>wp.components</code></h4> <p>The <code>wp.components</code> jame yra „Gutenbergo“ komponentų rinkinys, kaip rodo pats pavadinimas. Šie komponentai techniškai yra React custom components, kurie apima mygtuką, Popover, Spinner, Tooltip ir kitus krūva. Mes galime <strong>pakartotinai naudokite šiuos komponentus į savo bloką</strong>. Toliau pateiktame pavyzdyje pridedame mygtuko komponentą.</p> <pre name="code"> var Button = wp.components.Button; el (mygtukas, 'class': 'download-button', ►, 'Download');</pre> <h4>Atributai</h4> <p>Atributai yra būdas saugoti duomenis mūsų bloke, šie duomenys gali būti tokie, kaip turinys, spalvos, išlyginimai, URL ir tt Mes galime gauti atributus iš „Properties“, perduotų <code>Redaguoti()</code> funkcija:</p> <pre name="code"> redaguoti: funkcija (rekvizitai) var content = props.attributes.seriesContent; grįžti el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys); </pre> <p>Norėdami atnaujinti atributus, mes naudojame <code>setAttributes ()</code> funkcija. Paprastai tam tikrą veiksmą pakeisime, pvz., Paspaudus mygtuką, įvestis užpildoma, pasirinkta parinktis ir pan. Toliau pateiktame pavyzdyje mes naudojame jį pridėti <strong>atsitraukti</strong> mūsų bloko turinys, jei kažkas įvyko netikėtai <code>seriesContent</code> Atributas.</p> <pre name="code"> redaguoti: funkcija (rekvizitai) if (tipai props.attributes.seriesContent === 'neapibrėžta' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: „Hello World! Čia yra atsarginis turinys.“) ) var content = props.attributes.seriesContent; grįžti [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys),];  </pre> <h4>Bloko išsaugojimas</h4> <p>The <code>sutaupyti()</code> funkcija veikia panašiai kaip <code>Redaguoti()</code>, išskyrus tai, kad jis apibrėžia mūsų „Block“ turinį, kad išsaugotumėte į pašto duomenų bazę. „Block Block“ turinio išsaugojimas yra gana paprastas, kaip matome toliau:</p> <pre name="code"> išsaugoti: funkcija (rekvizitai) if (! rekvizitai ||! props.attributes.seriesContent) grįžti;  var content = props.attributes.seriesContent; grįžti [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001'), turinys),];  </pre> <h3>Kas toliau?</h3> <p>Gutenbergas pakeis „WordPress“ ekosistemą geresnei (arba galbūt blogiau). Tai leidžia kūrėjams <strong>priimti naują „WordPress“ papildinių ir temų kūrimo būdą</strong>. Gutenbergas yra tik pradžia. Netrukus bus “Blokuoti” paradigma bus išplėsta į kitas „WordPress“ sritis, pvz., „API“ API ir valdiklius.</p> <p>Sužinokite „JavaScript“ giliai; tai vienintelis būdas patekti į Gutenbergo ir likti aktualus „WordPress“ pramonės ateičiai. Jei jau esate susipažinę su „JavaScript“ pagrindais, „quirks“, funkcijomis, įrankiais, prekėmis ir „bads“, aš tikrai tikiu, kad gausite greitį su „Gutenberg“.</p> <p>Kaip minėta, Gutenbergas atskleidžia daugybę API, kad galėtų padaryti beveik viską, kas reikalinga jūsų blokui. Galite pasirinkti, ar norite <strong>koduokite savo bloką naudodami seną „JavaScript“, „JavaScript“ su ES6 sintaksė, „React“ arba net „Vue“</strong>.</p> <h4>Idėjos ir įkvėpimai</h4> <p>Sukūriau labai (labai) paprastą „Gutenberg“ bloką, kurį galite rasti mūsų „Github“ paskyros saugykloje. Be to, aš taip pat sudėjau daugybę saugyklų, iš kurių galite įkvėpti kuriant sudėtingesnį bloką.</p> <ul><li>„Gutenblocks“ - „Mathieu Viet“ blokų rinkinys, parašytas „JavaScript“ su ES5 sintaksė</li> <li>„Jetpack Gutenblocks“ projektas - „Jetpack“ komplekto rinkinys</li> <li>Gutenbergo įgyvendinimo pavyzdžių sąrašas, įskaitant „Vue.js“</li> </ul><h3>Tolesnė nuoroda</h3> <ul><li>Gutenbergo oficialus saugykla</li> <li>Gutenbergo vadovas</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">Įkvėpkite „IKEA Lack Table“ į „Component Rack“</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">„Hack“ be senos klaviatūros sukurkite individualią valdymo sąsają</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“ užduočių tvarkyklės vadovas - II dalis</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">Kitas straipsnis</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">Hack $ 10 Žibintuvėlis į „Ultra-Bright Premium“</a> </div>
    				</div>
    			
    			</div>
    
    
    			<div class="col-md-6">
    				
    					<div class="post">
                                <div class="prevnext-title">Ankstesnis straipsnis</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“ užduočių tvarkyklės vadovas - III dalis</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">
    			Naudinga informacija ir interneto svetainių kūrimo patarimai. Programavimas, interneto dizainas, CSS, HTML, JAVASCRIPT. Konfigūruokite ir iš naujo įdiekite „Windows“. Svetainių ir programų kūrimas nuo nulio.
    		</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>