WordPress 5.4: Kenali 17+ Fitur Barunya

123bisa.com

WordPress 5.4 telah dirilis pada 31 Maret 2020 lalu. Meskipun bukan merupakan major update dari versi sebelumnya, update WordPress terbaru ini menghadirkan cukup banyak pembaharuan, di antaranya adalah fitur-fitur anyar di Block Editor.

Anda pastinya penasaran dengan semua fitur barunya bukan? Mari kenali update di WordPress 5.4 satu per satu!

Fitur-Fitur Baru di Block Editor WordPress 5.4 

Block Editor muncul pertama kali saat WordPress 5 dirilis. Meskipun belum sempurna, di versi terbaru ini ada banyak fitur baru yang membuat Block Editor makin mudah digunakan. Berikut adalah fitur-fitur tersebut:

  • Welcome Guide
  • Mode Fullscreen menjadi default
  • Blok Social Icons
  • Blok Buttons
  • Warna Tulisan dalam blok Paragraph dapat diubah
  • Pengaturan warna untuk blok Column dan Cover
  • Blok Latest Post menampilkan featured image
  • Breadcrumb Bar untuk navigasi blok
  • Fitur-fitur baru lainnya

1. Welcome Guide

Setelah memperbarui WordPress ke versi 5.4, Anda akan disambut dengan sebuah welcome guide atau panduan pendek ketika membuka editor pertama kali. Tampilan panduan tersebut seperti pada gambar di bawah ini:

Welcome guide WordPress

Pada dasarnya, panduan ini mengenalkan Block Editor dan mengajak pengguna untuk mengakses dokumentasi editor ini.

Bagi Anda yang sudah terbiasa membuat halaman situs maupun konten blog dengan Block Editor mungkin tidak membutuhkannya.

Akan tetapi, Welcome Guide akan sangat berguna bagi para pengguna yang baru pertama kali mengoperasikan WordPress.

2. Mode Fullscreen Menjadi Default

Sebelum WordPress 5.4 dirilis, tampilan yang muncul ketika Anda membuka editor kurang lebih seperti ini:

Editor WordPress biasa

Kini, mode fullscreen Block Editor menjadi default atau pengaturan standar. Dengannya, sidebar di sebelah kiri dan toolbar di atas akan tersembunyi secara otomatis.

Jangan khawatir. Anda masih dapat mengganti pengaturannya dengan meng-klik ikon titik tiga di pojok kanan atas editor.

Editor WordPress fullscreen

Perubahan mode editor menjadi fullscreen ini mungkin tidak terlihat istimewa. Namun, Anda yang lebih suka membuat konten atau mendesain halaman tanpa distraksi visual barangkali menyukai perubahan ini.

3. Blok Social Icons

Sebelumnya, baik TinyMCE maupun Block Editor WordPress tidak memiliki fitur bawaan untuk meletakkan tautan media sosial berupa ikon.

Ketiadaan ini mengharuskan pengguna untuk meng-install plugin terkait atau menggunakan kode HTML.

Namun, blok Social Icons di versi terbaru ini memungkinkan Anda untuk menyematkan ikon media sosial dengan mudah. Seperti yang ditunjukkan pada gambar di bawah ini, Anda juga dapat menampilkan lebih dari satu ikon. 

Blok social icons

Tampilan ikonnya pun dapat diubah. Saat mengkustomisasi blok Social Icons, klik tab Block di sidebar editor.

Setelah itu, klik menu drop-down Styles dan Anda akan menemukan tiga gaya ikon: Default, Logos Only, dan Pill Shape. Untuk menggantinya, Anda tinggal meng-klik salah satu.

Pilihan model ikon blok social icons

4. Blok Buttons

Di versi WordPress sebelumnya memang sudah ada blok untuk meletakkan tombol di dalam post. Namun, Anda hanya dapat menaruh satu tombol dengan satu blok.

Nah, Block Editor di WordPress 5.4 memperbolehkan Anda untuk menyisipkan lebih dari satu tombol dengan satu blok.

Blok buttons

Sama seperti Social Icons tadi, tampilan tombol yang dibuat dengan blok Buttons dapat dikustomisasi.

Pertama, Anda dapat memilih di antara dua gaya tombol, yaitu Fill dan Outline. Bedanya, gaya Outline akan menambahkan garis tepi pada tombol yang Anda pilih.

Pilihan model tombol blok buttons

Kedua, Anda dapat mengubah warna latar belakang, teks, dan garis tepi tombol.

