in

WordPress Full Site Editing

wpJakarta – WordPress Full Site Editing. Jika anda “intens” mengikuti sumber berita atau komunitas online tentang WordPress. Sekarang-sekarang ini anda mungkin lebih sering mendengar tentang “WordPress Full Site Editing”. Kenapa juga hal itu lebih sering terdengar saat ini ? Dan banyak pertanyaan yang mungkin muncul di benak kita. Apa sebenarnya yang di maksud WordPress Full Site Editing ? dan apa yang perlu di ketahui tentang WordPress Full Site Editing ? Bagaimana bersiap menghadapi perubahan tentang desain website (WordPress) ? Pertanyaan tersebut, dan banyak lagi pertanyaan lainnya adalah yang akan kita bahas di artikel ini.

Apa Itu WordPress Full Site Editing

Secara konvensional pada struktur WordPress, masing-masing tema, plugin, dan konten editor memiliki fungsi yang berbeda-beda. Tema memberikan logika, struktur (header, footer, konten area dll.), tentunya tema fokus pada tampilan visual situs website. Sedangkan plugin memperluas fungsi inti core WordPress itu sendiri. Dan konten editor (yang sebelumnya adalah plugin klasik editor, dan sekarang blok editor gutenberg) digunakan hanya untuk membuat dan mengelola konten / blog post.

Dengan WordPress full site editing, paradigma (lama) ini akan segera berubah. Blok editor tidak lagi “hanya untuk membuat konten blog post”. Tetapi akan dapat mengambil peran yang lebih luas. Dengan WordPress full site editing, blok editor akan dapat digunakan dan memiliki fungsi untuk membuat header, footer, atau sidebar.

Jadi WordPress full site editing adalah fitur yang memungkinkan kita menggunakan blok gutenberg untuk membuat semua bagian situs website. Kita dapat mendesain header, footer, halaman arsip, dan lainnya secara visual menggunakan editor gutenberg. Sama seperti theme builder.

Artikel WordPress lainnya

Jadwal release WordPress full site editing

Tujuan dari proyek WordPress full site editing adalah untuk memanfaatkan kekuatan model blok Gutenberg bukan hanya untuk membuat konten atau postingan. Dengan kata lain, idenya adalah membuat seluruh situs dapat disesuaikan. Mode pengeditan ini akan memahami struktur situs dan memberikan cara untuk memodifikasi elemen global seperti header dan footer.

https://make.wordpress.org/design/handbook/focuses/full-site-editing/

WordPress full site editing (FSE) masih dalam tahap sangat awal. Implementasinya bahkan belum pada versi beta. Meskipun pada versi beta nanti mungkin akan sangat terbatas pada beberapa pengguna WordPress saja. Dari artikel blog wptavern yang kami kutip, Will Full Site Editing Land in WordPress 5.8? A Decision Is Forthcoming. Beberapa “petinggi” WordPress mengumumkan sebuah roadmap untuk memutuskan apakah WordPress full site editing akan mendarat di WordPress versi 5.8.

Sejujurnya kami tidak tau banyak tentang roadmap project WordPress full site editing. Artikel ini kami tulis karena kami berfikir bahwa ini akan menjadi perubahan besar dalam proses membangun website menggunakan WordPress. Kami juga belum dapat memikirkan apa saja yang akan berubah secara signifikan ataupun perubahan minor pada proses pembuatan website WordPress nantinya jika WordPress full site editing benar-benar sudah di implementasikan.

Meskipun masih bersifat ekperimental, namun anda sudah dapat menggunakannya. Untuk dapat menggunakannya anda harus menginstal plugin Gutenberg dan tema WordPress yang kompatibel dengan WordPress full site editing.

Perlu di catat bahwa, artikel ini lebih kepada opini kami semata berdasarkan WordPress fullsite editing yang akan muncul di kemudian hari. Apabila pada artikel ini terdapat contoh yang kami berikan terkait dengan WordPress full site editing, hal tersebut kami maksudkan hanya untuk memberikan penjelasan konsep semata. Maka jangan anda ikuti dan gunakan dalam lingkup production website WordPress anda.

Artikel, Tips-trik dan Tutorial WooCommerce

Cikal bakal WordPress full site editing

Sejak release WordPress versi 5.0 dimana termasuk di dalamnya adalah blok editor gutenberg yang menggantikan klasik editor. Metode pembuatan konten atau post berubah signifikan. WordPress yang memegang lebih dari 40% populasi website secara global, di mana di dalamnya pasti banyak orang-orang dari kalangan Non developer tentu seperti mendapat kabar baik. Bagaimana tidak proses membuat konten menjadi lebih produktif. Untuk membuat kolom, paragraph dan element lainnya, user hanya perlu memilih dari library blok editor itu sendiri.

