Membangun kembali tabel harga Flywheel sebagai blok khusus (dalam waktu sekitar 10 menit)

Editor blok (Gutenberg) tidak diragukan lagi merupakan pusat WordPress modern. Dengan pengeditan situs lengkap dalam perjalanan ke WordPress Core, blok dan semua yang mereka janjikan akan tetap ada.

Namun, balok tidak selalu melakukan apa yang kita inginkan atau terlihat seperti yang kita suka. Jika Anda merancang dan membangun situs untuk mencari nafkah, Anda tahu bahwa hal-hal seperti cookie-cutter hanya berlaku sejauh ini di web. Pada titik tertentu, kita membutuhkan "blok" pada halaman untuk terlihat atau berperilaku dengan cara yang sangat khusus.

Blok kustom adalah solusinya di sini! Tetapi blok khusus memerlukan, bagi banyak orang yang telah menggunakan WordPress untuk sementara waktu, pendekatan yang sangat berbeda untuk dev.

Berbeda? Ya!

Sulit? Tidak!

Saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah membangun blok yang sepenuhnya khusus. Dan itu akan memakan waktu sekitar 10 menit. Untuk setiap pekerja lepas atau kru agensi di sini yang ingin meningkatkan keterampilan di sekitar editor blok, saya pikir Anda akan menyukai ini!

blok

Bayangkan kita sedang mengerjakan sebuah proyek dan seorang desainer memberi kita desain yang manis untuk situs web eCommerce. Ini menggunakan yang terbaik dari WordPress + WooCommerce, tetapi ada beberapa bagian yang tidak berfungsi. Salah satunya adalah ini di sini:

Halo ! Ini terlihat familier!

Ya, kita akan membangun kembali tabel harga Flywheel sebagai blok khusus. ? Ada blok tabel harga plug-n-play di sekitar, tetapi tabel kami di sini cukup unik, jadi kami akan menggulungnya sendiri.

Pengaturan

Pahlawan dari cerita ini adalah sebuah plugin bernama Genesis Custom Blocks. Ini gratis di wordpress.org, dan ada versi Pro yang menawarkan beberapa fitur canggih yang keren, termasuk:

• Instalasi WordPress baru – pujian dari Lokal
• Genesis Custom Blocks (gratis) terpasang dan aktif
• Tema anak untuk Genesis Block Theme

Catatan Penting: Genesis Custom Blocks tidak bergantung pada Genesis Framework, Genesis Block Theme di atas, atau plugin atau tema lainnya.

Mendaftarkan & mengonfigurasi blok

Keindahan plugin ini adalah kita dapat melakukan banyak hal di admin WordPress.

Di admin WordPress, di menu sebelah kiri, buka Custom Blocks > Add New

Layar yang sekarang kita lihat adalah Block Builder, di mana kita akan mengonfigurasi banyak hal untuk blok kita termasuk menambahkan bidang.

Cara kerja plugin ini adalah membuat blok khusus tempat pengguna, yang bekerja di Editor Blok, memasukkan konten dan data melalui bidang dalam antarmuka seperti formulir. Antarmuka yang disederhanakan/berpendapat ini adalah salah satu hal yang mempercepat proses pembuatan blok kustom. Anda tidak perlu mencari tahu UI input.

Detail Blok yang kami tambahkan adalah:

• Nama: Tabel Harga
• Siput: tabel harga
• Ikon: Genesis Planet

Bidang yang kami tambahkan adalah:

Menambahkan bidang ke blok khusus kami terlihat seperti ini:

Setelah kami menambahkan semua bidang kami, ini akan terlihat seperti:

Ketika kami menekan publish, kami mendapatkan prompt yang meminta kami apa yang harus dilakukan selanjutnya.

Ini membawa kita ke langkah berikutnya:

Membuat template blok

Blok tersebut sebenarnya terdaftar dan tersedia di editor blok sekarang. Anda dapat melompat ke postingan/halaman baru dan menambahkan blok seperti yang Anda lakukan lainnya. Itu tidak akan (belum) menampilkan apa pun. Di sinilah template masuk.

Genesis Custom Blocks memungkinkan pengembang WordPress memanfaatkan banyak praktik templating yang telah kami asah selama sekitar satu dekade terakhir. Ini sangat sederhana dan akan terasa sangat akrab.

Di tema anak kami, kami menambahkan beberapa folder dan file baru seperti ini:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Hal-hal yang perlu diperhatikan di sini:

• Kami menambahkan folder blocks di tema kami (tema anak).
• Kami menambahkan folder khusus ke blok yang sedang kami kerjakan dan beri nama apa pun blok slug itu, yang dalam hal ini adalah pricing-table .
• Kami menambahkan file PHP dan file CSS. Di sinilah kita akan menambahkan kode template kita.

Dimulai dengan file PHP, mari kita mulai dengan markup HTML dasar dan kelas CSS.

Ini akan terlihat seperti ini:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Hal-hal yang perlu diperhatikan:

• Kami memiliki banyak kelas CSS yang siap digunakan. Catatan: Anda dapat menangani CSS namun masuk akal bagi Anda.
• Kami akan menggunakan tag HTML <progress> untuk menangani bilah sumber daya kami.