Pengaturan warna teks dan garis tepi menjadi satu, jadi Anda tidak dapat memilih warna berbeda untuk keduanya. Untuk latar belakang, Anda dapat memilih antara warna solid atau gradien.

Pengaturan warna blok buttons

Terakhir, Anda dapat mengubah bentuk sudut-sudut tombol yang dipilih.

Pada contoh tadi sudut tombol tajam, sehingga bentuk tombolnya persegi. Namun, Anda dapat membuat bentuk tombol lebih lonjong dengan meningkatkan radius-nya pada menu drop-down Border Settings.

Pengaturan radius blok buttons

5. Warna Tulisan dalam Blok Paragraph Dapat Diubah

Saat menulis artikel blog mungkin ada satu atau beberapa kalimat yang warnanya ingin Anda ubah. Barangkali Anda ingin melakukan ini untuk kalimat dengan pesan penting atau sekedar menambah nilai estetika.

Untungnya, sekarang Anda sudah dapat melakukan itu tanpa harus mengubah kode HTML.

Caranya mudah. Anda tinggal meng-highlight teks yang warnanya ingin diganti. Kemudian, klik tombol anak panah ke bawah pada toolbar blok dan pilih Text Color.

Mengganti warna teks dalam blok paragraph

6. Pengaturan Warna untuk Blok Column dan Cover

Tak hanya blok Buttons dan Paragraph yang warnanya dapat diubah berkat WordPress 5.4.

Kini Anda juga dapat mengatur warna yang digunakan blok Column. Seperti yang ditunjukkan oleh gambar di bawah ini, Anda dapat mengganti warna teks dan latar belakang masing-masing kolom.

Pengaturan warna blok column

Selain itu, kini Anda juga dapat menggunakan latar belakang gradien warna pada blok Cover. Contohnya seperti pada gambar di bawah ini.

Pengaturan warna blok cover

7. Blok Latest Posts Menampilkan Featured Image

Apakah Anda suka menampilkan daftar posting terbaru blog? Jika ya, Anda akan senang dengan fitur baru ini.

Kini, blok Latest Post menampilkan featured image masing-masing posting di atas judulnya. Pengaturannya mudah. Setelah Anda menambahkan blok tersebut pada posting, tampilannya pasti terlihat seperti berikut ini:

Blok latest posts dalam list view

Untuk menampilkan featured image-nya, Anda perlu mengubah tampilannya dari List view menjadi Grid view.

Caranya dengan meng-klik ikon yang ditunjuk oleh anak panah merah di atas.Namun, featured image-nya tidak akan langsung muncul.

Selanjutnya, temukan menu drop-down Featured image settings di toolbar. Klik slider yang terdapat pada menu tersebut, dan blok Latest Posts Anda akan terlihat seperti ini:

Blok latest posts dalam grid view

Anda juga dapat mengatur tampilan featured image pada blok ini dengan mengakses menu drop-down yang sama.

Pengaturan thumbnail blok latest posts

8. Breadcrumb Bar untuk Navigasi Blok

Di WordPress 5.4 Anda akan menemukan bar navigasi di pojok kiri bawah editor. Contohnya seperti berikut ini:

Breadcrumb pada editor WordPress

Sepertinya terlihat sepele, tapi bar ini sangat berguna jika Anda membuat grup blok yang kompleks seperti pada contoh di atas.

Jika Anda klik salah satu nama blok pada bar tersebut, pointer Anda akan langsung berpindah ke blok yang dipilih. Menarik, bukan?

Baca Juga: Cara Membuat Breadcrumb di WordPress dan Fungsinya

8. Fitur-Fitur Baru Lainnya

Di samping yang telah kami bahas, masih ada beberapa fitur baru yang tidak begitu kentara. Namun, Anda juga perlu mengetahuinya agar dapat memanfaatkannya di saat-saat tertentu.

Pertama, sekarang Block Editor memiliki dua mode, yaitu Edit dan Select.

Mode Edit memperbolehkan Anda untuk mengetik, menghapus, atau mengubah format teks seperti biasa.

Mode kedua, yaitu Select, memungkinkan Anda untuk meng-klik sebuah blok tanpa harus mengedit isinya.

Mode edit dan select di editor WordPress

Kedua, kini Anda dapat menuliskan caption untuk blok Table. Apabila Anda ingin menjelaskan maksud dari tabel yang dibuat, ini merupakan fitur yang bermanfaat.

Caption pada blok table

Ketiga, Anda dapat mengunggah featured image dengan drag-and-drop filenya ke bidang di sidebar editor.

