Gutenberg WordPress Hakkında Bilmeniz Gerekenler 'Son Editör
Gutenberg WordPress için tamamen yeni bir editördür. Geçerli TinyMCE destekli düzenleyiciyi değiştirin. WordPress'i tartışmalı bir şekilde birçok yönden değiştirecek ve hem düzenli son kullanıcıları hem de geliştiricileri, özellikle de WordPress üzerinde çalışmak için editör ekranına bağlı olanları etkileyecek iddialı bir proje. İşte göründüğü gibi.
Gutenberg ayrıca WordPress’te yeni bir paradigma tanıtır. “Blok”.
“Blok” tanımlamak için kullanılan soyut terim biçimlendirme birimleri bir web sayfasının içeriği veya düzeninden oluşur. Bu fikir, bugün WordPress’te neyin elde edildiğine ilişkin kavramları birleştiriyor. kısa kodlar, özel HTML ve keşfi tek bir tutarlı API'ye yerleştirin ve kullanıcı deneyimi.
Projenin Kurulması
Gutenberg’in Tepki’nin üstüne kurulduğunu bilerek, bazı geliştiriciler ... Giriş seviyesi geliştiricileri için Gutenberg'i geliştirmek için bariyer çok yüksek.
React.js'i kurmak, henüz yeni başladıysanız oldukça zaman alıcı ve kafa karıştırıcı olabilir. En azından JSX trafosuna, Babel'e ihtiyacınız olacak, kodunuza bağlı olarak bazı Babel eklentilerine ve Webpack, Rollup veya Parsel gibi bir Bundler'a ihtiyacınız olabilir..
neyse ki, WordPress topluluğundaki bazı insanlar hızlandı Gutenberg'i herkesin izleyebileceği kadar kolay geliştirmeye çalışıyorum. Bugün, bir Gutenberg kazanını üretecek bir aracımız var. hemen kod yazmaya başlayabiliriz araçlar ve konfigürasyonlarla uyumsuzluk yapmak yerine.
Guten Block oluştur
oluşturmak-guten blok Ahmad Awais'in başlattığı bir projedir. Bu bir sıfır konfigürasyonlu araç takımı (# 0CJS) React, Webpack, ESNext, Babel, ESLint ve Sass gibi bazı modern istiflere sahip olan Gutenberg bloğunu geliştirmenizi sağlayacaktır. Create Guten Block ile başlamak için talimatları takip edin.
ES5'i kullanma (ECMAScript 5)
Tüm bu araçları kullanarak basit bir oluşturma “Selam Dünya” blok çok fazla görünebilir. Yığınlarınızı yağsız tutmak isterseniz, aşina olabileceğiniz düz bir ECASAScript 5 kullanarak bir Gutenberg bloğu geliştirebilirsiniz. Eğer varsa Bilgisayarınızda yüklü WP-CLI 1.5.0, sadece koşabilirsin…
wp iskele bloğu[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--Kuvvet]</pre> <p>… İçin <strong>eklenti veya tema için Gutenberg bloğu kazan plakasını oluşturun</strong>. Bu yaklaşım, özellikle, Gutenberg döneminden önce geliştirdiğiniz mevcut eklentiler ve temalar için daha duyarlıdır..</p> <p>Gutenberg bloklarını yerleştirmek için yeni bir eklenti oluşturmak yerine, blokları eklentilerinize veya temalarınıza entegre etmek isteyebilirsiniz. Ve bu eğitimin herkes için izlemesi kolay hale getirmek için, <strong>ECMAScript 5'i WP-CLI ile birlikte kullanacağız</strong>.</p> <h4>Yeni Bir Blok Kaydetmek</h4> <p>Gutenberg şu anda bir eklenti olarak geliştirildi ve takım hazır olduğunu hissettiğinde WordPress 5.0 ile birleştirilecek. Bu nedenle, şu an için <strong>Eklentiler sayfasında <code>wp-admin</code></strong>. Yükledikten ve etkinleştirdikten sonra, Windows makinedeyseniz Terminalde veya Komut İstemi'nde aşağıdaki komutu çalıştırın.</p> <pre name="code"> wp iskele blok serisi --title = "HTML5 Serisi" --theme</pre> <p>Bu komut şu anda aktif olan temanın bir Blokunu oluşturacaktır. Bloğumuz aşağıdaki dosyalardan oluşacaktır:</p> <pre name="code"> . â ?? a ?? â¢Â ?? a ?? â¢A ?? a ?? seri â ?? Â'Ã' Ã' â ?? a ?? â¢Â ?? a ?? â¢A ?? a ?? block.js â ?? Â'Ã' Ã' â ?? a ?? â¢Â ?? a ?? â¢A ?? a ?? editor.css â ?? Â'Ã' Ã' â ?? a ?? â¢Â ?? a ?? â¢A ?? a ?? style.css â ?? a ?? â¢Â ?? a ?? â¢A ?? a ?? series.php </pre> <p>Bloklarımızın ana dosyasını, <code>functions.php</code> Temamızın:</p> <pre name="code"> if (function_exists ('register_block_type'))) get_template_directory () gerektirir. '/Blocks/series.php'; </pre> <p>Dosya yükleme koşullu içine alındığına dikkat edin. Bu garanti eder <strong>Bloğumuzun yalnızca Gutenberg olduğunda yüklenen önceki WordPress sürümüyle uyumluluğu</strong>. Bloğumuz şimdi Gutenberg arayüzünde mevcut olmalı.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Bloğu yerleştirdiğimizde nasıl görünüyor?.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg API'leri</h3> <p>Gutenberg, yeni bir Block'a kaydolmak için iki API kümesi sunar. Eğer bakarsak <code>series.php</code>, yeni Bloğumuzu kaydeden aşağıdaki kodu bulacağız. O da <strong>stil sayfasını ve JavaScripts'i ön tarafa ve düzenleyiciye yükler</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', dizi ('editor_script' => 'seri-blok-editörü', 'editor_style' => 'seri-blok-editörü', 'stil' => 'seri-blok',));</pre> <p>Yukarıda gördüğümüz gibi, Bloğumuzun adı <code>twentyseventeen / seri</code>, diğer eklentilerin getirdiği diğer bloklarla çarpışmayı önlemek için, Blok adı benzersiz ve ad alanlı olmalıdır..</p> <p>ayrıca, <strong>Gutenberg, etkileşim için bir dizi yeni JavaScript API'si sağlar. “Blok” arayüzey</strong> editörde. API oldukça fazla olduğundan, basit ama işleyen bir Gutenberg Bloğu edinmek için bilmeniz gerektiğini düşündüğüm bazı özelliklere odaklanacağız..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>İlk önce, içine bakıyor olacağız <code>wp.blocks.registerBlockType</code>. Bu işlev <strong>yeni bir kayıt ol “Blok” Gutenberg editörüne</strong>. İki argüman gerektirir. İlk argüman, kayıtlara kayıtlı ismi takip etmesi gereken Blok ismidir. <code>register_block_type</code> PHP tarafında işlev. İkinci argüman bir <strong>Block özelliklerini tanımlayan nesne</strong> Block arabirimini oluşturmak için başlık, kategori ve birkaç işlev gibi.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), kategori: 'widgets', anahtar kelimeler: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Bu işlev, içindeki öğeyi oluşturmanıza olanak sağlar. “Blok” yazı editöründe. <code>wp.element.createElement</code> fonksiyon temel olarak Tepki'nin bir soyutlamasıdır <code>createElement ()</code> Böylece, aynı argüman kümesini kabul eder. İlk argüman öğenin türünü alır, örneğin bir paragraf, bir <code>karış</code>, veya bir <code>div</code> Aşağıda gösterildiği gibi:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>Yapabiliriz <strong>işlevi değişkene dönüştürmek</strong> bu yüzden yazmak daha kısa. Örneğin:</p> <pre name="code"> var el = wp.element.createElement; El ( 'div');</pre> <p>Eğer sen <strong>yeni ES6 sözdizimini kullanmayı tercih</strong>, ayrıca bu şekilde yapabilirsiniz:</p> <pre name="code"> const createElement: el = wp.element; El ( 'div');</pre> <p>Biz de <strong>eleman özelliklerini ekle</strong> benzeri <code>sınıf</code> isim veya <code>İD</code> ikinci parametrede aşağıdaki gibi:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'sınıf': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p> <code>div</code> Yarattığımız içerik olmadan anlam ifade etmeyecek. Yapabiliriz <strong>üçüncü parametrenin argümanına içerik ekleyin</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Bu makale "HTML5 / CSS3 Dersleri serisinin" bir parçası - adanmış daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için aynı seriden daha fazla makale görmek için burayı tıklayın ');</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> Gutenberg bileşenlerinin adından da anlaşılacağı gibi bir koleksiyonu içerir. Bu bileşenler teknik olarak, Button, Popover, Spinner, Tooltip ve diğerleri gibi React özel bileşenleridir. Yapabiliriz <strong>bu bileşenleri kendi Bloğumuza tekrar kullanma</strong>. Aşağıdaki örnekte, bir düğme bileşeni ekliyoruz.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'indirme düğmesi',, 'İndirme');</pre> <h4>Öznitellikler</h4> <p>Öznitelikler, verileri Bloğumuzda saklamanın yoludur, bu veriler içerik, renkler, hizalamalar, URL vb. Gibi olabilir. <code>Düzenle()</code> işlevi, aşağıdaki gibi:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; dönüş el ('div', 'sınıf': 'series-html5', 'id': 'seri-html-post-id-001', içerik); </pre> <p>Öznitelikleri güncellemek için, <code>SetAttributes ()</code> işlevi. Genellikle, bir düğmeye tıklandığında, bir girişin doldurulmasında, bir seçeneğin seçilmesinde, vb. Gibi belirli eylemlerdeki içeriği değiştiririz. Aşağıdaki örnekte, onu eklemek için kullanıyoruz. <strong>geri çekil</strong> Bloğumuzun içeriği, beklenmedik bir şeyin olması durumunda <code>seriesContent</code> nitelik.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Merhaba Dünya! İşte geri dönüş içeriği.') ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', içerik),]; </pre> <h4>Bloğu Kaydetme</h4> <p> <code>kayıt etmek()</code> işlevi, benzer şekilde çalışır <code>Düzenle()</code>, ancak post veritabanına kaydetmek için Bloğumuzun içeriğini tanımlar. Blok içeriğini kaydetmek, aşağıda gördüğümüz gibi oldukça kolaydır:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', içerik),]; </pre> <h3>Sıradaki ne?</h3> <p>Gutenberg, WordPress ekosistemini daha iyi (veya muhtemelen daha kötüsü) için değiştirecektir. Geliştiricilere sağlar <strong>WordPress eklentileri ve temaları geliştirmek için yeni bir yol benimsemek</strong>. Gutenberg sadece bir başlangıç. Yakında “Blok” Paradigma, Ayarlar API'leri ve Pencere Öğeleri gibi diğer WordPress alanlarına genişletilecektir..</p> <p>JavaScript'i Derinden Öğrenin; Gutenberg'e girmenin ve WordPress endüstrisindeki geleceğe bağlı kalmanın tek yolu bu. Eğer JavaScript'in temellerini, tuhaflıklarını, işlevlerini, araçlarını, mallarını ve kötülerini zaten biliyorsanız, Gutenberg ile hız kazanacağınızdan eminim..</p> <p>Bahsedildiği gibi, Gutenberg, Bloğunuza neredeyse her şeyi yapmak için yeterli miktarda API kullanıyor. Olup olmadığını seçebilirsiniz <strong>Bloğunuzu eski bir JavaScript, ES6 sözdizimine sahip JavaScript, React ve hatta Vue ile kodlayın</strong>.</p> <h4>Fikirler ve İlhamlar</h4> <p>Github hesabımızın havuzunda bulabileceğiniz çok (çok) basit bir Gutenberg Bloğu oluşturdum. Dahası, daha karmaşık bir Blok inşa etme konusunda ilham alabileceğiniz birkaç havuz oluşturdum..</p> <ul><li>Gutenblocks - ES5 Sözdizimi ile JavaScript'te yazılmış Mathieu Viet tarafından bir Blok koleksiyonu</li> <li>Jetpack Gutenblocks Projesi - Jetpack'te birleştirilmiş bir Blok koleksiyonu</li> <li>Vue.js de dahil olmak üzere Gutenberg Uygulama Örneklerinin Bir Listesi</li> </ul><h3>Ek Referans</h3> <ul><li>Gutenberg Resmi Depo</li> <li>Gutenberg El Kitabı</li> </ul> <div class="rek-block"> <!-- adplace zxnt --> <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="580" data-zxh="400" data-overlay="false" > <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script> </ins> <!--end adplace zxnt --> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <!-- adplace zxnt --> <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="250" data-overlay="false" > <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script> </ins> <!--end adplace zxnt --> </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">Bir Bileşen Rafına IKEA Eksikliği Tablosunu Hackleyin</a> </div> </div> <div class="rek-block"> <!-- adplace zxnt --> <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="600" data-overlay="false" > <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script> </ins> <!--end adplace zxnt --> </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">Özel Kontrol Arabirimi Oluşturmak için Eski Bir Klavyeyi Kesmek</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 Görev Yöneticisi Kılavuzu - Bölüm II</a> </div> </div> <div class="rek-block"> <!-- adplace zxnt --> <ins data-zxname="zx-adnet" data-zxadslot="ZX-BGCRN" data-zxw="300" data-zxh="600" data-overlay="false" > <script type="text/javascript" async src="https://cdn.zx-adnet.com/adx/bgcrn_19091901.js"></script> </ins> <!--end adplace zxnt --> </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">Sonraki makale</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">Ultra Parlak Premium Bire 10 Dolarlık El Feneri Hack</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Önceki makale</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 Görev Yöneticisi Kılavuzu - Bölüm 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.phhsnews.com"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://th.phhsnews.com/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://tr.phhsnews.com/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.phhsnews.com/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.phhsnews.com/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="/">PHHSNEWS</a> </div> <div class="col-md-9"> Web geliştirme konusunda faydalı bilgiler ve ipuçları. Programlama, web tasarımı, CSS, HTML, JAVASCRIPT. WINDOWS'u yapılandırın ve yeniden kurun. Sıfırdan web siteleri ve uygulamalar oluşturma. </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>