<p class="wp-block-paragraph">Berawal dari rekan saya bernama MD, dia waktu itu sedang posting artikel di websitenya, dan saya lihat kok tampilan editor post nya bagus, saya coba tanya katanya menggunakan Gutenberg.</p> 
 
 
 
<p class="wp-block-paragraph">Saya coba cari-cari referensi mengenai Gutenberg ini, yang katanya fitur baru di wordpress versi terbaru.</p> 
 
 
 
<p class="wp-block-paragraph">Saya pun akhirnya coba install tools Gutenberg ini, biasanya ketika kita sudah menggunakan wordpress versi terbaru, akan ada semacam informasi mengenai Gutenberg dan kita disarankan untuk install.</p> 
 
 
 
<p class="wp-block-paragraph">Install nya cukup mudah hanya dengan klik Install saja :D</p> 
 
 
 
<p style="font-size:20px" class="has-vivid-cyan-blue-color wp-block-paragraph"><strong>Perbedaan Gutenberg Editor dan Classic Editor</strong></p> 
 
 
 
<p class="wp-block-paragraph">Ketika sudah selesai instalasi gutenberg, maka ketika kita klik Add New Post, maka secara default akan menggunakan editor gutenberg ini, namun jangan khawatir, apabila masih ingin menggunakan editor clasic versi lama, klik <em>All Posts</em>, nanti dibagian atas bisa dipilih ingin menggunakan editor yang mana.</p> 
 
 
 
<div class="wp-block-image"><figure class="aligncenter is-resized"><img data-attachment-id="756" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/addnew/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/addnew.png?fit=201%2C100&;ssl=1" data-orig-size="201,100" data-comments-opened="1" data-image-title="addnew" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/addnew.png?fit=201%2C100&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/addnew.png" class="wp-image-756" width="221" height="110"/><figcaption>Add New</figcaption></figure></div> 
 
 
 
<p class="wp-block-paragraph">Nanti ketika sudah di klik <em>Editor gutenberg</em>, seperti inilah tampilan editor gutenberg.</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="760" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/gutenberg/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/gutenberg.png?fit=1278%2C516&;ssl=1" data-orig-size="1278,516" data-comments-opened="1" data-image-title="gutenberg" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/gutenberg.png?fit=1024%2C413&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/gutenberg.png" alt="" class="wp-image-760"/><figcaption>Editor Gutenberg</figcaption></figure> 
 
 
 
<p class="wp-block-paragraph">Apabila dibandingkan dengan Editor Classic maka akan terlihat sekali perbedaannya.</p> 
 
 
 
<p class="wp-block-paragraph">Ini editor Classic nya</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="764" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/editor-classic/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Editor-Classic.png?fit=1262%2C630&;ssl=1" data-orig-size="1262,630" data-comments-opened="1" data-image-title="Editor Classic" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Editor-Classic.png?fit=1024%2C511&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/Editor-Classic.png" alt="" class="wp-image-764"/></figure> 
 
 
 
<p class="wp-block-paragraph">Perbedaannya sangat terlihat sekali bukan? :D</p> 
 
 
 
<p class="wp-block-paragraph">Pada editor Classic, Form Judul dan Postingan dibuat terpisah, jika di Gutenberg, berada dalam satu form namun dibedakan dengan tulisan Add Title saja. Yang ada tulisan <em>Add Title</em> artinya di tempat itu kita memasukkan judul postingan kita. Kemudian di Enter untuk membuat postingan.</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="767" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/text-gutenberg/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/text-gutenberg.png?fit=995%2C497&;ssl=1" data-orig-size="995,497" data-comments-opened="1" data-image-title="text-gutenberg" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/text-gutenberg.png?fit=995%2C497&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/text-gutenberg.png" alt="" class="wp-image-767"/></figure> 
 
 
 
<p class="wp-block-paragraph">Diatas ini contoh ketika saya membuat postingan menggunakan gutenberg. Posisi toolbar pada gutenberg muncul per paragraf kalau kita ingin hanya paragraf itu saja yang di modify.</p> 
 
 
 
<p class="wp-block-paragraph">Jika di clasic editor, posisi toolbar selalu dibagian atas form postingan.</p> 
 
 
 
<p style="font-size:20px" class="has-vivid-cyan-blue-color wp-block-paragraph"><strong>Drag n Drop Paragraf</strong></p> 
 
 
 
<p class="wp-block-paragraph">Pada gutenberg editor juga ada tools bagus, yaitu kita bisa mengubah posisi paragraf satu dengan paragraf lain. Misal ada paragraf yang tertukar, kita bisa langsung melakukan drag n drop saja. Ini contoh paragraf nya</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="768" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/screen-shot-2018-10-18-at-13-41-24/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-13.41.24.png?fit=472%2C183&;ssl=1" data-orig-size="472,183" data-comments-opened="1" data-image-title="Screen Shot 2018-10-18 at 13.41.24" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-13.41.24.png?fit=472%2C183&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-13.41.24.png" alt="" class="wp-image-768"/></figure> 
 
 
 
