Reconstruirea tabelului de prețuri Flywheel ca bloc personalizat (în aproximativ 10 minute)

Editorul de blocuri (Gutenberg) este, fără îndoială, centrul WordPress modern. Cu editarea completă a site-ului în drum spre WordPress Core, blocurile și tot ceea ce promit sunt aici pentru a rămâne.

Cu toate acestea, blocurile nu fac întotdeauna ceea ce ne dorim sau arată așa cum ne place. Dacă proiectați și construiți site-uri pentru a vă câștiga, știți că chestiile de tăiat prăjituri merg doar atât de departe pe web. La un moment dat, avem nevoie de acel „bloc” de pe pagină pentru a arăta sau a se comporta într-un mod cu adevărat special.

Blocurile personalizate sunt soluția aici! Dar blocurile personalizate necesită, pentru mulți oameni care folosesc WordPress de ceva vreme, o abordare foarte diferită a dezvoltării.

Diferit? Da!

Dificil? Nu!

Îți voi arăta cum poți construi cu ușurință un bloc complet personalizat. Și va dura aproximativ 10 minute. Pentru orice liber profesionist sau echipa de agenție de aici care dorește să se îndepărteze de editorul de blocuri, cred că vă va plăcea asta!

Blocul

Să ne imaginăm că lucrăm la un proiect și un designer ne înmânează un design plăcut pentru un site web de comerț electronic. Folosește tot ce este mai bun din WordPress + WooCommerce, dar există câteva piese care pur și simplu nu funcționează de la raft. Una dintre acestea este aceasta chiar aici:

Holup ! Asta pare familiar!

Da, vom reconstrui tabelul de prețuri Flywheel ca un bloc personalizat. ? Există blocuri de tabel de preț plug-n-play în jur, dar al nostru aici este destul de unic, așa că o vom lansa pe al nostru.

Pregatirea

Eroul acestei povești este un plugin numit Genesis Custom Blocks. Este gratuit pe wordpress.org și există o versiune Pro care oferă câteva funcții avansate interesante, inclusiv:

• Instalare WordPress proaspătă – complimente pentru Local
• Genesis Custom Blocks (unul gratuit) instalat și activ
• O temă copil pentru tema Genesis Block

Notă importantă: Genesis Custom Blocks nu depinde de cadrul Genesis, de tema Genesis Block de mai sus sau de orice alte pluginuri sau teme.

Înregistrarea și configurarea blocului

Frumusețea acestui plugin este că putem face atât de multe în administratorul WordPress.

În administratorul WordPress, în meniul din stânga, accesați Blocuri personalizate > Adăugați nou

Ecranul pe care îl vedem acum este Block Builder, care este locul în care vom configura o grămadă de lucruri pentru blocul nostru, inclusiv adăugarea de câmpuri.

Modul în care funcționează acest plugin este că creează blocuri personalizate în care utilizatorul, lucrând în Editorul de blocuri, introduce conținut și date prin câmpuri într-o interfață asemănătoare unui formular. Această interfață simplificată/opinie este unul dintre lucrurile care accelerează procesul de creare a blocurilor personalizate. Nu trebuie să vă dați seama de interfața de utilizare de intrare.

Detaliile blocului pe care le adăugăm sunt:

• Nume: Tabel de prețuri
• Slug: tabel de prețuri
• Pictogramă: Planeta Genesis

Câmpurile pe care le adăugăm sunt:

Adăugarea de câmpuri la blocul nostru personalizat arată astfel:

După ce am adăugat toate câmpurile noastre, așa arată:

Când apăsăm Publicare, primim un prompt care ne indică ce să facem în continuare.

Aceasta ne conduce la pasul următor:

Modelarea blocului

Blocul este de fapt înregistrat și disponibil acum în editorul de blocuri. Ai putea sări la o nouă postare/pagină și să adaugi blocul la fel ca oricare altul. Totuși, nu ar afișa (încă) nimic. Aici intervine șablonul.

Genesis Custom Blocks le permite dezvoltatorilor WordPress să folosească multe dintre practicile de șabloane pe care le-am perfecționat în ultimul deceniu. Este super simplu și vă va simți foarte familiar.

În tema noastră copil, adăugăm câteva foldere și fișiere noi, cum ar fi:

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

Lucruri de luat în considerare aici:

• Adăugăm un folder blocks în tema noastră (temă copil).
• Adăugăm un folder specific blocului la care lucrăm în prezent și îl denumim indiferent de slug-ul blocurilor, care în acest caz este pricing-table .
• Adăugăm un fișier PHP și un fișier CSS. Aici vom adăuga codul șablonului.

Începând cu fișierul nostru PHP, să începem cu clasele noastre de bază HTML și CSS.

Acesta va arăta astfel:

<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>

Lucruri de luat în considerare:

• Avem o grămadă de clase CSS pregătite. Notă: puteți aborda CSS-ul, oricum are sens pentru dvs.
• Vom folosi eticheta HTML <progress> pentru a gestiona barele noastre de resurse.