Makin kesini tentu blok editor gutenberg semakin ber-evolusi. Begitu juga dengan list library blok yang pasti akan terus bertambah setiap harinya. Wajar saja karena WordPress di dukung oleh jutaan pengembang tema maupun plugin yang setiap hari menelurkan blok-blok baik baru maupun blok yang sudah ada namun dengan gayanya sendiri. Berikut ini adalah istilah core inti terkait dengan WordPress blok editor.

Blok

Anda mungkin sudah memutuskan sejak lama untuk pindah dari klasik editor dan full menggunakan gutenberg atau blok. Pastinya anda juga faham dengan konsep blok. Menggunakan sistem blok editor untuk membuat dan memformat konten, editor berbasis blok memang di rancang untuk membuat tata letak atau layout yang lebih kaya dan fleksibel untuk situs website dan produk digital. Konten dibuat dalam unit blok, dan bukan teks dalam bentuk bebas dengan media yang harus di sisipkan, atau dengan menggunakan shortcode.

Blok memperlakukan Paragraf, Judul, Media, dan Sematan semua sebagai komponen yang ketika dirangkai, membentuk konten yang disimpan di dalam database WordPress. Menggantikan konsep tradisional teks editor dengan media yang di sematkan atau menggunakan kode pendek. Blok editor juga di rancang secara progresif, yang artinya ketika anda barus saja menggunakan blok editor, maka seluruh konten yang sebelumnya di buat dengan klasik editor tidak akan hilang. Perpindahan bisa di lakukan dengan mengkonvert konten lama klasik editor menjadi blok editor.

Blok editor juga menawarkan nilai baru kepada pengguna dengan alat pembuatan visual drag and drop. Komponen yang dapat digunakan kembali (reusable, API dan hooks) untuk memodifikasi dan memperluas editor melalui kustom blok dan pengembangan plugin.

blok statis dan dinamis

Bahwa pada core library blok terdapat blok statis dan dinamis. Blok statis adalah berisi konten yang sudah di ketahui dan bernilai tetap ketika saat disimpan (misalnya, blok paragraf yang berisi teks). Sedangkan blok dinamis berisi konten yang mungkin tidak diketahui pada saat menyimpan posting tetapi ditentukan ketika posting tersebut ditampilkan. Contoh adalah blok “post terbaru” yang mungkin di sematkan pada area hero website atau sidebar. Konten tersebut bersifat dinamis berubah sesuai update terbaru ketika posting ditampilkan.

Blok patern

Pada WordPress versi 5.3, grup blok diperkenalkan. Ini memungkinkan kita untuk mengelompokkan, atau memuat beberapa blok (blok anak) di dalam satu blok induk.

Blok pattern adalah tata letak blok yang telah ditentukan sebelumnya, dapat langsung di sisipkan dan diubah. Blok pattern membawa gagasan pengelompokan blok yang lebih jauh dan memberi pengguna situs website cara baru untuk memanfaatkan tata letak yang telah ditentukan sebelumnya. Blok patern adalah tata letak blok yang telah ditentukan sebelumnya yang dapat disisipkan sebagai konten awal yang dimaksudkan untuk diubah oleh pengguna setiap saat.

Template

Template adalah pengaturan blok yang telah ditentukan sebelumnya dan dapat menyertakan atribut yang juga telah ditentukan sebelumnya. Jika anda menggunakan tema premium, blok template WordPress atau file template biasanya sudah di sertakan di dalamnya. Atau kita bisa mengimportnya untuk diterapkan secara kontekstual ke dalam halaman berdasarkan Hierarki Template WordPress. Meskipun file template ditulis dalam PHP, file tersebut mungkin berisi juga bahasa markup HTML.

Menggunakan template yang sudah jadi tentu akan menghemat waktu anda ketika membuat konten pada halaman. Situs website yang rajin dan memberikan gratis file template yang bisa anda kunjungi adalah https://gutenberghub.com/.

Salah satu contoh kode template yang kami ambil dari https://gutenberghub.com/templates/content-75/ adalah salah satu halaman About me sebagai berikut :