Cara ini lebih praktis daripada harus meng-klik bidangnya terlebih dahulu dan mengunggah file ke Media Library.

Fitur drag-and-drop untuk mengunggah featured image

Keempat, Anda dapat mengubah ukuran gambar yang tampil dalam blok Gallery melalui sidebar.

Pengaturan ukuran gambar pada blok gallery

Terakhir, Block Editor di WordPress 5.4 memungkinkan Anda untuk menyematkan tautan pada gambar di dalam blok Media & Text.

Menyematkan link pada gambar dalam blok media & text

Fitur-Fitur WordPress 5.4 yang Dapat Dimanfaatkan Developer

Di samping fitur-fitur Block Editor tadi, WordPress 5.4 juga menghadirkan berbagai update yang dapat dimanfaatkan developer website, plugin, maupun tema. Berikut adalah daftarnya:

  • Keyboard shortcut custom
  • Gradient theme API
  • Perubahan markup dan style
  • Block scaffolding
  • Block collections
  • Block variations
  • Penyempurnaan struktur HTML pada widget kalender
  • Penggunaan shortcode dalam skrip PHP
  • Action hooks untuk menambahkan custom fields pada menu

9. Shortcut Keyboard Custom

Tombol shortcut untuk mempermudah pengoperasian editor WordPress memang sudah ada sejak lama. Namun, baru kali ini Anda diperbolehkan untuk membuat shortcut keyboard custom.

Untuk melakukannya, Anda perlu mengakses package @wordpress/keyboard-shortcuts dan mengaktifkan action registerShortcut dengan mengetikkan kode di bawah ini:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {
	// Shortcut identifier
 name: 'plugin/shortcut-test',
	// Shortcut category (possible values global, block, selection)
 category: 'global',
	// Shortcut description
 description: 'Custom shortcut',
	// The key combination that triggers the shortcut
 keyCombination: {
		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
 },
	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

Sebagai catatan, Anda dapat mengganti “Custom shortcut” pada shortcut description dengan nama apa saja. Ini akan menjadi nama dari shortcut yang Anda buat.

Setelah itu, aktifkan keyboard shortcut handler dengan action useShortcut. Kodenya seperti berikut ini:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';
const MyComponent = () => {
 useShortcut(
 'plugin/shortcut-test',
		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

10. Gradient Theme API

Tentunya Anda sudah tahu bahwa WordPress 5.4 menawarkan pengaturan gradien warna pada blok tertentu. Ini dapat terjadi berkat Gradient Theme API.

Di dalam API ini Anda dapat menemukan opsi editor-gradient-presets yang memungkinkan Anda untuk membuat preset gradien tersendiri.

Untuk melakukannya, masukkan kode seperti di bawah ini ke dalam opsi tersebut:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);

Kode tersebut dapat Anda jadikan contekan. Tentunya, warna preset gradiennya dapat Anda ubah sendiri. Berikut adalah tiga bagian dari kode di atas yang dapat diganti:

  • name: label atau nama dari preset gradien
  • gradient: value CSS gradien
  • slug: untuk membuat CSS classes yang digunakan dalam Block Editor

Jika Anda ingin menonaktifkan gradien yang telah dibuat, tinggal masukkan kode berikut ini:

add_theme_support( 'disable-custom-gradients' );

Selain itu, Anda juga dapat menghapus gradien tersebut dengan menambahkan kode ini:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

11. Perubahan Markup dan Style

Bagi para developer tema, ada beberapa perubahan pada struktur DOM yang perlu Anda perhatikan. Berikut adalah daftarnya:

  • Prefix editor- pada skrip di Block Editor sudah dihapus dan diganti dengan prefix block-editor.
  • Class edit-post-layout__content telah dihilangkan dari DOM Block Editor.
  • Sejumlah wrapper div telah dihapus dari blok RichText dan beberapa blok lainnya karena dinilai terlalu banyak. Dengan ini, performa blok-blok tersebut meningkat.
  • Padding blok dan margin negatif sudah tidak ada lagi.

12. Block Scaffolding

Kini para developer dapat membuat struktur direktori untuk plugin Block Editor sendiri berkat package @wordpress/create-block. Untuk melakukannya, Anda tinggal menjalankan perintah berikut:

$ npm init @wordpress/block block-name

13. Block Collections

Fitur ini memungkinkan developer tema dan plugin untuk mengelompokkan blok-blok custom dalam satu kategori. Dengan itu, pengguna dapat lebih mudah menemukan blok yang diinginkan. 

Untuk menciptakan kategori baru, Anda hanya perlu menggunakan API berikut:

registerBlockCollection( namespace, { title, icon } );

Nah, di bawah ini adalah penjelasan dari masing-masing bagian API tersebut:

  • namespace: judul kategori blok 
  • title: nama blok
  • icon: ikon yang digunakan 

14. Block Variations

Selain memungkinkan Anda untuk membuat kategori blok sendiri, WordPress 5.4 juga memperbolehkan Anda untuk mengubah isi kategori blok yang sudah ada.

Misalnya, Anda ingin mengosongkan kategori Common Blocks dan menggantinya dengan blok-blok custom.

Apabila Anda seorang developer website, fitur ini akan sangat bermanfaat. Dengannya, Anda dapat memudahkan klien untuk membuat konten atau mengkustomisasi situsnya.

Untuk mengubah isi kategori blok, Anda dapat menggunakan kode JavaScript di bawah ini sebagai contekan:

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );

15. Penyempurnaan Struktur HTML pada Widget Kalender

Sebelum WordPress 5.4, link navigasi bulan pada widget kalender menjadi satu dengan tabelnya. Meskipun sepele, ini menyulitkan screenreader untuk memahami struktur halaman situs.

Untungnya, element nav pada struktur HTML widget kalender sekarang lepas dari tabel kalender. Perubahan ini dapat Anda lihat pada kode HTML di bawah ini:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">&laquo; Dec</a></span>
				<span class="pad">&nbsp;</span>
				<span class="wp-calendar-nav-next">&nbsp;</span>
			</nav>
		</div>
	</div>
</div>

Kini, tampilan widget kalender seperti berikut:

Tampilan baru blok calendar

16. Penggunaan Shortcode dalam Skrip PHP

Pada versi-versi WordPress sebelumnya Anda perlu menggunakan fungsi do_shortcode() untuk dapat meletakkan shortcode dalam tema.

Fungsi ini sekarang digantikan oleh apply_shortcodes(). Ditambah lagi, fungsi baru ini juga memperbolehkan Anda untuk menggunakan shortcode dalam skrip PHP.

Kodenya seperti berikut ini:

// Displays the result of the shortcode
echo apply_shortcodes( '

[shortcode]’ . $text . ‘[/shortcode]

‘ );

Apabila Anda developer yang masih menggunakan do_shortcode() pada tema atau plugin, jangan khawatir. Meskipun telah merilis fungsi baru dengan kegunaan yang sama, WordPress tidak berencana menonaktifkan do_shortcode().

17. Action Hooks untuk Menambahkan Custom Fields pada Menu

WordPress 5.4 memperkenalkan dua jenis action hooks untuk menambahkan custom fields pada menu website.

Action hook yang pertama adalah wp_nav_menu_item_custom_fields, yang bekerja pada halaman kustomisasi menu di Appearance > Menu. Contoh kodenya seperti ini:

function example_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );

Ada lima parameter yang dapat Anda gunakan untuk mengatur custom field:

  • $item_id — judul set menu
  • $item — obyek data menu
  • $depth — depth menu
  • $args — obyek dari argumen menu
  • $id — judul menu

Action hook yang kedua adalah wp_nav_menu_item_custom_fields_customize_template. Bedanya, action hook ini bekerja pada sidebar kustomisasi menu saat Anda mengakses Appearance > Customize di Dashboard.

Segera Update ke WordPress 5.4!

Dapat Anda lihat bahwa pembaharuan yang dilakukan WordPress pada versi 5.4 ini membuatnya makin mudah digunakan.

Mulai dari blok-blok baru di editor hingga action hooks untuk membuat custom fields menu, semua fitur baru CMS ini akan membuat Anda makin betah menggunakannya.

Oleh karena itu, kami sangat merekomendasikan Anda untuk segera update ke WordPress 5.4 agar mendapatkan manfaatnya.

Anda dapat memperbarui versi WordPress melalui link update yang biasanya muncul pada halaman utama Dashboard.

Notifikasi update WordPress di Dashboard

Juga, jangan lupa untuk mem-backup website terlebih dahulu. Ini untuk menghindari hilangnya data-data penting. Anda dapat menggunakan plugin atau fitur backup di panel kontrol hosting.

Agar lebih gampang lagi, Anda dapat menggunakan WordPress hosting Niagahoster. Dengan layanan ini, Anda tidak perlu repot-repot log in ke Dashboard untuk memperbarui WordPress. Cukup menyalakan automatic update, WordPress Anda akan selalu diperbarui. 

Dukung kami berkembang dengan Subscribe