Acum vom lucra cu o funcție PHP simplă pe care pluginul o pune la dispoziție. Există o mulțime disponibile, dar probabil că veți petrece cea mai mare parte a timpului folosind aceste 2 de mai jos. Îl folosim exclusiv pe primul din acest bloc.

Deci, cu aceste funcții, fișierul nostru șablon PHP arată acum astfel:

<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>

Puteți vedea unde am folosit acea block_field() pentru a prelua și scoate datele. Pur și simplu folosim slug-ul câmpului ca argument în funcție. De exemplu block_field( 'icon' ) . Acesta, fiind un tip de câmp de imagine, returnează adresa URL pentru imaginea respectivă.

Pentru CSS-ul nostru, plasăm acest lucru în fișierul șablon block.css. Încă o dată, CSS poate fi rotit în orice fel doriți, iar codul specific pe care l-am scris nu este deosebit de relevant pentru acest tutorial, dar îl voi lăsa aici pentru ca dumneavoastră să îl verificați.

.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;
}

Cea mai interesantă parte a CSS aici este stilul etichetei <progress> . Cam greoi, dar este ceea ce este. Puteți trece la o configurație div imbricată pentru acestea și puteți calcula lățimi setate dacă doriți să evitați <progress> .

Si asta e! ?

Recapitulare:

1. Am adăugat și configurat blocul în WP Admin
2. Am creat un fișier șablon PHP cu 29 de linii de HTML de bază și o singură funcție PHP
3. Am introdus câteva CSS în block.css pentru stilul nostru.

Folosind blocul nostru personalizat

Deci acum putem sări peste și să creăm o nouă postare sau o pagină și să adăugăm blocul. Pentru a păstra acel stil pe 4 coloane pentru opțiunile de preț, mai întâi adăugăm un bloc de coloane și apoi plasăm blocul nostru personalizat de tabel de prețuri în fiecare coloană.

Făcând clic pe butonul „Adăugați bloc” , puteți vedea aici blocul nostru Tabel de prețuri este gata de funcționare.

Mai jos arată cum am primit patru coloane și am adăugat blocul personalizat de patru ori. Pe măsură ce selectez un bloc individual, îl puteți vedea comută la interfața de utilizare a formularului care ne oferă câmpurile noastre pentru introducerea conținutului. Făcând clic departe de vizualizarea formularului, ne oferă previzualizarea.

Arată minunat în editorul de blocuri și arată la fel de bine pe partea din față. Deoarece folosim și blocul de coloane, totul este frumos și receptiv.

Cu proiectele noastre făcute pentru ca noi să lucrăm și să ne putem sprijini pe blocul de coloane receptive din Gutenberg, timpul total de construire al acestui bloc pentru mine a fost mai mic de 10 minute.

Există câteva lucruri pe care le-ați putea face pentru a îmbunătăți și mai mult blocul:

• Există câteva șiruri care trebuie pluralizate. Adică, „Siteul WordPress” ar trebui să fie „Site-uri WordPress” pentru planurile cu mai mult de 1 limită de site. O logică de bază din fișierul șablon PHP ar putea rezolva acest lucru.
• Puteți sări peste blocul de coloane și, în schimb, să utilizați câmpul Repeater (funcția Pro) și să conțineți toate planurile într-un singur bloc.
• Adăugați virgule la numere mai mari.
• Barele de progres arată relațiile dintre valoarea exactă și maximă. Asta pare un pic ciudat. Ai putea trece la ceva mai conceptual al valorilor.

Încheierea lucrurilor

Dacă doriți să descărcați și să instalați acest bloc, puteți descărca fișierele de aici. Documentația despre importul blocurilor personalizate poate fi găsită aici.

Alte link-uri importante:

• Pluginul
• Site-ul Docs
• Comunitatea Genesis Slack

Dacă doriți să vedeți puțin mai multe blocuri personalizate Genesis în acțiune, într-o sesiune recentă la DE{CODE}, am construit și am făcut demonstrații a patru blocuri personalizate separate (de o complexitate crescândă) în aproximativ 15 minute. Consultați înregistrarea la cerere chiar aici.

Sper că ați găsit acest lucru util și ați înțeles cum este foarte ușoară valorificarea puterii Editorului de bloc pentru modele și versiuni personalizate.

Noroc!

Obțineți acces gratuit la temele StudioPress create de Genesis cu Flywheel!

Este important ca furnizorul tău de găzduire să facă cel mai mult pentru tine, iar asta depășește performanța și securitatea! Având acces la peste 35 de teme StudioPress create de Genesis, fără costuri suplimentare, Flywheel vă oferă o bibliotecă frumoasă de teme, astfel încât să vă puteți construi sau reconfigura site-urile într-un mod care se potrivește obiectivelor site-ului dvs.! Aflați mai multe despre Flywheel aici.