Ricostruzione della tabella dei prezzi del volano come blocco personalizzato (in circa 10 minuti)

L'editor di blocchi (Gutenberg) è senza dubbio il centro del moderno WordPress. Con la modifica completa del sito in arrivo su WordPress Core, i blocchi e tutto ciò che promettono sono qui per restare.

Tuttavia, i blocchi non sempre fanno quello che vogliamo o hanno l'aspetto che ci piace. Se progetti e costruisci siti per vivere, sai che le cose con lo stampino vanno solo così lontano sul web. Ad un certo punto, abbiamo bisogno che quel "blocco" sulla pagina appaia o si comporti in un modo davvero particolare.

I blocchi personalizzati sono la soluzione qui! Ma i blocchi personalizzati richiedono, per molte persone che utilizzano WordPress da un po', un approccio molto diverso allo sviluppo.

Diverso? Sì!

Difficile? No!

Ti mostrerò come creare facilmente un blocco completamente personalizzato. E ci vorranno circa 10 minuti. Per qualsiasi freelancer o squadra di agenzia qui che vuole migliorare le competenze nell'editor di blocchi, penso che ti piacerà!

Il blocco

Immaginiamo di stare lavorando a un progetto e un designer ci porge un bel design per un sito di eCommerce. Utilizza il meglio di WordPress + WooCommerce, ma ci sono alcuni pezzi che non funzionano immediatamente. Uno di questi è questo proprio qui:

Holup ! Questo sembra familiare!

Sì, ricostruiremo la tabella dei prezzi del volano come blocco personalizzato. ? Ci sono blocchi di tabelle dei prezzi plug-n-play in giro, ma il nostro qui è piuttosto unico, quindi faremo il nostro.

Il set up

L'eroe di questa storia è un plugin chiamato Genesis Custom Blocks. È gratuito su wordpress.org e c'è una versione Pro che offre alcune fantastiche funzionalità avanzate, tra cui:

• Installazione fresca di WordPress – complimenti a Local
• Genesis Custom Blocks (gratuito) installato e attivo
• Un tema figlio per il tema del blocco Genesi

Nota importante: Genesis Custom Blocks non dipende da Genesis Framework, dal tema Genesis Block sopra o da qualsiasi altro plugin o tema.

Registrazione e configurazione del blocco

La bellezza di questo plugin è che possiamo fare così tanto nell'amministratore di WordPress.

Nell'amministratore di WordPress, nel menu a sinistra, vai su Blocchi personalizzati > Aggiungi nuovo

La schermata che vediamo ora è Block Builder, che è dove configureremo un sacco di cose per il nostro blocco, inclusa l'aggiunta di campi.

Il modo in cui funziona questo plugin è che crea blocchi personalizzati in cui l'utente, lavorando nell'Editor blocchi, inserisce contenuto e dati tramite campi in un'interfaccia simile a un modulo. Questa interfaccia semplificata/convinta è una delle cose che accelera il processo di creazione di blocchi personalizzati. Non è necessario capire l'interfaccia utente di input.

I dettagli del blocco che aggiungiamo sono:

• Nome: tabella dei prezzi
• Slug: tabella dei prezzi
• Icona: pianeta Genesi

I campi che aggiungiamo sono:

L'aggiunta di campi al nostro blocco personalizzato si presenta così:

Dopo aver aggiunto tutti i nostri campi, ecco come appare:

Quando premiamo la pubblicazione, riceviamo un messaggio che ci chiede cosa fare dopo.

Questo ci porta al passaggio successivo:

Modellazione del blocco

Il blocco è effettivamente registrato e ora disponibile nell'editor dei blocchi. Puoi passare a un nuovo post/pagina e aggiungere il blocco come faresti con qualsiasi altro. Tuttavia, non visualizzerebbe (ancora) nulla. È qui che entra in gioco il template.

Genesis Custom Blocks consente agli sviluppatori di WordPress di sfruttare molte delle pratiche di creazione di modelli che abbiamo affinato negli ultimi dieci anni circa. È semplicissimo e ti sembrerà molto familiare.

Nel nostro tema figlio, aggiungiamo un paio di nuove cartelle e file come questo:

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

Cose da prendere in considerazione qui:

• Aggiungiamo una cartella di blocks nel nostro tema (tema figlio).
• Aggiungiamo una cartella specifica per il blocco su cui stiamo attualmente lavorando e la denominiamo qualunque sia lo slug dei blocchi, che in questo caso è pricing-table .
• Aggiungiamo un file PHP e un file CSS. Qui è dove aggiungeremo il nostro codice modello.

Partendo dal nostro file PHP, iniziamo con il nostro markup HTML di base e le classi CSS.

Questo sarà simile a questo:

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

Cose da prendere in considerazione:

• Abbiamo un sacco di classi CSS pronte per l'uso. Nota: puoi affrontare il CSS comunque ha senso per te.
• Utilizzeremo il tag HTML <progress> per gestire le nostre barre delle risorse.

Ora lavoreremo con una semplice funzione PHP che il plugin ci mette a disposizione. Ce ne sono molti disponibili, ma probabilmente trascorrerai la maggior parte del tuo tempo usando questi 2 di seguito. Stiamo usando esclusivamente il primo in questo blocco.

Quindi, con queste funzioni, il nostro file modello PHP ora si presenta così:

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

Puoi vedere dove abbiamo usato quella funzione block_field() per recuperare e restituire i dati. Usiamo semplicemente lo slug del campo come argomento nella funzione. Es block_field( 'icon' ) . Questo, essendo un tipo di campo immagine, restituisce l'URL per quell'immagine.

Per il nostro CSS, lo posizioniamo nel file modello block.css. Ancora una volta, i CSS possono essere filati come preferisci e il codice specifico che ho scritto non è particolarmente rilevante per questo tutorial, ma lo lascerò qui per te da controllare.

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

La parte più interessante del CSS qui è lo stile del tag <progress> . Un po' complicato, ma è così. Puoi passare a una configurazione div nidificata per quelli e calcolare le larghezze impostate se desideri evitare <progress> .

E questo è tutto! ?

Ricapitolando:

1. Abbiamo aggiunto e configurato il blocco in WP Admin
2. Abbiamo creato un file modello PHP con 29 misere righe di HTML di base e una singola funzione PHP
3. Abbiamo inserito alcuni CSS in block.css per il nostro stile.

Utilizzando il nostro blocco personalizzato

Quindi ora possiamo saltare e creare un nuovo post o pagina e aggiungere il blocco. Per mantenere lo stile a 4 colonne per le opzioni di prezzo, prima aggiungiamo un blocco di colonne e quindi rilasciamo il nostro blocco di tabella dei prezzi personalizzato in ogni colonna.

Facendo clic sul pulsante "Aggiungi blocco" , puoi vedere qui il nostro blocco Tabella dei prezzi è pronto per l'uso.

Quanto segue mostra come ho quattro colonne e ho aggiunto il blocco personalizzato quattro volte. Quando seleziono un singolo blocco, puoi vederlo passare all'interfaccia utente del modulo che ci fornisce i nostri campi per l'inserimento del contenuto. Facendo clic fuori dalla visualizzazione del modulo ci viene fornita l'anteprima.

Sembra adorabile nell'editor di blocchi e sembra altrettanto bello sul front-end. Poiché stiamo sfruttando anche il blocco delle colonne, tutto è piacevole e reattivo.

Con i nostri progetti realizzati per consentirci di lavorare ed essere in grado di appoggiarci al blocco di colonne reattive di Gutenberg, il tempo di costruzione totale di questo blocco per me è stato inferiore a 10 minuti.

Ci sono un paio di cose che potresti fare per migliorare ulteriormente il blocco:

• Ci sono alcune stringhe che devono essere pluralizzate. Ad esempio, "Sito WordPress" dovrebbe essere "Siti WordPress" per i piani con più di 1 limite di siti. Alcune logiche di base nel file modello PHP potrebbero risolvere questo problema.
• Puoi saltare il blocco delle colonne e utilizzare invece il campo Ripetitore (funzione Pro) e contenere tutti i piani in un unico blocco.
• Aggiungi virgole a numeri più grandi.
• Le barre di avanzamento mostrano il valore esatto delle relazioni massime. Questo sembra un po' strano. Potresti passare a qualcosa di più concettuale dei valori.

Avvolgere le cose

Se desideri scaricare e installare questo blocco, puoi scaricare i file qui. La documentazione sull'importazione di blocchi personalizzati è disponibile qui.

Altri link importanti:

• Il plug-in
• Sito di documenti
• Comunità di Genesis Slack

Se desideri vedere un po' più di Genesis Custom Blocks in azione, in una recente sessione al DE{CODE}, ho creato e fatto una demo di quattro blocchi personalizzati separati (di crescente complessità) in circa 15 minuti. Dai un'occhiata alla registrazione su richiesta proprio qui.

Spero che tu l'abbia trovato utile e che tu abbia capito come sfruttare la potenza dell'Editor blocchi per progetti e build personalizzati sia davvero molto semplice.

Saluti!

Ottieni l'accesso gratuito ai temi StudioPress creati da Genesis con Flywheel!

È importante che il tuo provider di hosting faccia il massimo per te e questo va oltre le prestazioni e la sicurezza! Con l'accesso a più di 35 temi StudioPress creati da Genesis senza costi aggiuntivi, Flywheel ti offre una bellissima libreria di temi in modo da poter costruire o riconfigurare i tuoi siti in un modo che si adatta agli obiettivi del tuo sito web! Scopri di più sul volano qui.