<p class="wp-block-paragraph">Kita ingin memindahkan posisi paragraf 2 menjadi posisi paragraf 1, bisa dengan melakukan drag n drop dengan klik dan tahan di tanda yang saya beri panah merah dibawah ini.</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="769" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/dragdrop/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/dragdrop.png?fit=690%2C178&;ssl=1" data-orig-size="690,178" data-comments-opened="1" data-image-title="dragdrop" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/dragdrop.png?fit=690%2C178&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/dragdrop.png" alt="" class="wp-image-769"/></figure> 
 
 
 
<p class="wp-block-paragraph">Mudah bukan cara diatas bila dibandingkan dengan editor classic? :D</p> 
 
 
 
<p style="font-size:20px" class="has-vivid-cyan-blue-color wp-block-paragraph"><strong>Memasukkan Gambar ke dalam Postingan</strong></p> 
 
 
 
<p class="wp-block-paragraph">Pada gutenberg, untuk memasukkan gambar ke postingan sangat berbeda caranya bila dibandingkan dengan classic editor.</p> 
 
 
 
<p class="wp-block-paragraph">Untuk memasukkan gambar, kita tinggal klik <em>insert image</em> seperti contoh dibawah ini</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="772" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/insertgambar/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/insertgambar.png?fit=642%2C208&;ssl=1" data-orig-size="642,208" data-comments-opened="1" data-image-title="insertgambar" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/insertgambar.png?fit=642%2C208&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/insertgambar.png" alt="" class="wp-image-772"/></figure> 
 
 
 
<p class="wp-block-paragraph">Kemudian klik <em>Upload</em> atau ambil dari <em>Media Galery</em> jika ingin mengambil gambar yang sudah ada sebelumnya.</p> 
 
 
 
<figure class="wp-block-image"><img data-attachment-id="773" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/screen-shot-2018-10-18-at-14-03-09/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-14.03.09.png?fit=653%2C282&;ssl=1" data-orig-size="653,282" data-comments-opened="1" data-image-title="Screen Shot 2018-10-18 at 14.03.09" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-14.03.09.png?fit=653%2C282&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-14.03.09.png" alt="" class="wp-image-773"/></figure> 
 
 
 
<p class="wp-block-paragraph">Modifikasi Style Tulisan</p> 
 
 
 
<p class="wp-block-paragraph">Di gutenberg ini, modifikasi style tulisan bisa dengan mudah dilakukan, misal mengubah ukuran font, memberi warna font dll. Toolbar tersebut ada sebelah kanan.</p> 
 
 
 
<div class="wp-block-image"><figure class="alignleft is-resized"><img data-attachment-id="776" data-permalink="https://rizkypratama.id/blog/2018/10/18/pertama-kali-menggunakan-gutenberg-di-wordpress/stylefont/" data-orig-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/stylefont.png?fit=279%2C626&;ssl=1" data-orig-size="279,626" data-comments-opened="1" data-image-title="stylefont" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/rizkypratama.id/wp-content/uploads/2018/10/stylefont.png?fit=279%2C626&;ssl=1" src="https://rizkypratama.id/wp-content/uploads/2018/10/stylefont.png" class="wp-image-776" width="279" height="626"/></figure></div> 
 
 
 
<p class="wp-block-paragraph">Pada toolbar font style ini kita bisa ubah font secara detail, mulai dari standar seperti S (Small), M (Medium) dll, kemudian bisa dicustom juga dengan memasukkan ukuran sizenya.</p> 
 
 
 
<p class="wp-block-paragraph">Ubah warna font juga bisa dilakukan dibagian Color Setting, kemudian Text Color.</p> 
 
 
 
<p class="wp-block-paragraph">Background nya pun juga bisa diubah per paragraf.</p> 
 
 
 
<p class="wp-block-paragraph">Jadi mudah bukan? :D</p> 
 
 
 
<p class="wp-block-paragraph"></p> 
 
 
 
<p class="wp-block-paragraph"></p> 
 
 
 
<p class="wp-block-paragraph"></p> 
 
 
 
<p class="wp-block-paragraph"></p> 
 
 
 
<p class="wp-block-paragraph">Ohh yaa 1 lagi, postingan ini saya tulis dengan menggunakan Editor Gutenberg, dan ternyata sangat mudah digunakan :D</p> 
 
 
 
<p class="wp-block-paragraph">Mungkin cukup sekian review singkat mengenai gutenberg ini, jika ada informasi terbaru akan diupdate kembali di blog ini</p> 
 
 
 
<p class="wp-block-paragraph">Semoga bermanfaat.</p> 
<div class="clearfix"></div>
Dalam pengelolaan mail server, terkadang kita tidak ingin email dikirim langsung ke server tujuan. Ada…
Pada bulan April 2026 lalu, Ubuntu telah release versi terbaru yaitu Ubuntu 26.04 LTS, sehingga…
Ada satu hal yang ngga akan pernah benar-benar diajarkan kepada kita, yaitu bagaimana cara melanjutkan…
Bermula ketika saya melakukan suatu konfigurasi pada server, saya menerapkan beberapa rule untuk block port,…
Beberapa hari terakhir saya memutuskan untuk upgrade seluruh server Nginx ke versi terbaru setelah muncul…
Beberapa waktu lalu saya ada melakukan migrasi dan upgrade sistem email server Zimbra di salah…