<!-- wp:group {"align":"full","className":"eplus-Ygtp4D","epCustomPadding":{"value":{"top":"80","right":"","bottom":"80","left":""},"unit":"px","important":false},"epGeneratedClass":"eplus-Ygtp4D","epCustomBackground":{"solid":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epAnimationGeneratedClass":"edplus_anim-koDRS4"} -->
<div class="wp-block-group alignfull eplus-Ygtp4D"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"eplus-oDvmyg","epStylingOptions":{"epCustomColumnsResponsiveEnabled":true,"epCustomColumnsReverseResponsiveEnabled":true,"epCustomColumnsSpacingResponsiveEnabled":true,"epCustomColumns":{"target":"wp-block-column","responsive":true,"hover":false,"options":[{"custom":true,"control":"ColumnToggle"},{"label":"Responsive Columns","control":"Range","attribute":"epCustomColumns","defaults":{"tablet":"2","mobile":"1"},"css":"flex-basis","customValue":"calc(( 100% - ({{Range:epCustomColumnsSpacing:auto:0px}} * ({{value}} - 1))) / {{value}}) !important","props":{"max":6,"min":1,"supportedUnits":[]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[{"field":"viewport","compare":"EQUAL","value":"tablet"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}]]}}]},"epCustomColumnsReverse":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Order","control":"ButtonGroup","attribute":"epCustomColumnsReverse","css":"flex-direction","customValue":"{{value}}","condition":{"relation":"AND","query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.mobile","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}],[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.tablet","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"tablet"}]}]]}]]},"defaults":{"tablet":"column","mobile":"column"},"props":{"layout":"stacked","options":[{"label":"Default","value":"column"},{"label":"Reverse","value":"column-reverse"}]}}]},"epCustomColumnsSpacing":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Gap","control":"Range","attribute":"epCustomColumnsSpacing","defaults":{"desktop":"32px","tablet":"32px","mobile":"32px"},"css":"gap","props":{"max":100,"min":0,"supportedUnits":["px"]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"}]}}]},"savedStyling":"","clientId":"abfa8550-c4ce-40ab-bff7-5cebac17af01"},"epCustomColumns":{"desktop":{"value":"","important":false,"unit":"%"},"tablet":{"value":2,"important":false,"unit":""},"tabletModified":true,"mobile":{"value":1,"important":false,"unit":""},"mobileModified":true},"epCustomColumnsSpacing":{"desktop":{"value":32,"important":false,"unit":"px"},"tablet":{"value":32,"important":false,"unit":"px"},"tabletModified":true,"mobile":{"value":32,"important":false,"unit":"px"},"mobileModified":true},"epCustomColumnsReverse":{"desktop":"","tablet":"column","tabletModified":true,"mobile":"column","mobileModified":true},"epCustomMargin":{"value":{"top":"","right":"auto","bottom":"","left":"auto"},"unit":"%","important":false},"epGeneratedClass":"eplus-oDvmyg","epCustomSizing":{"height":{"value":"","important":false,"unit":"%"},"width":{"value":90,"important":false,"unit":"%"},"maxWidth":{"value":"","important":false,"unit":"%"},"maxHeight":{"value":"","important":false,"unit":"%"}},"epAnimationGeneratedClass":"edplus_anim-9Dokrj"} -->
<div class="wp-block-columns eplus-oDvmyg"><!-- wp:column {"className":"eplus-XozJ8l","epGeneratedClass":"eplus-XozJ8l","epAnimationGeneratedClass":"edplus_anim-IBWgmP"} -->
<div class="wp-block-column eplus-XozJ8l"><!-- wp:heading {"className":"eplus-sCXuFk","epGeneratedClass":"eplus-sCXuFk","epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":60,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"700","textStyle":["capitalize"],"textColor":{"color":"rgba(0, 0, 0, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-NTBbhi"} -->
<h2 class="eplus-sCXuFk">About Us</h2>
<!-- /wp:heading --> <!-- wp:heading {"level":3,"className":"eplus-BiXZwC","epGeneratedClass":"eplus-BiXZwC","epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"700","textStyle":["capitalize"],"textColor":{"color":"rgba(0, 0, 0, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-0zX4pP"} -->
<h3 class="eplus-BiXZwC">a Solitary WordPress Enthusiast.</h3>
<!-- /wp:heading --> <!-- wp:paragraph {"className":"eplus-OUXsJs","epGeneratedClass":"eplus-OUXsJs","epAnimationGeneratedClass":"edplus_anim-MiJMOs"} -->
<p class="eplus-OUXsJs">Praesent ac massa at ligula laoreet iaculis. Nam commodo suscipit quam. In consectetuer turpis ut velit. Praesent congue erat at massa. Praesent ac massa at ligula laoreet iaculis. Nam commodo suscipit quam. In consectetuer turpis ut velit. Praesent congue erat at massa.</p>
<!-- /wp:paragraph --> <!-- wp:heading {"level":3,"className":"eplus-9CcNYb","epGeneratedClass":"eplus-9CcNYb","epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"700","textStyle":["capitalize"],"textColor":{"color":"rgba(0, 0, 0, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-eh5oOZ"} -->
<h3 class="eplus-9CcNYb">wpJakarta.Com</h3>
<!-- /wp:heading --> <!-- wp:social-links {"className":"eplus-jL9nqf is-style-default","epGeneratedClass":"eplus-jL9nqf","epAnimationGeneratedClass":"edplus_anim-IihRUq"} -->
<ul class="wp-block-social-links eplus-jL9nqf is-style-default"><!-- wp:social-link {"url":"#","service":"facebook","className":" eplus-JRpx8r","epGeneratedClass":"eplus-JRpx8r","epCustomBackgroundHover":{"solid":"rgba(18, 90, 150, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomBackgroundHoverEnabled":true,"epCustomBackgroundHoverModified":true,"epCustomBackground":{"solid":"rgba(110, 170, 203, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epAnimationGeneratedClass":"edplus_anim-DaiwyS"} /--> <!-- wp:social-link {"url":"#","service":"instagram","className":" eplus-qJhsMY","epGeneratedClass":"eplus-qJhsMY","epCustomBackgroundHover":{"solid":"rgba(18, 90, 150, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomBackgroundHoverEnabled":true,"epCustomBackgroundHoverModified":true,"epCustomBackground":{"solid":"rgba(110, 170, 203, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epAnimationGeneratedClass":"edplus_anim-NATj2r"} /--> <!-- wp:social-link {"url":"#","service":"twitter","className":" eplus-pqKjmm","epGeneratedClass":"eplus-pqKjmm","epCustomBackgroundHover":{"solid":"rgba(18, 90, 150, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomBackgroundHoverEnabled":true,"epCustomBackgroundHoverModified":true,"epCustomBackground":{"solid":"rgba(110, 170, 203, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epAnimationGeneratedClass":"edplus_anim-EqRNl1"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column {"className":"eplus-wZsUwf","epGeneratedClass":"eplus-wZsUwf","epAnimationGeneratedClass":"edplus_anim-04MhLM"} -->
<div class="wp-block-column eplus-wZsUwf"><!-- wp:cover {"url":"https://wpjakarta.com/wp-content/uploads/2021/01/WordPress-Ninja.jpg","id":30880,"dimRatio":0,"focalPoint":{"x":"0.19","y":"0.46"},"className":"eplus-OPiODf","epCustomBorderRadius":{"value":{"top":"20","right":"20","bottom":"20","left":"20"},"unit":"px","important":false},"epGeneratedClass":"eplus-OPiODf","epCustomShadow":{"inset":false,"horizontal":0,"vertical":0,"blurRadius":15,"spreadRadius":0,"shadowColor":"rgba(50, 46, 46, 1)","important":false,"loaded":true},"epAnimationGeneratedClass":"edplus_anim-pvXh8Z","editorPlusCustomCSS":"selector { \n\n}\n"} -->
<div class="wp-block-cover eplus-OPiODf" style="background-image:url(https://wpjakarta.com/wp-content/uploads/2021/01/WordPress-Ninja.jpg);background-position:19% 46%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"eplus-nqynn7","fontSize":"large","epGeneratedClass":"eplus-nqynn7","epAnimationGeneratedClass":"edplus_anim-KcxFWq"} -->
<p class="has-text-align-center eplus-nqynn7 has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

Kode tersebut harus anda masukan menggunakan blok HTML dan di render oleh browser sebagai berikut :

Mudah bukan, bahkan kita tidak perlu menghabiskan waktu 2 menit untuk membuat dua kolom kiri (heading, teks) dan kanan (gambar) dan juga ikon sosial media.

Tutorial pemrograman wpJakarta.Com

WordPress full site editing

Sekarang dengan WordPress full site editing, kita dapat menggunakan blok editor gutenberg untuk membuat keseluruhan situs website. Bukan hanya untuk halaman atau posting. Artinya, Kita dapat membuat :

  • Header
  • Footer
  • Tata Letak Arsip
  • Tata Letak Tunggal
  • 404 halaman

Sebelumnya, untuk komponen-komponen yang di sebutkan di atas, kita hanya bergantung pada kerangka tema yang kita gunakan. Meskipun masih bisa di kustom tapi sangat terbatas pada layout pre-defined yang di buat oleh pengembang tema. Menggunakan “Template Part” dengan tema yang kompatibel dengan WordPress full site editing, Kita dapat memodifikasi template part menggunakan editor Gutenberg.

WordPress full site editing menghemat penggunaan resource hosting

Opini kami lainnya adalah bahwa WordPress full site editing akan menghemat penggunaan resource hosting. Akan lebih banyak tema website yang berbasis blok ini yang bisa di pilih. Sistem tema berbasis blok ini akan menurunkan penggunaan PHP secara drastis. Karena tema website dengan sistem WordPress full site editing ini akan membawa struktur tema baru yang lebih bergantung pada kode HTML sederhana.

Artikel lainnya

What do you think?