Sekarang kita akan bekerja dengan fungsi PHP sederhana yang disediakan plugin untuk kita. Ada banyak yang tersedia, tetapi Anda mungkin akan menghabiskan sebagian besar waktu Anda menggunakan 2 di bawah ini. Kami secara eksklusif menggunakan yang pertama di blok ini.

Jadi, dengan fungsi-fungsi ini, file template PHP kita sekarang terlihat seperti ini:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Anda dapat melihat di mana kami menggunakan fungsi block_field() itu untuk mengambil dan mengeluarkan data. Kami hanya menggunakan siput bidang sebagai argumen dalam fungsi. Misalnya block_field( 'icon' ) . Ini, sebagai jenis bidang gambar, mengembalikan URL untuk gambar itu.

Untuk CSS kami, kami menempatkan ini di file template block.css. Sekali lagi, CSS dapat diputar ke mana pun Anda inginkan dan kode spesifik yang saya tulis tidak terlalu relevan dengan tutorial ini, tetapi saya akan membiarkannya di sini untuk Anda periksa.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

Bagian paling menarik dari CSS di sini adalah penataan tag <progress> . Agak lebay, tapi begitulah adanya. Anda dapat beralih ke pengaturan div bersarang untuk itu dan menghitung lebar yang ditetapkan jika Anda ingin menghindari <progress> .

Dan itu saja! ?

rekapitulasi:

1. Kami menambahkan dan mengonfigurasi blok di WP Admin
2. Kami membuat file template PHP dengan sangat sedikit 29 baris HTML dasar dan satu fungsi PHP
3. Kami menjatuhkan beberapa CSS ke block.css untuk gaya kami.

Menggunakan blok khusus kami

Jadi sekarang kita dapat melompati dan membuat postingan atau halaman baru dan menambahkan blok. Untuk mempertahankan gaya 4 kolom itu untuk opsi harga, pertama-tama kita tambahkan blok kolom dan kemudian letakkan blok tabel harga kustom kita ke setiap kolom.

Mengklik tombol “Tambah blok” , Anda dapat melihat di sini blok Tabel Harga kami siap digunakan.

Di bawah ini menunjukkan bagaimana saya mendapatkan empat kolom dan telah menambahkan blok khusus empat kali. Saat saya memilih satu blok, Anda dapat melihatnya beralih ke UI formulir yang memberi kami bidang untuk memasukkan konten. Mengklik jauh dari tampilan formulir memberi kita pratinjau.

Terlihat cantik di editor blok dan terlihat sama bagusnya di ujung depan. Karena kami juga memanfaatkan blok kolom, semuanya bagus dan responsif.

Dengan selesainya desain kami agar kami dapat bekerja dan dapat bersandar pada blok kolom responsif Gutenberg, total waktu pembuatan blok ini bagi saya adalah kurang dari 10 menit.

Ada beberapa hal yang dapat Anda lakukan untuk meningkatkan blok lebih jauh:

• Ada beberapa string yang perlu dipluralkan. Yaitu "Situs WordPress" harus menjadi "Situs WordPress" untuk paket dengan lebih dari 1 batas situs. Beberapa logika dasar dalam file template PHP dapat menyelesaikan ini.
• Anda dapat melewati blok kolom dan sebagai gantinya menggunakan bidang Repeater (fitur Pro) dan berisi semua paket dalam satu blok.
• Tambahkan koma ke angka yang lebih besar.
• Bilah kemajuan menunjukkan nilai yang tepat untuk hubungan maksimal. Ini terlihat sedikit aneh. Anda dapat beralih ke nilai yang lebih konseptual.

Membungkus sesuatu

Jika Anda ingin mengunduh dan menginstal blok ini, Anda dapat mengunduh file di sini. Dokumentasi tentang mengimpor blok khusus dapat ditemukan di sini.

Link penting lainnya:

• Plugin
• Situs dokumen
• Komunitas Genesis Slack

Jika Anda ingin melihat lebih banyak Genesis Custom Blocks beraksi, dalam sesi baru-baru ini di DE{CODE}, saya membuat & mendemonstrasikan empat custom block terpisah (dengan kompleksitas yang meningkat) dalam waktu sekitar 15 menit. Lihat rekaman sesuai permintaan di sini.

Saya harap Anda menemukan ini berguna dan mendapatkan pemahaman tentang bagaimana memanfaatkan kekuatan Editor Blok untuk desain dan pembuatan khusus benar-benar sangat mudah.

Bersulang!

Dapatkan akses gratis ke tema StudioPress yang dibuat oleh Genesis dengan Roda Gila!

Sangat penting bahwa penyedia hosting Anda melakukan yang terbaik untuk Anda, dan itu lebih dari sekadar kinerja dan keamanan! Dengan akses ke lebih dari 35 tema StudioPress yang dibuat oleh Genesis tanpa biaya tambahan, Flywheel memberi Anda perpustakaan tema yang indah sehingga Anda dapat membangun atau mengonfigurasi ulang situs Anda dengan cara yang sesuai dengan tujuan situs web Anda! Pelajari lebih lanjut tentang Roda Gila di sini.